Large Graphs [yFiles for HTML]

Description

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.

Hierarchic sample

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 threshold.
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.

Graph information

Number of nodes:
Number of edges:

Display information

Rendering technique:
Zoom level: %

Troubleshooting

When encountering rendering issues or low frame rates, please refer to the WebGL2 Troubleshooting section in the Developer's guide.

Loading graph...