Sample & Configuration
Sample:
SVG threshold:
Graph information
Number of nodes:
Number of edges:
Display information
Rendering technique:
Zoom level: %
Large Graphs Demo
This demo shows how to display large graphs with both good performance and high quality. For this, the demo uses WebGL 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 WebGL 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 WebGL rendering for all zoom values is a valid option, too. You can disable SVG rendering completely in the toolbar.
You can use the FPS meter on the right side to benchmark the performance. Click the animation buttons to run example animations.
Hierarchical sample
The node styles for both SVG and WebGL 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.
Troubleshooting
When encountering rendering issues or low frame rates, please refer to the WebGL Troubleshooting section in the Developer's guide.