David Graus

In defense of algorithms

Force-Directed Graphs: Playing around with D3.js

Monday, February 27, 2012

Update: Newer example of Force-Directed d3.js Graph here: Measure and Visualize Semantic Similarity Between Subgraphs

I recently replaced python-graph in my code with NetworkX, a slightly more sophisticated graph library for Python. Besides some more advanced algorithms for graph analysis (comparison, unison etc.) which can prove useful when analyzing data (comparing human data with mine, for example), I can also easily export my graphs to all kinds of formats. For example, to JSON. As I was getting a bit tired of GraphViz’ stubborn methods, and it’s far from dynamic approach, I decided to start playing around with the excellent Data Driven Documents JavaScript library, better known as D3.js, the successor to Protovis. Actually I had planned this quite a while ago, simply because I was impressed with the Force-directed Graph example on their website. I figured for coolness sake, I should implement them, instead of using the crummy GraphViz graphs.

So after a night and day of tinkering with the D3 code (starting from the Graph example included in the release, modifying stuff as I went) I came to this:

Click to play!

The red nodes are the concepts taken from the texts (either literal: filled red circles, or resulting from text classification: red donuts). The orange nodes are LCS-nodes (Lowest Common Subsumers), aka ‘parent’ nodes, and all the grey ones are simply in-between nodes (either for shortest paths between nodes, or parent nodes).

I added the labels, and also implemented zoom and panning functionality (mousewheel to zoom, click and drag to pan), included some metadata (hover with mouse over nodes to see their URI, over edges to see the relation). I am really impressed with the flexibility of D3, it’s amazing that I can now load up any random graph produced from my script, and  instantly see results.

The bigger plan is to make a fully interactive Graph, by starting with the ‘semantic similarity’ graph (where only the red nodes are displayed), and where clicking on edges expands the graph, by showing the relationship between two connected nodes. Semantic expansion at the click of a mouse ;)!

In other news

I’ve got a date for my graduation! If everything goes right, March 23rd is the day I’ll present my finished project. I’ll let you know once it’s final.

6 responses to “Force-Directed Graphs: Playing around with D3.js”

  1. Kaushik says:

    Hi David,

    Thanks for the wonderful graphs!

    How did your graduation go? I am eagerly waiting for more!



    • dvdgrs says:

      Thanks for your interest Kaushik :-).

      I have since graduated (http://graus.nu/blog/its-a-wrap/ ), and am currently working as a PhD student at the University of Amsterdam (http://graus.nu/category/research/ ) — doing similar stuff (semantic linking), and recently used similar graph visualizations for data analysis (however, unpublished, for internal use only).

      I’m awaiting the opportunity to some time create a pretty demo out of something ;-).

  2. […] Force-Directed Graphs: Playing around with D3.js […]

  3. BitcoinKing says:

    Could you show the python + networkx code that you used to export to json to use in D3 ? Also could you please provide json graph?

  4. Pablo says:

    Hi David, I was wondering if you could upload the JS code + the JSON with the data for the graph. Your graph looks really cool, and Im working on something similar, that the reason why Im here asking for an example. Thanks and congrats for your great work! Greetings from Argentina.

  5. dvdgrs says:

    @Pablo/BitcoinKing, sure, I’ve put it up at: https://gist.github.com/graus/3bb91d6854b4ecbb4e40

    (sorry for the long delay BitcoinKing)

Leave a Reply