Relationships between large amounts of hierarchical data are difficult for people to understand quickly.
Use rectangles that can vary in size, color, and position to show hierarchical information to allow users to quickly understand the underlying data. Use nested rectangles to express the hierarchical relationships, and use size, color, position or labels to show different data dimensions.
Through the use of area, color, enclosure and labeling, Treemaps allow users to quickly and easily scan for trends and relationships in data. Scanning and navigating data using a Treemap, when appropriate, can be a great alternative to requiring users to read through multiple listings of tabular data, or to have to try to remember relationships and values across multiple tables of data.
When designing a Treemap, each data category or dimension will be encoded as an attribute of a rectangle, such as color, size or location.
Rectangle size usually corresponds to a numerical value. Because the rectangles that represent smaller values may not be easily visible, you may want to provide users with a zooming feature that resizes rectangles as the user zooms.
Nest the rectangles according to hierarchical relationships, or categorical relationships in the data based on any related user research. If you have no such hierarchical or categorical relationships to use, you can break ranges of attribute values into groups, similar to how ranges are used in the Faceted Navigation pattern.
Use differing shades of the same color hue (see Few Hues pattern) for the range of values for a given attribute, or to represent different categories. Do not reuse the same color for different meanings.
Rectangles are usually sorted by size, from largest to smallest, within a given categorical enclosure.
Treemaps were originally invented by Ben Shneiderman. The history of the Treemap and many links to papers and implementations can be found at http://www.cs.umd.edu/hcil/treemap-history/. This site has links to different algorithms and methods for laying out the position of rectangles (as well as more information on many examples of implementations and variations).
Infragistics has some tools that can jumpstart your efforts to implement this pattern. Broken down by technology, they are as follows.
You can use the NetAdvantage for Windows Forms WinChart (TreeMap ChartType) to implement this pattern. If you download the NetAdvantage for Win Client bundle, you can find a sample in the WinForms WinChart sample browser called TreeMapto see it in action.
This example (from WinDirStat) shows a Treemap width the disk usage statistics. Each block represent a file in the file system, color is the file type and the size represent the used space in the disk. Users can navigate in the map with zoom-in tool and delete unused files for liberate disk space.
The primary example for this pattern comes from the Smart Money Market Map. Size and color of each block are used to represent the amount of recent gains or losses. Users can quickly get a sense of market behavior just by glancing at the map.
This example is a Treemap used to aggregate and navigate news stories from Google News, based on popularity (size of rectangle and text font) news category (color hue), and age of story (variation of color within hue).
This example from the Hive Group shows a Treemap showing world population data. It groups data by continent, the size is the population and the color is the range in the world’s population rank. It uses the Active Filtering pattern to filter the data.
What I love about this example is the combination of the treemap and the list of selected items displayed below the map. This makes it pretty easy to keep track of all the interesting items that you find in the treemap.
Jennifer Tidwell, Designing Interfaces
Ben Shneiderman, Treemaps for space-constrained visualization of hierarchies