Ranking of JavaScript Graph Visualization Libraries


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.

Javascript network visualization libraries, sorted by their interest scores

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.

Github link

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.

Github link

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.

Github link

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.

Github link

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.

Github link

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!

Working on an EdTech startup.