Professor of Mathematics and Computer Science at a small liberal arts college in Kentucky, USA.
race = {
const race = await FileAttachment("TenMileRace.csv").csv({typed: true});
race.forEach(function(runner) {runner.timeMinutes = runner.time / 60;});
return race;
}
minTime = d3.min(d3.map(race, d => d.timeMinutes))
minAge = d3.min(d3.map(race, d => d.age))
maxAge = d3.max(d3.map(race, d => d.age))
maxTime = d3.max(d3.map(race, d => d.timeMinutes))
viewof sex = Inputs.select(["F", "M"], {label: "Sex of runner: "})
viewof opacity = Inputs.range([0, 1], {label: "Opacity: ", step: 0.01})
Plot.plot({
inset: 8,
grid: true,
marks: [
Plot.dot(
d3.filter(race, d => d.sex == sex),
{x: "age", y: "timeMinutes", fill: "black", fillOpacity: opacity}
)
],
x: {domain: [minAge, maxAge]},
y: {label: "time (minutes)", domain: [minTime, maxTime]},
})
Plot.plot({
marks: [Plot.density(
race.map(d => ({age: d.age, timeMinutes: d.timeMinutes, sex: d.sex == "M" ? "male" : "female"})),
{x: "age", y: "timeMinutes", stroke: "sex"}
)],
y: {label: "time (minutes)"},
color: {legend: true}
})
Plot.plot({
marks: [
Plot.frame(),
Plot.density(
race.map(d => ({age: d.age, timeMinutes: d.timeMinutes, sex: d.sex == "M" ? "male" : "female"})),
{x: "age", y: "timeMinutes", fx: "sex"}
)],
y: {label: "time (minutes)"}
})
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.
