Force-Directed Edge Bundling for Graph Visualization

visualcomplexity.com

14 points·dtby··6 comments

It's really easy to hack together a simple force-directed layout engine on top of Processing.

All you need to do is write a simple physics particle library w/ forces/springs. I wrote one similar to Traer Physics (http://www.cs.princeton.edu/~traer/physics/) over a weekend (Traer does the math well, but the API is terrible and very incomplete).

For the longest time I was intimidated by force-directed layouts, and would just rely on static graphviz generated images even though I really wanted dynamic/interactive ones.

But once I sat down and actually started writing, it wasn't so bad at all.

How many nodes can you handle with processing? I recently tried to write such a thing using Javascript canvas, but it was too slow for my use case. I haven't tried it with Web Workers yet, though.

Up to around 500 or so while maintaining a decent framerate (say, better than 30FPS in steady state).

I was using Java's Processing though - which I would expect to be considerably faster than Processing.js. I didn't try decoupling the UI from the computation/model (since the performance was already more than sufficient for my needs), but my gut tells me that my physics code was the bottleneck - not Processing itself.

We need a Graphviz for the new millenium. Dot(ty) has helped me produce so many wonderful images, but this just goes to show that there is a lot more innovation to happen in this space.

Doesn't seem to do node placement.

Nice paper and the graphs on page 6 really illustrate the power of their method. But Borland Delphi? Ouch.

Reply on news.ycombinator.com