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.
Interaction
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
canvas.
Layout
There are two suitable layout algorithms to apply to the graph.
- Hierarchic layout
- Orthogonal layout
Loading Graphs
Load your own graph and display it isometrically.