Public
Edited
Sep 17, 2024
Insert cell
Insert cell
chart = Tree(root, {
label: d => d.id,
title: (d, n) => `${n.ancestors().reverse().map(d => d.data.name).join(".")}`, // hover text
sort: (a, b) => d3.descending(a.height, b.height), // reduce link crossings
tree: d3.cluster,
width: 1152,
curve: d3.curveStep
})
Insert cell
Insert cell
root = stratify(data)
Insert cell
stratify = d3.stratify()
.id(d => d[childColumn])
.parentId(d => d[parentColumn])
Insert cell
parentColumn = data.columns[0]
Insert cell
childColumn = data.columns[1]
Insert cell
data = FileAttachment("data-withRoot@14.csv").csv()
Insert cell
Insert cell
import {Tree} from "@d3/tree"
Insert cell

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.
Learn more