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
target
A selector to the container to hold the graphdata
An object describing the properties of the graphdata.nodes
The nodes of the graph, they need to have an id
data.edges
The edges of the graph, they join two nodes by id
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()