Treemaps - A Complete Guide

Updated for 2026 with 20 real-data examples and how to build them with Python, Plotly Studio or a coding agent.

TL;DR

• A treemap shows a hierarchy as nested rectangles, where each rectangle's area is proportional to its value. It is the best chart for seeing the size of hundreds of parts of a whole on one screen.
• Use one when your data is a tree of positive values that add up (budgets, market caps, disk usage, sales by region and product) and the question is "what's big, and where does it sit?"
• Avoid it for close values that need precise comparison, for negative numbers, and for anything over time. A sorted bar chart beats a treemap below about ten items, and above about 1,000 tiles Plotly takes noticeable time to draw one, so aggregate first.
• Area already shows size, so use color for something else: a group, a highlight, or a second measure like growth or return.
• In Python, px.treemap(df, path=[...], values=...) makes one in one line of code. The 20 examples below come with code and a prompt you can paste into Plotly Studio or a coding agent.

Most data people work with is a hierarchy, even when it arrives as a flat table. Sales roll up from products to categories to regions, a cloud bill rolls up from resources to services to accounts, and a federal budget rolls up from programs to bureaus to agencies. The usual tools for showing parts of a whole start to break down with this kind of data. A pie chart becomes unreadable past five or six slices, and a bar chart can show one level at a time but loses which items belong together.

A treemap fits a few hundred items into one rectangle and keeps the nesting, so you can see the big picture and the detail at once. That's why it shows up wherever there are a lot of parts and the question is where the bulk sits: stock market maps, disk usage tools, budget explorers and trade atlases. This guide covers what a treemap is, when to use one and when not to, the styling choices that separate a clear treemap from a wall of colored boxes, and 20 examples built from real public data, each with a tip on what makes it work and a prompt to rebuild it. A reference table of the Plotly options for customizing a treemap is at the end.

What is a treemap?

A treemap draws a tree (a hierarchy of categories) as rectangles nested inside rectangles:

• The root is the whole rectangle. It is the total of everything, so it is usually not drawn as a tile of its own.
• Parents are groups, like a sector or a budget bucket. Each parent is a rectangle subdivided into its children, often with a header strip for its label.
• Leaves are the items at the bottom of the tree, with no children of their own. Every leaf's area is proportional to its value.
• Color is free to encode something else: the group a tile belongs to, a highlighted story, or a second number such as growth.

Because every parent is exactly filled by its children, the values have to be positive and have to add up.

A short history

Ben Shneiderman invented the treemap around 1990 at the University of Maryland's Human-Computer Interaction Lab, because the lab's 80-megabyte hard disk, shared by 14 users, kept filling up, and no directory listing could show which folders and files were taking the space. He published the idea in 1992 in ACM Transactions on Graphics ("Tree visualization with tree-maps: 2-d space-filling approach"). The first layouts, called slice-and-dice, cut the rectangle into long thin strips that were hard to compare. In 2000, Mark Bruls, Kees Huizing and Jarke van Wijk published the squarified layout, which keeps tiles as close to square as possible, and it is still the default in Plotly and most other tools.

The treemap became famous through the stock market. Martin Wattenberg's Map of the Market for SmartMoney.com, launched in 1998, drew about 500 companies sized by market capitalization and colored green or red by the day's price change, and that design is still the standard way to show a stock market at a glance (example 1 below is one). Disk usage tools such as WinDirStat still draw treemaps for the job they were invented for (example 16).

Treemap vs sunburst vs icicle vs bar chart

Plotly has three charts for hierarchies, and they draw the same data in different shapes:

• A treemap uses area inside a rectangle. It's the best at comparing many sizes at once and uses every pixel, so it scales to hundreds of leaves.
• A sunburst draws each level as a ring around the center. It shows the depth of the tree clearly, but angles and curved areas are harder to compare than rectangles, and outer rings get crowded.
• An icicle is a sunburst unrolled into columns. It reads left to right like an org chart and makes the levels obvious, but small items become thin slivers. It's the same layout as the flame graphs developers use to read CPU profiles (Brendan Gregg's design), where each row is one level of the call stack and a function's width is the time spent in it.
• A bar chart compares one level very precisely on a common baseline, and loses the nesting.

When to use a treemap

Use a treemap when you have a lot of positive values that belong to groups, and the question is about proportion: what's big, how much of the total it is, and which group it belongs to. It's especially good when the data is too big for a bar chart. A sorted bar chart of 500 companies is a scrolling list, while a treemap of 500 companies fits on one screen and still shows that technology is a third of the market (example 1).

A quick test: write the sentence "every X belongs to exactly one Y, and the Xs add up to the Y". If it's true for every level of your data and the values are positive, a treemap will work.

When to avoid a treemap

People judge length on a shared baseline far more accurately than they judge area, as William Cleveland and Robert McGill showed in their 1984 graphical perception experiments, and Jeffrey Heer and Michael Bostock confirmed in a crowdsourced replication in 2010. A treemap trades that precision for density. When the number of items is small, or two values are close and the difference matters, a bar chart is the better chart:

A few more cases where a treemap goes wrong:

• Flat data with no hierarchy and few items. Five tiles in a rectangle is a less precise pie chart.
• Deep trees drawn all at once. Past three levels, nested headers eat the space and the leaves become slivers. Show two or three levels in the static image and let readers drill down in the interactive version (example 15).
• Extreme ranges. When one item is 10,000 times bigger than another, the small one isn't drawn at all. That can be the story (example 11), but if the small items matter, use a log-scaled bar chart or zoom into a second treemap.
• Values that don't add up. Percentages that overlap, averages, or rates (like per-capita income) can't be summed into a parent, so they shouldn't be tile sizes. Put them in the color instead.

Treemap styling guidelines: dos and don'ts

Plotly's defaults are made for exploring: they show every label, give each top-level group its own color from a rainbow palette, and draw the root as a big tile with a breadcrumb bar above it. For a chart you're going to publish, most of the work is deciding what to exclude:

The biggest decision is color. Area already shows the size, so a color scale that repeats the size adds nothing. Color by group when the groups are the point, gray everything except one group when there's a single story, or encode a second variable when there's a relationship to show:

Do

• Write a title that states the takeaway. "Shelter is a third of the CPI basket" beats "CPI weights".
• Put the value and the share on the tiles. texttemplate="<b>%{label}</b><br>%{value:$,.0f}<br>%{percentRoot:.1%}" saves every reader a hover.
• Hide labels that don't fit with uniformtext=dict(minsize=10, mode="hide"). A blank small tile is better than ant-sized text, and the hover still works.
• Separate groups with white lines, tiling.pad and header strips (marker.pad.t), so the eye can find the hierarchy without color.
• Use color for one thing, and say what it means in the subtitle or a colorbar. Center diverging scales on a meaningful value with marker.cmid (zero, or the overall average).
• Fold the long tail into "Other" within each parent, and draw "Other" in gray.
• Hide the root when it's just "Total" (root_color="#ffffff", start the tree at the first real level), and hide the pathbar in static images.
• Name the source and any grouping you made in the subtitle.

Don't

• Don't color by size. It's redundant with area, and it makes the biggest tile shout for no reason.
• Don't use a rainbow. Twenty unrelated colors make the reader look for a meaning that isn't there.
• Don't size tiles by rates, averages or percentages. Only quantities that add up can be areas.
• Don't show more than two or three levels at once in a static chart.
• Don't use a treemap for a handful of values or close comparisons. Use a bar chart.
• Don't rely on hover in a static image. If a number matters, it needs to be printed on the tile or in the text.

Tiling: squarify, binary, slice and dice

Plotly can lay the tiles out six ways with tiling.packing. Squarify (the default) makes tiles that are easiest to compare. Binary is similar, but splits more evenly, so the layout jumps around less when the data updates in a dashboard. Slice, dice and their combinations keep a strict order, which turns a one-level treemap into a 100% stacked bar and works well for things with a natural order, like age bands or time periods.

Treemap limitations, and how to work around them

Treemaps have a few limits that are worth knowing before you build one for a dashboard or a report. Some come from the chart form itself and some from how Plotly draws it, and most have a workaround.

Performance: keep it under about 1,000 tiles

Plotly draws treemaps as SVG, with about four SVG elements per tile, so the time to draw grows quickly with the number of tiles. We timed Plotly.newPlot on two-level treemaps of 100 to 100,000 tiles in headless Chromium on a 4-vCPU cloud server. Up to 1,000 tiles, a treemap draws in under 0.3 seconds. At 5,000 tiles it takes about 2.4 seconds, at 10,000 about 6 seconds, and at 100,000 tiles (400,000 SVG elements) about 37 seconds. A laptop will be faster than our server, but the curve has the same shape, and timings varied by about 30% from run to run.

None of the examples in this guide comes close to the limit. The largest are the election map (3,212 tiles, about 1.1 seconds to draw) and the plotly package (1,569 tiles, under half a second); the other 18 draw in under 0.2 seconds. When your data is bigger, these are the fixes, from most to least effective:

• Aggregate before you plot. Fold small items into "Other" tiles in pandas, as most of the examples here do. Nobody can read 10,000 tiles on one screen anyway, and 100 tiles draw in about 60 ms.
• Limit the depth. With 10,000 leaves in three levels, maxdepth=2 cut the draw time from 8.2 to 2.5 seconds, and readers can still click into a branch to see its leaves.
• Turn off tile text. textinfo="none" cut the same chart to 1.8 seconds, because measuring and fitting text is a large share of the work. Keep the hover so the values are still there.
• Load one branch at a time in Dash. Draw only the top two levels, and use the clickData of the dcc.Graph in a callback to fetch and draw the clicked branch, so the browser never holds the whole tree.

Values must be positive and add up

A tile can't have a negative area, so losses, net outflows and declines can't be tile sizes. Size by an absolute quantity and put the signed number in the color, like the returns in example 1 or the job changes in example 7, or draw the gross amounts and say what was netted out, as the federal spending example does. Values also have to add up: rates, averages and percentages can't be summed into a parent, and with branchvalues="total", a parent whose children add up to more than its own value makes plotly draw an empty chart without raising an error. Assert that every parent equals the sum of its children before you plot.

Area is hard to compare, and layouts move

People compare areas much less accurately than lengths on a shared baseline, so a treemap is a poor choice when the reader needs to tell 41% from 44% (see the bar chart comparison earlier in this guide). The squarified layout also reorders tiles when the values change, so the same company or product can jump to another corner between two dates. If you show treemaps for several periods side by side, or update one live in a dashboard, keep your own order with sort=False and use an ordered layout such as tiling.packing="slice-dice", or compare the periods with a line chart instead.

How to make a treemap

There are three good ways to get from a dataset to a treemap: write the Plotly code yourself, let Plotly Studio build it for you, or ask a coding agent. They all end with a Plotly figure you can tweak.

In Python with Plotly

If your data is a flat table with one row per item and a column for each level, Plotly Express does it in one line. px.Constant adds a single root above your top level:

When the tree doesn't come from a table, for example when parents have their own values or the same label appears under two parents, use go.Treemap with explicit ids. Give each node a unique id (the path works well), the id of its parent, and a value. With branchvalues="total", each parent's value must equal the sum of its children:

Real data usually has a long tail, and a treemap of hundreds of tiny tiles is hard to read. This short function keeps the largest top_n children of every parent and folds the rest into one "Other" tile, and px.treemap does the rest:

In a Dash app, a treemap is also a navigation control. Clicking a tile zooms into it by default, and the clickData of the dcc.Graph tells your callback which node was clicked (clickData["points"][0]["id"]), so you can filter a table or a second chart to that branch. Setting level from a callback zooms the treemap to a node programmatically.

With Plotly Studio

Plotly Studio is a desktop app where you point an AI at a dataset, ask questions, and it builds charts and a Dash app around the answers. To get a treemap, ask for one and describe the hierarchy and what the color should mean:

Show a treemap of S&P 500 companies grouped by sector, sized by market cap and colored by return this year on a red to green scale centered on zero. Put the ticker and return on every tile, hide labels that don't fit, and add a dropdown to switch the color between 1-day, 1-month and year-to-date return.

Because the result is a Dash app, you can keep asking for more. Ask for a click on a sector to filter a table of its companies, and the treemap becomes the main way people move around the app.

With a coding agent

Claude Code, Cursor, Copilot and other coding agents are very good at Plotly, and a precise prompt gets you most of the way to a publishable treemap. Spell out the hierarchy, what size and color mean, and the checks you want:

The last check is worth keeping in every treemap prompt. Treemaps fail quietly when the numbers don't add up: with branchvalues="total", if any parent's children sum to more than the parent, plotly draws an empty chart and Python raises no error.

20 treemap examples with real data

Here are 20 treemaps built from real public data, grouped by the kind of data they show: money and markets, the economy and people, the planet and life, and software, products and cities. Each one comes with its data source, the one technique that makes it work, and a prompt you can paste into Plotly Studio or a coding agent to build it yourself. Every chart was built with plotly and pandas alone, so each prompt gets you most of the way to the same image.

Money and markets

Money is the most common thing people draw as a treemap, because every dollar of a budget, a portfolio or an export basket belongs to exactly one line, and the lines add up. These five also show the main ways to use color: a second measure (returns, inflation), a highlight (one class of drugs) and a top-level group (sectors, agencies).

1. The S&P 500 market map

This is the chart that made treemaps famous, in the layout Martin Wattenberg designed for SmartMoney's Map of the Market and finviz later made a daily habit for traders. Each of today's 495 S&P 500 companies is sized by its market value at the end of 2025 ($62.3 trillion in total) and colored by its 2025 price return. Together they gained 17%, but the gains were uneven. Alphabet rose 65% and pulled communication services up 34%, Nvidia (+39%) and Broadcom (+49%) led tech, while Apple (+9%) and Amazon (+5%) barely moved, and UnitedHealth's 35% drop is the brightest red tile in health care. Data: SEC EDGAR (shares outstanding), Yahoo Finance (prices), datasets/s-and-p-500-companies (sectors).

Tip: a diverging red, dark gray and green colorscale centered at zero with marker.cmid=0 and clipped at ±40% with cmin and cmax, on a #1a1a19 background. textfont.size is a list that grows with the square root of market cap, so big companies get big tickers.

Getting the market caps right took more work than the chart. Yahoo's historical closes are adjusted for stock splits made after 2025 (Booking split 25 to 1 in 2026, so its unadjusted market cap came out at about $7 billion), and one company tags its SEC filing with 89.2 billion shares instead of 89.2 million. The fetch script corrects both, and it's a good reminder to sanity-check the biggest and smallest tiles before you publish a market map.

2. US federal spending by agency

In fiscal 2025, four agencies made 76% of the $7.78 trillion of federal outlays drawn here: Health and Human Services ($2,079B), the Social Security Administration ($1,645B), Treasury ($1,298B) and the Defense Department's military programs ($871B). The other 25 agencies share one gray block. Social Security retirement and survivors benefits ($1,415B) is bigger than every agency except HHS, and interest on the debt held by the public ($974B) is more than all of Defense's military programs. Treemaps can't draw negative numbers, so offsetting receipts such as Medicare premiums are left out and the tiles add up to more than the official $7.01 trillion net total; the subtitle says so. Data: US Treasury, Monthly Treasury Statement, September 2025, Table 5.

Tip: two levels with each tile's share of the total printed through %{percentRoot:.1%} in texttemplate, color for the four big agencies only, and every small agency folded into "All other agencies".

3. What's in the CPI basket, and what got more expensive

The consumer price index is a weighted basket, and a treemap can show both numbers at once, with weight as area and price change as color. Shelter is 35.6% of the basket, owners' equivalent rent alone is 26.2%, and shelter rose 3.2%, a little below the 3.7% rise for all items. The deep red tiles are small: motor fuel is 3.0% of the basket and rose 35%, and airfares rose 22%, while car insurance (-5.0%), health insurance (-9.0%) and medicinal drugs (-3.4%) got cheaper. Data: BLS CPI-U relative importance (December 2025) and indexes for September 2025 and September 2026, US city average.

Tip: the diverging scale is centered on the 3.7% all-items rate instead of zero, so blue means "rose slower than overall inflation" and red means "faster". Colors are capped 8 points either side, and an invisible scatter trace draws the colorbar.

Another way to see it: a dot plot of each item's weight against its price change, next to a bar chart of how many points each item added to the overall rate, answers "what drove inflation" directly. It shows that motor fuel, at 3.0% of the basket, added 1.04 points, more than owners' equivalent rent (0.86 points) even though rent is 26.2% of the basket. The treemap is still better for seeing what the basket looks like as a whole and where the surprises sit inside it.

4. GLP-1 drugs in Medicare Part D

Medicare Part D paid $288.7 billion for drugs in 2024 before rebates. Drawn by manufacturer and drug, with only the GLP-1 drugs in color, the class shows up across Novo Nordisk, Eli Lilly, AstraZeneca and Sanofi and adds up to $27.9 billion, 9.7% of the bill. Ozempic alone cost $13.0B, second only to the blood thinner Eliquis ($20.8B), followed by Lilly's Mounjaro ($6.3B) and Trulicity ($5.5B). The long tail of 947 other manufacturers, mostly generics, is one gray block of $97B. Data: CMS Medicare Part D Spending by Drug, 2024 (the GLP-1 flag and company grouping are ours).

Tip: highlight one group and gray everything else. A single blue picks out the GLP-1 drugs wherever they sit in the hierarchy, which is something a bar chart grouped by manufacturer can't do.

5. What the US exports

The Atlas of Economic Complexity made this view of a country's export basket familiar: every product gets area in proportion to its value, colored by sector. The US exported $2.18 trillion of goods in 2025, and mineral fuels ($309B, mostly refined petroleum, crude oil and gas), machinery ($284B) and electrical equipment ($226B) were 38% of it. Aircraft ($164B) and precious metals ($148B) come next, and gold alone was $80.6B. Data: US Census Bureau trade data via UN Comtrade, HS 2022 (sector grouping is ours).

Tip: three levels (sector, chapter, product) where only the top level picks the color, so every chapter and product inherits its sector's hue, and uniformtext=dict(minsize=10, mode="hide") drops the labels that don't fit instead of shrinking them.

The economy and people

Treemaps are a good answer to the problem with maps: on a map, area is land, and land is rarely what you want to compare. These five size countries, industries, counties, teams and degrees by what they actually produce or count.

6. World GDP by continent and country

The world economy produced $110.6 trillion in 2024 in current dollars, and the United States ($29.3T) and China ($18.7T) made 43% of it. A world map gives the most ink to Russia, Canada and Africa, while this chart sizes every country by its output: the 52 African economies with 2024 data add up to $2.9T, 2.6% of the world, which is less than France alone ($3.2T). Germany, Japan, India and the UK are each bigger than the whole continent too. Countries under 0.1% of world GDP are folded into one tile per continent, so the chart has about 100 tiles instead of 200. Data: World Bank, World Development Indicators (NY.GDP.MKTP.CD, 2024); continents from Our World in Data.

Tip: px.treemap(df, path=[px.Constant("World"), "continent", "country"], values="gdp_usd_bn", color="continent") builds the whole hierarchy from a flat table in one line, and update_traces adds the header strips and labels.

7. Where US jobs are growing and shrinking

US payroll jobs by industry in September 2026, with tile size as the number of jobs and color as the change over the previous 12 months. Health care and social assistance added 520,000 jobs, more than the 496,000 net gain of the whole economy, led by ambulatory care (+213k), social assistance (+149k) and hospitals (+108k). The red tiles are smaller: the federal government lost 232,000 jobs (-8.0%) and information lost 120,000 (-4.2%). A bar chart of job changes would make those small industries look as important as retail, while here retail's 15.5 million jobs fill a big, nearly neutral tile. Data: BLS Current Employment Statistics, seasonally adjusted, September 2026 (preliminary) vs September 2025.

Tip: size is the level and color is the change, on a diverging scale with cmid=0 clipped at ±4%, so small industries with big swings stand out without hiding how big each industry is.

8. The 2024 election, sized by votes instead of land

A county map of the 2024 election is mostly red, because most of the country's land is rural. This treemap sizes each of about 3,160 counties by the votes it cast and colors it by the Trump minus Harris margin, and the country now looks about as close as Trump's 1.5-point popular vote margin. Los Angeles County alone cast 3.73 million votes, more than 37 states and DC. Thick white lines mark state borders, and only the states and the largest counties are labeled, so the thousands of small counties read as texture. Data: county results compiled by Tony McGovern from Fox News results (tonmcg/US_County_Level_Election_Results_08-24), checked against the FEC's official totals; Alaska is reported by state house district.

Tip: a diverging blue-white-red scale with marker.cmid=0, clipped at ±60 points, and state borders drawn with a per-tile marker.line.width list (2.5 px for states, 0.3 px for counties).

Another way to see it: a bubble map puts a circle on each county, sized by votes and colored by margin, so it keeps the geography and still shows where the voters are. The 452 counties Harris won (counting DC as one), mostly big metro circles like Los Angeles with 3.73 million votes, cast 76.0 million votes, close to the 78.5 million cast in the 2,661 counties Trump won. Circles overlap along the crowded East Coast, so the treemap is still better for comparing sizes, which it can do because it gives up geography.

9. Paris 2024 Olympic medals

Each of the 1,044 medals from the Paris 2024 Olympics gets the same area in this treemap, grouped by continent and team and colored gold, silver and bronze. The US and China tied on 40 golds, and the tiles show how differently they got there: gold is 44% of China's 91 medals and 32% of the US's 126. European teams together won 415 medals, 40% of the total. Every team tile is a light neutral, so the three metal colors are the only saturated color in the chart. Data: Wikipedia's 2024 Summer Olympics medal table (the IOC table after official changes); continents from Our World in Data.

Tip: the leaf level repeats the same three categories under every parent, so the leaves are colored by category and sort=False, with rows ordered gold, silver, bronze, keeps the metals in the same order inside every team.

10. US bachelor's degrees by field

US colleges awarded 2.02 million bachelor's degrees in 2021-22. Each field is sized by its degrees that year and colored by its change since 2012-13. Business is still the largest field with 375,418 degrees, but it grew only 4%, so its tile is nearly neutral. Computer science is the darkest blue, up from 50,961 to 108,503 degrees (2.1 times as many), and English and foreign languages both fell 36%. Two stories that would normally need two bar charts, which field is biggest and which is growing, fit in one chart. Data: NCES, Digest of Education Statistics 2023, table 322.10 (2021-22 is provisional; the broad areas are our grouping).

Tip: clip the diverging scale (cmin and cmax at ±50%, cmid=0) so computer science's +113% doesn't wash out every moderate change.

Another way to see it: a slope chart of the 16 fields that were among the 15 largest in either year shows each trend more precisely, such as computer science more than doubling from 50,961 to 108,503 degrees while English fell from 52,401 to 33,429. It drops the part-of-whole view, so business's lead and the size of the broad areas are harder to see than in the treemap.

The planet and life

Science data is full of hierarchies (kingdoms and phyla, causes of death, energy sources by country) and of values that span many orders of magnitude. These five show how to handle both, including one that zooms into a tile too small to see.

11. The weight of all life on Earth

All life on Earth adds up to about 550 billion tonnes of carbon, and plants are 82% of it, so animals (2.48 Gt C, 0.45%) would be a speck in a single treemap. This figure draws two treemaps side by side, all life on the left and the animal tile enlarged into its own panel on the right, joined by zoom lines. Inside the animals, marine arthropods (38%) and fish (27%) dominate, and the mammal corner shows how much people have changed the planet: livestock weigh 0.107 Gt C and humans 0.055 Gt C, while all wild mammals on land and at sea weigh 0.007 Gt C, so humans outweigh them about 7.5 to 1. These are the paper's best estimates, and some carry 10-fold or larger uncertainty. Data: Bar-On, Phillips and Milo, "The biomass distribution on Earth", PNAS 2018 (doi:10.1073/pnas.1711842115).

Tip: two go.Treemap traces placed with domain, the second holding the animal subtree re-rooted, and zoom lines drawn with add_shape from the animal tile to the right panel. When one value is thousands of times smaller than the total, zoom into it instead of letting it disappear.

Another way to see it: a bar chart on a log scale shows the full range from plants (450 Gt C) to wild birds (0.0017 Gt C) precisely, and makes it easy to read that humans (0.055 Gt C) outweigh all wild mammals (0.0073 Gt C) about 7.5 to 1. It loses the sense of how small animals are next to plants, which the treemap's area shows directly.

12. CO2 emissions, total and per person

Area can only show a measure that adds up, but color can carry a second one. Here tile size is each country's fossil CO2 in 2024 (37.4 billion tonnes across all countries) and color is tonnes per person. China is by far the biggest tile at 12,289 million tonnes, 2.5 times the US, but its color (8.7 t per person) is lighter than the US (14.2 t, 1.6 times China's), Russia, Canada and Australia. India is a big pale tile at 2.2 t per person, and the darkest tiles are small Gulf states: Qatar at 41 t and Kuwait at 26 t. Data: Global Carbon Project via Our World in Data, 2024.

Tip: size and color carry two different measures, total and per capita. The color of each grouped "Other <continent>" tile is the group's total CO2 divided by its total population, not an average of the countries' rates.

13. The world's electricity mix

The world generated 30,912 TWh of electricity in 2024. This treemap splits it by country and then by source, with each source keeping the same color under every country, which makes comparisons between countries possible at a glance. China's coal tile (5,828 TWh, 58% of China's power) is bigger than the entire United States (4,391 TWh), France is mostly purple nuclear (68%), and Brazil is mostly blue hydro (55%). Solar made 6.9% of the world's electricity, and 39% of that came from China. Data: Ember, Yearly Electricity Data, 2024.

Tip: leaf colors are set by source in marker.colors and never inherited from the parent, and the legend comes from invisible go.Scatter traces with square markers, because treemaps have no legend of their own.

Another way to see it: a 100% stacked bar for each country puts every mix on the same baseline, so you can read directly that fossil fuels make 98% of Saudi Arabia's electricity and 5% of France's, and that coal alone is 75% of India's. It compares mixes better than the treemap does, but every bar has the same length, so China's coal and the US total no longer look as big as they are, and the chart prints each country's TWh next to its name instead.

14. What the world dies of

The World Health Organization sorts every death into three categories, then cause groups, then causes, which maps directly onto a three-level treemap. Noncommunicable diseases were 74% of the 61.1 million deaths in 2023, and cardiovascular disease alone killed 19.9 million people (32.6%), more than all infections, maternal, newborn and nutritional causes together (11.1 million). Ischaemic heart disease (9.47M) and stroke (6.84M) are the two largest tiles, followed by COPD (3.62M). Data: WHO Global Health Estimates 2023, world, both sexes, all ages.

Tip: one hue per category, with group headers a little lighter and causes lighter still. It's the idea behind marker.depthfade, done by hand so each step is controlled, and it means even a small tile shows which category it belongs to.

15. Every described species, down to the beetles

The Catalogue of Life lists 2,086,650 described living species of cellular life, and a treemap taken down to the order level shows how unevenly they are spread. Animals are 1,490,279 of them, and insects alone are 1,012,723, which is 68% of animals and almost half of everything described. Beetles (332,013 species) are the largest single tile, 4.4 times all vertebrates together (76,070: the fish, reptiles, birds, amphibians and mammals colored blue), and mammals are just 6,368 species. Data: Catalogue of Life (COL26.10, October 2026) via the ChecklistBank API; viruses are excluded.

Tip: maxdepth=4 limits how many levels the static image draws, while the interactive version keeps the whole tree, so readers can click any branch to zoom in. Color is used for one comparison only: beetles, other insects and vertebrates.

Another way to see it: an icicle chart lays the same tree out as columns (kingdom, phylum, class, then order for insects), so you can read each level down its column and see where the tree stops early and where it goes four levels deep. Beetles alone are 332,013 species, or 15.9% of everything described. The icicle shows the shape of the hierarchy more clearly, but the 76,070 vertebrates shrink to thin blue lines that need a label outside the chart, so the beetles-versus-vertebrates comparison lands harder as treemap area.

Software, products and cities

Treemaps started as a tool for looking at files on a disk, and they are still the best way to see where the bulk of a codebase, a download count, a sales report or a city's complaint log sits.

16. What's inside the plotly Python package

Ben Shneiderman invented the treemap to find out what was filling up a hard disk, so here it is doing that job on plotly itself. The 7.1.0 wheel installs 1,549 files and 40.4 MB, and 48% of that is four JavaScript files that each contain plotly.js: the standalone plotly.min.js for offline HTML, the FigureWidget bundle, and the same JupyterLab extension bundle installed in two places. Most of the rest is the generated graph_objs classes, 1,416 Python files that make up 40% of the package. Data: the plotly 7.1.0 wheel on PyPI, every file with its uncompressed size.

Tip: folders get header strips with marker.pad.t and gaps with tiling.pad, so the treemap reads like a file explorer. Files are colored by type and folders stay a light neutral.

Point the same code at your own project's node_modules, Docker image layers or data lake folders. A treemap of disk usage almost always turns up one or two files nobody knew were there.

17. Python's most downloaded packages

The packages Python downloads most are mostly libraries that other libraries install for you. Over the 30 days to October 1, 2026, the top 150 packages on PyPI were downloaded 70.9 billion times, and HTTP and networking libraries such as idna, urllib3, certifi and requests took 21.0% of that. boto3, the AWS SDK, is the most downloaded package at 2.46 billion. The data and science libraries most readers here work with every day (numpy, pandas, pyarrow, scipy and others) add up to 5.8%. Plotly is #418, with 50 million downloads, so even at 0.07% of this total it sits in the top 0.05% of the roughly 932,000 projects downloaded that month. Its tile would be about 25 pixels square here, too small to lay out and label, so the chart draws it under the treemap at that size instead. Downloads count CI runs and mirrors as well as people, so this measures how often a package gets installed, not how many users it has. Data: hugovk/top-pypi-packages, 30 days to October 1, 2026 (grouping is ours).

Tip: packages under 0.4% of the total are folded into a "+N more" tile inside each category, kept last with sort=False, and only one category is in color. A package you want to point out that's too small for its own tile can go in a callout with a square drawn to the same scale.

18. An online shop's revenue, and its long tail

This is real transaction data from a UK online gift retailer that sells mostly to wholesalers: £9.35 million of net revenue from 3,918 products in 38 countries over twelve months. The UK brings in 84.5%, and the best seller worldwide, a three-tier Regency cakestand, makes only 1.7% (£159k). Even the UK's top 10 products add up to just 7.3%, and products ranked 101 to 500 bring in more than the top 100 combined. Export markets are tiny and concentrated: one customer accounts for 98% of Netherlands revenue and one for 90% of Australia's. Data: UCI Online Retail II (Chen, 2012), DOI 10.24432/C5CG6D.

Tip: the long tail is folded at both levels and always in gray. UK products after the top 10 go into rank bands (11-100, 101-500, 501 and up) shaded from dark to light, and countries after the top six become one "32 other countries" tile.

Another way to see it: a Pareto chart ranks every product by revenue and draws the cumulative share, so you can read exactly where each threshold falls: 248 products (6.3% of the catalog) bring in half the revenue and 839 bring in 80%. It shows the long tail more exactly than the treemap, but it adds all 38 countries together and loses the UK versus rest-of-world split.

19. What New Yorkers call 311 about

New Yorkers filed 3,655,042 service requests with 311 in 2025, and 833,000 of them (22.8%) were about noise. They went to three different agencies: the police for residential, street, commercial and vehicle noise, Environmental Protection for construction noise, and the Economic Development Corporation for helicopters. The largest single complaint type is illegal parking at 577,257, a third of everything the NYPD receives. On the housing side, heat and hot water complaints (315,946) are 41% of the housing department's requests. Data: NYC Open Data, 311 Service Requests from 2010 to Present, requests created in 2025.

Tip: texttemplate="<b>%{label}</b><br>%{value:,} · %{percentParent:.0%}" prints each tile's count and its share of its agency, and one color follows a theme (noise) across every agency it appears under.

20. Who operates the satellites in orbit

As of October 17, 2026, Jonathan McDowell's satellite catalog counts 17,038 active satellites in Earth orbit, and 11,137 of them (65.4%) are SpaceX Starlink. The next largest operators, Eutelsat OneWeb (652) and Amazon's Kuiper (392), are each less than a sixth of Starlink's size. The 3,771 satellites outside the eight largest operators belong to 972 other owners. Hatched tiles mark 1,243 military satellites, led by the US National Reconnaissance Office's 290. McDowell notes that "active" is often a judgment call, so treat the counts as approximate. Data: Jonathan McDowell, GCAT active catalog, October 17, 2026 (operator grouping is ours).

Tip: one dominant tile is the only color on the page, with its share written large across it, and marker.pattern.shape="/" adds a second attribute (military or not) without using a second color.

Another way to see it: a waffle chart of 100 squares, each about 170 satellites, makes Starlink's share literal: 65 of the 100 squares are blue, against 4 for Eutelsat OneWeb and 2 for Amazon Kuiper. It is easier to count than the treemap, but the 976 other owners collapse into 25 identical light gray squares, so it can't show what those satellites do or which ones are military.

Summary

A treemap is the right chart when you have many positive values in a strict hierarchy and the question is about proportion: what's big, how much of the whole it is, and where it sits. Budgets, markets, portfolios, disk usage, trade, emissions, population and counts of anything by category all fit. Before you draw one, check that the values add up and that a sorted bar chart wouldn't do the job better. Then fold the tail into "Other", put the values on the tiles, keep two or three levels in a static image, use color to say something area can't, and put the takeaway in the title.

When a treemap isn't the right fit, the alternatives are one line of Plotly away: a sorted bar chart for a few items or close values, a sunburst or icicle when the depth of the tree is the story, a waterfall for gains and losses, and a Sankey diagram (see our Sankey diagram guide) when money or materials flow through stages.

Pick any of the 20 examples above, paste its prompt into Plotly Studio or your coding agent, and swap in your own data.

Plotly treemap options, explained

For reference, these are the options that matter most in go.Treemap (and px.treemap), what they do, and when to reach for them. The full reference lives in the Plotly treemap documentation.