cola.js home

Online Graph Exploration

Pink nodes are incomplete. Click on them to expand their neighbours.

Mouse wheel zooms, left-mouse-button drag on the background to pan.

This example introduces the notion of a "model" graph and a "view" graph. The model graph is too large to sensibly display in one go. Instead we begin with just a small neighbourhood showing in the view graph which is bound to SVG visuals following the usual D3 pattern. The pink nodes have neighbours in the model graph that are not shown in the view graph. Clicking on a red node causes its invisible neighbours to be added to the view and we use D3's enter/exit selections to update the display as usual.

The stability of WebCoLa layout makes this type of dynamic graph layout much less chaotic than is possible with the D3 force layout.

Data from tmdb, unfortunately they limit us to 40 queries per 10 seconds so the responses come in a gradually. It's actually quite hypnotic watching the graph evolve at this lazy pace.