Plot.plot({
marks: [
Plot.rect(leaves, {
x1: "x0",
x2: "x1",
y1: "y0",
y2: "y1",
fill: (d) => d.parent.data.name,
title: (d) => `${d.parent.data.name}: ${d.data.name}`
}),
Plot.text(leaves, {
x: "x0",
y: "y1",
dx: 10,
dy: 10,
text: (d) => {
const v = d.value?.toFixed(1);
const width = (v.length - 1) * 8 + 5;
const height = 15;
return d.x1 - d.x0 > width && d.y1 - d.y0 > height ? v : "";
},
fill: "#fff"
})
],
x: { axis: null },
y: { axis: null },
width: width,
height: height,
marginTop: 20
})
Plot.plot({
marks: [
links.map((link) =>
Plot.areaY(link, {
x: "x",
y1: "y0",
y2: "y1",
curve: "bump-x",
fill: "#000",
fillOpacity: 0.1,
order: "value"
})
),
Plot.rect(sankeyData.nodes, {
x1: "x0",
x2: "x1",
y1: "y0",
y2: "y1",
fill: "name"
}),
Plot.text(sankeyData.nodes, {
x: "x1",
dx: 5,
y: (d) => (d.y1 + d.y0) / 2,
text: "name",
textAnchor: "start"
})
],
x: { axis: null },
y: { axis: null },
width: width,
height: height,
marginTop: 20,
marginRight: 40
})
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.
