sigma.js

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:
  • 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.