Multilevel Agglomerative Edge Bundling in JS

Posted in: javascript

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:

easteurope image 1

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:

easteurope image 1

And here’s the final result:

easteurope image 1

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


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.

Image of Edge bundling example

blog comments powered by Disqus