treemap · squarified

Treemap Explorer

Every rectangle is money, and area is the amount — one month of spending, packed into a single frame. Click a block to zoom into that part of the month, then edit any number on the right and watch the whole picture rearrange itself.

the month, by area—

Nothing above zero to draw. Add an amount in the list.

does it balance?—

spent

—

take-home pay

per month

left over

—

biggest single line

—

——

every line—

edits redraw live

how the packing works

A treemap turns a total into a rectangle, then slices it up so each piece takes area in proportion to its share. The naive slice-and-dice version leaves you with long paper-thin slivers you can't compare. Squarified layout fixes that: it fills a row of blocks one at a time and stops the moment adding the next block would make the row's shapes worse, then starts a fresh row against the remaining space.

"Worse" has an exact meaning — the worst aspect ratio in the row, for a row of areas r laid along a side of length w:

s = sum(r) worst(r, w) = max( w²·max(r) / s² , s² / (w²·min(r)) )

The algorithm is about forty lines and runs in about a millisecond here (the footer times every pass). Everything you see — nesting, zoom, the label sizing — is plain DOM elements positioned by that one function, so the browser animates the rearrangement for free.

Keyboard: Tab moves between blocks, Enter zooms in or picks a line, Escape zooms back out.