About

Ben Shneiderman introduced tree maps in the early 90s as a visualization metaphor for displaying hierarchical trees.

A tree map arranges hierarchical items in rectangular bounding boxes representing the tree structure.

The rectangles of a tree map are called cells.

Cells on the tree map have three visual attributes:

  • the color of a cell is a visual representation of a measure
  • its size can also represent another measure.
  • the location of a cell indicates which parent cell it belongs to (Spatial Relationship)

A tree map is an adjacency diagrams. The size of any node in the tree is quickly revealed.

Algorithms

List:

  • BinaryTree - Partially ordered, not very good aspect ratios, stable
  • Ordered - Partially ordered, medium aspect ratios, medium stability
  • SliceAndDice - Ordered, very bad aspect ratios, stable
  • Squarified - Unordered, best aspect ratios, medium stability
  • Stripes
  • Strip - Ordered, medium aspect ratios, medium stability
  • Voronoi and jigsaw treemaps (exist but are less common).

Squarified

Squarified treemaps use approximately-square rectangles

A Squarified treemap offer better readability and size estimation than naïve slice_and_dice subdivision.

The Squarified algorithm has an objective of low aspect ratio. It adds the points one by one to a strip until it finds the best aspect ratio available. Then it alternates the direction and does the same with a new strip. The process continues in the same pattern until all points are placed in the chart.

Slice and Dice

Nodes can get really bad aspect ratio, and thus become hard to compare. This occurs often with larger datasets.

Stripes

Instead of alternating the direction between each node, it draws all nodes in same direction, creating a set of columns.

Strip

Not to be mistaken as the Stripes algorithm.

Equivalent to the Squarified algorithm but the direction of the strips is not alternated, the strips are drawn side by side as columns.

Visuals

Padding

Padding is sometimes used to show the hierarchy via containment, though this introduces area distortion.

Tree Map Padding

Cushion

Cushion Treemap

Cushion Tree Map

Library

Example

WebSite Heatmap Index

Documentation / Reference