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.
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.
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.
Here’s the list of 8 libraries we shortlisted for our evaluation:
- Keylines / Regraph
- Sigma.js / Graphology
- Ogma / Linkurious
- G6 / Graphin
- Ngraph / Vivagraph
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.
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.
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.
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.
|D3||BSD||SVG / Canvas||Low||Low|
|Keylines||Commercial||Canvas / WebGL||High||Medium|
|Sigma.js||MIT||Canvas / WebGL||Middle||Low|
|Ogma||Commercial||Canvas / WebGL||High||Low|
Detailed comparisons available at our original post