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.stratifyVisiting a d3.hierarchyd3.hierarchyCascaded treemapNested treemapTreemap by countCollapsible treeHierarchical edge bundlingZoomable circle packingZoomable sunburstZoomable icicleBubble chart componentCircle packing component
Stretched Treemap
chart = Treemap(flare, {
value: d => d.size,
group: (d, n) => n.ancestors().slice(-2)[0].data.name,
label: (d, n) => [...d.name.split(".").pop().split(/(?=[A-Z][a-z])/g), d.size.toLocaleString()].join("\n"),
title: (d, n) => `${n.ancestors().reverse().map(({data: d}) => d.name).join(".")}\n${d.size.toLocaleString()}`,
tile: (tile => (node, x0, y0, x1, y1) => {
tile(node, x0 / ratio, y0, x1 / ratio, y1);
for (const child of node.children) child.x0 *= ratio, child.x1 *= ratio;
})(d3.treemapSquarify.ratio(1)),
width: 1152,
height: 1152
})
flare = FileAttachment("flare.json").json()
import {Treemap} from "@d3/treemap"
import {Swatches} from "@d3/color-legend"
import {howto} from "@d3/example-components"
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.
