Public
Edited
Jun 14, 2023
athletes = fetch("https://geoclip-projects.business-geografic.com/formation/dataviz/athletes.json").then((response) => response.json())
athletes.length
athletes
X
weight
Y
—
Color
sex
Size
—
Facet X
—
Facet Y
—
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
x: { grid: true, label: "Poids (kg)" },
y: { grid: true, label: "Effectif d'athlètes" },
color: { legend: true },
marks: [
Plot.rectY(
athletes,
Plot.binX({ y: "count" }, { x: "weight", fill: "sex", tip: true })
),
Plot.ruleY([0])
]
})
Plot.plot({
x: { grid: true, label: "Poids (kg)" },
y: { grid: true, label: "Effectif d'athlètes" },
marks: [
Plot.rectY(
athletes.filter( athlete => athlete.sex === sexChoice || sexChoice === "all" ),
Plot.binX({ y: "count" }, { x: "weight", thresholds : nbSeuils, fill: sexChoice === "all" ? "sex" : "tomato" , tip: true })
),
Plot.ruleX([0]),
Plot.ruleY([0])
]
})
viewof nbSeuils = Inputs.range([10, 100], {label: "Nombre de seuils : ", step: 1})
viewof sexChoice = Inputs.radio(["male", "female", "all"], {label: "Choix du sexe : ", value: "female"})
athletes
X
—
Y
sport
Color
#ffc850
Size
—
Facet X
—
Facet Y
—
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
color: { legend: true },
insetLeft: 10,
marginLeft: 100,
marks: [
Plot.barX(
athletes,
Plot.groupY({ x: "count" }, { y: "sport", fill: "#ffc850", sort:{ y: "-x" }, tip: true })
),
Plot.ruleX([0])
]
})
Plot.plot({
color: { legend: true },
insetLeft: 10,
marginLeft: 100,
marks: [
Plot.barY(
athletes,
Plot.groupX({ y: "count" }, { x: "sport", fill: "#ffc850", sort: {x: "y"}, tip: true })
),
Plot.ruleY([0])
]
})
Plot.plot({
marks: [
Plot.tickX(athletes, {x: "weight", stroke: "sex"})
]
})
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.
