Multilevel Agglomerative Edge Bundling in JS

Hello data visualizers! I just released a JS version of the MINGLE edge bundling technique: https://t.co/Gvm29H6gf2 pic.twitter.com/SJadXUK2nW

— nico (@philogb) 13 Décembre 2013

This is a JavaScript implementation of the paper Multilevel Agglomerative Edge Bundling for Visualizing Large Graphs (Emden R. Gansner, Yifan Hu, Stephen North, Carlos Scheidegger).

The edge bundling algorithm groups edges together to minimize the amount of ink used to render a graph. This particular paper introduces a fast technique to perform edge bundling.

Take for example this map connecting locations between the east coast in the US and western Europe:

The algorithm creates a proximity graph for the edges where each of the edges is represented by a node. Then the algorithm bundles edges as long as we’re saving some ink in the final rendering. Here’s an intermediate step on the bundling animation:

And here’s the final result:

This implementation is solely based on the paper. The license for the code is MIT.

Examples

This simple example shows links connecting locations in the Bay Area. The rendering uses 2D Canvas but could use any other rendering API.

You can see an example here.