Tree Map Demo

Tree maps allow to visualize hierarchical data using nested rectangles, which in this case are represented by graph nodes. The size of leaf nodes in a tree map is proportional to a certain data value (i.e. weight).

The TreeMapLayout algorithm arranges the nodes according to their weights and relations inside groups.

Application

A common application for tree maps is the visualization of the file structure on a hard disk. This example shows a tree map of the source code directory of the yFiles for HTML library. The node sizes are defined by the actual file size on disk in bytes.

Navigate the file hierarchy

For less cluttered graphs, only the children and grandchildren of the current root are visible.

Move down one hierarchy level by clicking a group/folder. This node becomes the new root and its children and grandchildren will become visible.
Move up one hierarchy level by clicking the containing group. This parent of this node becomes the new root.

Tree Map Layout

Zooming Mode

Tiling Algorithm

Aspect Ratio 1

Sorting Criterion

File-Directory Order

Spacing 2

Minimum Node Width 5

Minimum Node Height 5