How to Make a Treemap Online (Budget, Sales, Disk)

To make a treemap, open the Treemap Maker and type one item per line as item, value — or group, item, value for two levels, such as Europe, Germany, 420. The rectangle fills with tiles whose areas match their values, with each group as a coloured block. Choose labels — values, percentage of total, group headers — and download a PNG, JPG or SVG.

Make a treemap step by step

1. Open the Treemap Maker.
2. Type the data in Rows: [group,] item, value:

Housing, Rent, 1200
Housing, Utilities, 180
Living, Food, 450
Living, Transport, 200
Living, Phone, 40
Savings, Pension, 300
Savings, Emergency fund, 200

1. Choose the labels: Show values, Show percentage of total, Group headers.
2. Add a Prefix or Suffix — $, k, GB.
3. Pick a colour palette; hover a tile in the preview to see its full name and value.
4. Download PNG, SVG or JPG.

Why treemaps work

• They fit many categories. A pie chart struggles past six slices; a treemap shows dozens.
• They show hierarchy. Groups are big blocks, items are tiles inside — you see both the big picture and the details.
• Areas are easy to compare because the squarified layout keeps tiles close to square.

Treemap ideas

• Budgets — spending by category and item.
• Sales — by region and product.
• Disk usage — folders and files (in GB).
• Investment portfolios — by sector and holding.
• Website content — pages by section and traffic.
• Survey answers — themes and sub-themes by count.

Tips for clear treemaps

• Positive values only. A tile can't have a negative area; show gains and losses in a waterfall chart instead.
• Group small items into "Other" — tiny tiles can't hold labels.
• Two levels are easy to read; with more, the picture gets busy.
• Show percentages when readers care about shares, values when they care about amounts — or both, when there's room on the tiles.
• Keep labels short so they fit inside smaller tiles.

Treemap, pie chart or Sankey?

• Pie chart — a few shares of one whole.
• Treemap — many shares, optionally in groups.
• Sankey diagram — how amounts flow between stages.
• Heatmap — values in a table of rows and columns.

A worked example

Paste a company's sales by region and product: three regions, five products each. Group headers show that Europe is the largest block; inside it, one product takes nearly half the space — a story that would need several pie charts to tell. Turn on Show percentage of total and the slide needs no extra table.

Reading a treemap

Start with the big blocks — the groups — to see which part dominates. Then look inside the largest block for the biggest tiles. Colours separate the groups, so a quick glance answers both "which area costs most?" and "what is it made of?". Hovering over tiles in the preview shows the exact values, and Show percentage of total puts the shares on the tiles themselves.

Privacy

Your data stays in your browser — nothing is uploaded or stored.

Frequently asked questions

Can I have more than two levels?

The treemap uses up to two levels — group and item. Combine deeper levels into the item name.

Why are some labels missing?

Tiles too small to hold their label leave it out; hover over a tile in the preview to see it.

Can I paste from a spreadsheet?

Yes — copy two or three columns and paste them in.