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

March 10, 2011

Pen Sketches with MyPaint

For a long time I have been searching for a sketching program to use with my Tablet PC Pen during the development of software systems. Recently I discovered a little program called MyPaint, which is great for my purposes. In this article I share some sketches that I drew for evaluating the tool.

drawing

June 27, 2010

Master Thesis Video.

After finally completing my Master Thesis project at Fraunhofer FIT me and some friends took some time to prepare a demonstration video. The video is now available on YouTube for everybody to watch and comment. I really hope you guys enjoy it since we put quite some effort into it.

youtube video motion capture gesture recognition computer vision user interface

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.

blog