- Engineering
- 5 min read
- November 2015
BigData Visualization with ForceAtlas2
In my previous post we discussed about importance of BigData and which forms of display work for various types of data. We also learned 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 Bigdata visualization, length of data should be very large. So to render such big data which have thousands of nodes and edges we must have to use Layout algorithm to position the nodes of graph in to two-dimensional or three-dimensional space. While we know that ForceAtlas2 is outdated and many more incredible and better tools are available in the market, you might want to check out how Cytoscape.js works for your graphical data representation needs! Let’s talk about big data visualization and using ForceAtlas2 algorithm in this post. ForceAtlas2 is a force directed layout. Force-directed graph drawing algorithm is a class of algorithm for drawing graph. Main purpose of it is to position the nodes of a graph in to 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 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 Simple Sigma.js AngularJs Directive for big data visualization in my next post. Stay tuned folks.. !!
Similar Stories
Azure vs GCP vs AWS: Ultimate Cloud Computing Tug of War
Cloud computing is no more a fancy term. Corporations are ruling the world by making it an integral part of their tech stack. and budget too.This means that we have multiple options for cloud computing to choose from. While Amazon,
Read more
Major Challenges of DevOps Implementation
DevOps is the culture, movement, or practice that ensures the collaboration and harmony between software developers and other IT professionals leading to more automation and assuring the better quality of codes that run with minimum errors. However, bringing about such
Read more
Challenges Faced By Startups While Developing An App
The popularity of mobile devices and their growing demand in the market has pushed enterprises to target the audience with mobile first strategy. This pushes the boundaries of the startups making them face many obstacles while they develop an app
Read moreReceive articles like this in your mailbox
Sign up to get weekly insights & inspiration in your inbox.
2500 people are reading this blog every week