Tree - Treemap Chart

Data System Architecture


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.



  • 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 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.


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


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.



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

Tree Map Padding


Cushion Treemap

Cushion Tree Map



WebSite Heatmap Index

Documentation / Reference

Discover More
Card Puncher Data Processing
D3 - Treemap Layout

treemap in D3 is implemented as a layout. v4. You pass the root node of a tree to the treemap function and it will then add the coordinates of the tile to each node. Create a tree Call tree.sum...
Utah Teapot
Data Visualization - ( Chart | Graph | Graphic)

A chart, also called a graph (in mathematics for instance), is a graphical representation of data, in which the data is represented by symbols, such as: bars in a bar chart, lines in a line chart,...
Utah Teapot
Data Visualization Foundation

The Utah Teapot. Data visualization is the process of mapping quantitative data to visuals (shapes, color, position, etc) to create a graph made of geometric object. Information visualization: ...
Data System Architecture
Tree - Circular Treemap

A Circular Treemap replace the tile of a treemap by a circle. D3 - Circle Packing + Zoom
Data System Architecture
Tree - Visualization

A tree can be rendered with all graph visualization libraries. Bar Drill Down Hierarchy Circular treemap Rectangular Treemap ...
Card Puncher Data Processing
WebSite Heatmap Index

The below treemap shows a map of this website. Each tile is a section showing its name and the number of pages. A click on the tile will bring you to the chosen section.

Share this page:
Follow us:
Task Runner