cola.js. Constraint-Based Layout in the Browser

cola.js (A.K.A. «WebCoLa») is an open-source JavaScript library for arranging your HTML5 documents and diagrams using constraint-based optimization techniques.

It works well with libraries like D3.js, svg.js, and Cytoscape.js. The core layout is based on a complete rewrite in Javascript of the C++ libcola library.

It also has an adaptor for d3.js that allows you to use cola 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 allows user specified constraints such as alignments and grouping;
• it can automatically generate constraints to:
  • avoid overlapping nodes; or
  • provide flow layout for directed graphs;
• it may be less scalable to very large graphs.