sigma.js

Web network visualization made easy

sigma.js is an open-source lightweight JavaScript library to draw graphs, using the HTML canvas element. It has been especially designed to:

Display interactively static graphs exported from a graph visualization software - like Gephi
Display dynamically graphs that are generated on the fly

Download sigma.js - v0.1

Easy to use

Here is the minimal code to create an instance:

var sigRoot = document.getElementById('sig');
var sigInst = sigma.init(sigRoot);
sigInst.addNode('hello',{
  label: 'Hello',
  color: '#ff0000'
}).addNode('world',{
  label: 'World !',
  color: '#00ff00'
}).addEdge('hello_world','hello','world').draw();

Highly customizable

Different methods make possible to customize each instance:

sigInst.drawingProperties({
  defaultLabelColor: '#ccc',
  font: 'Arial',
  edgeColor: 'source',
  defaultEdgeType: 'curve'
}).graphProperties({
  minNodeSize: 1,
  maxNodeSize: 10
});

And much more

Including ...

Dependance free
Custom jQuery-like events management
Possibility to use and develop plugins, like:

GEXF parser
ForceAtlas2 force-directed layout algorithm

Simple and accessible public API
Fluid drawing process management, with frames insertion
jQuery-like chainable methods

Check the examples

Want to contribute?

sigma.js is hosted on Github and released under the MIT License. You can contribute to this project by:

Reporting issues and bugs on the Issues page
Forking the project, improving the sources and submitting a pull request

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.