Public
Edited
Jan 20
Insert cell
Insert cell
Insert cell
athletes.data
Insert cell
Insert cell
athletes_selected = athletes.data.filter((d) => d.sport == sport_sel)
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.circle(athletes_selected, {
x: "weight",
y: "height",
fill: "sex",
tip: true
})
]
})
Insert cell
Plot.plot({
title:
"Height and Weight Distribution by Gender - " + sport_sel.toUpperCase(),
color: {
type: "categorical",
legend: true,
domain: ["male", "female"],
range: ["#4269d0", "#ff8ab7"]
},
marks: [
Plot.circle(athletes_selected, {
x: "weight",
y: "height",
fill: "sex",
tip: true,
title: (d) => d.name
})
]
})
Insert cell
Plot.plot({
color: {
type: "categorical",
legend: true,
domain: ["male", "female"],
range: ["#4269d0", "#ff8ab7"]
},

marks: [
Plot.circle(athletes_selected, {
x: "weight",
y: "height",
fill: "sex",
tip: true,
title: (d) =>
[d.name, "weight: " + d.weight, "height: " + d.height].join("\n")
}),
Plot.linearRegressionY(athletes_selected, {
x: "weight",
y: "height",
stroke: "red"
})
]
})
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