Sunburst Chart

An interactive sunburst chart for representing hierarchical data, where each data node of a tree is represented by an annular segment within multi-layered rings.

Clicking on an arc focuses the view on the associated sub-tree, enabling a gradual exploration of the data. Clicking in the chart's center zooms out one level, while clicking on the canvas resets the zoom level to the root view. The chart also responds to data changes by animating the arcs of each of the nodes into their new positions.

By default the arcs areas are linearly proportional to their data values, resulting in a decrease of the thickness of the outer layers in a quadratic fashion. This can however be customized using the radiusScaleExponent method.

For improved performance, arcs smaller than a given threshold (minSliceAngle) are excluded from the DOM, allowing for representation of large data sets while maintaining a smooth interaction. See here for an example of a randomly generated large data structure.

See also the Icicle, Circle Pack and Treemap charts.

Quick start

import Sunburst from 'sunburst-chart';

or

Sunburst = require('sunburst-chart');

or even

<script src="//unpkg.com/sunburst-chart"></script>

then

const myChart = Sunburst();
myChart
    .data(<myData>)
    (<myDOMElement>);

API reference

Data syntax

{
  name: "root",
  children: [
    {
      name: "leafA",
      value: 3
    },
    {
      name: "nodeB",
      children: [
        {
          name: "leafBA",
          value: 5
        },
        {
          name: "leafBB",
          value: 1
        }
      ]
    }
  ]
}

Giving Back

If this project has helped you and you'd like to contribute back, you can always buy me a ☕!