Tag Archives: WebCoLa

ColaJS: Constraint-Based Layout in the Browser

via 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 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 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:

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

cola.js can now (optionally) route edges to avoid intersections with node boundaries.