Treemap

Example of the Treemap UX pattern.

Problem

Relationships between large amounts of hierarchical data are difficult for people to understand quickly.

Solution

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.

Context

You have hierarchical and/or multivariate data.
The users are willing, and able (e.g. may not work at a kiosk in the mall) to learn a new interface paradigm.

Rationale

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.

Implementation

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

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.

Grouping and nesting

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.

Color

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.

Position

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

Help Me Get There

Infragistics has some tools that can jumpstart your efforts to implement this pattern. Broken down by technology, they are as follows.

ASP.NET

Treemap pattern is implemented in the following ASP.NET control: WebChart by setting chart type as TreeMap. Check out the samples browser to see it in action.

Windows Forms

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.

Examples

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.

http://quince.infragistics.com/1102