In response to a Stack Overflow question, How to convert to D3's JSON format?.
date New York San Francisco Austin20111001 63.4 62.7 72.220111002 58.0 59.9 67.720111003 53.3 59.1 69.420111004 55.7 58.8 68.020111005 64.2 58.7 72.420111006 58.8 57.0 77.020111007 57.9 56.7 82.320111008 61.8 56.8 78.920111009 69.3 56.7 68.8
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.
Mouseover to repel nodes. Adapted from my talk on force layouts. Compare to the canvas version.
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.
This bar chart visualizes hierarchical data using D3. Each blue bar represents a folder, whose length encodes the total size of all files in that folder (and all subfolders). Clicking on a bar dives into that folder, while clicking on the background bubbles back up to the parent folder. The effect is similar to a zoomable partition layout, though in a more conventional display.