Zoomable Treemaps

Treemaps are a form of space-filling layout where the area of each rectangle is proportional to its value. This example shows the size of files in a source tree.

Treemaps visualize hierarchical data, but since often only the leaf nodes (files rather than folders) are drawn, it can be difficult to see the hierarchy. Padding is sometimes used to show the hierarchy via containment, though this introduces area distortion. Cushion gradients also indicate hierarchy, but are somewhat unintuitive (or perhaps just ugly).

The treemap above uses interaction to reveal the hierarchy incrementally: clicking on a node zooms in. Only two levels of the hierarchy are visible at a time. This allows the layout’s aspect ratio (ideally φ) to be optimized for the current view, rather than computing a global layout. It also allows the exploration of arbitrarily-large datasets: data can be lazily-loaded and positioned on zoom!

This visualization is implemented in D3.js, based on an earlier version from my talk at SVG Open. Also see Nicolas Garcia Belmonte’s zoomable treemap of music albums, and The New York Times’ free-form zooming for Obama’s 2012 budget proposal. Note the subtle differences in behavior!