Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ


Choose your language

InfoQ Homepage News Using Sigma for Drawing Graphs

Using Sigma for Drawing Graphs


The team behind Sigma, a JavaScript library dedicated to drawing graphs in Web applications, released a new version of this tool.

What this library provides is a way for developers to create graphs while making networks manipulation on webpages smooth and faster for the user. Although the current version mainly represents bug fixes, the previous one - released in the beginning of this year – was totally developed from scratch with a fully new architecture.

For a current list of features, the Sigma’s webpage states the following:

  • Custom rendering - You can use the Canvas or WebGL built-in renderers, or even write your own. The built-in renderers also provide many ways to customize the rendering.
  • Interactivity oriented - You can catch when the users clicks or rolls the mouse over a node. You can catch when the user drags the graph or zoom in, and always know the position of the graph relatively to the screen.
  • Powerful graph model - Sigma is just a rendering engine, but you might want to do more, like running your own graph algorithms. For that, Sigma's graph model is customizable, and you can add your own custom indexes on the data.
  • Extendable - It is easy to develop plugins or simple snippets to augment Sigma's features. Some are already available in the main repository to read some popular graph file formats or to run complex layout algorithms.
  • Compatibility - Sigma runs on all modern browsers that support Canvas but works faster on browser with WebGL support.

This library was featured on last month GitHub’s most trending repositories and InfoQ got in touch with Alexis Jacomy, lead developer of Sigma, to know a little more about this project:

InfoQ: What is the motivation behind Sigma?

I started developing graph drawing Web tools in Flash some years ago to help Gephi users display interactively their graphs on web pages. Sigma was initially just the first HTML5 step and it is now kind of successful, which keeps me motivated on it.

InfoQ: The new version of Sigma has been under a heavy refactoring. What were you trying to accomplish?

Original Sigma's source code was very strict and not tested at all. This refactoring was for me the occasion to fix these issues, with a more consistent API and unit tests. In addition, everything in Sigma is now overridable, to allow implement almost any feature as a plugin.

InfoQ: There are other libraries that make graph drawing possible in JavaScript (Processing.js, jit.js, D3.js). What do you think makes this tool unique?

Sigma is a library dedicated to graph drawing. It aims to simplify basic use cases, but also to allow integration for much more complex applications:

  • It provides without effort multitouch support, smooth zooming and deals with window resizing, to cite a few of the built-in features.
  • It provides some more complex features implemented as plugins.
  • Its API and events system ease interacting with the graph.

InfoQ: Do you know any project that currently uses Sigma?

I have heard about some people currently integrating the new version of Sigma, but nothing in production yet:

From Sciences-Po médialab (my current employer, who financed the development of the latest version):

From Oxford Internet Institute:

From other people:

InfoQ: What are future plans for this project?

My plans are essentially to keep maintaining it, and try to get some more people getting involved into the core developments. Also, there are still some features I did not find the time to implement yet, like an SVG renderer or a web workers based layout algorithm.

Rate this Article


Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p