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

February 23, 2012

First Results on Smart Grid Simulation as YouTube Video

The last weeks my colleagues and I have been working hard on a basic simulation of a household with electric components and control software. We show first results in our latest YouTube video featuring weahter, user interaction, solar panels, a lamp and a refrigerator. The result is a show case for the direction we are working towards, i.e. large scale electric component and software simulation.

dynamic programming data visualization youtube video

February 23, 2012

First Results on Smart Grid Simulation as YouTube Video

The last weeks my colleagues and I have been working hard on a basic simulation of a household with electric components and control software. We show first results in our latest YouTube video featuring weahter, user interaction, solar panels, a lamp and a refrigerator. The result is a show case for the direction we are working towards, i.e. large scale electric component and software simulation.

dynamic programming data visualization youtube video

May 31, 2012

Leaving to ICSE tomorrow!

The event is approaching: Tomorrow at 11:59 AM the train is leaving to Zurich, Switzerland, where the 34th International Conference on Software Engineering is held. Co-located with the conference is the first International Workshop on Software Engineering Challenges for the Smart Grid, where my colleagues and I published a paper.

conference