Isometric Drawing Demo
This demo displays graphs isometrically, adding an additional dimension to the
visualization. This can be used to represent characteristics of the business data as
height, or just because of the beautiful looks.
In this demo, WebGL is used for the rendering but the
projection feature of yFiles for HTML supports SVG
and HTML Canvas rendering, too.
This demo features the full range of interactions
supported by yFiles. In addition, each node has
an special handle at its top to change the height of the node.
Things to Try
- Change the height of a node by selecting it and dragging the handle at its top.
- Change the rotation of the scene with the "Rotation" slider in the toolbar.
- Turn the grid on or off with the "Toggle Grid" button in the toolbar.
Create a new node with a random color and height by clicking on empty space in the
There are two suitable layout algorithms to apply to the graph.
- Hierarchic layout
- Orthogonal layout
Load your own graph and display it isometrically.