# Treemap A treemap is a data visualization technique that displays hierarchical data as a set of nested rectangles. Invented by [[Ben Shneiderman]] in 1991 at the University of Maryland Human-Computer Interaction Lab, treemaps make efficient use of screen space to show thousands of items simultaneously. Each rectangle's size represents a quantitative value (like file size or revenue), while color can encode an additional dimension (like growth rate or category). Shneiderman developed treemaps to visualize disk space usage on his hard drive—a problem where traditional tree views couldn't show the "big picture" at a glance. The technique has since been widely adopted for financial data (stock market maps), disk analyzers (WinDirStat, GrandPerspective), portfolio visualization, and any domain with hierarchical quantitative data. Various layout algorithms have been developed to improve aspect ratios and stability. ## How Treemaps Work ``` Traditional Tree: Treemap: ┌────────────────────────────┐ Root │ A (large) │ │ / \ │ │ B │ A B ├───────┬───────┤ (medium) │ /|\ | │ A1 │ A2 │ │ A1 A2 A3 B1 │ │ ├────────────┤ │ A3 │ │ B1 │ └───────┴───────┴────────────┘ ``` - **Area** = quantitative value (file size, revenue, population) - **Nesting** = hierarchy (folders contain files, categories contain items) - **Color** = secondary dimension (growth, type, status) ## Layout Algorithms | Algorithm | Year | Description | Trade-offs | |-----------|------|-------------|------------| | **Slice-and-dice** | 1991 | Alternates horizontal/vertical divisions | Original; poor aspect ratios | | **Squarified** | 2000 | Optimizes for square-like rectangles | Better readability; unstable ordering | | **Strip** | 2001 | Hybrid of slice-and-dice and squarified | Balanced approach | | **Pivot-by-size** | 2002 | Maintains data ordering | Predictable layout | | **Voronoi** | 2005 | Non-rectangular cells | Aesthetic; harder to compare | ## Visual Encoding | Element | Encodes | Example | |---------|---------|---------| | **Size** | Primary quantitative value | File size, market cap, revenue | | **Color hue** | Category or type | File type, sector, department | | **Color saturation/brightness** | Secondary value | Growth rate, change, performance | | **Nesting** | Hierarchy level | Folder structure, org chart | | **Border** | Hierarchy boundaries | Parent-child relationships | ## Common Applications | Domain | Use Case | |--------|----------| | **Disk analysis** | WinDirStat, GrandPerspective, Baobab | | **Financial markets** | Stock market maps, portfolio visualization | | **Business intelligence** | Sales by region/product, budget allocation | | **News/content** | Newsmap (Google News visualization) | | **Software engineering** | Code complexity, test coverage by module | | **Sports analytics** | Player statistics, team performance | ## Example: Disk Usage ``` ┌──────────────────────────────────────────────────────┐ │ │ │ Documents (45%) │ Photos (30%) │ │ │ │ │ ┌──────────┬──────────────┐ │ ┌─────┬─────────┤ │ │ Work │ Personal │ │ │2023 │ 2024 │ │ │ (25%) │ (20%) │ │ │ │ │ │ └──────────┴──────────────┘ │ └─────┴─────────┤ ├───────────────────┬──────────────┴──────────────────┤ │ Videos (15%) │ Other (10%) │ └───────────────────┴─────────────────────────────────┘ ``` ## Advantages - **Space-efficient**: Displays thousands of items in limited space - **Comparative**: Easy to spot large/small items at a glance - **Hierarchical**: Shows structure and proportions simultaneously - **Scalable**: Works from dozens to millions of items ## Limitations - **Deep hierarchies**: Many nesting levels become hard to read - **Small items**: Tiny rectangles are difficult to label or interact with - **Comparison**: Comparing non-adjacent rectangles is challenging - **Aspect ratios**: Thin rectangles harder to perceive than squares ## Tools and Libraries | Tool/Library | Platform | Notes | |--------------|----------|-------| | **D3.js** | JavaScript | Popular web visualization library | | **Plotly** | Python/JS/R | Interactive treemaps | | **WinDirStat** | Windows | Disk space analyzer | | **GrandPerspective** | macOS | Disk space analyzer | | **Baobab** | Linux | GNOME disk usage analyzer | | **Finviz** | Web | Stock market treemap | ## References - https://www.cs.umd.edu/hcil/treemap-history/ - https://en.wikipedia.org/wiki/Treemapping - https://d3js.org/d3-hierarchy/treemap ## Related - [[Ben Shneiderman]] - [[Human-Computer Interaction (HCI)]] - [[Information Design]] - [[Hierarchical Data]]