Large Graphs Demo
This demo shows how to display large graphs with both good performance and high quality.
For this, the demo uses WebGL2 rendering on small
zoom levels and switches to high quality SVG rendering when the user zoomed-in
above a certain threshold.
Due to its vector graphics, SVG is very well suited for high-quality rendering with lots
of details and crisp text. If a large number of graphical elements needs to be displayed
at the same time, the browser's rendering engine reaches its limits and the rendering
starts to lag.
Rendering a large number of elements which are not too detailed is where WebGL2 rendering
shines. Therefore, this demo relies on this rendering method when elements on the screen
get smaller and details are less recognizable anyway.
Depending on the desired item visualization, using WebGL2 rendering for all zoom values is
a valid option, too. You can disable SVG rendering completely in the toolbar.
The node styles for both SVG and WebGL2 are instantiated with the same image data so
that the transition between the rendering methods is as smooth as possible.
Things to try
Zoom in and out of the graph and observe the rendering method switch at the zoom
Adjust the zoom threshold to a high value and zoom in to observe the fidelity
difference between WebGL and SVG rendering.
Adjust the zoom threshold to a small value to observe the performance difference
between WebGL and SVG rendering.
Number of nodes:
Number of edges:
Zoom level: %
When encountering rendering issues or low frame rates, please refer to the
WebGL2 Troubleshooting section in the