sigma.js

FOSDEM 2013 / GraphDevRoom

Who I am

front-end engineer @linkfluence, Paris

#opensource #javascript #dataviz

Why visualizing networks matters

[...] A well-designed visualization tool can allow the user to see structure in a graphed data set that is difficult or impossible to see in its raw form.

(source)

Also...

Gephi made it deadly simple and funny to visualize graphs.

People from different fields use it to display, analyze and play with different kind of data...

There is a real need for something more. People play with graphs, they might like more tools to share them.

What to expect from a Web graph visualization tool?

Interactive

In the era of Web apps, static representations might look old-fashioned.

Scalable

If the browser freezes, the user leaves.

(just, it's not about millions of vertices, here...)

Cross-devices

Mobiles, tablets offer new way to explore data.

Customizable

To make it possible to adapt the graphics to your case.

Eye-friendly

Because it's always better when it's nice to the eye.

...and obviously

Open-Source

And here comes sigma.js !

Interactive (with API methods and events)
Scalable (frames injection, no freezing)
Cross-devices (no Flash, just canvas elements)
Customizable (many settable properties)
Eye-friendly (let's wait for the examples...)
Open-Source (released under the MIT License)

But first, a "real life" case

Movie Galaxies

Graphs built from the characters cooccurences in movies scripts.

Demo

Time to show some code

First example: Basics

Here is the graph to display

var graph = {
  nodes: {
    n1: { label: 'Node 1', x: 0, y: 0, size: 10 },
    n2: { label: 'Node 2', x: 1, y: 1, size: 20 },
    n3: { label: 'Node 3', x: -1, y: -1, size: 30 }
  },
  edges: {
    e1: { source: 'n1', target: 'n2' },
    e2: { source: 'n1', target: 'n3' }
  }
};

And the DOM container

<!-- [...] -->
<script src="js/sigma.min.js"></script>
<div id="sigma-container" style="width: 100px; height: 100px;" />
<!-- [...] -->

Finally, let's instanciate sigma

var k;
var s = sigma.init(
  document.getElementById('sigma-container')
);

for (k in graph.nodes)
  s.addNode(k, graph.nodes[k]);

for (k in graph.edges)
  s.addEdge(
    k,
    graph.edges[k].source,
    graph.edges[k].target,
    graph.edges[k]
  );

s.draw();

And the result:

Second example: A bit advanced

The graph

We generate it by creating N nodes grouped in C groups.

Then, we add E edges. Each edge has a P probability to link two nodes in the same clusters.

To make it graphically observable, nodes from the same group have the same color.

The HTML

<!-- [...] -->
<script src="js/sigma.min.js"></script>
<script src="js/sigma.forceatlas2.js"></script>
<div id="sigma-container" style="width: 100px; height: 100px;" />
<!-- [...] -->

The JavaScript

var k;
var s = sigma.init(
  document.getElementById('sigma-container')
);

for (k in graph.nodes)
  s.addNode(k, graph.nodes[k]);

for (k in graph.edges)
  s.addEdge(
    k,
    graph.edges[k].source,
    graph.edges[k].target,
    graph.edges[k]
  );

s.startForceAtlas2();

And the result:

Third example: Interface

The graph

We keep the one from the last example, with the layout applied.

The interface

We add buttons to move the graph, zoom in and out, and return to the original position.

Buttons look like:

<!-- [...] -->
<div class="icon move-icon" tabindex="0" data-action="up" title="Move up">
  <div class="icon-arrow-up"></div>
</div>
<!-- [...] -->

The JavaScript

We still have to bind those buttons. Here is one example:

$('[data-action="up"]').bind('click', function(e) {
  // With "inst" our sigma instance:
  var newPos = inst.position();

  newPos.stageY += 80;
  inst.goTo(newPos.stageX, newPos.stageY);

  e.stopPropagation();
  return false;
});