Charts/Diagram charts
Sunburst
<Sunburst /> · 10 examples
A hierarchy as concentric rings, where each slice's angle is its share of its parent.
Overview
A pie chart has one level. That is both its charm and its problem: ask it about a company's revenue by region, and it is fine. Ask it about revenue by region, then product, then plan, and you are suddenly looking at three pies and a headache. A sunburst is what you get when you decide that a pie chart should have children.
The centre is the whole. The first ring splits it into its top-level parts, the way a normal pie would. The second ring splits each of those parts in turn, directly outside its parent and within the same angular span, and so on, ring after ring. A slice's angle is its share of the parent, and its position tells you what it belongs to. The form goes back to John Stasko's work on space-filling hierarchy displays around 2000, and became popular for exactly one reason: it fits a lot of structure into a circle and still looks good on a poster.
In zopra-charts it is also clickable. Click a slice and it becomes the new centre, with its descendants filling the rings. Click the centre to climb back out. That is the difference between a nice picture and a thing you can actually explore.
Props
API
<Sunburst data={files} path={|f: &File| f.path} value={|f: &File| f.bytes} />| Prop | Type | Default |
|---|---|---|
data | one row per leaf | required |
path | Fn(&T) -> &str: "a/b/c" | required |
value | Fn(&T) -> f64 | required |
separator | text between levels | "/" |
root | label of the centre | "Total" |
levels | usize: rings drawn at once | all |
Rows with the same path add up; parents are the sum of their children. Colours follow the top-level branch and get lighter with depth. Click a slice to make it the centre; click the centre to go back up. The tooltip shows the value, the share of the parent and the share of the total.
Run them
10 examples
Press Run to load an example into the live render at the top of the page. Open one to read its code.
How to read it
- 01Start in the centre: that is the whole, with its name and total printed in the hole.
- 02Read the first ring as an ordinary pie. Each slice is a top-level group. Its colour is the family colour for everything beneath it.
- 03Move outward. A slice's children sit directly outside it within its angle. Pale wedges are deeper levels.
- 04Click any wedge to make it the centre and give its children the full circle. Click the centre to go back up one level.
- 05Hover for value, share of parent and share of total.
When to use it, and when not to
Reach for it when
- You have a hierarchy with sizes and want to see the shape of the whole and drill into parts: sales by region, product and plan. Budget by division and project.
- There are two to four levels and each has a handful of children. That is where the rings stay readable.
- Parts of a whole is the story, and the nesting matters: what belongs to what is as important as how big it is.
- The audience will click. The drill-down centre makes this a tool for exploration, not only a picture.
Skip it when
- You need to compare sizes precisely. Angles are harder to judge than lengths, and the same angle looks bigger on an outer ring. Use Icicle or a bar chart.
- The tree is deep (more than five levels) or very lopsided. The outer rings become tangles of slivers.
- The data is not nested. A sunburst of one level is a pie chart with extra steps.
- Values can be negative or zero in meaningful ways. Non-positive rows are dropped, so they cannot be shown.
The math behind it
Paths become a tree
Each row gives a path (a string such as Europe/Spain/Madrid) and a value. The path is split on the separator, which defaults to /, each piece is trimmed, and empty pieces are dropped. Pieces with the same name under the same parent are the same node, so rows pile up on shared prefixes. Rows with a non-finite or non-positive value are skipped.
The value is added to the node at the end of the path. Then totals are pushed up from the leaves, so every node holds its own value plus everything below it. The root, called Total unless you rename it, is the grand total. A parent can carry a value of its own (a path that is a prefix of another path), and the part not covered by its children shows up as a gap in the ring.
Angles and radii
Take a focused node (the root until you click) whose slice spans the angles . Its children divide that span in proportion to their totals, in the order they first appeared in the data. The angle of child is its share of the parent, so full circles are at the root and smaller wedges deeper down.
Rings are all the same thickness. The outer radius is half the smaller side of the chart less a few pixels, the hole in the middle is , and the remaining space is divided evenly among the visible levels, where is the height of the focused subtree, capped by the levels prop if you set it. A wedge too thin to see (under about radians) is not drawn at all.
Colour and labels
Colour comes from the top-level branch a node lives in, taken from the chart palette, and each deeper ring is lightened by in lightness (capped so it never goes white). That means a whole family is one hue, graded from dark at the middle to pale at the rim.
A name is printed inside a wedge only if the arc length at the middle of its ring is wider than the text plus a margin, so small slices stay quiet. Hover shows the node's value, its share of its parent and its share of the total.
Real life usage
The pie chart that wanted a sequel
Anneke worked at a chain of eleven garden centres in the Netherlands, in the finance department, which she described as being the department that gets invited to the Christmas party but not to the planning. Once a year she presented revenue to the board, and once a year the board asked her a follow-up that the slide could not answer.
The slide was a pie of revenue by category: plants, tools, furniture, seasonal. The follow-up was always "and what's in seasonal?", and the answer was a second slide, and then a third for "and the plants?", and then the CEO asked to go back to the first one.
Her task was to put the whole tree on a single page: category, then subcategory, then product line, with the sizes right and the structure obvious. Preferably in a form that would survive being projected onto a wall in a meeting room whose curtains did not close.
She exported one row per product line with a path like Plants/Perennials/Lavender and the revenue, and gave them to <Sunburst> in zopra-charts with the default separator. The centre read "Total" with the year's revenue, and the first ring looked like the pie the board was used to.
The outer rings were the surprise. Under Seasonal sat a thick slice called Christmas trees, and under Plants a surprisingly wide wedge called Herbs, which, thanks to a supplier contract, were three times as profitable as anyone had assumed. She clicked into Seasonal during the meeting and the CEO's question was answered before he finished it.
The board spent the hour looking at the chart rather than asking for the next one, which Anneke counts as a victory of format over human nature. Herbs got a bigger shelf. The Christmas trees got a polite round of applause, and a note that they were only profitable for eleven days.
She still presents it every year. The curtains have since been replaced.
Pitfalls
- The path is the structure.
Plants/Herbsandplants/herbsare different nodes. The chart splits on the separator and trims spaces, but it does not change case. - Angle is the encoding, not area. An outer-ring wedge with the same angle covers more area than an inner one, and looks bigger than it is.
- Non-positive values vanish. A row with a zero or negative value is dropped, and so is its path if nothing else shares it.
- Wedges under about 0.002 radians are not drawn. A tiny slice is not a bug. Zoom in by clicking its parent.
- Order is first appearance. Siblings are placed in the order the data introduces them, so sort your rows if you want them ranked by size.
From around the web