Public
Edited
Dec 27, 2022
Insert cell
Insert cell
Insert cell
data = d3.csvParse(await FileAttachment("population-by-age@5.csv").text(), d3.autoType)
Insert cell
stack = {
const total = d3.sum(data, d => d.value);
let value = 0;
return data.map(d => ({
name: d.name,
value: d.value / total,
startValue: value / total,
endValue: (value += d.value) / total
}));
}
Insert cell
color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), data.length).reverse())
Insert cell
color.range()
Insert cell
x = d3.scaleLinear([0, 1], [margin.left, width - margin.right])
Insert cell
formatPercent = x.tickFormat(null, "%")
Insert cell
width = 964
Insert cell
height = 66
Insert cell
margin = ({top: 0, right: 0, bottom: 0, left: 0})
Insert cell
d3 = require("d3@6")
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