Sigma.js Hello World
July 1, 2013 Leave a comment
Sigma.js is a cool JavaScript library for visualising graphs. Unfortunately, the documentation doesn’t really give a complete example of the ubiquitous ‘Hello World’ so here’s one to get you started. The example is using jQuery, which isn’t strictly necessary but it provides some nice utility functions that you can take advantage of.
<!DOCTYPE html>
<html>
<head>
<title>Sigma.js Hello World</title>
<script src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
<script src="http://sigmajs.org/js/sigma.min.js"></script>
<script type="text/javascript">
// Use jquery to wait for DOM to be fully loaded
$(document).ready(function () {
// Use jquery to retrieve the div with id 'sig'
var domElement = $('#sig')[0];
// Let sigma.js populate the div
var sigInst = sigma.init(domElement);
// Use curved edges and make the nodes a bit bigger
sigInst.drawingProperties({
defaultEdgeType:'curve'
}).graphProperties({
minNodeSize:1,
maxNodeSize:5
});
// Add a simple graph
// NOTE! addEdge needs to take three parameters,
// the first one being the name of the edge itself
sigInst.addNode('hello', {
label:'Hello',
x:Math.random(),
y:Math.random()
}).addNode('world', {
label:'World!',
x:Math.random(),
y:Math.random()
}).addEdge('helloworld', 'hello', 'world').draw();
});
</script>
<style type="text/css">
/* Set a height on the div or it will have zero height */
.sigma {
height: 200px;
}
</style>
</head>
<body>
<div class="sigma" id="sig"></div>
</body>
</html>
martingreber 