Published
Edited
Feb 12, 2021
data = aq.fromCSV(await FileAttachment("All London 2012 athletes - ALL ATHLETES.csv").text())
{
let data_ = data.derive({Age_: d => d.Age + 0.3 * Math.random() })
let ticks = vl.markTick({size: 10, opacity: 0.4, color: "#8c92ac"})
.encode(
vl.x().fieldQ("Age_").title("Age").axis({titleFontSize: 30}),
vl.y().fieldN("Sport").sort({op: "mean", field: "Age"}).axis({titleFontSize: 30}),
vl.tooltip().fieldN("Name")
);
let points = vl.markCircle({size: 75, color: "#ac8c92"})
.encode(
vl.x().average("Age_").axis({labelFontSize: 16}),
vl.y().fieldN("Sport").sort({op: "mean", field: "Age"}).axis({labelFontSize: 16})
);
return vl.data(data_)
.layer(ticks, points)
.height(750)
.width(1000)
.render()
}
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.
