athletes = FileAttachment("athletes.csv").csv({typed: true})
selectedAthletes = athletes.filter(d => sport.includes(d.sport))
testSportsData = {
let testSportsData = [];
sportsDataGroups.forEach((values, keys) => {
testSportsData.push([keys, d3.mean(values.map( val => val.height )), d3.deviation(values.map( val => val.height ))])
})
return testSportsData;
}
sportsDataGroups = d3.group(selectedAthletes, d=>d.sport)
viewof sport = Inputs.select(athletes.map(d => d.sport), {sort: true, unique: true, label: "sport", multiple:true});
viewof separate = Inputs.toggle({label: "Separate plots"})
viewof statsTable = Inputs.table(testSportsData,{
header:["name", "mean", "sd"],
maxWidth:300})
viewof graphResult = {
if (separate) {
return Plot.plot({
grid: true,
x: {
domain: [1.3, 2.2]
},
y: {
label: null
},
facet: {
data:selectedAthletes,
y:"sport",
},
marks: [
Plot.rectY(selectedAthletes, Plot.binX({y: "count"}, {x: "height", fill: "sport"})),
Plot.ruleY([0])
]
})
} else {
return Plot.plot({
grid: true,
x: {
domain: [1.3, 2.2]
},
marks: [
Plot.rectY(selectedAthletes, Plot.binX({y: "count"}, {x: "height", fill: "sport", mixBlendMode: "multiply"})),
Plot.ruleY([0])
]
})
}
}
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.
