BT
x Your opinion matters! Please fill in the InfoQ Survey about your reading habits!

Using Sigma for Drawing Graphs

by João Paulo Marques on Mar 20, 2014 |

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.

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.

Tell us what you think

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

Email me replies to any of my messages in this thread
Community comments

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

Email me replies to any of my messages in this thread

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

Email me replies to any of my messages in this thread

Discuss

Educational Content

General Feedback
Bugs
Advertising
Editorial
InfoQ.com and all content copyright © 2006-2014 C4Media Inc. InfoQ.com hosted at Contegix, the best ISP we've ever worked with.
Privacy policy
BT