Public
Edited
Mar 1, 2023
Insert cell
Insert cell
import { athletes } from "@observablehq/plot"
Insert cell
athletes
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
athletes
Insert cell
yvar = "nationality"
Insert cell
xvar="height"
Insert cell
arrowTable = aq.from(athletes)
Insert cell
groupIt = arrowTable.groupby(yvar)
Insert cell
means = groupIt.rollup({ mean: aq.op.median(xvar) })
Insert cell
vars = groupIt.rollup({ vars: aq.op.variance(xvar) })
Insert cell
together = means.join(vars)
Insert cell
data = together.objects()
Insert cell
Plot.plot({
grid: true,
marks: [
Plot.dot(data, {
x: "mean",
y: yvar,
sort: {
y: "x"
}
}),
Plot.link(data, {
x1: (d) => d.mean - d.vars,
x2: (d) => d.mean + d.vars,
y: yvar
})
]
})
Insert cell
Insert cell
svg = d3.select(output)
Insert cell
svg.selectAll("
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