BigData Visualization with ForceAtlas2

Jaydipsinh Raol

In my previous post, we discussed the importance of BigData and which forms of display work for various types of data. We also learned the basics of sigma.js, how to get started with sigma.js and use JSON parser to render JSON Data of friends.json

When we talk about Big data visualization, the length of the data should be very large. So to render such big data that have thousands of nodes and edges we must have to use the Layout algorithm to position the nodes of the graph into two-dimensional or three-dimensional space.

Let’s talk about big data visualization and using the ForceAtlas2 algorithm in this post.

ForceAtlas2 is a force-directed layout. A force-directed graph drawing algorithm is a class of algorithms for drawing graphs. The main purpose of it is to position the nodes of a graph into two-dimensional or three-dimensional space.

The most straightforward Force-directed algorithm uses repulsive forces between nodes and attractive forces between adjacent nodes.

The main algorithm consists on a main loop that simulates the system for some iteration and then plots the graph. The system will consist on repulsive forces between all graph nodes and attractive forces between adjacent nodes.

ForceAtlas2 is a force-directed layout close to other algorithms used for network specialization. Nodes repulse each other like charged particles, while edges attract their nodes, like springs. These forces create a movement that converges to a balanced state. This final configuration is expected to help the interpretation of the data.

Let’s get started with a very simple code snippet which shows you how to use ForceAtlas2 layout.

Download forceAtlas2 plug-in from https://github.com/jacomyal/sigma.js/tree/master/plugins/sigma.layout.forceAtlas2

for this example, i’m using bellow json file

[sourcecode language=”plain”]
test.json
{
“nodes”: [
{
“id”: “n0”,
“label”: “jay”,
“dept” : “it”
},
{
“id”: “n1”,
“label”: “yogi!”,
“dept”: “hr”
},
{
“id”: “n2”,
“label”: “priya”,
“dept”: “it”
},
{
“id”: “n3”,
“label”: “dumpy”,
“dept”: “hr”
}
],
“edges”: [
{
“id”: “e0”,
“source”: “n0”,
“target”: “n1”
},
{
“id”: “e1”,
“source”: “n2”,
“target”: “n3”
},
{
“id”: “e3”,
“source”: “n2”,
“target”: “n1″
}
]
}

index.html

<html>
<head>
<title>Basic sigma.js example</title>
<style type=”text/css”>
body {
margin: 0;
}
#container {
position: absolute;
width: 50%;
height: 50%;
}
</style>
</head>
<body>
<div id=”container”></div>
<script type=”text/javascript” src=”js/sigma.min.js”></script>
<script type=”text/javascript” src=”js/sigma.parsers.json.js”></script>
<script src=”js/sigma.layout.forceAtlas2/worker.js”></script>
<script src=”js/sigma.layout.forceAtlas2/supervisor.js”></script>
<script type=”text/javascript”>

var s = new sigma({
container : ‘container’,
});

sigma.parsers.json(
‘data/test.json’,
s,
function () {
var i,
nodes = s.graph.nodes();
len = nodes.length;
// providing x,y,size and color properties to node
for(i=0;i<len;i++){
nodes[i].x = Math.random();
nodes[i].y = Math.random();
nodes[i].size = s.graph.degree(nodes[i].id);
nodes[i].color = (nodes[i].dept == ‘it’)?”rgb(255,104,102)”:”rgb(145,204,102)”;
}
s.refresh();
var fa = sigma.layouts.configForceAtlas2(s, {
worker: true,
autoStop: true,
background: true,
scaleRatio: 30,
gravity: 3
});

// Bind the events:
fa.bind(‘start stop’, function(e) {
console.log(e.type);
});

sigma.layouts.startForceAtlas2();

}
);
</script>
</body>
</html>
[/sourcecode]

To start a layout i used sigma.startForceAtlas2 method. You will find more information regarding methods on plug-in wiki page itself.

I’ll demonstrate how to build a Simple Sigma.js AngularJs Directive for big data visualization in my next post. Stay tuned folks.. !!

Author

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.