2c:null 2d:["$","title",null,{"children":"Solution - Exercice de mise en pratique avec Plot | BUT SD - Cours Programmation Web Dataviz | Observable"}] 32:T668,En vous aidant du support [Bibliothèque Plot (1)](https://observablehq.com/@sd-progwebdataviz/bibliotheque-plot?collection=@sd-progwebdataviz/guide-et-exemples) vous aller créer les graphiques suivants : ### Premiers graphiques à réaliser 1. **Scatter Plot (Nuage de points)** : - Comparer le revenu et la satisfaction des clients. - Axe X : revenu. - Axe Y : satisfaction client. 2. **Line Chart (Diagramme à ligne lissée)** : - Suivre l’évolution des ventes au fil des mois **pour un produit donné (Produit A ou Produit B)**. - Axe X : les mois (Janvier, Février, etc.). - Axe Y : les ventes - Couleur des lignes : Selon la ville 3. **Bar Chart (Histogramme)** : - Représenter les ventes par ville **pour le produit "Produit A"** - Axe X : les villes (Paris, Lyon, Marseille). - Axe Y : les ventes. ### Pour aller plus loin... Les graphiques qui suivent sont à réaliser en fonction du temps restant et certains demandent d'utiliser des *transformations* telles que `Plot.groupX`. 1. **Bar Chart (Histogramme)** : - Représenter les ventes par ville **pour le produit "Produit A" et pour le "Produit B"** - **Vous devez agréger les ventes Produit A + Produit B** (et prendre en compte l'ensemble des mois) - Axe X : les villes (Paris, Lyon, Marseille). - Axe Y : les ventes. 2. **Line Chart (Diagramme à ligne lissée)** : - Suivre l’évolution des ventes au fil des mois **pour un produit donné (Produit A et Produit B)**. - *Faceting* : le type de produit - Axe X : les mois (Janvier, Février, etc.). - Axe Y : les ventes - Couleur des lignes : Selon la ville33:T1aed,const dataset = [ { "ville": "Paris", "mois": new Date(2024, 0, 1), "produit": "Produit A", "ventes": 120, "revenu": 2400, "satisfaction_client": 85 }, { "ville": "Paris", "mois": new Date(2024, 1, 1), "produit": "Produit A", "ventes": 135, "revenu": 2700, "satisfaction_client": 88 }, { "ville": "Paris", "mois": new Date(2024, 2, 1), "produit": "Produit A", "ventes": 110, "revenu": 2200, "satisfaction_client": 84 }, { "ville": "Paris", "mois": new Date(2024, 3, 1), "produit": "Produit A", "ventes": 150, "revenu": 3000, "satisfaction_client": 89 }, { "ville": "Paris", "mois": new Date(2024, 4, 1), "produit": "Produit A", "ventes": 140, "revenu": 2800, "satisfaction_client": 87 }, { "ville": "Paris", "mois": new Date(2024, 5, 1), "produit": "Produit A", "ventes": 130, "revenu": 2600, "satisfaction_client": 85 }, { "ville": "Lyon", "mois": new Date(2024, 0, 1), "produit": "Produit A", "ventes": 80, "revenu": 1600, "satisfaction_client": 82 }, { "ville": "Lyon", "mois": new Date(2024, 1, 1), "produit": "Produit A", "ventes": 95, "revenu": 1900, "satisfaction_client": 87 }, { "ville": "Lyon", "mois": new Date(2024, 2, 1), "produit": "Produit A", "ventes": 100, "revenu": 2000, "satisfaction_client": 85 }, { "ville": "Lyon", "mois": new Date(2024, 3, 1), "produit": "Produit A", "ventes": 110, "revenu": 2200, "satisfaction_client": 88 }, { "ville": "Lyon", "mois": new Date(2024, 4, 1), "produit": "Produit A", "ventes": 105, "revenu": 2100, "satisfaction_client": 86 }, { "ville": "Lyon", "mois": new Date(2024, 5, 1), "produit": "Produit A", "ventes": 115, "revenu": 2300, "satisfaction_client": 89 }, { "ville": "Marseille", "mois": new Date(2024, 0, 1), "produit": "Produit A", "ventes": 150, "revenu": 3000, "satisfaction_client": 87 }, { "ville": "Marseille", "mois": new Date(2024, 1, 1), "produit": "Produit A", "ventes": 165, "revenu": 3300, "satisfaction_client": 91 }, { "ville": "Marseille", "mois": new Date(2024, 2, 1), "produit": "Produit A", "ventes": 155, "revenu": 3100, "satisfaction_client": 89 }, { "ville": "Marseille", "mois": new Date(2024, 3, 1), "produit": "Produit A", "ventes": 170, "revenu": 3400, "satisfaction_client": 92 }, { "ville": "Marseille", "mois": new Date(2024, 4, 1), "produit": "Produit A", "ventes": 160, "revenu": 3200, "satisfaction_client": 90 }, { "ville": "Marseille", "mois": new Date(2024, 5, 1), "produit": "Produit A", "ventes": 155, "revenu": 3100, "satisfaction_client": 88 }, { "ville": "Paris", "mois": new Date(2024, 0, 1), "produit": "Produit B", "ventes": 130, "revenu": 2600, "satisfaction_client": 84 }, { "ville": "Paris", "mois": new Date(2024, 1, 1), "produit": "Produit B", "ventes": 145, "revenu": 2900, "satisfaction_client": 89 }, { "ville": "Paris", "mois": new Date(2024, 2, 1), "produit": "Produit B", "ventes": 120, "revenu": 2400, "satisfaction_client": 83 }, { "ville": "Paris", "mois": new Date(2024, 3, 1), "produit": "Produit B", "ventes": 160, "revenu": 3200, "satisfaction_client": 91 }, { "ville": "Paris", "mois": new Date(2024, 4, 1), "produit": "Produit B", "ventes": 150, "revenu": 3000, "satisfaction_client": 87 }, { "ville": "Paris", "mois": new Date(2024, 5, 1), "produit": "Produit B", "ventes": 140, "revenu": 2800, "satisfaction_client": 85 }, { "ville": "Lyon", "mois": new Date(2024, 0, 1), "produit": "Produit B", "ventes": 100, "revenu": 2000, "satisfaction_client": 86 }, { "ville": "Lyon", "mois": new Date(2024, 1, 1), "produit": "Produit B", "ventes": 115, "revenu": 2300, "satisfaction_client": 88 }, { "ville": "Lyon", "mois": new Date(2024, 2, 1), "produit": "Produit B", "ventes": 110, "revenu": 2200, "satisfaction_client": 85 }, { "ville": "Lyon", "mois": new Date(2024, 3, 1), "produit": "Produit B", "ventes": 130, "revenu": 2600, "satisfaction_client": 89 }, { "ville": "Lyon", "mois": new Date(2024, 4, 1), "produit": "Produit B", "ventes": 125, "revenu": 2500, "satisfaction_client": 87 }, { "ville": "Lyon", "mois": new Date(2024, 5, 1), "produit": "Produit B", "ventes": 135, "revenu": 2700, "satisfaction_client": 90 }, { "ville": "Marseille", "mois": new Date(2024, 0, 1), "produit": "Produit B", "ventes": 140, "revenu": 2800, "satisfaction_client": 83 }, { "ville": "Marseille", "mois": new Date(2024, 1, 1), "produit": "Produit B", "ventes": 155, "revenu": 3100, "satisfaction_client": 90 }, { "ville": "Marseille", "mois": new Date(2024, 2, 1), "produit": "Produit B", "ventes": 145, "revenu": 2900, "satisfaction_client": 88 }, { "ville": "Marseille", "mois": new Date(2024, 3, 1), "produit": "Produit B", "ventes": 165, "revenu": 3300, "satisfaction_client": 91 }, { "ville": "Marseille", "mois": new Date(2024, 4, 1), "produit": "Produit B", "ventes": 160, "revenu": 3200, "satisfaction_client": 89 }, { "ville": "Marseille", "mois": new Date(2024, 5, 1), "produit": "Produit B", "ventes": 155, "revenu": 3100, "satisfaction_client": 88 } ] 34:[] 30:{"id":"9269f0e344053425","slug":"solution-exercice-de-mise-en-pratique-avec-plot","title":"Solution - Exercice de mise en pratique avec Plot","thumbnail":"92869a8de6a29450bb7eaf4f7bcf56563d1886ada3d9ebdd4570f2cd1237f616","access_level":"public","create_time":"$D2024-09-10T07:22:57.342Z","update_time":"$D2026-09-08T13:20:51.022Z","view_time":null,"first_public_time":"$D2024-09-11T07:29:22.235Z","fork":{"id":"51767e69e3085494","slug":"tp-exercice-de-mise-en-pratique-avec-plot","title":"TP - Exercice de mise en pratique avec Plot","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":350,"publish_version":350,"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,"subscribed":null,"forks":3,"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":"Solution - Exercice de mise en pratique avec Plot","cells":[{"id":0,"value":"# Solution - Exercice de mise en pratique avec Plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3,"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"},{"id":203,"value":"Soyez attentifs aux commentaires présents dans les différentes blocs de code !","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":76,"value":"### 1. Scatter plot\n\nPas de difficulté particulière sur ce premier graphique.\nSoyez toutefois attentifs aux choix qui ont été fait dans cet exemple : `inset`, `Plot.frame`, le titre des axes, la couleur de la bordure du symbole selon la ville, etc.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":28,"value":"Plot.plot({\n // Une marge autour des données (mais dans le cadre)\n inset: 12,\n // Le titre de l'axe Y\n y: {\n label: 'Satisfaction client',\n },\n // Le titre de l'axe X\n x: {\n label: 'Revenus',\n },\n //color: { legend: true, range: d3.schemeCategory10.slice(2, 5) },\n marks: [\n // La marque \"dot\" pour tracer les points (on colore en fonction de la ville)\n Plot.dot(dataset, {x: \"revenu\", y: \"satisfaction_client\", fill: 'ville', r: 4}),\n // La marque \"frame\" pour le cadre\n Plot.frame(),\n ]\n})","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":79,"value":"### 2. Line chart\n\nLa principale difficulté résidait dans le filtrage du jeu de données pour ne conserver que \"Produit A\" : `dataset.filter((d) => d.produit === \"Produit A\")`.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":64,"value":"Plot.plot({\n inset: 5,\n title: 'Évolution des ventes pour le produit A',\n y: {\n // On affiche l'axe Y entre 65 et 180\n domain: [65, 180],\n },\n color: {\n legend: true,\n },\n x: {\n // On affiche l'axe X entre le 01/01 et le 02/06\n // (ça permet de faire apparaitre Juin sur l'axe, sinon il n'était pas affiché)\n domain: [new Date(2024, 0, 1), new Date(2024, 5, 2)],\n },\n marks: [\n Plot.frame(),\n // On passe le jeu de données filtré en 1er argument,\n // puise les options (variable pour l'axe x, variable pour l'axe y, couleur)\n // en 2nd argument\n Plot.lineY(dataset.filter((d) => d.produit === \"Produit A\"), {x: \"mois\", y: \"ventes\", stroke: \"ville\"})\n ]\n})","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":88,"value":"### 3. Bar chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":209,"value":"Ici il y a une subtilité : si on n'utilise pas de transformation (telle que `groupX`), les ventes, selon les mois, sont superposées pour chaque ville. Si on colore les barres en fonction de la ville, ça ne se voit pas (mais si on ajoute un tooltip, ou si on veut mettre une bordure noire - cf. le 2nd graphique - on s'en rend alors compte... et si on colore les barres en fonction du mois, ça apparaît clairement, cf. 3ème graphique).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":224,"value":"Plot.plot({\n // On ajoute un titre au graphique\n title: 'Ventes pour le produit A',\n // On choisit manuellement les couleur pour nos 3 modalités\n color: {\n range: ['cyan', 'magenta', 'yellow'],\n },\n // Les marques à utiliser\n marks: [\n // Une marque barY pour avoir une barre qui s'étend le long de l'axe Y\n Plot.barY(\n // On veut seulement le produit A\n dataset.filter((d) => d.produit === \"Produit A\"),\n {\n x: \"ville\",\n y: \"ventes\",\n fill: \"ville\",\n stroke: 'ville',\n sort: {x: \"y\", reverse: true},\n tip: true,\n channels: { date: \"mois\" },\n }\n ),\n Plot.ruleY([0]) // On ajoute manuellement une ligne horizontale, à la valeur 0\n ]\n})","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":134,"value":"Plot.plot({\n // On ajoute un titre au graphique\n title: 'Ventes pour le produit A',\n // On choisit manuellement les couleur pour nos 3 modalités\n color: {\n range: ['cyan', 'magenta', 'yellow'],\n },\n // Les marques à utiliser\n marks: [\n // Une marque barY pour avoir une barre qui s'étend le long de l'axe Y\n Plot.barY(\n // On veut seulement le produit A\n dataset.filter((d) => d.produit === \"Produit A\"),\n {\n x: \"ville\",\n y: \"ventes\",\n fill: \"ville\",\n stroke: 'black',\n sort: {x: \"y\", reverse: true},\n tip: true,\n channels: { \"date\": \"mois\" },\n }\n ),\n Plot.ruleY([0]) // On ajoute manuellement une ligne horizontale, à la valeur 0\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":268,"value":"Ici la transformation `groupX` agrège les données en fonction de la dimension horizontale (x), qui doit être catégorielle, ordinale ou nominale. Elle est principalement utilisée pour créer des diagrammes en barres verticales en calculant une statistique de réduction (comme le count ou le sum) pour chaque groupe.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":33,"value":"Plot.plot({\n // On ajoute un titre au graphique\n title: 'Ventes pour le produit A',\n // On choisit manuellement les couleur pour nos 3 modalités\n color: {\n range: ['cyan', 'magenta', 'yellow'],\n },\n // Les marques à utiliser\n marks: [\n // Une marque barY pour avoir une barre qui s'étend le long de l'axe Y\n Plot.barY(\n // On veut seulement le produit A\n dataset.filter((d) => d.produit === \"Produit A\"),\n // Plot.groupX prend 2 arguments distincts :\n // 1. les \"outputs\" : les statistiques à calculer pour chaque groupe (ici la somme sur y)\n // 2. les \"options\" du mark : on y précise notamment le champ \"y\" à agréger (\"ventes\")\n Plot.groupX(\n { y: \"sum\" },\n {\n x: \"ville\",\n y: \"ventes\",\n fill: \"ville\",\n stroke: 'black',\n sort: {x: \"y\", reverse: true},\n tip: true\n }\n ),\n ),\n Plot.ruleY([0]) // On ajoute manuellement une ligne horizontale, à la valeur 0\n ]\n})","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":211,"value":"Toutefois, vous disposez désormais aussi des compétences pour créer le jeu de données permettant de réaliser ce graphique, et cela avec relativement peu de code :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":213,"value":"const dsAggValues = Array.from(\n // Rollup retourne un object Map, on le convertit directement en un tableau de paire de clé-valeurs\n d3.rollup(\n // On ne s'intéresse qu'au produit A\n dataset.filter((d) => d.produit === \"Produit A\"),\n // On veut récupérer la somme des produit A vendu pour chaque ville\n // (quel que soit le mois)\n v => d3.sum(v, item => item.ventes),\n d => d.ville,\n )\n)","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":242,"value":"// On tranforme le tableau de tableau en un tableau d'objects\nconst dsAgg = dsAggValues.map((d) => ({ ville: d[0], ventes: d[1] }))","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":269,"value":"dsAgg","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"},{"id":217,"value":"On peut ensuite faire le graphique, sans utilisation de `groupX` :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":230,"value":"Plot.plot({\n // On ajoute un titre au graphique\n title: 'Ventes pour le produit A',\n // On choisit manuellement les couleur pour nos 3 modalités\n color: {\n range: ['cyan', 'magenta', 'yellow'],\n },\n // Les marques à utiliser\n marks: [\n // Une marque barY pour avoir une barre qui s'étend le long de l'axe Y\n Plot.barY(\n // On utilise le jeu de données aggrégé\n dsAgg,\n {\n x: 'ville',\n y: 'ventes',\n fill: 'ville',\n sort: {x: \"y\", reverse: true},\n\n }\n ),\n Plot.ruleY([0]) // On ajoute manuellement une ligne horizontale, à la valeur 0\n ]\n})","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":106,"value":"### 4. Bar chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":254,"value":"Utilisons cette fois `Plot.groupX` :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":107,"value":"Plot.plot({\n title: 'Ventes cumulées (produit A et produit B)',\n y: {\n domain: [0, 2000],\n label: \"Total des ventes\",\n },\n marks: [\n Plot.barY(\n // Premier argument, comme d'habitude, le jeu de données à utilisé\n dataset,\n // Second argument, la transformation \"groupX\", pour aggréger en faisant la somme (\"sum\")\n // sur l'axe des Y, et toujours en utilisant les ventes sur l'axe des Y et les villes\n // sur l'axe des X. Comme précédemment, on peut trier avec \"sort\".\n Plot.groupX(\n { y: \"sum\" },\n {\n x: \"ville\",\n y: \"ventes\",\n fill: \"ville\",\n sort: {x: \"y\", reverse: true},\n tip: true,\n }\n ),\n ),\n Plot.ruleY([0]),\n ]\n})","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":98,"value":"### 5. Line chart + facets","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":103,"value":"Plot.plot({\n title: \"Évolution des ventes au cours du 1er semestre pour l'ensemble des produits\",\n marginBottom: 40,\n y: {\n // cf. le graphique 2\n domain: [64, 180],\n label: 'Total des ventes',\n },\n x: {\n // cf. le graphique 2\n domain: [new Date(2024, 0, 1), new Date(2024, 5, 2)],\n label: null,\n },\n grid: true,\n // On veut décomposer les représentation en fonction de la variable \"produit\",\n // en affichant les différentes modalités (ici produit A et produit B)\n // sur l'axe des X :\n facet: {\n data: dataset,\n y: \"produit\",\n label: null\n },\n marks: [\n Plot.lineY(dataset, {x: \"mois\", y: \"ventes\", stroke: \"ville\"}),\n ]\n})","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":267,"value":"### *Rappel des consignes*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":14,"value":"Le jeu de données à utiliser est le suivant :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":21,"value":"$33","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"2","titling":"auto"}} 31:"$30:body"