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 treed3.stratifyd3.hierarchyCascaded treemapNested treemapTreemap by countStretched TreemapCollapsible treeHierarchical edge bundlingZoomable circle packingZoomable sunburstZoomable icicleBubble chart componentCircle packing component
Visiting a d3.hierarchy
data = FileAttachment("flare-2.json").json()
root = d3.hierarchy(data)
counted = root.copy().count()
counted.value // the total number of leaves
counted.children[0].value // the number of leaves in the first subpackage
summed = root.copy().sum(d => d.value)
summed.value // the aggregate file size in bytes
summed.children[0].value // the aggregate size of the first subpackage
root.copy().sum(d => 1).value // the total number of nodes
root.copy().sum(d => d.name.length).value // the total name length?
sorted = root.copy()
.sum(d => d.value)
.sort((a, b) => d3.descending(a.value, b.value))
sorted.children.map(d => [d.data.name, d.value])
root.copy()
.sum(d => d.value)
.sort((a, b) => d3.descending(a.height, b.height) || d3.descending(a.value, b.value))
root.copy()
.sum(d => d.value)
.sort((a, b) => d3.descending(a.height, b.height) || d3.ascending(a.data.name, b.data.name))
{
const names = [];
root.each(d => names.push(" ".repeat(d.depth) + `${d.depth}: ${d.data.name}`));
return html`<pre style="max-height: 10em; overflow-y: scroll;">${names.join("\n")}`;
}
{
const names = [];
root.eachBefore(d => names.push(" ".repeat(d.depth) + `${d.depth}: ${d.data.name}`));
return html`<pre style="max-height: 10em; overflow-y: scroll;">${names.join("\n")}`;
}
{
const names = [];
root.eachAfter(d => names.push(" ".repeat(d.depth) + `${d.depth}: ${d.data.name}`));
return html`<pre style="max-height: 10em; overflow-y: scroll;">${names.join("\n")}`;
}
chaos = d3.stratify()(d3.csvParse(await FileAttachment("chaos.csv").text()))
{ let i = 0; return digraph(chaos.copy().each(d => d.label = `${d.data.id} = ${i++}`)); }
{ let i = 0; return digraph(chaos.copy().eachBefore(d => d.label = `${d.data.id} = ${i++}`)); }
{ let i = 0; return digraph(chaos.copy().eachAfter(d => d.label = `${d.data.id} = ${i++}`)); }
dot = require("@observablehq/graphviz@0.2")
function digraph(hierarchy) {
const id = new Map(hierarchy.descendants().map((node, i) => [node, i]));
return dot`digraph {
rankdir = TB;
node [fontname="var(--sans-serif)" fontsize=12];
edge [fontname="var(--sans-serif)" fontsize=12];
${hierarchy.descendants().map(node => `"${id.get(node)}" [label="${node.label}"]`).join("; ")}
${hierarchy.links().map(({source, target}) => `"${id.get(source)}" -> "${id.get(target)}"`).join("; ")}
}`;
}
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.
