chart = Treemap(flare, {
path: d => d.id.replace(/\./g, "/"), // e.g., "flare/animate/Easing"
value: d => d.value, // size of each node (file); null for internal nodes (folders)
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), d.value.toLocaleString()].join("\n"),
title: d => `${d.id}\n${d.value.toLocaleString()}`, // text to show on hover
width: 928,
height: 928
})
flare = FileAttachment("flare.csv").csv({typed: true})
import {Treemap} from "@d3/treemap"
import {Swatches} from "@d3/color-legend"
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.
