Public
Edited
Dec 1, 2022
Paused
Insert cell
Insert cell
viewof data = Inputs.table(
aq
.from(olympians)
.derive({
bmi: (d) => (d.weight && d.height ? d.weight / d.height ** 2 : null)
})
.filter(aq.escape((d) => !["boxing"].includes(d.sport)))
.select(["id", "sex", "sport", "bmi"])
)
Insert cell
Plot.plot({
width,
facet: { data, y: "sport", x: "sex", marginLeft: 140 },
x: { domain: [16, 49], grid: true, ticks: 10 },
y: { axis: null, domain: [0, 1.2] },
fy: {
domain: d3.groupSort(
data,
(v) => d3.median(v, (d) => d.bmi),
(d) => d.sport
)
},
marks: [
Plot.frame(),
Plot.rectY(
data,
Plot.normalizeY(
Plot.binX(
{ y: "count" },
{
x: "bmi",
filter: "bmi",
fill: "sport",
basis: "max" // normalize,
}
)
)
)
]
})
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