Voir la page Web du cours pour retrouver l'ensemble des supports.
viewof carb = Inputs.select(carburants, {label: "Sélectionner un type de carburant"})
carb
dateRecup = new Date() // La date de récupération des données
// Un tableau contenant tous les noms de département
departements = [...new Set(ds.map(d => d.departement))].sort()
// Un tableau contenant tous les noms de carburants
carburants = Object.keys(ds[0]).filter(f => f.endsWith('_prix')).map(f => f.replace('_prix', ''))
allCarburants = { // Créer une liste des carburants disponibles
const carburants = [];
ds.forEach((d) => {
if (d.carburants_disponibles !== null) {
carburants.push(...d.carburants_disponibles);
}
});
return [...new Set(carburants)]
}
// Première manière de calculer le résumé permettant de produire le premier graphique
summary = [
{ Carburant: 'E10', 'Nombre de stations': ds.filter(d => d.e10_prix !== null).length},
{ Carburant: 'Gazole', 'Nombre de stations': ds.filter(d => d.gazole_prix !== null).length},
{ Carburant: 'SP95', 'Nombre de stations': ds.filter(d => d.sp95_prix !== null).length},
{ Carburant: 'SP98', 'Nombre de stations': ds.filter(d => d.sp98_prix !== null).length},
{ Carburant: 'E85', 'Nombre de stations': ds.filter(d => d.e85_prix !== null).length},
{ Carburant: 'GPLC', 'Nombre de stations': ds.filter(d => d.gplc_prix !== null).length},
]
// Une seconde manière de calculer le résumé permettant de produire le premier graphique
summary2 = {
// Le tableau de résultat
const res = [];
// Pour chaque carburant ...
carburants.forEach((c) => {
res.push({
Carburant: c,
// on calcule le nombre de stations qui disposent d'un prix pour ce carburant
'Nombre de stations': ds.filter(d => d[`${c}_prix`] !== null).length
})
});
// On retourne le tableau contenant le résultat
return res;
}
// Encore une autre manière de calculer la variable "summary" pour le premier graphique...
summaryPrix = allCarburants
.map((carb) => {
// On calcule le nombre de stations qui ont ce carburant de disponible
const nbStations = ds.filter((item) => item.carburants_disponibles && item.carburants_disponibles.includes(carb)).length;
return {
"Type de Carburant": carb,
"Nombre de stations": nbStations,
};
})
// Ici on enlève les valeurs abberantes du jeu de données (prix anormalement haut ou anormalement bas)
ds = dsUnfiltered.filter(d => d.region != null)
.filter(d => d.gazole_prix === null ? true : d.gazole_prix > 1 && d.gazole_prix < 5)
.filter(d => d.sp95_prix === null ? true : d.sp95_prix > 1.2 && d.sp95_prix < 5)
.filter(d => d.e85_prix === null ? true : d.e85_prix < 2.5)
.filter(d => d.e10_prix === null ? true : d.e10_prix > 1.2 && d.e10_prix < 2.5)
.filter(d => d.sp98_prix === null ? true : d.sp98_prix > 1.2 && d.sp98_prix < 5)
.filter(d => d.gplc_prix === null ? true : d.gplc_prix < 2)
dsUnfiltered = {
// Récupération des données
const ds = await d3.json('https://data.economie.gouv.fr/api/explore/v2.1/catalog/datasets/prix-des-carburants-en-france-flux-instantane-v2/exports/json');
// Convertion des types avec forEach (modifie le jeu de données sur place)
ds.forEach((d) => {
d.sp95_prix = d.sp95_prix ? +d.sp95_prix : null;
d.gazole_prix = d.gazole_prix ? +d.gazole_prix : null;
d.e85_prix = d.e85_prix ? +d.e85_prix : null;
d.gplc_prix = d.gplc_prix ? +d.gplc_prix : null;
d.e10_prix = d.e10_prix ? +d.e10_prix : null;
d.sp98_prix = d.sp98_prix ? +d.sp98_prix : null;
});
// On retourne le jeu de données
return ds
}
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.
