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.
| 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 |
| Country | 1999 | 2000 | 2001 | 2002 | 2003 | |
|---|---|---|---|---|---|---|
| France | 19 | 20 | 30 | 32 | 9 | |
| UK | 15 | 22 | 25 | 20 | 21 |
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.
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.
Collapsible force layout with directed paths and images/text in the nodes.
The NASA Blue Marble is reprojected using d3.geo.kavrayskiy7’s invert function. Jason Davies has since done some amazing work on reprojecting raster tiles.
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title></title> | |
| <style> | |
| .container { | |
| width: 600px; | |
| height: 500px; | |
| float: left; |