Using Sigma.js to put Gephi graphs and visualizations online !

Capture d’écran 2015-01-29 à 14.47.59Creating networks and graphs is great but making them interactive and accessible online, now that’s another story! Here is how to do it.

People are getting used to visualizing data, graphs and maps, which is great because such representations of phenomena possess (sometimes but not always) great explanatory power, but can be tough on some of us scientists (and on journalists) which are asked to produce said representations.

Imagining and producing graphs and networks is not always the hardest part (here are a few tips on how to do it if you want) ; making them interactive and putting them online is just as tricky… or at least it was until I discovered Sigma.js. Sigma.js is a javascript library which to me means that it is something cool that smart I.T people use to do stuff on the Internet. Today, I will try to show you three ways I’ve learned to put networks online. They each have advantages and you don’t need much coding knowledge to use them, -basically you will have to watch 2 youtube videos to learn how to do so.


Using Sigma.js to create you own Dynamic Network online

This means that within you HTML page, you are going to code your network, which is kind of the same thing as entering nodes and edges manually in Gephi or any other visualisation software. After downloading Sigma.js and before putting the graph (as a page) online on a server, just enter your nodes and edges following this protocol:

s.graph.addNode({
id: ‘n0’,
label: ‘This is an example of node’,
// Display attributes:
x: 0,
y: 0,
size: 20,

If you want to create an edge, just use “s.graph.addEdge({“. You can of course link your nodes and edges together, change their size, color and position. If you just copy and paste the code in your page, you should get something like this:

Capture d’écran 2015-01-29 à 15.44.38(Click on the image to see real interactive result, it works better on Firefox than Chrome for some reason)


Export an entire Graph online

To export an entire Graph online, you will need to do three things. First you will need to export your network from Gephi as a .gexf file (file->export as ->…). Then, you’ll also need some code. And finally, some instructions that go along with how to use it which you can find here. The very nice person who wrote the code made it very simple, so simple that you just have to put your .gexf file in the right folder and change the name of the file in the code. Here is my first realisation that way:

Capture d’écran 2015-01-29 à 17.02.37

(Click on the image to see interactive result)

Of course, if you get deeper into the code and change the values of “maxEdgeSize”, “LabelColor”, etc. you can change your graph’s appearance and create your own layout, which gives you absolute freedom, and enables you to add comments on your graph for example at the bottom of the page.


Using the Sigma.js Gephi plugin to do so

Gephi can also take care of the all process (apart from actually putting the graph on a server). Someone with a lot of time and knowledge actually created a Sigma.js plugin for Gephi. This means that once the plugin is installed, it exports your graph, creating all the code and an html page of your graph that you just have to put online. What is interesting is that you can add a description, change the way the graph will react to user, enrich your content, it shows you the connections to each node, enables you to focus on certain groups of nodes, etc.  I really like how simple it is! Here is how it looks so far:

Capture d’écran 2015-01-29 à 17.11.32

(Click on the image to see real interactive result)

Pretty cool, right? To me, each method as an advantage:

-The first one is quite straight forward and enables you to understand to process quickly (though I wouldn’t use this method to do substantial work)
-The second is the most open, and if you know a little bit about coding, you can generate any kind of layout you want
-The third one is really quick, clear and allows you to focus on your data and answering your research questions.

Next time I’ll try to put all those dots on an actual map. Tell me if you have any idea on how to do so!


Here are links to cool stuff made with Sigma if you want to see more

-One of the best visuals I have ever seen : http://moviegalaxies.com/ (it shows people in movies)

-A good example of enriched content : http://lexmex.fr/ (representing the french civil code, in french)

-More cool stuff in French :https://ateliercartographie.wordpress.com/atlas/

Sidenote: WordPress does not allow you to use javascript so… Better find another way for hosting your graphs! 


5 thoughts on “Using Sigma.js to put Gephi graphs and visualizations online !

  1. natlungfy says:

    Hello! Thanks for the blog post 🙂 I was hoping to try out the steps under “EXPORT AN ENTIRE GRAPH ONLINE”, but the links to the code and instructions seem to broken :/

    Like

    • victorwiard says:

      Hey, thanks for the comment and sorry for the late reply. I updated the links, you should be able to work it out now. Good luck ! Cheers,
      Vic

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s