Graph/Network visualization is a subclass of the data visualization field that has grown in popularity over the past few years. There are already practices that use graphics to understand the Internet of Things, social networks, or transaction data. The development of the graph database ecosystem has also helped people better understand the benefits of graph data representation.

As part of the Motif development of our graphics intelligence software, we evaluated a range of web graphics visualization solutions to determine which tools were best suited for our scenes. In this article, we document our findings on the state of Javascript graphics visualization libraries. Both open source and paid. We hope this will be a useful guide for product owners or developers who want to integrate graphical visualizations into their applications.

Although graphical visualization libraries are often used to draw UML diagrams or mind maps, these areas are outside our focus. Here, we seek to evaluate these code bases in terms of data exploration and research.

Why Javascript?

There are many other graphics visualization libraries available, including popular desktop applications such as Gephi or Cytoscape, as well as libraries that combine with programming languages such as igraph and visualization packages in NetworkX. These repositories are great for a single data analyst, but difficult to integrate into larger products.

The widespread support of Javascript in browsers makes it an attractive solution for building interactive Web applications. These libraries can be easily integrated into larger Web applications or even distributed as desktop applications. While the performance may not be as good as the capabilities of native operating systems, they are sufficient for most data visualization needs.

Visual library list

Here are the eight visualization libraries we selected:

    1. D3
    1. Keylines / Regraph
    1. Vis.js
    1. Sigma.js / Graphology
    1. Ogma / Linkurious
    1. G6 / Graphin
    1. Ngraph / Vivagraph
    1. React-force-graph

Assessment part

We identified three areas of interest to compare these libraries: performance/rendering engines, available algorithms, and out-of-the-box components.

Rendering engine

One of the biggest performance influences is the rendering engine used underneath the framework. Yworks, a graphics rendering library SDK provider, provides a good comparison of the three rendering methods. With the 2015 macbook, the SVG approach performed well at less than 2,000 nodes and 2,000 edges. Canvas performance reaches its limit at 5k nodes and 5k edges, while WebGL is still usable at 10k nodes and 11k edges.

While WebGL takes full advantage of the processing power of a machine’s GPU and performs better, it is also more cumbersome to develop, which means there are trade-offs between performance, ease of use, and functionality.

algorithm

The algorithms mentioned here refer to the set of available apis that allow users to perform graphical operations. This might include alternative layouts, path-finding algorithms, and even network detection algorithms. These additional features can significantly reduce the time required for development.

component

Out-of-the-box components that speed product development. This might include a time bar filter or a small map to help the user navigate the canvas.

Evaluation summary

Detailed comparison

In this section, we will go into detail about each product and general experience with using them, if applicable.

D3

D3 is a mature data visualization framework and is one of the most popular options for developing interactive bar, line, geospatial, and network graphs. However, the time it takes to build graphical visualization solutions that match keyLines or G6 capabilities is enormous.

It includes other helper libraries, such as D3-Force, but most of the other base tools must be implemented by users. This is an example of using D3 to visualize character relationships in Les Miserables.

There are other wrapper libraries, such as react-Vis-Force and react-D3-graph, but the former is no longer maintained and the latter still has a lot of room to catch up.

Keylines

Keylines and its React library Regraph, a commercial product from Cambridge Analytica, has a powerful visualization engine that supports Canvas and WebGL rendering.

Of all the libraries we tried, we think KeyLines is the best performing, even compared to other WebGL libraries. It provides out-of-the-box support for most graphics algorithms, has a variety of useful layouts, and comes with components such as time bars for easy integration.

Advantages:

  • The best performance in its class
  • Time bar component
  • Geospatial support
  • Combine nodes/details on demand
  • 8 different layouts

Disadvantages:

  • The price
  • Json data format slightly different from most libraries

Vis.js

Vis-network is an open source drawing library with relatively good performance. It provides out-of-the-box support for clustering, layouts, simple graphical manipulation, and events. As one of the first libraries we tried, we thought it would work well for simple graphical visualization tasks, but was relatively difficult to scale and build.

Advantages:

  • MIT agreement
  • Good performance (Canvas)
  • Common node/edge style options are supported
  • Supports import of Gephi and DOT formats

Disadvantages:

  • It’s hard to go beyond existing options to customize
  • Limited layout and algorithms

Sigma.js

This is another long-standing and popular library in the field of web visualization. Although the 1.x version has not been updated for a long time, the new version, Sigma 2.0, is still in development, with a beta release in 2018, and is still under active development. The new version separates the graphology data structure now managed by the Graphology library from the rendering layer handled by Sigma.js.

Unfortunately, this is not well documented and our current assessment is based on the Sigma.js1.x version.

Advantages:

  • MIT agreement
  • Good performance (WebGL)
  • Plugin system can handle parallel edges, animations, different parsers, etc.
  • extensible

Disadvantages:

  • Beta version 2.0
  • Limited layout and algorithms
  • Difficult to integrate with React (1.x)

Ogma

Note: This section is based on existing documentation, not actual experiments. Ogma, developed by Linkurious, is a relatively new commercial visualization software that includes many features for displaying, exploring, and building interactive graphics applications. It is the underlying library used by Linkurious software and is considered a branch of Sigma.js and is further maintained and developed.

Advantages:

  • Good performance (WebGL)
  • Numerous algorithms
  • Filtering, grouping conversion
  • Many style options
  • Geospatial support

Disadvantages:

  • Commercial products
  • No time series support

G6

G6 and its derivative library Graphin are the products of the Ant visualization team. G6 provides a Canvas based graphics visualization framework with a number of algorithms and styling functions, while Graphin integrates it with React and provides additional components that can be used with the library.

If you want to visualize graphics on a small to medium scale, both libraries should contain enough tools and functionality to help developers quickly build applications.

Advantages:

  • MIT agreement
  • Numerous algorithms
  • Medium performance performance (Canvas)
  • Numerous style options
  • It is easy to extend by customizing shapes, behaviors, interactions, and plug-ins
  • Out-of-the-box components, such as time bars and minimaps
  • Excellent documentation with lots of examples

Disadvantages:

  • Some documents and most Github issues are in Chinese
  • No geospatial support (currently)
  • Large packing volume
  • The API iterates very quickly

Ngraph

Library author Andrei Kashcha has many other libraries that are worth checking out for any graphics enthusiast. Chief among the ecosystem are NGraph, a library for graphical data structures, VivaGraph, a set of graphing modules on top of NGraph, and other algorithm packages.

He has many examples of how to render Ngraph in other WebGL rendering libraries such as pixi.js and three.js. While this may represent a great deal of flexibility for developers, it also means a lot of work to build the necessary business functions.

Advantages:

  • MIT agreement
  • Excellent performance (WebGL)
  • 3d !
  • Highly customizable
  • Some algorithms support
  • Out-of-the-box components such as the time bar and minimaps
  • Excellent documentation with lots of examples

Disadvantages:

  • Knowledge of the underlying render library is required
  • Primitive node and edge shapes
  • There is no time series or geospatial support

React-force-graph

This is a collection of graphic visualization libraries, including 2D Canvas libraries, 3D WebGL based libraries,three.js based libraries and even VR based libraries. The demo also provided a fairly comprehensive range of style options, and the performance seemed to be excellent. One limitation is that they only support directional layouts out of the box, with no time series or geospatial support.

Advantages:

  • MIT agreement
  • Excellent performance (WebGL)
  • 3 d!
  • AR!!!!
  • There are some style options

Disadvantages:

  • Only force-oriented layouts are supported
  • Primitive node and edge shapes
  • There is no time series or geospatial support

conclusion

In this article, we compare eight different graphics visualization libraries and their strengths and weaknesses. Obviously, it’s hard to say which solution is the best on the market right now, depending on your budget, knowledge of javascript or WebGL, and requirements for other algorithms and components.

We ultimately decided to use G6 and Graphin in our product because we felt they struck a good balance between reasonable performance, rich functionality, and high customizability. It is also under active development and plans to support WebGL rendering in the future so that it will be on par with other libraries in terms of performance.

For amateurs exploring the web visualization space, I would definitely try using ngraph or React-force-graph, especially if more detailed styling or event management is not required.

If we were a large financial institution with a lot of money and no plans to commercialize the product, Keylines would be an attractive choice because of its first-class libraries, documentation, and support. As a fan of exploring the field of web visualization, I would definitely try ngraph or React-force-graph, especially in scenarios that don’t require more detailed styling or event management.

We see a huge gap in making chart analysis easier, not only in terms of front-end applications, but also in terms of broader integration with enterprise systems and better support for sharing and collaboration. Therefore, we are building Motif to fill this gap and make it a business intelligence tool for graph analysis.

  • Original address 👏