Sigma.js, draw graphs using canvas from javascript

Using HTML5 canvas is leading to interesting and amazing tools, a library that can generate dynamic charts directly from javascript as Sigma.js.

Among the features that make an interesting Sigma.js library are:

  • The ability to chain methods
  • Events management
  • Ability to add plugins, use files GEXF, ForceAtlas2 algorithms, …
  • Api simple and accessible
  • Custom painted graphic maintenance
  • Insertion using frames

So How to use it
First we initialize the object with the DOM sigma container which include our chart.

var sigInst = sigma.init(domElement);

The resulting object will allow us to start working with the graphic:

sigInst.addNode('hello',{
  'label': 'Hello'
}).addNode('world',{
  'label': 'World!'
}).addEdge('hello','world');

Examples can help provide a clearer idea of the capabilities of the library.

Sigma.js is an amazing JavaScript library for visualization of graphs. The documentation doesn’t really give a complete ‘Hello world !’ example so we have one to get kickstarted. It is using jQuery, that is not quite  necessary but it gives some good utility functions that could be advantageous.

<!DOCTYPE html>
<html>
<head>
    <title>Sigma.js Hello World</title>
 
    <script src="https://code.jquery.com/jquery-2.0.2.min.js"></script>
    <script src="https://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>

sourses:

example : http://martingreber.wordpress.com/

and github.com

Leave a reply