Big Data Visualization using Sigma.js

These days, enterprises across globe, irrespective of their industry, are relying upon data visualization tools to analyze past trends and set well defined strategies accordingly. As there are various ways to demonstrate and interpret data, it is important to understand which forms of displays work for various types of data. There are various forms like tabular or list structure in which you can display data. But sometimes use of effective diagrams become inevitable to accurately interpret data.

Let’s say you are working with large data-sets, then it makes more sense to aggregate data and display it in form of chart or graph. In case of geospatial data, a map would be best tool to visualize.

Javascript frameworks are being very popular as a data visualization tool. There are lots of javascript frameworks likes d3.js, sigma.js, alchemy.js, vivaGraphjs and others which provide functionality to render big data in various visualization form like chart, graph, tree, map and many others.

Among all D3.js and sigma.js are very popular. And I choose sigma.js over d3.js because,

• Sigma.js is plug-and-play, very easy to draw a force-directed graph with nice built-in features, while d3.js requires more work to get to the same result.
• Sigma.js implements “force atlas 2 ” algorithm – like the one found in Gephi, which may be more suitable for some graphs (when you want to highlight community structures)
• Sigma.js is significantly faster than D3 for drawing large graphs because, Sigma supports canvas and webGL; however, it’s only able to draw graphs.
• Sigma is more interactive than d3.js and specific to graph visualization and it helps with the “hairball problem” : js Cleans up Hairball Network Visualizations
• If you are looking for building highly advanced graph, Sigma.js provides an unbelievable amount of interactive settings inside its library, and also within its plug-ins. Moreover, Sigma’s developers encourage people to re-configure this library and create plug-ins, which has resulted in a large open-source network.
• Visit https://github.com/jacomyal/sigma.js/wiki for getting started with sigma.js and setup instructions.
• As we saw how and why Sigma can be useful in data visualization, let’s learn how to render social network data set using sigma. In order to load JSON file, use SigmaJS JSON Parser class.
  Here is very simple json. (friends.json)

[sourcecode language=”plain”]
{

“nodes”: [

{

“id”: “1”,

“label”: “jini”,

“size”: 100,

“x”: 0,

“y”: 5

},

{

“id”: “2”,

“label”: “joy”,

“size”: 100,

“x”: 5,

“y”: 1

}

],

“edges”: [

{

“id”: “1”,

“source”: “1”,

“target”: “2”

}

]

}

 

 

firstly, a little HTML code which import the sigmajs files :

 

<script src=”js/sigma.min.js”></script>

<script src=”js/sigma.parsers.json.min.js”></script>

&nbsp;

you can download sigmajs files from <a href=”https://github.com/jacomyal/sigma.js/releases/”> https://github.com/jacomyal/sigma.js/releases/</a>

&nbsp;

then, add a div tag as a placeholder for graph and give it some style.

&nbsp;

<div id=”container”>

<style>

#graph-container {

position: absolute;

width: 50%;

height: 50%;

}

</style>

<div id=”graph-container”></div>

</div>

sigma.parsers.json(‘data/friends.json’, {

container: ‘graph-container’

});

[/sourcecode]

• I’ve given very basic usage of parser which is to pass json file and the container id where sigma will render the graph.Output:
  

  you can use plugins provided by sigma to add more features to your graph. You can also customize your graph using settings API and Renderers API.

  I’ll demonstrate ForceAtlas2 plugin to use force-directed layout for big data visualization in my next post. Stay tuned folks.. !!

Jaydipsinh Raol

Technology seeker, dreamer and a skilled software engineer working on progressive technologies. You may call me a little workaholic. Always try to achieve goals with best efforts. Ready to learn from my past mistakes and regulate life for great future achievements.