Almost a year ago I had a post about citation networks of interconnected communities. Simply speaking, I displayed a citation network (which paper cites which) of two related conferences. As conferences pairs I picked GD/WG, ICALP/ESA, and SWAT/WADS. All these conferences had their proceedings published by Springer, which made it easier to get the data via crawling through the springerlink portal.
Although the pictures were really nice (rendered in gephi) I wanted to have a more dynamic visualization. This weekend I finally found the time to prepare something. I picked the biggest component (82 nodes) in the SWAT/WADS network, since it was the smallest interesting (sub)graph I found. My goal was to let the user filter the data by year and get a dynamically increasing citation graph over time.
The power and the elegance of d3.js comes not for free. The way how to link object on the webpage with data was very different to everything I knew before. Especially how the data is processed is somehow unconventional. So its rather rough to get into this. On the positive side, there are many beautiful examples on the web, from which I could learn a lot. On the negative side, the documentation is rather sparse. So I started with a few examples (force directed layout, modified force directed layout, a slider in d3.js) and learned everything I needed along the way.
After the data was prepared I started to modify the examples. The force-directed layout engine included in d3.js produces great results. Also algorithmically it's very interesting. It uses a quadtree and the Barnes-Hut approxiamtion to get the runtime from to . This is something that I have not seen in other implementations of force-directed methods so far.
Okay, so here is the end of the story. You can find the source code here and the data in this json file. Use this link for viewing outside of the blog post. You get the title and the publication year of a paper as a tooltip.