Click on any arc to zoom in. Click on the center circle to zoom out.
A sunburst is similar to a treemap, except it uses a radial layout. The root node of the tree is at the center, with leaves on the circumference. The area (or angle, depending on implementation) of each arc corresponds to its value. Sunburst design by John Stasko. Data courtesy Jeff Heer.
Mouseover to repel nodes. Adapted from my talk on force layouts. Compare to the canvas version.
| Country | 1999 | 2000 | 2001 | 2002 | 2003 | |
|---|---|---|---|---|---|---|
| France | 19 | 20 | 30 | 32 | 9 | |
| UK | 15 | 22 | 25 | 20 | 21 |
| key | value | date | |
|---|---|---|---|
| Group1 | 37 | 04/23/12 | |
| Group2 | 12 | 04/23/12 | |
| Group3 | 46 | 04/23/12 | |
| Group1 | 32 | 04/24/12 | |
| Group2 | 19 | 04/24/12 | |
| Group3 | 42 | 04/24/12 | |
| Group1 | 45 | 04/25/12 | |
| Group2 | 16 | 04/25/12 | |
| Group3 | 44 | 04/25/12 |
The tree layout implements the Reingold-Tilford algorithm for efficient, tidy arrangement of layered nodes. The depth of nodes is computed by distance from the root, leading to a ragged appearance. Cartesian orientations are also supported. Implementation based on work by Jeff Heer and Jason Davies using Buchheim et al.'s linear-time variant of the Reingold-Tilford algorithm. Data shows the Flare class hierarchy, also courtesy Jeff Heer.
Compare to this Cartesian layout.
| date | New York | San Francisco | Austin | |
|---|---|---|---|---|
| 20111001 | 63.4 | 62.7 | 72.2 | |
| 20111002 | 58.0 | 59.9 | 67.7 | |
| 20111003 | 53.3 | 59.1 | 69.4 | |
| 20111004 | 55.7 | 58.8 | 68.0 | |
| 20111005 | 64.2 | 58.7 | 72.4 | |
| 20111006 | 58.8 | 57.0 | 77.0 | |
| 20111007 | 57.9 | 56.7 | 82.3 | |
| 20111008 | 61.8 | 56.8 | 78.9 | |
| 20111009 | 69.3 | 56.7 | 68.8 |
In response to a Stack Overflow question, How to convert to D3's JSON format?.
This simple area chart is constructed from a TSV file storing the closing value of AAPL stock over the last few years. The chart employs conventional margins and a number of D3 features:
This example is an extension of Mike Bostock’s tutorial Lets Make a Map that implements automatic label placement using collision detection. This is a proof of concept more than anything, not polished in any way.