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 treemapStretched TreemapCollapsible treeHierarchical edge bundlingZoomable circle packingZoomable sunburstZoomable icicleBubble chart componentCircle packing component
Treemap by count
chart = Treemap(flare, {
path: d => d.id.replace(/\./g, "/"), // e.g., "flare/animate/Easing"
group: d => d.id.split(".")[1], // e.g., "animate" in "flare.animate.Easing"; for color
label: d => d.id.split(".").pop().split(/(?=[A-Z][a-z])/g).join("\n") + "\n",
title: d => `${d.id}\n${d.value?.toLocaleString()}`, // text to show on hover
width: 1152,
height: 1152
})
flare = FileAttachment("flare.csv").csv({typed: true})
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.
