Sunburst Chart
A multi-ring radial chart that reveals hierarchical part-to-whole relationships — the inner ring is the top level, and each outer ring drills deeper into the data.
// 01 — The chart
What it looks like
A two-level sunburst chart showing website content breakdown. The inner ring shows top-level sections; the outer ring shows subsections within each.
// 02 — Definition
What is a sunburst chart?
A sunburst chart (also called a radial treemap or multi-level pie chart) is a radial visualization that shows hierarchical data as concentric rings. The center represents the root; each successive ring represents a deeper level of the hierarchy.
Each arc’s angular size is proportional to its value (or the sum of its children’s values). Parent-child relationships are shown by radial adjacency: a child arc always sits directly outside its parent, occupying a subset of the parent’s angular range.
Sunburst charts are powerful for exploring nested hierarchies — file systems, organizational structures, budget breakdowns, or classification taxonomies — where you want to see both the whole and the parts simultaneously.
Origin: The sunburst chart evolved from the pie chart family in the early 2000s. John Stasko’s work on space-filling visualizations and tools like Sunburst (2000) and Sequence Sunburst by Kerry Rodden (2013) popularized the format for interactive data exploration.
// 03 — Anatomy
Parts of a sunburst chart
// 04 — Usage
When to use it — and when not to
- Exploring hierarchical data with 2–4 levels of depth
- You want to show both parent-child relationships and relative proportions
- The audience needs to drill down from overview to detail interactively
- Visualizing file system usage, organizational structures, or classification taxonomies
- The data has a natural tree structure with meaningful aggregation at each level
- Precise comparison of values is important — the radial layout makes it hard to compare arc lengths
- Your hierarchy has more than 4 levels — outer arcs become impossibly thin
- Data is flat (not hierarchical) — use a pie, donut, or bar chart instead
- The chart must be static and small — sunbursts need interactivity and space to work well
- You need to show change over time — sunbursts are for single snapshots
// 05 — Reading guide
How to read a sunburst chart
Start from the center and work outward.
Start at the center
The innermost circle is the root of the hierarchy — the "whole" that everything else is a part of. It may show a total or be left blank.
Read the first ring
The inner ring shows the top-level categories. Each arc's angular span represents its share of the total. Identify the largest and smallest arcs.
Drill into outer rings
Each outer ring breaks down its parent arc into subcategories. Trace radially outward from any inner arc to see what it contains.
Compare angular spans
Arcs at the same ring level are directly comparable. Wider arcs = larger values. But comparing arcs across different rings is misleading.
Use hover or click (interactive)
Most sunbursts are interactive. Hover to see labels and values; click to zoom into a subtree. This is where the chart really shines.
// 06 — Data format
What data do you need?
A tree-structured dataset with named nodes and values at the leaf level. Internal node values are computed by summing their children.
{
name: "Root",
children: [
{ name: "Blog", children: [
{ name: "Tech", value: 18 },
{ name: "Design", value: 12 }
]},
{ name: "Docs", children: [
{ name: "API", value: 15 },
{ name: "Guides", value: 13 }
]}
]
}// 07 — Construction
How to build one
Structure data as a tree. Each node has a name and either a value (leaf) or children (branch).
Use d3.partition() to compute the layout — it assigns x0, x1 (angular range) and y0, y1 (radial depth) to each node.
Map angular ranges to SVG arc paths using d3.arc() with inner/outer radius per depth level.
Colour arcs by top-level parent to maintain visual grouping across rings.
Add interactivity: hover for tooltips, click-to-zoom to explore subtrees.
// 08 — Common mistakes
Mistakes to watch out for
Too many levels
Beyond 3–4 rings, outer arcs become paper-thin slivers. Limit depth or allow interactive drilling instead of showing all levels at once.
No interactivity
A static sunburst with dozens of tiny arcs is unreadable. The chart needs hover tooltips and click-to-zoom to be useful.
Poor colour grouping
If each leaf arc has a random colour, the visual hierarchy breaks down. Colour by top-level parent so the grouping is immediately visible.
Missing labels
Without labels or tooltips, the chart is a pretty picture with no data. Always provide a way to identify each arc's name and value.
Comparing across rings
An arc at ring 3 looks larger in area than the same angular span at ring 1 because the radius is larger. Don't compare across levels.
// 09 — Real-world examples
Where you’ll see it in the wild
File system analysis
Tools like WinDirStat and Disk Inventory X use sunbursts to show disk usage by folder hierarchy.
Web analytics
Sequence sunbursts show user navigation paths — each ring is a step, and arcs show which pages users visited.
Budget breakdowns
Government spending visualized as department → program → line item, where each level is a ring.
Biological classification
Taxonomies from kingdom to species displayed as concentric rings, showing biodiversity composition.
// 10 — Quick reference
Key facts at a glance
Radial treemap, multi-level pie, ring chart
Hierarchical part-to-whole, drill-down exploration
2–4 rings
Yes — hover and click-to-zoom essential
D3.js, Observable Plot, Plotly, Tableau
Icicle chart (rectangular equivalent)
// 11 — Accessibility
Making it accessible
Provide a hierarchical data table as an alternative to the visual chart
Use ARIA tree roles to make the structure navigable by screen readers
Ensure keyboard navigation works for interactive sunbursts (Tab, Enter, Escape)
Add visible labels on larger arcs; use tooltips for smaller ones
Avoid relying on colour alone — use patterns or icons to distinguish categories
// 12 — Variations
Common variations
Sequence sunburst
Tracks user paths through a multi-step process, highlighting the most common navigation sequences.
Zoomable sunburst
Click any arc to zoom in, making it the new root. The chart re-renders to show that subtree in full detail.
Partial sunburst
Only a subset of the hierarchy is expanded; collapsed branches show aggregate arcs with expand affordances.
Gradient sunburst
Arc colour intensity encodes a second variable (e.g. growth rate) in addition to the proportional size.
// 13 — FAQs
Frequently asked questions
What is a sunburst chart?+
A sunburst chart (also called a radial treemap or multi-level pie chart) is a radial visualization that shows hierarchical data as concentric rings. The center represents the root; each successive ring represents a deeper level of the hierarchy.
When should you use a sunburst chart?+
Use a sunburst chart when exploring hierarchical data with 2–4 levels of depth. It also works well when you want to show both parent-child relationships and relative proportions, and when the audience needs to drill down from overview to detail interactively.
When should you avoid a sunburst chart?+
Avoid a sunburst chart when precise comparison of values is important — the radial layout makes it hard to compare arc lengths. It is also a poor fit when your hierarchy has more than 4 levels — outer arcs become impossibly thin, or when data is flat (not hierarchical) — use a pie, donut, or bar chart instead.
What data do you need to make a sunburst chart?+
A tree-structured dataset with named nodes and values at the leaf level. Internal node values are computed by summing their children.
How is a sunburst chart different from a treemap?+
Both a sunburst chart and a treemap can look similar at first glance, but they answer different questions. Reach for a sunburst chart when the comparisons and patterns it was designed to reveal match what you need to communicate, and choose a treemap when its particular strengths better fit your data and audience.
What is another name for a sunburst chart?+
Sunburst Chart is also known as Radial treemap, multi-level pie, ring chart. The name varies between fields, but the visualisation technique is the same.
What size of dataset works best for a sunburst chart?+
Sunburst Chart works best for Hierarchical part-to-whole, drill-down exploration. Outside that range the chart either looks empty or becomes too cluttered to read clearly.
Are sunburst charts accessible to screen readers?+
Yes — a sunburst chart can be made accessible to screen readers by pairing it with a clear text summary of the key insight, ensuring color choices meet WCAG contrast guidelines, adding descriptive alt text or aria-label to the SVG, and offering the underlying data as an HTML table fallback for assistive technologies.