Apollonius’ ProblemTreemapSunburstTidy treeCluster treeRadial cluster treeIcicleCircle packingRadial tidy treeBubble chartd3.groups as a hierarchyRandom TreeHierarchy traversal, animatedBilevel Edge BundlingIndented treeZoomable treemapHierarchical edge bundling IIMarimekkod3.packEncloseHierarchical bar chartForce-directed treeVisiting a d3.hierarchyd3.hierarchyCascaded treemapNested treemapTreemap by countStretched TreemapCollapsible treeHierarchical edge bundlingZoomable circle packingZoomable sunburstZoomable icicleBubble chart componentCircle packing component
d3.stratify
links = d3.csvParse(linksCsv)
childColumn = links.columns[0]
parentColumn = links.columns[1]
stratify = d3.stratify()
.id(d => d[childColumn])
.parentId(d => d[parentColumn])
root = stratify(links)
root.data // the original data at the root
root.id // extracted by stratify’s .id() accessor
root.parent // the root has no parent
root.children // children nodes, nodes for which the .parentId() accessor indicated the root node’s id.
root.depth // the root has depth 0, its children depth 1, its grand-children depth 2, etc.
root.height // node.height is the length of the longest branch originating from that node
root.children[0] // "b", the first child of the root node has depth 1, height 1, and its own children…
d3.stratify()([{id: "1", parentId: "2"}])
d3.stratify()([{id: "1", parentId: "2"}, {id: "2", parentId: "1"}])
d3.stratify()([{id: "1", parentId: ""}, {id: "2", parentId: ""}])
disk = d3.stratify().path(d => d)([
"/usr/bin/grep",
"/usr/bin/yes",
"/usr/share/man/man1/grep.1"
])
Tree(disk, {label: d => d.id, width: 780, padding: 2})
d3.csvFormat(root.descendants().map(d => d.data))
root.descendants().map(d => ({
child: d.id,
parent: d.parent ? d.parent.id : ""
}))
function links2dot(links) {
return links
.map(l => [l[links.columns[1]], l[links.columns[0]]])
.filter(([source, target]) => source && target)
.map(([source, target]) => `${source} -> ${target}`)
.join("; ");
}
import {Tree} from "@d3/tree"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
