David Graus

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.

Related posts

Posted

in

,

Comments

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

  1. Kaushik Avatar
    Kaushik

    Hi David,

    Thanks for the wonderful graphs!

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

    Best,

    Kaushik

    Reply
    1. dvdgrs Avatar
      dvdgrs

      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 ;-).

      Reply
  2. Over 2000 D3.js Examples and Demos | TechSlides

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

    Reply
  3. BitcoinKing Avatar
    BitcoinKing

    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?

    Reply
  4. Pablo Avatar
    Pablo

    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.

    Reply
  5. dvdgrs Avatar
    dvdgrs

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

    (sorry for the long delay BitcoinKing)

    Reply
  6. awal Avatar
    awal

    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

    Reply
  7. Dennis VanD Avatar
    Dennis VanD

    I appreciate the length of time involved in this chat. I also understand the problem pretty well. One area of concern to me is on the https://people.well.com/user/doctorow/metacrap.htm#0 ( 2.7 There’s more than one way to describe something ). For all of the systems I have done (real world Medical Records (1974), Oil Exploration (1993), Data Warehouses, etc.) there has always been ‘that little thing we didn’t tell you yet’. To do a useful system where there are upwards of 300 million concepts (the actual ideas for which patents have been applied for plus those products and underlying techs on which the depend), then you need something so that you can get to the point of presenting SUBJECTIVE perspectives on categorizations, and you have to have a mechanism to load and harmonize data from multiple sources (and not others), weighting those that you trust (say where one person (the boss) can keep what he says as gospel; say where you don’t trust a clustering obtained 2 years ago as much as one done 30 days ago and gone over by experts) higher than others.

    I wrote a paper on it – warning TL:DR – at http://google.com/patents/US20140075004 (a granted patent) and https://google.com/patents/US20170235848 (allowed, will be granted in 5 months). You will see that the algorithms are deep. I’m now working on them toward a PhD.

    Reply

Leave a Reply