Treemap — HTML CSS JS Treemap Chart (No Library)

A treemap shows part-to-whole composition by filling a rectangle with tiles whose *areas* are proportional to their values — ideal for disk usage, budgets, portfolios, or any hierarchy where you want to compare sizes and use space efficiently. This snippet builds a treemap in plain HTML, CSS, and vanilla JavaScript, computing the tile layout itself with a recursive slice-and-dice algorithm and rendering positioned tiles with labels and tooltips — no charting library.

Area, not length, encodes the value

Unlike a bar chart (length) or pie (angle), a treemap encodes value as *area*. The challenge is packing rectangles of given areas into a container with no gaps and reasonable aspect ratios. The snippet solves this with a recursive split: at each step it divides the items into two groups whose value-sums are as balanced as possible, allocates the container's space between them in proportion to those sums, and recurses into each half — alternating between horizontal and vertical splits based on which dimension is longer. Alternating the split direction is the key trick that keeps tiles close to square instead of degenerating into thin slivers.

A real layout algorithm in a few lines

layout(items, x, y, w, h) is the whole engine: it finds the balanced split point, computes the area ratio, and carves the rectangle along its longer axis, assigning each leaf item a final { x, y, w, h }. This is a compact cousin of the "squarified treemap" approach used by D3 and OS disk-usage tools, written out clearly so you can see exactly how rectangles get packed by value — the part that makes treemaps look hard but is just balanced recursion.

Tiles that adapt their labels

Each item becomes an absolutely-positioned div at its computed rect, coloured per series, with a white border that visually separates adjacent tiles. Labels are shown only when a tile is big enough to hold them (a size check), so small tiles stay clean instead of overflowing with clipped text — and every tile, labelled or not, reveals its name and value on hover via a cursor-following tooltip. This "label if it fits, tooltip always" rule is how real treemaps stay legible across wildly different tile sizes.

Responsive re-layout

Because the layout is computed from the container's measured width, the treemap re-runs on resize, repacking the tiles to fill whatever space it's given. Sorting items largest-first before laying out gives a stable, readable arrangement with the biggest tiles anchored consistently.

Data-driven and drop-in

Feed it any array of { name, value, color } and it packs them by area. Because it's dependency-free, it drops into any dashboard or report, and it's a clear reference for the recursive slice-and-dice layout that powers treemaps, disk-usage visualisers, and space-filling charts.