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" } ] } &nbsp; &nbsp; firstly, a little HTML code which import the sigmajs files : &nbsp; <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: Rapidops 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.

Let’s build the next big thing!

Share your ideas and vision with us to explore your digital opportunities

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 more