Decluttering Network Graphs

Thu Nov 14, 2013

A problem that many of the co-citation graphs I discussed in the last post share is that they are too dense to be easily readable. I created the sliders as a way of alleviating this problem, but some of the data sets are too dense at any citation-threshold. Being able to view only one of the communities at a time seemed like a plausible solution, but I was far from sure how to implement it using d3.js. Solutions that involved pre-processing the data the way that I did for the sliders didn’t seem to be very useful for this problem.

I realized two months ago that I wouldn’t have time to learn d3.js (and javascript in general) well enough to solve this problem this semester, as I’m working very hard on teaching, research, and service. A few moments of lazy, idle scheming today, however, led me to this intriguing gist. The hard work of identifying centroid nodes of different communities and only generating their force-directed graphs when selected has already been done here. I wanted to add text labels to the nodes, to make them more like my other graphs. (The tooltip mouseovers just don’t seem information-rich enough for this purpose, though the graphs are certainly tidier without visible labels.)

As I should have realized, making this minor adjustment was far from easy. I eventually realized that I had to change the selection code from the DOM element “circle.node” to just the general grouping element “g.” With a few other tweaks to the force-layout settings, I tested it out with one citation graph that wasn’t too cluttered (compare here). By far the worst graph I’ve created for illegibility has been the philosophy of science one (see also here for an earlier attempt to make it more legible by adding a chronological slider).

Despite my best efforts, these floating balloons of philosophy of science aren’t a great improvement. Labeling the initial beach balls with the centroid node is probably a good idea, along with just some explanatory text. I do think a similar approach is the way forward with this particular technology for visualizing citation graphs. D3.js is very flexible and powerful, particularly in its ability to create and record illustrative animations. I hope to be able to do some more detailed work with it on citation graphs after the semester ends.