Search code examples
javascriptjqueryd3.jsforce-layoutgraph-visualization

Magnifier effect for D3/GraphGL force directed network visualization?


Is it possible to create a smooth animated magnifying effect (similar to the dock on Mac OS X) when hovering over nodes in a force-directed graph visualization using the D3 or GraphGL libraries?

The nodes would need to expand and displace the others around it, while maintaining the force-directed layout.

If someone could fork this to demonstrate, that would be great! Thanks

note, this is different from a simple zoom as in this question


Solution

  • Great question. To answer it, I implemented a D3 plugin for fisheye distortion. It's roughly based on previous work in Flare and Sigma.js, which are in turn based on the work of Sarkar and Brown, "Graphical Fisheye Views of Graphs", CHI'92.

    Here's a quick demo with the Misérables dataset. View source for the code. I'll do a writeup later today when I have time.

    Note: this uses a static force layout; the layout is computed on startup and doesn't change. I think this is probably what you want in conjunction with fisheye distortion, or else the distortion will compete with your ability to move nodes around dynamically. But in theory it's possible to combine them, if that's what you want.