Cola.js layout

A simple exercise with cola.js. A node-link diagram is displayed, based on positions computed by cola's fast-converging constraints-based layout algorithm. Handling of more than one connected component, node dragging and non-overlapping constraints are also shown.

Compare with a similar example using native d3.js force-directed layout.

xxxxxxxxxx
 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Cola.js layout</title>
    <link rel="stylesheet" href="index.css">
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://marvl.infotech.monash.edu/webcola/cola.v3.min.js"></script>
  </head>
  <body>
    <svg width="960px" height="500px"></svg>
    <script src="index.js"></script>
  </body>
</html>
​
    

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://marvl.infotech.monash.edu/webcola/cola.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://marvl.infotech.monash.edu/webcola/cola.v3.min.js