sigma.js

FOSDEM 2013 / GraphDevRoom

Who I am

Alexis Jacomy / @jacomyal

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

MovieGalaxies - Casino (1995)

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;
});

And the result:

And finally, people using sigma.js

Ramiro Gómez

Programming languages influence network

Programming languages influence network

Matthieu Totet

Paris Metro & RER network

Programming languages influence network

Dmitry Paranyushkin - Nodus Labs

Network visualization of a Russian internet marketing community

Network visualization of a Russian internet marketing community

Sébastien Heymann - Linkurious

Graph databases exploration

Graph databases exploration

GreenPeace France

Facenuke - French nuclear actors influence network

Facenuke

Sciences-Po Paris - Médialab

Websites hypertext network about 2012 French presidential elections

2012 French presidential elections

Bernie Hogan - University of Oxford

NameGenDev - Your ego-centered Facebook network visualized

NameGenDev

Questions?

Thanks!

(slides made with reveal.js)

sigmajs.org

sigma.js on twitter

sigma.js on github