TuxTreemap

canonical

Filesystem · 2-deep

Hover a cell for path + size + child count. Click any aggregate with children to drill in. Maroon ramp colors by size (log-scaled, because file-size distributions are heavy-tailed).

<TuxTreemap :data="data" :max-depth="2" color-by="size" />

depth coloring

Color by depth instead of size

Pass color-by="depth" when the visual story is about hierarchy levels rather than absolute size. Useful for showing nested folder structure where every level matters equally.

single-level

Flat treemap (max-depth=1)

Pass :max-depth="1" for a flat one-level treemap — useful for top-level overviews where you don't want the eye distracted by sub-hierarchies.

props

Props + data shape

• data — recursive { name, size?, children? }. Required.
• maxDepth — render depth before showing aggregate cells. Defaults to 2.
• colorBy — "size" | "depth". Defaults to "size".
• unit — "bytes" | "count" | "percent". Sets the size formatter.
• width + height — SVG viewBox dimensions (component renders responsive).

algorithm

Why squarified

Naive treemaps (slice-and-dice) produce strip-shaped cells that get unreadable as the dataset grows. The squarified algorithm (Bruls et al., 1999) chooses each row's contents to minimize the worst aspect ratio — the result is cells that stay near-square, which keeps labels readable and area perception accurate. This is the algorithm D3, ECharts, and Tableau all use. We implement it directly in ~80 lines of Vue so we don't take a viz-library dependency just for this one chart.