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.
- Use Cytoscape if you want to have computationally fast results.
- Use Sigma if you want to have basic interactive results.
- Use D3 if you want to have maximum customizable results.