This “icicle” diagram uses d3.layout.partition to divide space with area proportional to the value of nodes in a tree. See also the zoomable icicle.
This is a modified d3js bilevel partition in which labels and tooltips were added.
The idea is to have an abbreviation of the partition displayed and a tooltip with a fancier description and the size of that partition.
The base for this chart was Mike's Bilevel Partition. Tooltips thanks to Sharon Howard
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
rect { | |
stroke: #fff; | |
} | |
</style> | |
<body> |
A dendrogram is a node-link diagram that places leaf nodes of the tree at the same depth. In this example, the classes (leaf nodes) are aligned on the right edge, with the packages (internal nodes) to the left. Data shows the Flare class hierarchy, courtesy Jeff Heer.
Compare to this Cartesian layout.
An interactive version of a Reingold–Tilford tree. Click on the nodes to expand or collapse.
Zoomable Sunburst with Labels
{ | |
"children": [ | |
{ | |
"children": [ | |
{ | |
"rate": -0.4066358024691358, | |
"value": 769, | |
"name": "Black or African American, Non-Hispanic" | |
}, | |
{ |
var BrowserDetect = | |
{ | |
init: function () | |
{ | |
this.browser = this.searchString(this.dataBrowser) || "Other"; | |
this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown"; | |
}, | |
searchString: function (data) | |
{ |
A sunburst is similar to the 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.
A treemap recursively subdivides area into rectangles; the area of any node in the tree corresponds to its value. This example uses color to encode different packages of the Flare visualization toolkit. Treemap design invented by Ben Shneiderman. Squarified algorithm by Bruls, Huizing and van Wijk. Data courtesy Jeff Heer.