A treemap turns a tree in graph theory into a planar space-filling map: the root is the outermost rectangle, whose nodes are the rectangles at level one, and so on down the levels.
Treemaps visually display a hierarchical structure by dividing a rectangular area in proportion to the values of the tree nodes. Treemaps were invented by Ben Shneiderman in 1990.
This Demonstration uses a splice and dice algorithm with a split parameter determining when to switch reducing the axis or the axis of the remaining rectangular area. The tree depth here is four—you control how many branching levels are visible—and consists of six randomly generated values at each node.


  • [Snapshot]
  • [Snapshot]
  • [Snapshot]


There are four controls in this treemap Demonstration:
"tree depth": display trees with levels 1, 2, 3, or 4
"split ratio": change from 0.1 to 0.9; notice the impact on the treemap layout
color scheme: choose one of seven built-in color schemes from the pull-down menu
locator: drag the locator at the top right of the graphic to change the shape of the bounding rectangle
Use the loop animation (with slower speed for level 3 and 4 trees) to observe the impact of a change in split ratio on the treemap layout. The split ratio determines how the current rectangle container is divided for all its elements. The cut always happens on the longer dimension ( or ). The ratio determines how many elements at a node level will be included in the part split off from the current rectangle. If you have elements at one level, then the first elements will be grouped into the first split of the rectangle if , where is the ratio.
[1] B. Schneiderman. "Treemaps for Space-Constrained Visualization of Hierarchies." (Jun 25, 2009) www.cs.umd.edu/hcil/treemap-history.
[2] University of Maryland, Human-Computer Interaction Lab. "Treemap." (Aug 5, 2003) www.cs.umd.edu/hcil/treemap.
[3] Visualign. "TreeMap of the Market." (Nov 10, 2011) visualign.wordpress.com/2011/10/29/treemap-of-the-market.
    • Share:

Embed Interactive Demonstration New!

Just copy and paste this snippet of JavaScript code into your website or blog to put the live Demonstration on your site. More details »

Files require Wolfram CDF Player or Mathematica.

Mathematica »
The #1 tool for creating Demonstrations
and anything technical.
Wolfram|Alpha »
Explore anything with the first
computational knowledge engine.
MathWorld »
The web's most extensive
mathematics resource.
Course Assistant Apps »
An app for every course—
right in the palm of your hand.
Wolfram Blog »
Read our views on math,
science, and technology.
Computable Document Format »
The format that makes Demonstrations
(and any information) easy to share and interact with.
STEM Initiative »
Programs & resources for
educators, schools & students.
Computerbasedmath.org »
Join the initiative for modernizing
math education.
Powered by Wolfram Mathematica © 2014 Wolfram Demonstrations Project & Contributors  |  Terms of Use  |  Privacy Policy  |  RSS Give us your feedback
Note: To run this Demonstration you need Mathematica 7+ or the free Mathematica Player 7EX
Download or upgrade to Mathematica Player 7EX
I already have Mathematica Player or Mathematica 7+