Graph / Network visualisation is a subcategory within the data visualisation space that has grown in popularity over the past few years. There have been emerging use cases to use graphs to understand IoT, social network or transaction data. The growth in the graph database ecosystem has also resulted in a better understanding of the benefits of a graph data representation.
As part of the development of Motif, our graph intelligence software, we evaluated a range of network visualisation solutions to see which tool best fits our use case. In this article, we document our findings on the state of Javascript graph visualisation libraries. This covers both open source and paid libraries. We hope this will be a useful guide for product owners or developers looking to integrate graph visualisation into their application.
While graph visualisation libraries are often used for diagrammatic drawings such as UML diagrams or mind maps, those areas are out of our focus. Here, we are looking to evaluate libraries for data exploration and investigation.
Why Javascript?
There are many other graph visualisation libraries available including popular desktop applications like Gephi or Cytoscape, and libraries coupled with programming languages like visualisation packages within igraph and networkx. These software libraries are good for an individual analyst but are hard to integrate into larger product offerings.
Javascript with its universal browser support is an extremely attractive solution to build an interactive web application. These libraries could easily be integrated into a larger web application or even published as a desktop electron application. While performance might be poorer than native operating systems capabilities, they are more than good enough for most data visualisation needs.
List of Libraries
Here’s the list of 8 libraries we shortlisted for our evaluation:
- D3
- Keylines / Regraph
- Vis.js
- Sigma.js / Graphology
- Ogma / Linkurious
- G6 / Graphin
- Ngraph / Vivagraph
- React-force-graph
Evaluation Areas
We identified 3 areas where we are interested in comparing across the different products: performance / rendering engine, algorithms available and out of the box components.
Rendering Engine
The factor that has the greatest impact on performance is the rendering engine which the underlying framework uses. Yworks, a diagrammatic library SDK provider, has a nice comparison of the 3 rendering methods. Using a 2015 macbook, SVG performance tops gives workable performance until it reaches 2k nodes and 2k edges. Canvas performance reaches the limit at 5k nodes and 5k edges while WebGL is usable until 10k nodes and 11k edges.
While WebGL is more performant as it leverages the GPU processing power of a machine, it is also harder to work with, which means there tends to be a tradeoff between performance, ease of use and capabilities.
Algorithms
This refers to the set of available APIs to allow a user to perform a graph operation. This could include layout options, pathfinding algorithms or even network detection algorithms. All these additional functionalities would significantly cut down on the development time required.
Components
Out of the box components that would speed up product development. This could include a time bar filter or a minimap to help a user navigate through the canvas.
Summary Evaluation Matrix
| Library | Licence | Rendering Engine | Algorithms | Components |
|---|---|---|---|---|
| D3 | BSD | SVG / Canvas | Low | Low |
| Keylines | Commercial | Canvas / WebGL | High | Medium |
| Vis.js | MIT | Canvas | Middle | Low |
| Sigma.js | MIT | Canvas / WebGL | Middle | Low |
| Ogma | Commercial | Canvas / WebGL | High | Low |
| G6 | MIT | Canvas | High | High |
| Ngraph | MIT | WebGL | Middle | Low |
| React-force-graph | MIT | WebGL | Low | Low |
Detailed comparisons available at our original post
Top comments (0)