Unlisted
Edited
Apr 3, 2023
athletes = (await FileAttachment("athletes.csv").csv({ typed: true})).filter(athlete => ["cycling","canoe"].includes(athlete.sport))
Plot.plot({
marginLeft: 100,
padding: 0,
x: {
round: true,
grid: true
},
fy: {
label: null,
domain: d3.groupSort(athletes, g => d3.median(g, d => d.weight), d => d.sport)
},
color: {
scheme: "YlGnBu"
},
facet: {
data: athletes,
marginLeft: 100,
y: "sport"
},
marks: [
Plot.barX(athletes, Plot.binX({fill: prop}, {x: "weight", inset: 0.5, title: (I,V, basis) => `I ${JSON.stringify(I)} v ${V} basis ${basis.length}` }))
]
})
Plot.plot({
marginLeft: 100,
padding: 0,
x: {
round: true,
grid: true
},
fy: {
label: null,
domain: d3.groupSort(athletes, g => d3.median(g, d => d.weight), d => d.sport)
},
color: {
scheme: "YlGnBu"
},
facet: {
data: athletes,
marginLeft: 100,
y: "sport"
},
marks: [
Plot.barX(athletes,
Plot.binX(
{
fill: prop,
title: {
scope: prop === "proportion" ? "data" : prop === "proportion-facet" ? "facet" : undefined,
reduce: (I, V, basis) => basis === undefined
? I.length
: `group length: ${I.length}, sum: ${d3.sum(I, i => V[i].weight)}, ${prop}: ${I.length / basis}`
}
},
{
x: "weight",
inset: 0.5
}
)
)
]
})
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.
