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

July 14, 2011

3D Multi-Touch with Computer Vision

Some time ago I was working on free hand 3D gesture interfaces similar to Microsoft Kinect. What this work essentially means is collecting digital camera images and constructing logic that is able to recognize hands and interpret their movement. For constructing the logic it helps to build comprehensive visualizations of the camera data and information that you calculate from it. In this article I show some visualizations that I used during my work.

motion capture gesture recognition computer vision user interface

June 16, 2011

From Layout to Animation

In a previous article The Evolution of a Functional Prototype I demonstrated how to transform sketches into prototypes backed by database content and application logic. In this post I explore the options for animation of the user interface to provide smooth transitions between the displayed contents. This interface paradigm is for example used by Apple's products to deliver great user experiences.

blog user interface drawing youtube video

July 14, 2011

3D Multi-Touch with Computer Vision

Some time ago I was working on free hand 3D gesture interfaces similar to Microsoft Kinect. What this work essentially means is collecting digital camera images and constructing logic that is able to recognize hands and interpret their movement. For constructing the logic it helps to build comprehensive visualizations of the camera data and information that you calculate from it. In this article I show some visualizations that I used during my work.

motion capture gesture recognition computer vision user interface