Keyboard shortcuts

Press or to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Treemap

Show hierarchical proportions by area — directory sizes, budget breakdown, taxonomic counts. Each node is a rectangle sized to its value; children pack inside their parent's rectangle.

The demo squarifies the Apollo program $25.4 B cost hierarchy — same data as the sunburst chart, different geometry. The Saturn V leaf claims the largest rectangle in the plot; CSM + LM share the second-biggest group; ground ops and R&D fill the remainder. The treemap's strength is that area ratios are directly comparable across nesting levels — the Saturn V's rectangle is genuinely 5× the size of the LM's because $9.3 B is 5× $3.0 B.

Source: Apollo program — Costs — Wikipedia

Public surface

use wisp_chart::topology::{Treemap, TreemapNode};
use wisp_chart::color::Color;

let c = |hex| Color::from_hex(hex).unwrap();
let t = Treemap::new(TreemapNode::group("root", c("#888888"), vec![
    TreemapNode::group("Sales", c("#0072b2"), vec![
        TreemapNode::leaf("NA",   30.0, c("#56b4e9")),
        TreemapNode::leaf("EU",   20.0, c("#7faedc")),
    ]),
    TreemapNode::group("Eng", c("#d55e00"), vec![
        TreemapNode::leaf("Platform", 25.0, c("#e8853d")),
        TreemapNode::leaf("App",      18.0, c("#eea063")),
    ]),
]));
let g = t.emit_graphics(&theme, Vec2::new(480.0, 300.0));

Layout — slice-and-dice (v1)

Info

v1 uses slice-and-dice: even-depth nodes split vertically (rows stacked top-down), odd-depth nodes split horizontally (columns stacked left-to-right). Predictable, pixel-stable, dependency-free.

Note

Slice-and-dice produces visually weaker rectangles for wildly imbalanced trees (long thin strips) than squarify. Squarify support is a follow-on; today's layout is "good enough" for most product-data hierarchies.