Published
Edited
Dec 13, 2021
11 forks
Importers
51 stars
Insert cell
Insert cell
athletes = FileAttachment("athletes.csv").csv({typed: true})
Insert cell
Insert cell
columns = athletes.columns.slice(1, -1) // hide the id and info column
Insert cell
Insert cell
Insert cell
Insert cell
Inputs.table(search, {columns})
Insert cell
Insert cell
Insert cell
viewof sport = Inputs.select(athletes.map(d => d.sport), {sort: true, unique: true, label: "sport"})
Insert cell
selectedAthletes = athletes.filter(d => d.sport === sport)
Insert cell
Inputs.table(selectedAthletes, {columns})
Insert cell
Insert cell
Plot.plot({
x: {
domain: [1.3, 2.2]
},
marks: [
Plot.rectY(selectedAthletes, Plot.binX({y: "count"}, {x: "height", fill: "steelblue"})),
Plot.ruleY([0])
]
})
Insert cell
Insert cell
groups = d3.group(athletes, d => d.sport)
Insert cell
viewof sportAthletes = Inputs.select(groups, {sort: true, label: "sport"})
Insert cell
Inputs.table(sportAthletes, {columns})
Insert cell
Insert cell
viewof weight = Inputs.range(d3.extent(athletes, d => d.weight), {step: 1, label: "weight (kg)"})
Insert cell
Inputs.table(athletes.filter(d => d.weight < weight * 1.1 && weight * 0.9 < d.weight), {sort: "weight", columns})
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