Visualize GML files with D3
I have recently switched from D3 v3.0 to D3 v4.0, and I have already encountered some important changes. For example, the scaling functions are quite different, and the old layouts available in the older API have been moved and renamed. In fact, D3 v4.0 is no longer a single library, but many small libraries (about 30) that are designed to work together.
For a weekend project I wanted to create a visualization of a simple graph with nodes and edges. In D3 v3.0 this can be done with
d3.layout.force. In D3 v4.0 this is a job for
Looking for some data
I started looking for JSON files that contained the necessary information to represent a small social network graph. To my surprise, I didn’t find any. Instead, I found some small network data sets as GML files here and here. I had never heard of the GML file format before, but since I liked these data sets I decided to proceed. At the end of the article you can see a visualization of a small social network of dolphins (62 nodes, 159 edges). The original file (
dolphins.gml) was found on this page of the University of California Irvine.
GML (Graph Modelling Language)
A GML file looks like this:
Creator "Mark Newman on Wed Jul 26 15:04:20 2006"
# more nodes here...
# more edges here...
It doesn’t look to different from a JSON file, but the problem is that D3 cannot load it directly. After a brief Google search I found out that I could use a Python library to load the GML file and convert it into JSON.
The network data can also be exported and visualized in a program like GraphViz or Gephi, or, like I will do here, in D3.
Here is the snippet of code to convert a GML file into a JSON file:
import networkx as nx
import simplejson as json
from networkx.readwrite import json_graph
# parse the gml file and build the graph object
g = nx.read_gml('dolphins.gml')
# create a dictionary in a node-link format that is suitable for JSON serialization
d = json_graph.node_link_data(g)
with open('dolphins.json', 'w') as fp:
Note that the GML file I used with the latest NetworkX version (1.11) caused the Exception
networkx.exception.NetworkXError: cannot tokenize u'graph' at (2, 1). I downgraded NetworkX to version 1.9.1 as suggestes in this thread and it worked fine. Another approach would have been to format the GML file in a different way.
The D3 visualization
Finally, with the network data available as
dolphins.json, we can use
d3.json to read it. Drag a node or hover on it to know the name of the dolphins in this network!
dolphins.gml contains an undirected social network of frequent associations between 62 dolphins in a community living off Doubtful Sound,
New Zealand, as compiled by Lusseau et al. (2003).
D. Lusseau, K. Schneider, O. J. Boisseau, P. Haase, E. Slooten, and S. M. Dawson, The bottlenose dolphin community of Doubtful Sound features a large proportion of long-lasting associations, Behavioral Ecology and Sociobiology 54, 396-405 (2003).
Additional information on the network can be found in:
D. Lusseau, The emergent properties of a dolphin social network, Proc. R. Soc. London B (suppl.) 270, S186-S188 (2003).
D. Lusseau, Evidence for social role in a dolphin social network, Preprint q-bio/0607048