The Project
I am in the process of designing a dashboard that will support multiple visualizations. For this, I need a library to render network graphs using Angular. My core requirements are the following:
Requirements
- The networks can be very small (around 50 nodes and 200 edges) but also very large (5k+ nodes and 50k+ edges), so scalability is essential.
- The library should be highly customizable, with features like hover, zoom, node selection, and the ability to change the colors of nodes and edges.
- Force-directed layouts would be a plus, but is optional, as I am open to including an additional library for this purpose.
- Free to use at no cost.
- Responsive (option to react to resize events, and adjust the visualization accordingly).
- Cross-browser support, with a focus on modern browsers (though I think this is almost always the case).
- Export the visualizations (ideally with as high quality as possible)
My current State of Knowledge and Technology Preference
I have already conducted a lot of research and testing myself. I came to the conclusion that WebGL is the best choice because it offers excellent scalability for lots of data (at the cost of a slight overhead for rendering just a few data points).
Currently, I am quite ambivalent. I tend to ECharts (see table for reasons), but there are some bugs that could be a no-go criterion. However, the other alternatives also have several disadvantages. I'm also thinking about using Sigma.js for the charts and ECharts, g6, or Plotly for the other visualizations.
My Research and Test Results
I have summarized my results in the table below. I'm happy to hear any other suggestions, approaches, or aspects I've forgotten to consider. Thanks a lot!
| Library | Rendering | Customizability | Ease of Use | Scalability | Experimental Results |
|---|---|---|---|---|---|
| chart.js (with chartjs-chart-graph extension) | Canvas | High | High | Medium | Since it is an extension, all visualizations would have a consistent look. But there are some bugs, rendering + layouting takes quite a long time, and force-directed layout sometimes gives out-of-memory exceptions. |
| vis.js (vis-network) | Canvas | High | High | Medium | Ships with 4 physically-based layout options. Good documentation, and many configuration options. Rendering, layouting, and interacting is very slow for large networks. |
| d3 | SVG | High | Low | Low | Extremely configurable, but thus very cumbersome to use. Also, only SVG is supported, which makes rendering large graphs almost impossible. |
| sigma.js (which uses Graphology) | WebGL | Medium | Low | High | Offers two force-directed layouts. Rendering and layouting is quite fast. However, there is no very good documentation; Additionally, many things like "other node types" (e.g. rectangles) are time-consuming to extend/implement. |
| cytoscape | Canvas | High | Medium | Medium | Offers many layout algorithms, for medium-size graphs also good to use. However, way too slow for large graphs. There are possibilities like "expand-collapse" to speed this up - but this is connected with additional effort. Nonetheless, there is a good documentation, plenty of extensions, and high configurability. |
| ngx-charts (with ngx-graph extension) | SVG | Medium | Hhigh | Low | Uses SVG and is therefore way too slow for large networks. It is also not well extensible, and things like hover templates, or other note types are cumbersome to implement. |
| Echarts (with ngx-echarts and echarts-gl extension) | WebGL | High | High | High | When using graphGL: Nodes scale strangely (very large when zooming out, very small when zooming in), hover labels have a bug so you can't hover over nodes that are far out, and the legend doesn't work. Otherwise very powerful library with an incredible amount of configuration possibilities. Very performant and the many visualization types would result in a uniform look of the dashboard since every other visualization could also be covered by ECharts. |
| ngraph (which uses VivaGraphJS) | WebGL | Low | Low | High | A quite fast library that serves its purpose. However, it is very poorly documented, hardly extensible, and many additional functions such as hovering, labeling, etc. are not supported. Also, few events are emitted. |
| g6 | SVG / Canvas | High | High | Medium | Similar to Echarts, it is an extensive library; However, WebGL is not currently supported. Therefore it is too slow. |
| ElGrapho | WebGL | Medium | High | High | Pretty fast, and can even handle force-directed layout quickly. However, there are hardly any configuration options (e.g. hardly anything can be set for force-directed layout), which probably makes it not an option. |
| plotly.js | SVG (& partially WebGL) | High | Medium | Medium | Complicated to use and configure, but offers a lot of options, good documentation, and lots of support. However, webGL support is limited, and there is no native graph support. One could simulate this by using scatterGL. However, the lines can only have a single color, so they are not individually configurable. |
Perhaps the table can also serve as a general overview for others who are curious about different visualizations and graph networks. It would be great if you could contribute and share your knowledge and experience to help me and others.
