Published unlisted
Edited
Dec 13, 2021
Plot.plot({
marks: [
Plot.rectY(
data,
Plot.groupX(
{ y: "count" },
{
x: (d) => d3.utcMonth.floor(d["date_of_birth"]),
interval: d3.utcMonth,
insetLeft: 4,
insetRight: 4,
stroke: "black",
rx: 8
}
)
),
Plot.textY(
data,
Plot.stackY2(
Plot.groupX(
{ y: "count", text: "count" },
{
x: (d) =>
+d3.utcMonth.floor(d["date_of_birth"]) + 14 * 24 * 3600 * 1000,
//interval: d3.utcMonth,
x: (d) =>
(+d3.utcMonth.floor(d["date_of_birth"]) +
+d3.utcMonth.ceil(1 + +d["date_of_birth"])) /
2,
dy: -4
}
)
)
)
],
y: { insetTop: 10 }
})
import { athletes } from "@observablehq/plot"
data = athletes.filter((d) => d.date_of_birth.getFullYear() === 1990)
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.
