data = d3.csvParse(`path,visits
/root/something,1
/root/gallery,4
/root/gallery/chart-a,2
/root/gallery/chart-b,1`)
import { Treemap } from "@d3/treemap@483" // DEPRECATED
Treemap(data, {path: (d) => d.path, value: (d) => d?.visits, label: (d) => d.path, height: 200})
Treemap(data, {path: (d) => d.path + "/\0", value: (d) => d?.visits, label: (d) => d.path, height: 200})
import { Treemap as TreemapR } from "@d3/treemap@489"
TreemapR(data, {path: d => d.path, value: (d) => d.visits, label: (d) => d.path, height: 200})
stratify = (data, path) =>
(d3.stratify().path(path))(data)
.each((node) => {
if (node.children?.length && node.data != null) {
const child = new d3.Node(node.data);
node.data = null;
child.depth = node.depth + 1;
child.height = 0;
child.parent = node;
child.id = node.id + "/";
node.children.unshift(child);
}
})
d3P207 = require(await FileAttachment("d3-hierarchy.min.js").url())
d3.stratify().path(d => d)(["a", "a/b"])
d3P207.stratify().path(d => d)(["a", "a/b"])
d3P207.stratify().imputeLeaf(true).path(d => d)(["a", "a/b"])
view(d3P207.stratify().imputeLeaf(false).path(d => d.path)([{path:"a", value: 4}, {path:"a/b", value: 1}]))
view(d3P207.stratify().imputeLeaf(true).path(d => d.path)([{path:"a", value: 4}, {path:"a/b", value: 1}]))
view = (root) => md`${root.descendants().map(d => `*${" ".repeat(d.depth)} ${d.id} ${d.data?.value ? ` (${d.data.value})` : ""}`).join("\n")}`
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.
