Ranking of JavaScript Graph Visualization Libraries
Background
I am working on a Web product that needs to visualize and manipulate graph / network data using JavaScript. Obviously, I can use the omnipotent D3.js library, but I am also curious to learn graph visualization specific libraries that can provides higher level of abstraction. I did a bit search and found two nice overview articles:
They both provide a comprehensive list of libraries. However, which library should a reader check out first? If following the alphabetical order, then one actually encounters Alchemy and arbor, which haven’t been updated for years. It would be nice if the list can be sorted so that libraries that are still being actively updated, and libraries that have higher popularity are ranked top.
Therefore, I created a simple Interest Score for this purpose. Below is a ranked list of JavaScript graph visualization libraries. For details on how this score is calculated, please go to the end of this document.
I want to emphasize that this score is NOT a measure of how good a library is. All these libraries are the result of great design and engineering effort. We should sincerely appreciate the work of the authors.
Below are details of the top 5 libraries.
1. G6
Interest score: 1.0
Description: G6 is a graph visualization engine, which provides a set of basic mechanisms, including rendering, layout, analysis, interaction, animation, and other auxiliary tools. G6 aims to simplify the relationships, and help people to obtain the insight of relational data.
2. Cytoscape.js
Interest score: 0.9
Description: Cytoscape.js is a fully featured graph theory library. Do you need to model and/or visualise relational data, like biological data or social networks? If so, Cytoscape.js is just what you need.
3. vis.js — Network
Interest score: 0.8
Description: Network is a visualization to display networks and networks consisting of nodes and edges. The visualization is easy to use and supports custom shapes, styles, colors, sizes, images, and more. The network visualization works smooth on any modern browser for up to a few thousand nodes and edges. To handle a larger amount of nodes, Network has clustering support. Network uses HTML canvas for rendering.
4. VivaGraph
Interest score: 0.8
Description: VivaGraphJS is designed to be extensible and to support different rendering engines and layout algorithms. Underlying algorithms have been broken out into ngraph.
5. dagre
Interest score: 0.8
Description: Dagre is a JavaScript library that makes it easy to lay out directed graphs on the client-side.
Interest Score Calculation
Here is how the interest score is calculated
Interest Score = 0.3 * Recency Score + 0.7 * Popularity Score
Recency Score = 1-log(days since last commit) / log(max of days since last commit)
Popularity Score = log(Github stars) / log(max of Github stars)
That’s it. Thank you for reading this article. Please feel free to share your comments!
