Force-Directed Graphs: Playing around with D3.js

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.

7 thoughts on “Force-Directed Graphs: Playing around with D3.js”

  1. Hi David,

    Thanks for the wonderful graphs!

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



    1. Thanks for your interest Kaushik :-).

      I have since graduated ( ), and am currently working as a PhD student at the University of Amsterdam ( ) — 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. 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?

  3. 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.

  4. Hi David that’s a great work on visualization. I am working on using d3 to visualize an organization chart and be able to search for a node. I tried it but could not go ahead. I will be glad if you will guide me. Thank you.Regards

Leave a Reply