The avatar for @ufr
UFR
Public
Edited
Jan 18
1
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
athlete_events.csv
Type SQL, then Shift-Enter. Ctrl-space for more options.

Insert cell
viewof table = Inputs.table(data)
Insert cell
table
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Insert cell
// Le nombre total d'observations dans notre jeu de données
data.length
Insert cell
// Le nombre d'hommes M et femmes F
Object.fromEntries(d3.rollup(data, v => v.length, d => d.Sex))
Insert cell
// Le nombre des participations par pays
Object.fromEntries(d3.rollup(data, v => v.length, d => d.Team))
Insert cell
// Nombre des médailles
Object.fromEntries(d3.rollup(data, v => v.length, d => d.Medal))
Insert cell
//Taille moyenne des athlètes par sport
Object.fromEntries(d3.rollup(data, v => d3.mean(v, d => d.Height), d => d.Sport))
Insert cell
//Poids moyen des athlètes par sport
Object.fromEntries(d3.rollup(data, v => d3.mean(v, d => d.Weight), d => d.Sport))
Insert cell
Insert cell
athlete_events.csv
X
Year
Y
distinct
Name
Color
Sex
Size
—
Facet X
—
Facet Y
—
Mark
line
Type Chart, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Insert cell
// Utiliser d3.rollup pour agréger les données par NOC et type de médaille
country_medals = d3.rollup(
data,
v => {
// Compter les occurrences de chaque médaille pour chaque NOC
const medalsCount = {
Gold: 0,
Silver: 0,
Bronze: 0
};

// Compter les médailles pour chaque type
v.forEach(d => {
if (d.Medal === 'Gold') medalsCount.Gold++;
if (d.Medal === 'Silver') medalsCount.Silver++;
if (d.Medal === 'Bronze') medalsCount.Bronze++;
});

return medalsCount;
},
d => d.NOC // Regrouper par NOC
);
Insert cell
// Tri des pays
athletes_sorted = Array.from(country_medals.entries()).map(([key, value]) => {
const totalMedals = value.Gold + value.Silver + value.Bronze;
return {
noc: key,
totalMedals,
gold: value.Gold,
silver: value.Silver,
bronze: value.Bronze
};
}).sort((a, b) => b.totalMedals - a.totalMedals);
Insert cell
// extraire les 10 premiers pays
top_10 = athletes_sorted.slice(0, 10);
Insert cell
dataToPlot = top_10.map(d => ({
noc: d.noc,
Medal: d.totalMedals,
gold: d.gold,
silver: d.silver,
bronze: d.bronze
}));
Insert cell
dataToStacked = dataToPlot.flatMap(d => [
{ noc: d.noc, medal: "Gold", value: d.gold },
{ noc: d.noc, medal: "Silver", value: d.silver },
{ noc: d.noc, medal: "Bronze", value: d.bronze },
])
Insert cell
Plot.plot({
marks: [
Plot.barY(dataToStacked, {
x: "noc",
y: "value",
fill: "medal",
title: "Medal",
})
],
height: 400,
width: 800,
color: {legend: true}, // Afficher la légende
x: {
label: "Pays",
domain: dataToPlot.map(d => d.noc), // Liste des pays
},
y: { label: "Nombre des Médailles" },
style: {
background: "#f9f9d9", // Couleur de fond
},
})
Insert cell
Insert cell
Insert cell
// Définir les tranches d'âge
ageRanges = [
{ range: '18-24', min: 18, max: 24 },
{ range: '25-30', min: 25, max: 30 },
{ range: '31-35', min: 31, max: 35 },
{ range: '36-40', min: 36, max: 40 },
{ range: '41+', min: 41, max: Infinity }
];
Insert cell
// Filtrer les athlètes qui ont gagné une médaille
athletesWithMedals = data.filter(d => d.Medal !== 'NA');
Insert cell
// Comptage des médailles par tranche d'âge
medalsByAgeRange = ageRanges.map(range => {
const athletesInRange = athletesWithMedals.filter(d => d.Age >= range.min && d.Age <= range.max);
const medalCount = athletesInRange.length;
return { range: range.range, medals: medalCount };
});
Insert cell
Select a data source…
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
medalsByAgeRange
X
range
Y
medals
Color
range
Size
—
Facet X
—
Facet Y
—
Mark
bar
Type Chart, then Shift-Enter. Ctrl-space for more options.

Insert cell
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