Skip to content
Javascript constraint-based graph layout
TypeScript HTML JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
WebCola Fix determining tangents for visibility graph Nov 8, 2019
tasks Fix: Update dependencies and examples for build/test Dec 6, 2016
templates Merge branch 'master' of Apr 7, 2014
.gitignore compatibility with TS2.4 Jul 11, 2017
.npmignore Also remove all of WebCola/test/ May 12, 2017
.travis.yml moving install commands to install phase Mar 16, 2017
Gruntfile.js Added source map for easier debugging Jul 22, 2018
LICENSE ? Nov 2, 2015 Clarify Nov 19, 2017
bower.json v3.3.0 Dec 9, 2016
package-lock.json comments in descent May 20, 2019
package.json 3.4.0 May 10, 2019
tsconfig.json Toolchain fix - missing referenced files in dist folder Jul 16, 2018

WebCola License: MIT

JavaScript constraint based layout for high-quality graph visualization and exploration using D3.js and other web-based graphics libraries.

Graph with simple groups Graph with alignment constraints

Homepage with code and more examples

Note: While D3 adaptor supports both D3 v3 and D3 v4, WebCoLa's interface is styled like D3 v3. Follow the setup in our homepage for more details.



<!-- Minified version -->
<script src=""></script>
<!-- Full version -->
<script src=""></script>

These files can also be accessed from GitHub (minified).


npm install webcola --save

You can also install it through npm by first adding it to package.json:

"dependencies": {
  "webcola": "latest"

Then by running npm install.


bower install webcola --save

If you use TypeScript, you can get complete TypeScript definitions by installing tsd 0.6 and running tsd link.


Linux/Mac/Windows Command Line:

  • install node.js

  • install grunt from the command line using npm (comes with node.js):

     npm install -g grunt-cli
  • from the WebCola directory:

     npm install
  • build, minify and test:


This creates the cola.js and cola.min.js files in the WebCola directory, generates index.js for npm, and runs tests.

Visual Studio:


Linux/Mac/Windows Command Line:

Install the Node.js http-server module:

npm install -g http-server

After installing http-server, we can serve out the example content in the WebCola directory.

http-server WebCola

The default configuration of http-server will serve the exampes on http://localhost:8080.

You can’t perform that action at this time.