greuler is graph theory visualization tool powered by d3 and on top of WebCola which allows the creation and manipulation of graphs with a simple api
 


greuler works on top of d3.js and WebCola so include those first

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"></script>
<script src="http://marvl.infotech.monash.edu/webcola/cola.v3.min.js"></script>

Install greuler with bower

bower install greuler

And then include it in your webpage

<script src="bower_components/greuler/dist/greuler.js"></script>

or the minified version

<script src="bower_components/greuler/dist/greuler.min.js"></script>

The hello world program requires calling greuler with an object having the following properties

A full description of the properties can be found in the README

After the instance is created it's needed to call instance.update() to run an initial layout process

'use strict';
greuler({
  target: '#hello-world',
  width: 480,
  data: {
    nodes: [
      {id: 0},
      {id: 1},
      {id: 2},
      {id: 3},
      {id: 4}
    ],
    links: [
      {source: 0, target: 1},
      {source: 1, target: 2},
      {source: 2, target: 0},
      {source: 3, target: 4}
    ]
  }
}).update()

You can also generate a graph by calling greuler.Graph.random(options)

'use strict';
greuler({
  target: '#random',
  width: 480,
  height: 300,
  data: greuler.Graph.random({
    order: 5,
    size: 5,
    connected: true
  })
}).update()