Treemap & Sunburst Maker

About the Treemap & Sunburst Maker

Show how a whole splits into parts, and those parts into smaller parts: a budget into categories and items, sales into regions, countries and cities, a disk into folders, a company into teams. Type an indented list (Rent: 1200 under Home), paste columns of levels from a spreadsheet (Region, Country, City and a Sales column), a column of paths (photos/holidays), or a table of items and their parents, and get the same hierarchy as four charts.

A treemap fills a rectangle with tiles whose areas follow the sizes; a sunburst draws each level as a ring; circle packing nests circles; a tree draws the branches as a node-link diagram you can fold. Click a group to zoom into it, colour by branch, by level or by size, and read every item’s size and share in the table under the chart. Everything is read and drawn in your browser.

Common uses

• Seeing at a glance where a budget, an invoice or a set of expenses goes.
• Sales, stock or population by region, country and city for a report or a slide.
• Finding the folders that fill a disk from a list of paths and sizes.
• Drawing an organisation, a product catalogue or a taxonomy from a parent–child table.
• Comparing the parts of a whole that has too many slices for a pie chart.

Four ways to write a hierarchy

• Indented list — one item per line; an item indented under another belongs to it. Spaces, tabs and bullets (-, *, •) all work. Write a size after a colon, an equals sign, a tab or two spaces (Rent: 1200, Rent = 1200), or in brackets (Rent (1200)). Lines starting with // are comments.
• Columns of levels — one column per level (Region, Country, City), left to right, and a column of sizes. Rows with the same path are added together, and a blank cell under a name means the same name, as pivot tables write a group once.
• One column of paths — photos/holidays, Asia › Japan › Tokyo or Root > Child. The separator is found by itself (›, », >, /, \, | or ::), or choose it.
• Items and their parents — a column of items and a column naming each one’s parent (columns called Parent, Reports to or Manager are found by themselves). An empty parent makes a top-level item; parents without a row of their own are added, and parents that go round in a loop are cut at the top.

How sizes are worked out

Each item without items under it is drawn at its size; a group is the total of its items. When a group also has a value of its own, choose what it means: its total (the part its items do not cover is drawn as “(other)”), nothing (the group is its items’ total), or its own part, added to its items (drawn as “(itself)” beside them). Data without sizes is drawn by count: each item counts once. Negative sizes cannot be areas, so they are left out and listed under the data.

Shares in labels and in the table are of the item’s group or of the whole in view, as you choose; zooming into a branch makes that branch the whole.

Treemap, sunburst, circles or tree?

• Treemap — the most compact: every pixel shows data, and areas compare well within a group. The squarified layout of Bruls, Huizing and van Wijk keeps tiles close to square, largest first; slice and dice, the original layout in Ben Shneiderman’s treemap history, cuts strips in your order and changes direction at each level.
• Sunburst — each level is a ring and angles follow the sizes, so the levels are easy to tell apart; the inner rings are short, so it suits a few levels with a handful of items each.
• Circle packing — each item is a circle whose area follows its size, nested in its group’s circle. The empty space between circles makes it less exact than a treemap, but the nesting is very clear. Circles are placed with the front-chain method that d3-hierarchy’s pack layout uses.
• Tree — a node-link diagram: the structure first, sizes in the labels (and optionally the circles). Fold branches you do not need with a click.

Zoom, fold and levels

Click any group in a treemap, sunburst or circle chart to zoom one level into it; click the middle of the sunburst, the space around the circles or Up one level to go back. Zoom into reaches any branch from the keyboard. Levels shown draws only the first levels below the item in view and adds deeper items into their groups. In the tree, a filled circle is a folded branch: click it to open it again, or use Unfold all. Zooming and folding change the view, not the result, so an unlocked result stays unlocked while you explore it.

Limitations

• Up to 5,000 items and 16 levels; summarise the deepest level first for larger data (for example with a pivot table).
• Items smaller than about a pixel are not drawn at the chosen size, and labels that do not fit are left out; zoom in, pick a bigger size, or read them in the table.
• Circle packing leaves gaps between circles, so groups cannot be compared by area there; items can.
• Names are matched exactly, so “Asia” and “asia” are two items. In columns of levels, an item’s path is everything from its first level to its last filled cell.
• The PNG uses your device’s system font; the SVG names common system fonts, so text can look slightly different on another computer.

Privacy

On this device: nothing is sent

Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.