cola.js home

Online Graph Exploration

Red 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 red 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.