WebCola.js is an open-source JavaScript library for arranging your HTML5 documents and diagrams using constraint-based optimisation techniques. It works well with libraries like D3.js and svg.js. The core layout is based on a complete rewrite in Javascript of the C++ libcola library.

It has an adaptor for d3.js that allows you to use webcola as a drop-in replacement for the D3 force layout. The layout converges to a local optimum unlike the D3 force layout, which forces convergence through a simple annealing strategy. Thus, compared to D3 force layout:

  • CoLa achieves higher quality layout;
  • is much more stable in interactive applications (no "jitter");
  • it is less scalable to very large graphs.

However, it works well on an average machine on graphs with fewer than 100 nodes.


Pairs of nodes connected by an edge have a vertical separation constraint, requiring that the source be a minimum distance above the target. The unconstrained layout of the same graph looks like this.