2b:null 2c:["$","title",null,{"children":"Solutions - Prix des carburants | BUT SD - Cours Programmation Web Dataviz | Observable"}] 31:T454,Plot.plot({ height: 400, // On choisi nous même le domain (nom des modalités rencontrées) et le range (couleurs correspondantes) color: { legend: true, domain: ['Station d\'autoroute', 'Station'], // Deux couleurs provenant d'une palette catégorielle existante range: [d3.schemeCategory10[8], d3.schemeCategory10[4]], }, // On choisi nous même le domain pour l'axe X // (en utilisant les valeur de prix du gazole pour l'ensemble des stations); // ça évite que l'axe change quand on change de département x: { domain: d3.extent(ds.map(d => d.gazole_prix)), grid: true, label: 'Prix du Gazole (€/L)', }, marks: [ // Première marque, les points Plot.dot( ds.filter(d => d.departement === dep), Plot.dodgeY( "middle", { x: d => d.gazole_prix, fill: d => (d.pop === 'A' ? 'Station d\'autoroute' : 'Station'), tip: true, channels: { ville: 'ville', departement: 'departement'}, } ) ), // Seconde marque, le cadre autour du graphique Plot.frame(), ] })32:T534,// Un autre graphique pas particulièrement pertinent... mais pour illuster une autre manière de transformer le jeu de données initial pour la visualisation : ici on veut un tableau avec tous les prix (une ligne du tableau = 1 prix + le type d'essence concerné). // C'est la logique vu dans le cours pour passer de format "wide" à format "long" : const allPrices = []; dsUnfiltered.forEach((d) => { if (d.gazole_prix) allPrices.push({ type: 'gazole', price: d.gazole_prix }); if (d.e85_prix) allPrices.push({ type: 'e85', price: d.e85_prix }); if (d.e10_prix) allPrices.push({ type: 'e10', price: d.e10_prix }); if (d.sp95_prix) allPrices.push({ type: 'sp95', price: d.sp95_prix }); if (d.sp98_prix) allPrices.push({ type: 'sp98', price: d.sp98_prix }); if (d.gplc_prix) allPrices.push({ type: 'gplc', price: d.gplc_prix }); }); const p = Plot.plot({ marginLeft: 60, x: { nice: true, label: "Prix (€/L)" }, color: { legend: true, range: d3.schemeCategory10 }, marks: [ Plot.areaY( allPrices, Plot.binX( { y2: "proportion" }, { x: "price", fill: "type", stroke: "type", fillOpacity: 0.1, strokeWidth: 1.5, thresholds: 30, curve: "basis", } ) ), Plot.ruleY([0]), ] }); display(p)33:[] 2f:{"id":"04c5b3168a7b5f37","slug":"solutions-prix-des-carburants","title":"Solutions - Prix des carburants","thumbnail":"efdb6f005293fd526f580a8763a111bb2083937acfa4d5dd5b7dd9dbc27d4b0d","access_level":"public","create_time":"$D2023-09-06T09:29:16.881Z","update_time":"$D2026-09-09T22:04:35.967Z","view_time":null,"first_public_time":"$D2023-09-14T09:01:54.648Z","fork":{"id":"c29a2410900b85b6","slug":"tp-prix-des-carburants","title":"TP - Prix des carburants","owner":{"id":"daf0693188c7d3b6","login":"sd-progwebdataviz","name":"BUT SD - Cours Programmation Web Dataviz"}},"stars":0,"starred":false,"owner":{"type":"team","id":"daf0693188c7d3b6","login":"sd-progwebdataviz","name":"BUT SD - Cours Programmation Web Dataviz","avatar_url":"https://avatars-next.observableusercontent.com/9abf99c7291a1bcb0c0549771e1476593088700d797bd36ff146f1e5ff3035e7","tier":"starter_2024"},"version":1092,"publish_version":1092,"role":null,"authored":false,"authors":[{"type":"individual","id":"8e230b124d25dec4","login":"mthh","name":"Matthieu Viry","avatar_url":"https://avatars-next.observableusercontent.com/911bd8720f0dbfd44850e291921253c0242ac77c4537d932fde7db5c82ebb267","tier":null}],"members":[{"type":"individual","id":"8e230b124d25dec4","login":"mthh","name":"Matthieu Viry","avatar_url":"https://avatars-next.observableusercontent.com/911bd8720f0dbfd44850e291921253c0242ac77c4537d932fde7db5c82ebb267","tier":null,"role":"editor"},{"type":"team","id":"daf0693188c7d3b6","login":"sd-progwebdataviz","name":"BUT SD - Cours Programmation Web Dataviz","avatar_url":"https://avatars-next.observableusercontent.com/9abf99c7291a1bcb0c0549771e1476593088700d797bd36ff146f1e5ff3035e7","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":{"id":"691270b6b68d5a88","slug":"solutions","title":"TP / Exercices - Solutions","owner":{"id":"daf0693188c7d3b6","login":"sd-progwebdataviz","name":"BUT SD - Cours Programmation Web Dataviz"}},"type":"notebook","body":{"title":"Solutions - Prix des carburants","cells":[{"id":0,"value":"# Solutions - Prix des carburants","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":863,"value":"

Support de cours pour les étudiants 2026-2027 de 3ème année du BUT Science des données de l'IUT2 (Université Grenoble Alpes).

\n\nIntervenant : Matthieu Viry

\nVoir l'ensemble de notebooks ici.\n\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":472,"value":"## Présentation du jeu de données\n\n
\nLe jeu de données est disponible à l'URL https://data.economie.gouv.fr/explore/dataset/prix-des-carburants-en-france-flux-instantane-v2/information/. Il s'agit d'un jeu de données \"en temps réel\" (mis à jour toutes les 10 minutes).\n\nCes données sont produite par la DGCCRF (Direction générale de la concurrence, de la consommation et de la répression des fraudes ) et sont rendues disponibles sous une licence libre : la [Licence Ouverte v2.0 (Etalab)](https://www.etalab.gouv.fr/wp-content/uploads/2017/04/ETALAB-Licence-Ouverte-v2.0.pdf).\n\nLes données ont été récupérées le _${dateRecup.toLocaleDateString()}_ à _${dateRecup.toLocaleTimeString()}_ et contiennent ${ds.length} entrées (chaque entrée correspond à une station-essence) qui sont présentées dans le tableau ci-dessous.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":475,"value":"Inputs.table(ds)","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":553,"value":"Les principales variables sont les suivantes :\n- `pop` : localisation sur la route (modalité R) ou sur l'autoroute (modalité A)\n- `adresse`, `ville`, `département` et `region` : informations sur la localisation de la station\n- `latitude` et `longitude` : coordonnées de la station\n- `gazole_prix` : prix du gazole (€/L)\n- `sp98_prix` : prix du Sans-Plomb 98 (€/L)\n- `sp95_prix` : prix du Sans-Plomb 95 (€/L)\n- `e10_prix` : prix du carburant E10 (€/L)\n- `e85_prix` : prix du carburant E85 (€/L)\n- `gplc_prix` : prix du GPLc (€/L)\n\nLe jeu de données a été filtré pour enlever les stations faisant remonter des informations de prix anormalement hautes ou basses.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":479,"value":"## Stations offrant des informations de prix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":23,"value":"Plot.plot({\n y: {tickFormat: \"s\", grid: true, nice: true},\n marks: [\n Plot.barY(\n summary2,\n { x: 'Carburant', y: 'Nombre de stations', fill: 'steelblue', tip: true, sort: {x: 'y', reverse: true}}\n ),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":694,"value":"Les carburants pour lesquels un prix est fourni sont les suivants : *${carburants.join(', ')}*.\n\nToutefois toutes les stations présentes dans le jeu de données ne fournissent pas des informations pour tous les types de carburants.\nOn constate que le carburant le plus représenté est le Gazole alors que le carburant le moins représenté est le GPL.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":496,"value":"## Distributions des prix des carburants par région","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":44,"value":"const carb = view(Inputs.select(carburants, {label: \"Sélectionner un type de carburant\"}))","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"Plot.plot({\n inset: 10,\n // La marge à gauche pour avoir le nom des régions en entier\n marginLeft: 150,\n height: 450,\n width: width * 2 / 3,\n // Un titre qui indique le carburant choisi\n title: `${carb.toUpperCase()}`,\n // Pas de titre (label) pour l'axe Y (pas besoin d'avoir écrit \"région\")\n y: { label: null, grid: true },\n // On choisi nous même le titre de l'axe X\n x: { label: 'Prix au litre (€/L)', grid: true},\n // Une seule marque dans le tableau \"marks\", celle des box plots\n marks: [\n Plot.boxX(ds, {x: `${carb}_prix`, y: \"region\", sort: {y: \"x\", reverse: false}, fill: 'lightgreen'})\n ]\n})","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":705,"value":"Ce graphique permet de comparer la distribution des prix entre les régions, pour un carburant donné (choisi par l'utilisateur).\n\nOn peut notamment constater que les régions Bretagne et Pays-de-la-Loire ont généralement les prix médians les plus faibles.\n\nLa Corse, et dans une moindre mesure l'Île-de-France, ont les prix médians les plus haut.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":63,"value":"## Prix du gazole par département","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":70,"value":"const dep = view(Inputs.select(departements, {label: \"Département\"}))","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"$31","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":701,"value":"Nous choisissons ici de nous intéresser spécialement au prix du Gazole (le carburant pour le quel le prix est le plus souvent renseigné). En utilisant un graphique de type *beeswarm* nous pouvons voir la distribution des prix, par département, en voyant la position exacte de chaque station sur l'axe X (Prix du Gazole).\n\nCela permet de mettre en évidence le fait que de nombreuses stations proposent le Gazole au prix de 2,25€/L, ou juste en dessous, (ce phénomène aurait été difficile à voir en utilisant d'autre méthodes de représentation de la distribution telles qu'un histogramme).\n\nEn choisissant de colorer les marques graphiques représentant les stations en fonction de la modalité `pop` (présence sur autoroute ou non), on constate que les stations situées sur l'autoroute sont parfois parmi les plus chère du département, sans que cela soit toutefois une généralité.\n\nGrâce au *tooltip*, on peut en apprendre plus sur la localisation de la station (ville) et sur le prix exacte au litre.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":517,"value":"## Code permettant de préparer les données et les graphiques\n\n*Parfois, plusieurs méthodes sont proposées (extraction de la liste des carburants, calcul d'un résumé pour le premier graphique, etc.), n'hésitez pas à bien regarder les différents blocs de code et leurs commentaires pour en savoir plus.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"// 1. Première manière de calculer le résumé permettant de produire le premier graphique,\n// avec une approche plutôt \"manuelle\" (nécessite de savoir quels sont les types de carburants)\nconst summary = [\n { Carburant: 'E10', 'Nombre de stations': ds.filter(d => d.e10_prix !== null).length},\n { Carburant: 'Gazole', 'Nombre de stations': ds.filter(d => d.gazole_prix !== null).length},\n { Carburant: 'SP95', 'Nombre de stations': ds.filter(d => d.sp95_prix !== null).length},\n { Carburant: 'SP98', 'Nombre de stations': ds.filter(d => d.sp98_prix !== null).length},\n { Carburant: 'E85', 'Nombre de stations': ds.filter(d => d.e85_prix !== null).length},\n { Carburant: 'GPLC', 'Nombre de stations': ds.filter(d => d.gplc_prix !== null).length},\n];\n\ndisplay(summary)","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":771,"value":"// 2. Seconde manière.\n// D'abords, créer une liste des carburants disponibles\nconst c = [];\nds.forEach((d) => {\n if (d.carburants_disponibles !== null) {\n c.push(...d.carburants_disponibles);\n }\n});\nconst allCarburants = [...new Set(c)];\n// On affiche la liste des carburants\ndisplay(allCarburants)\n\n// Le tableau pour stocker nos résultats...\nconst summary2 = [];\n// Pour chaque carburant ...\ncarburants.forEach((c) => {\n summary2.push({\n Carburant: c,\n // ...on calcule le nombre de stations qui disposent d'un prix pour ce carburant\n 'Nombre de stations': ds.filter(d => d[`${c}_prix`] !== null).length\n })\n});\n\ndisplay(summary2)","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":769,"value":"// Encore une autre manière de calculer la variable \"summary\" pour le premier graphique...\nconst summaryPrix = allCarburants\n .map((carb) => {\n // On calcule le nombre de stations qui ont ce carburant de disponible\n const nbStations = ds.filter((item) => item.carburants_disponibles && item.carburants_disponibles.includes(carb)).length;\n return {\n \"Carburant\": carb,\n \"Nombre de stations\": nbStations,\n };\n });\n\ndisplay(summaryPrix)","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"// Une autre manière de récupérer un tableau contenant tous les noms de carburants, cette fois en lisant les noms de colonnes de la première entité\nconst carburants = Object.keys(ds[0]).filter(f => f.endsWith('_prix')).map(f => f.replace('_prix', ''))\ndisplay(carburants)","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":882,"value":"La date de chargement du notebook (i.e. la date de récupération des données, puisqu'elle sont récupérées à chaque chargement du notebook) :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":551,"value":"const dateRecup = new Date() // La date de récupération des données\ndisplay(dateRecup)","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":881,"value":"La liste des départements, utiles pour la dernière visualisation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"// Un tableau contenant tous les noms de département\nconst departements = [...new Set(ds.map(d => d.departement))].sort()\ndisplay(departements)","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":859,"value":"#### Filtrage du jeu de données","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":883,"value":"Le filtrage a retiré **${dsUnfiltered.length - ds.length}** entités du jeu de données.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"// Ici on enlève les entités pour lesquelles la région ou le département n'est pas spécifiée\n// ainsi que les valeurs abberantes du jeu de données (prix anormalement haut ou anormalement\n// bas - les seuils sont à définir manuellement, selon vos connaissances, et cette étape n'est\n// pas toujours nécessaire)\nconst ds = dsUnfiltered.filter(d => d.region != null && d.departement != null)\n .filter(d => d.gazole_prix === null ? true : d.gazole_prix > 0.5 && d.gazole_prix < 3)\n .filter(d => d.sp95_prix === null ? true : d.sp95_prix > 0.8 && d.sp95_prix < 4)\n .filter(d => d.e85_prix === null ? true : d.e85_prix < 3)\n .filter(d => d.e10_prix === null ? true : d.e10_prix > 0.8 && d.e10_prix < 4)\n .filter(d => d.sp98_prix === null ? true : d.sp98_prix > 0.8 && d.sp98_prix < 4)\n .filter(d => d.gplc_prix === null ? true : d.gplc_prix < 3)","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":876,"value":"$32","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":861,"value":"#### Récupération du jeu de données","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"async function prepareData() {\n // Récupération des données\n 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');\n\n // Conversion des types avec forEach (modifie le jeu de données sur place)\n // On utilise la même logique pour chacun des prix à convertir (avec un opérateur ternaire) :\n // si on a un prix existant, on le transforme en nombre avec '+', sinon on conserve\n // la valeur null.\n ds.forEach((d) => {\n d.sp95_prix = d.sp95_prix ? +d.sp95_prix : null;\n d.gazole_prix = d.gazole_prix ? +d.gazole_prix : null;\n d.e85_prix = d.e85_prix ? +d.e85_prix : null;\n d.gplc_prix = d.gplc_prix ? +d.gplc_prix : null;\n d.e10_prix = d.e10_prix ? +d.e10_prix : null;\n d.sp98_prix = d.sp98_prix ? +d.sp98_prix : null;\n });\n\n // On retourne le jeu de données\n return ds;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":879,"value":"const dsUnfiltered = await prepareData();\ndisplay(dsUnfiltered)","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"2","titling":"auto"}} 30:"$2f:body"