Start / Posts / JavaScript graph libraries: Cytoscape vs. Sigma vs. D3

JavaScript graph libraries: Cytoscape vs. Sigma vs. D3

December 21, 2015

Recently, I added tags to my blog posts and scientific publications. The tags allow me to connect my articles based on keywords and topics. I use the tags to improve the navigation between articles of the same subject. Also, I can exploit the tag information for advanced visualizations such as tag graphs. In this article I compare three different tag graph implementations based on three different JavaScript libraries: Cytoscape, Sigma, and D3.

blog data visualization zumida hyperkit software

The implementation with all three JavaScript libraries was straight forward. In all three cases, I had to convert the tag information into a proprietary JSON format. Converting the tag information into the proprietary format took me less than 30 minutes coding and less and 100 lines of code per JavaScript library. Then, each JavaScript library requires its own configuration of the display style. Cytoscape and Sigma provide style configuration objects, which support basic style options. D3 on the other hand provdes seamless integration with CSS, which enables a wide variety of style options. Furthermore, the library provides a stream processing API, which can be exploited for advanced style manipulations. However, D3 also requires extra code for rendering the graph layout, which can be omitted in Cytoscape and Sigma. Here are the visualization results for the individual JavaScript libraries (click to run in your browser):

Cytoscape Sigma D3

From this first experience with using those three libraries I want to make a first conclusion on in which situation to use which of the JavaScript libraries. Please note that my experience is limited to getting started knowledge about the presented libraries only. More advanced users might think differently about the features and potentials of the individual libraries.

I hope with this post I could help some of you guys on the question which JavaScript graph library to use in what situation. Also, I would be interested in feedback from other developers on using those libraries for different purposes. Please note that we also provide alternative graph visualization and exploration techniques in Zumida, a product of Hyperkit Software.

You might also be interested in

June 19, 2012

Smart Grid Research Initiative

The last weeks my colleagues and I have been working on a website to promote our smart grid research and communicate with other researchers and practitioners from the field. We hope we were able to deliver an entertaining and informative experience which also carries our excitement for the topic and its unterlying scientific challenges for humanity.

teaching dynamic programming

July 21, 2009

Algorithm Debugging using OpenGL.

Currently, I am working on my thesis in the area of Computer Vision. The algorithms are quite complex and difficult to debug. Therefore, I implemented a simple architecture for creating a debug environment in 3D using OpenGL. The system can be extended using custom debugger implementations which render into a grid structure.

data visualization computer vision

January 19, 2011

Improved Website Usability!

After being online with the original layout and navigation concept for almost two years it was time for some central improvements. Among others the RSS feeds have been unified into a single point of access making it easier for you to retrieve the latest updates.