OneTaskBy Tim King · Updated
Treemap Maker
Nested Rectangles from an Indented List, Free
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Treemap Maker works
This treemap maker sizes rectangles by value. A treemap shows how a total breaks down into parts, and how those parts break down further, as nested rectangles whose area is proportional to value. It fits a budget, disk usage, a product range by revenue, or any list of numbers that has categories. Type the items as an indented list with a value on each leaf, and this page lays out the rectangles, colours them by top-level group and lets you download SVG or PNG. Nothing is uploaded.
Treemap maker: writing the list
Each line is one item. Indent a line by two spaces (or a tab) to make it a child of the line above it with less indentation. Put the value at the end of leaf lines after a comma or a colon: "Rent, 1400". Groups do not need a value; their size is the sum of what is under them. A leaf without a value counts as 1, which is handy for a treemap that just counts items. Lines starting with "#" are ignored. If the whole list sits under one top line, that line is the title of the treemap; if there are several top lines, each is a group.
Tiling
Squarify, the default, tries to keep every rectangle close to square so labels fit and areas are easy to compare by eye. Slice and dice alternates horizontal and vertical strips at each level, which keeps the order of your list visible but produces long thin rectangles for small items. Binary splits the items in two roughly equal halves repeatedly, a good compromise that keeps order and reasonable shapes. Items are sorted largest first inside each group in every mode.
Gaps, headers and labels
Gap sets the space between rectangles and around each group, which makes the nesting visible. Group headers reserve a strip at the top of every group for its name, drawn in the group's colour. Leaf labels show the name, or the name and its formatted value, inside each rectangle that is big enough to hold them; smaller rectangles stay unlabelled but keep their name and value as a hover title, which survives in the downloaded SVG. Number format controls how values are written: thousands separators, one decimal, currency or percentage.
Colours
Every rectangle takes the colour of the top-level group it belongs to, so the picture reads as a handful of coloured regions each subdivided into shades of white borders. The palette menu switches the colour set. Groups themselves are drawn as outlines so that only leaf areas carry colour, which keeps the area-to-value relationship honest.
Exporting
Download SVG gives a vector file with labels as text and full paths as hover titles. Download PNG renders at one, two or three times the preview width. Copy SVG puts the markup on the clipboard. Everything is drawn in your browser; the text never leaves your machine.
FAQ
How do I write nested groups?
Indent with two spaces per level, or one tab per level. A line is a child of the nearest line above it with less indentation. You can nest as deep as you like; the treemap subdivides each group into its children and colours everything by the outermost group.
Do groups need values?
No. A group's size is the sum of its descendants, so give values only to the leaves. If you put a value on a group that also has children, the children's values are used and the group's own number is ignored.
Why is a rectangle unlabelled?
Labels are only drawn where they fit: a rectangle needs to be at least about 36 pixels wide and 18 tall for a name, and 32 tall for a value beneath it. Make the preview wider, lower the gap, or hide group headers to free space. Every rectangle keeps its name and value as a hover title regardless.
Which tiling should I use?
Squarify for most charts, because near-square cells are easiest to compare and label. Slice and dice when the order of items matters more than shape, for example a ranked list. Binary when you want both order and reasonable shapes.
See also: all Diagram Makers tools, Images, Audio, Video & Screen, PDF, SVG, Simulations & Screensavers, Generative Art, Chart Makers, 3D Model Viewers, Drawing Pads, Mockups & 3D Making, 3D Science, Tracker Music.
Related tools
Sankey Diagram Maker
Type source -> target lines and download a Sankey diagram as SVG or PNG.
Pie Chart Maker
Paste label,value rows, get a labelled pie chart; download SVG or PNG.
Bar Chart Maker
Paste CSV, get a grouped or stacked bar chart; download SVG or PNG.
Indent Code
Shift every line right by a set number of spaces or tabs.
SVG To PNG
Rasterise an SVG to a PNG at any width.