sigma.js is a free and open-source JavaScript library to draw graphs, using the HTML5 canvas element. It has been especially designed to share interactive network maps on a Web page or to explore dynamically a network database. It is distributed under the MIT License.

Use

To initialize sigma.js on a DOM element, use :

var sigInst = sigma.init(domElement);

This method will return an object, with its own graph and the different public methods you can use to interact with your sigma instance.

To fill the graph, use :

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

Also, a lot of different parameters are available to customize the way your instance work. For example :

instance.drawingProperties({
  defaultEdgeType: 'curve'
}).mouseProperties({
  maxRatio: 32
});

will set the maximum zooming ratio to 32/1, and display each edge as a curve if its type is not indicated.

Some full examples are available at sigmajs.org/examples.html. You can also check 'src/core/sigmapublic.js' for an exhaustive list of the different available public methods.

Features

• Chainable methods
• Custom events management
• Possibility to add plugins, including :
  • GEXF parser
  • ForceAtlas2 layout algorithm
• Simple and accessible public API
• Customisable drawing / graph management
• Frame insertion, to make the drawing process fluid

Build

To build sigma.js :

• Download the Google Closure Compiler and put the .jar file in /build
• Use make minify-simple or make minify-advanced to minify concatenation result (Warning: make minify-advanced is pretty agressive on renaming, and this minification has not been tested yet).
• You can also just use make concat to obtain an unminified but working version of sigma.js, without the need of the Closure Compiler

Thanks

sigma.js is mostly inspired by Gephi and the maps of Antonin Rohmer from Linkfluence (one nice example here) - thanks to him also for his wise advices.

Much thanks also to Mathieu Jacomy for having developped the main plugins, and for his help on the API and his experienced advices.

Want to contribute?

The TODO.txt file at the root of the project contains different ideas of features that would improve sigma.js. You can also fill an issue ticket if you find a bug.