31:Tcd1,### *Marks*, *transforms* et *facet* Les principaux types de graphiques sont présentés ci-dessous. La difficulté des graphiques présentés dans ce TP augmente graduellement. N'hésitez pas à essayer de modifier les graphiques pour vous assurez d'avoir bien compris. Soyez particulièrement attentifs aux types de **marques** (dans le tableau de la propriété `marks`) et aux **transformations** (il s'agit du mécanisme utilisé pour transformer les données d'entrées, notamment lorsque qu'un point de données ne correspond pas directement à une marque, comme lors d'une agrégation - voir également plus bas) qui sont utilisées. Certaines de ces marques seront directement liées aux données représentées ([`barY`](https://observablehq.com/plot/marks/bar), [`barX`](https://observablehq.com/plot/marks/bar), [`dot`](https://observablehq.com/plot/marks/dot), [`tickX`](https://observablehq.com/plot/marks/tick), [`areaY`](https://observablehq.com/plot/marks/area), [`lineY`](https://observablehq.com/plot/marks/line), etc.) alors que d'autres viennent habiller le graphique ([`ruleY`](https://observablehq.com/plot/marks/rule), [`ruleX`](https://observablehq.com/plot/marks/rule), [`frame`](https://observablehq.com/plot/marks/frame), etc.). En terme d'API, pour les marques : - Le premier argument est le jeu de données à représenter. - Le second argument est soit : - un *object*, décrivant les propriétés propres à la marque (`x`, `y`, `fill`, etc.) - une **transformation** (*transform*) Les **transformations** (*transform*) vont transformer les données, pour une marque donnée. Elles vont par exemple permettre d'agréger des informations avant de faire apparaître le résultat de l'agrégation (par exemple le nombre d'individus pour chaque modalité d'une catégorie) sous forme d'une marque. Les principales transformations qui seront rencontrées dans ce notebook sont [*bin*](https://observablehq.com/plot/transforms/bin) (`Plot.binX` ou `Plot.binY`), [*stack*](https://observablehq.com/plot/transforms/stack) (`Plot.stackX`, `Plot.stackY`, etc.), [*group*](https://observablehq.com/plot/transforms/group) (`Plot.groupX` ou `Plot.groupY`), [*dodge*](https://observablehq.com/plot/transforms/dodge) (`Plot.dodgeX` ou `Plot.dogeY`) et [window](https://observablehq.com/plot/transforms/window). Ces transformations prennent elles aussi des arguments, généralement sous forme d'un ou plusieurs *objects*. Un autre concept que vous rencontrerez dans les exemples ci-dessous est celui de *__facet__* (parfois appelé *treillis* en français). Ici, les *facet* divisent les données par valeur ordinale ou catégorielle et répètent ensuite un tracé pour chaque partition , en produisant des *small multiples* à des fins de comparaison. Vous retrouverez des informations détaillées dans la documentation de Plot : - [*marks*](https://observablehq.com/plot/features/marks) (voir également la documentation de chaque type de *mark* si besoin, plus bas dans le menu de la documentation) - [*transforms*](https://observablehq.com/plot/features/transforms) (voir également la documentation de chaque type de *transform* si besoin, plus bas dans le menu de la documentation) - [*facets*](https://observablehq.com/plot/features/facet)32:T4a3,Plot.plot({ inset: 6, width: 1000, // Il est possible de donner un nom de classe, il sera attribué à l'élément SVG retourné // Cela peut être utile si vous voulez personnaliser le style du graphique en CSS className: 'my-plot', y: { label: "↑ Apple stock price ($)" }, color: { domain: [-1, 0, 1], range: ["#e41a1c", "#000000", "#4daf4a"] }, marks: [ // On utilise cette autre manière de définir la grille, qui nous permet // de controle sa couleur et son opacité (alors que les méthodes utilisées plus haut // dans les exemples ne le permettait pas). Plot.gridX({ stroke: 'white', strokeOpacity: 0.4 }), Plot.gridY({ stroke: 'white', strokeOpacity: 0.4 }), // Les fines barres (ici blanche) // qui montre les valeurs min / max Plot.ruleX(aapl.slice(-120), { x: "Date", y1: "Low", y2: "High" }), // Les blocs de couleurs vertes ou rouges // qui montrent les valeurs d'ouverture / fermeture Plot.ruleX(aapl.slice(-120), { x: "Date", y1: "Open", y2: "Close", stroke: (d) => Math.sign(d.Close - d.Open), strokeWidth: 4, strokeLinecap: "round", }), ] })33:T4c6,{ const chart = Plot.plot({ color: { type: 'categorical', scheme: 'Set3', // Il s'agit d'un type de palette présent dans ColorBrewer, et dans Plot }, r: { range: [0, 22] }, height: 400, projection: { type: "conic-conformal", domain: quartiersParis }, marks: [ Plot.geo(quartiersParis, { stroke: 'darkgrey', fill: 'rgb(244, 244, 244)' }), // La marque 'Plot.dot' pour les cercles proportionnels Plot.dot(quartiersParis.features, Plot.centroid({ // On colore le point selon le code arrondissement // (un arrondissement contient plusieurs quartiers) fill: d => d.properties.c_ar, stroke: "black", // On définit le rayon des cercles comme proportionnel à la population r: (d) => d.properties.P12_POP, tip: true, // Pour affichage dans le tooltip : channels: { 'Nom': d => d.properties.l_qu, 'Population 2012': d => d.properties.P12_POP, 'Code arrondissement': d => d.properties.c_ar, } })), ] }); return html`

${legendRadius(chart.scale("r"), { ticks: 4, label: "Population 2012" })} ${chart}

`; }34:T519,{ const chart = Plot.plot({ r: { range: [0, 22] }, color: { scheme: 'Reds', // Il s'agit d'un type de palette présent dans ColorBrewer, et dans Plot legend: true, type: 'quantile', n: 6, label: 'Densité de population (hb/km2)', tickFormat: '.0f', }, height: 400, projection: { type: "conic-conformal", domain: quartiersParis }, marks: [ Plot.geo(quartiersParis, { stroke: 'darkgrey', fill: 'rgb(244, 244, 244)' }), // La marque 'Plot.dot' pour les cercles proportionnels Plot.dot(quartiersParis.features, Plot.centroid({ // On colore le point selon la densité de population fill: d => (d.properties.P12_POP / d.properties.surface) * 1000000, stroke: "black", // On définit le rayon des cercles comme proportionnel à la population r: (d) => d.properties.P12_POP, tip: true, // Pour affichage dans le tooltip : channels: { 'Nom': d => d.properties.l_qu, 'Population 2012': d => d.properties.P12_POP, 'Code arrondissement': d => d.properties.c_ar, } })), ] }); return html`

${legendRadius(chart.scale("r"), { ticks: 4, label: "Population 2012" })} ${chart}

`; }35:T7f8,## L'objet retourné par `Plot.plot` Comme vous l'avez peut-être constaté sur le dernier exemple, il est possible de stocker l'objet retourné par `Plot.plot` et de l'inclure dans un bloc HTML personnalisé par exemple. Ceci est possible parce que l'élément renvoyé est une sous-classe [`HTMLElement`](https://developer.mozilla.org/fr/docs/Web/API/HTMLElement) (il s'agit soit d'un élément SVG si aucun *title*, *subtitle* et *caption* n'ont été définis, soit d'un élément HTML de type `figure` si l'une de ces propriétés est utilisée). Admettons que vous utilisiez l'argument `className` lorsque vous créez votre graphique ```js Plot.plot({ classname: 'my-chart', marks: [ Plot.areaY(aapl, { x: "Date", y: "Close", fill: 'green' }), ] }) ``` Si vous n'utilisez ni *title*, ni *subtitle*, ni *caption*, alors l'élément renvoyé est de la forme suivante : ```html ``` Si vous utilisez *title* ou *subtitle* ou *caption* ```js Plot.plot({ classname: 'my-chart', title: 'The title', subtitle: 'The subtitle', caption: 'Some caption', marks: [ Plot.areaY(aapl, { x: "Date", y: "Close", fill: 'green' }), ] }) ``` alors l'élément renvoyé est de la forme suivante : ```html

The title

The subtitle

Some caption ``` Cette information peut vous être utile si vous souhaitez personnaliser le style d'une de vos figure en CSS par exemple : ```css .my-chart-figure > h2, .my-chart-figure > h3 { font-family: monospace; } ```
Par ailleurs, regardez le graphique ci-dessous (source : https://observablehq.com/@hrbrmstr/machinating-observable-plot-axis-text) : les axes du graphiques sont en réalité des liens, s'ouvrant dans un nouvel onglet. Regardez le [code](https://observablehq.com/@hrbrmstr/machinating-observable-plot-axis-text#res) de l'auteur de cette visualisation afin de comprendre comment il a réalisé ceci. 36:[{"id":"5b82b94f17c833577a13a7c9265ead85ed667708ea093a62f8832860647cd3f156ab3eee6479788d384241f4221f11b0d961ba8c6b9c8ec458bbbca8dfcf93f4","href":"https://static.observableusercontent.com/files/5b82b94f17c833577a13a7c9265ead85ed667708ea093a62f8832860647cd3f156ab3eee6479788d384241f4221f11b0d961ba8c6b9c8ec458bbbca8dfcf93f4","name":"quartier_paris_pop12_pop07.geojson","type":"application/geo+json","lastModified":1693213437528.073,"size":338131},{"id":"80860ea8da09d6861847b322c0bfc38f7c15ef9469708f72a0486f7aee86116b9a0cf299394b076e122b9f7d2ac0dce26812b36ce6b0df970fcaed258b473821","href":"https://static.observableusercontent.com/files/80860ea8da09d6861847b322c0bfc38f7c15ef9469708f72a0486f7aee86116b9a0cf299394b076e122b9f7d2ac0dce26812b36ce6b0df970fcaed258b473821","name":"data-1880-2021@1.csv","type":"text/csv","lastModified":1694186510089.71,"size":1506}] 2f:{"title":"Bibliothèque Plot (1)","cells":[{"id":0,"value":"# Bibliothèque Plot (1)","pinned":false,"hidden":false,"mode":"md"},{"id":1318,"value":"

Support de cours pour les étudiants 2025-2026 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"},{"id":1257,"value":"Comme vue dans le premier cours, pour créer une visualisation, nous faisons correspondre des valeurs de données à des propriétés visuelles.\n\nDans de nombreuses visualisations, chaque point de données (ligne d'un tableau) est associé à une marque (un objet visuel, tel qu'un point, une barre, etc.).\n\nLes propriétés des données (colonnes) que nous choisissons sont ensuite associées à des variables rétiniennes telles que la position, la couleur, la taille, etc.","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"## Réaliser les principaux types de graphiques","pinned":false,"hidden":false,"mode":"md"},{"id":52,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":702,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":703,"value":"*Les premières visualisations qui suivent utilisent le jeu de données Alphabet :*","pinned":false,"hidden":false,"mode":"md"},{"id":706,"value":"Inputs.table(alphabet)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1265,"value":"alphabet","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"### Diagramme à barres / *bar chart* (vertical, pour représenter des valeurs quantitatives absolues ou relatives)","pinned":false,"hidden":false,"mode":"md"},{"id":21,"value":"Plot.plot({\n marks: [\n // On utilise la marque barY, une barre, qui s'étend en Y pour \n // chaque individu du tableau de données\n Plot.barY(\n alphabet,\n {\n x: \"letter\", // La valeur de la propriété 'letter' en X\n y: \"frequency\", // La valeur de la propriété 'frequency' en Y\n fill: \"red\", // Même couleur pour tous les individus\n // On ne spécifie rien pour le tri, donc tri par défaut (alphabétique) de l'axe X\n }\n ),\n // Plot.ruleY([0]) // On ajoute manuellement une ligne horizontale, à la valeur 0\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":522,"value":"### Diagramme à points / *Lollipop chart*","pinned":false,"hidden":false,"mode":"md"},{"id":523,"value":"Plot.plot({\n x: {tickPadding: 6, tickSize: 0},\n y: {percent: true},\n marks: [\n // Deux marques : le trait (ruleX) et le point (dot).\n // On trie (propriété 'sort') sur l'axe x avec la valeur rencontrée sur l'axe y\n Plot.ruleX(alphabet, {x: \"letter\", y: \"frequency\", strokeWidth: 2, sort: { x: \"y\", reverse: true }}),\n Plot.dot(alphabet, {x: \"letter\", y: \"frequency\", fill: \"currentColor\", r: 4, sort: { x: \"y\", reverse: true }})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"### Diagramme à barres / *bar chart* (horizontal, pour représenter des valeurs quantitatives absolues ou relatives)","pinned":false,"hidden":false,"mode":"md"},{"id":33,"value":"Plot.plot({\n color: {\n // Le domaine d'entrée de nos valeur (voir plus bas comment cette valeur est calculée)\n domain:['Voyelle', 'Consonne'],\n // La plage de sortie correspondante (on aurait pu laisser les couleurs par défaut\n // comme dans le prochain graphique)\n range: ['lightblue', 'lightgreen'],\n // On demande explicitement l'affichage de la légende\n legend: true,\n },\n marks: [\n // Toujours la marque bar, mais cette fois 'barX', elle s'étend sur l'axe X\n Plot.barX(\n alphabet,\n {\n x: \"frequency\",\n y: \"letter\",\n sort: { y: \"x\", reverse: true }, // En triant sur l'axe 'y', par la valeur rencontrée sur l'axe 'x'\n fill: (d) => /[AEIOUY]/.test(d.letter) ? 'Voyelle' : 'Consonne', // Avec une couleur différente voyelle/consomne\n }\n ),\n Plot.ruleX([0]) // On ajoute une ligne verticale, à la valeur 0\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":605,"value":"### Diagramme à barres empilées","pinned":false,"hidden":false,"mode":"md"},{"id":621,"value":"Ici pour montrer la fréquence de chaque espèce de manchot (Adelie, Chinstrap et Gentoo) sur chacune des îles étudiées (Biscoe, Dream, etc.)","pinned":false,"hidden":false,"mode":"md"},{"id":607,"value":"Plot.plot({\n color: {\n // On affichage la légend, mais on laisse les couleurs catégorielles par défault\n legend: true,\n },\n marks: [\n Plot.barY(\n penguins,\n // C'est la première transformation que nous rencontrons, groupX,\n // on l'utilise pour compter le nombre d'observation dans chaque groupe\n Plot.groupX(\n // On stocke le compte (count) d'individu dans la propriété 'y'\n // qui sera utilisé pour les barres\n { y: \"count\" },\n { x: \"island\", fill: \"species\" },\n )\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":623,"value":"### Diagramme à barres groupées","pinned":false,"hidden":false,"mode":"md"},{"id":634,"value":"Ce ne sont pas les données qui mettent le plus en valeur ce genre de graphique (mais ici ça nous permet de comparer avec le diagramme à barres empilées).","pinned":false,"hidden":false,"mode":"md"},{"id":627,"value":"Plot.plot({\n x: {axis: null},\n y: {grid: true}, // Une grille, sur l'axe Y\n color: { legend: true},\n marks: [\n Plot.barY(\n penguins,\n // On utilise toujours la transformation 'groupX' pour compter le nombre d'observation dans chaque groupe\n Plot.groupX(\n { y: \"count\" },\n {\n x: \"species\", // On veut toujours les espèces sur l'axe X\n y: \"population\", // Le compte de population sur l'axe Y\n fill: \"species\", // Une coloration en fonction de l'espèce\n fx: \"island\", // Et un facettage sur la valeur \"island\" (i.e répéter le graphique pour chaque island)\n },\n )\n ),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":709,"value":"---\n\n*Les visualisations suivantes utilisent le jeu de données Aapl, il s'agit du cours des actions Apple, chaque jour d'ouverture de la bourse, de 2013 à 2018 :*","pinned":false,"hidden":false,"mode":"md"},{"id":711,"value":"Inputs.table(aapl)","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"### Diagramme à ligne brisée / *line chart* (avec des données temporelles)","pinned":false,"hidden":false,"mode":"md"},{"id":37,"value":"Plot.plot({\n marks: [\n Plot.lineY(aapl, {x: \"Date\", y: \"Close\", stroke: 'blue'}), // Pour une ligne, on définit sa couleur avec 'stroke'\n Plot.ruleY([0]), // On ajoute une ligne horizontale, à la valeur 0\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":555,"value":"Les axes (et leurs étiquettes) sont ajoutés automatiquement, mais il reste possible de les modifier, en ajoutant [les marques `axisX` et `axisY`](https://observablehq.com/plot/marks/axis) et les paramètres appropriés :","pinned":false,"hidden":false,"mode":"md"},{"id":553,"value":"Plot.plot({\n y: {\n label: \"Prix à la fermeture ($)\",\n },\n marks: [\n Plot.ruleY([0]),\n Plot.axisX({ticks: \"3 months\"}), // Un axe X personnalisé\n Plot.gridX(), // Une grille, seulement au départ de l'axe X\n Plot.line(aapl, {x: \"Date\", y: \"Close\"}) // La ligne brisée à ajouter\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"### Graphique en aires / *area chart* (avec des données temporelles)","pinned":false,"hidden":false,"mode":"md"},{"id":60,"value":"Plot.plot({\n marks: [\n Plot.areaY(aapl, { x: \"Date\", y: \"Close\", fill: 'green' }), // Pour une surface, on définit sa couleur avec 'fill'\n Plot.ruleY([0]) // On ajoute une ligne horizontale, à la valeur 0\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":493,"value":"### Diagramme à ligne lissée / *Smooth line chart*","pinned":false,"hidden":false,"mode":"md"},{"id":681,"value":"aapl.slice(-130)","pinned":false,"hidden":false,"mode":"ojs"},{"id":380,"value":"Plot.plot({\n // On peut définir des styles pour tous le graphique\n // avec la propriété style\n style: {\n fontFamily: 'monospace',\n backgroundColor: 'rgba(245, 245, 220, 0.4)',\n color: 'rgb(12, 5, 12)'\n },\n // Une autre manière d'afficher une grille, ici sur les 2 axes\n grid: true,\n marks: [\n // Une ligne pour l'axe des abscisse\n Plot.ruleY([0]),\n // Une ligne pour l'axe des ordonnées\n Plot.ruleX([d3.min(aapl, d => d.Date)]),\n // On utilise ici une transformation (windowY) qui calcule une fenêtre mobile\n // et en dérive des statistiques qui seront utilisées dans le graphique\n Plot.lineY(aapl, Plot.windowY({x: \"Date\", y: \"Close\", k: 80, reduce: \"mean\"}))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":657,"value":"### Graphique en chandeliers japonais / *candlestick chart* ou *k-line*","pinned":false,"hidden":false,"mode":"md"},{"id":687,"value":"C'est un type de graphique utilisé en analyse technique boursière pour représenter les variations d'un cours.\n\nL'analyse d'un graphique en chandeliers sur une période passée est supposée donner des indications sur le cours futur : une bougie rouge indique une tendance baissière alors qu'une bougie verte indique une tendance haussière.\n\nVoir [ce schéma](https://commons.wikimedia.org/wiki/File:Chandelier_japonais_d%C3%A9finition.svg?uselang=fr) pour obtenir de l'aide sur la lecture d'un tel graphique.","pinned":false,"hidden":false,"mode":"md"},{"id":661,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":1168,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":693,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":695,"value":"*Les visualisations suivantes utilisent le jeu de données Olympians :*","pinned":false,"hidden":false,"mode":"md"},{"id":698,"value":"Inputs.table(olympians)","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"### Histogramme (pour représenter une distribution)","pinned":false,"hidden":false,"mode":"md"},{"id":809,"value":"Plot.plot({\n marks: [\n // C'est le second exemple d'utilisation d'une transformation\n // Le premier argument de \"bin\" décrit comment résumer les données\n // le second argument décrit les options propres à la représentation\n // Regardez la documentation pour en savoir plus si besoin : \n // https://observablehq.com/plot/transforms/bin\n // Ici on demande environ 30 bins.\n Plot.rectY(olympians, Plot.binX({y: \"proportion\"}, {x: \"weight\", tip: true, thresholds: 30})),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":816,"value":"Il existe plusieurs méthodes pour déterminer le nombre de barres à créer (et donc la largeur des classes) lors de la création d'un histogramme :","pinned":false,"hidden":false,"mode":"md"},{"id":811,"value":"viewof binwidthMethod = Inputs.select(\n // Un objet Map, où les clés sont\n // affichées dans le selecteur, et où les \n // valeurs sont ce qui est retournée\n // dans la variable définie avec viewof\n new Map([\n ['Freedman Diaconis', 'freedman-diaconis'],\n ['Scott', 'scott'],\n ['Sturges', 'sturges']\n ]),\n { label: \"Bin-width method\" }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":827,"value":"*(les méthodes Freeedman Diaconis et Scott renvoient souvent le même résultat - c'est notamment le cas ici)*","pinned":false,"hidden":false,"mode":"md"},{"id":73,"value":"Plot.plot({\n marks: [\n // Ici, la valeur de thresholds est donc une chaine de caractère,\n // au choix enter 'freedman-diaconis', 'scott' et 'sturges'\n Plot.rectY(olympians, Plot.binX({y: \"proportion\"}, {x: \"weight\", tip: true, thresholds: binwidthMethod})),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":835,"value":"Il est également possible de définir manuellement l'intervalle des classes à créer :","pinned":false,"hidden":false,"mode":"md"},{"id":831,"value":"viewof intervalSize = Inputs.range([1, 25], {label: \"Interval size\", step: 1, value: 10})","pinned":true,"hidden":false,"mode":"ojs"},{"id":829,"value":"Plot.plot({\n marks: [\n // Notez qu'ici nous n'utilisons donc plus la propriété thresholds\n // mais la propriété interval\n Plot.rectY(olympians, Plot.binX({y: \"proportion\"}, {x: \"weight\", tip: true, interval: intervalSize})),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":929,"value":"On peut facilement transformer ce diagramme en barres en un diagramme en barres empilées en demandant à colorer les barres différemment selon la variable `sex` :","pinned":false,"hidden":false,"mode":"md"},{"id":927,"value":"Plot.plot({\n color: { legend: true },\n marks: [\n Plot.rectY(olympians, Plot.binX({y: \"proportion\"}, {x: \"weight\", tip: true, interval: intervalSize, fill: 'sex'})),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":998,"value":"### Densité et densité superposées (pour représenter une distribution)","pinned":false,"hidden":false,"mode":"md"},{"id":1117,"value":"Plot.plot({\n marginLeft: 60,\n x: { nice: true },\n marks: [\n Plot.areaY(\n olympians,\n Plot.binX(\n { y: \"proportion\" },\n {\n x: \"weight\",\n fill: \"blue\",\n stroke: 'blue',\n fillOpacity: 0.1,\n strokeWidth: 1.5,\n thresholds: 30,\n curve: \"natural\"\n }\n )\n ),\n Plot.ruleY([0]),\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":933,"value":"Plot.plot({\n marginLeft: 60,\n x: { nice: true },\n color: { legend: true },\n marks: [\n Plot.areaY(\n olympians,\n Plot.binX(\n // On utilise y2 pour éviter d'empiler automatiquement les aires\n // Vous pouvez changer y2 en y pour voir la différence\n // (attention, les valeurs de l'axe Y ne seront plus les même)\n { y2: \"proportion\" },\n {\n x: \"weight\",\n // Si on utilise une variable (ici 'sex') pour fill et/ou stroke,\n // (par rapport au graphique précédent), alors la densité est représentée\n // de manière différenciée selon la variable 'sex'\n fill: \"sex\",\n stroke: \"sex\",\n fillOpacity: 0.1,\n strokeWidth: 1.5,\n thresholds: 30,\n curve: \"natural\",\n }\n )\n ),\n Plot.ruleY([0]),\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":121,"value":"### Boite à moustache / *box plot* (pour représenter une distribution)","pinned":false,"hidden":false,"mode":"md"},{"id":1293,"value":"La marque [box](https://observablehq.com/plot/marks/box) est une marque composite (composée de plusieurs autres marques) qui résume les distributions unidimensionnelles. Elle comprend une ligne (marque *rule*) représentant les valeurs extrêmes (hors valeurs aberrantes), une boite (marque *bar*) représentant l'intervalle interquartile, une coche (marque *tick*) représentant la valeur médiane et des points représentant les outliers. Elle utilise la transformation en groupe (transformation [*group*](https://observablehq.com/plot/transforms/group)) pour regrouper et agréger les données.","pinned":false,"hidden":false,"mode":"md"},{"id":119,"value":"Plot.plot({\n marks: [\n Plot.boxX(olympians, {x: \"weight\"}),\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":136,"value":"### *Ticks* / *Rug plot* (pour représenter une distribution)","pinned":false,"hidden":false,"mode":"md"},{"id":134,"value":"Plot.plot({\n marks: [\n // Un 'tick' par individu\n Plot.tickX(olympians, {x: \"weight\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":314,"value":"### Dot histogram (pour représenter une distribution)","pinned":false,"hidden":false,"mode":"md"},{"id":312,"value":"Plot.plot({\n r: {range: [0, 14]},\n marks: [\n Plot.dot(\n olympians,\n Plot.binX(\n // On stocke le compte (count) de chaque bin dans la propriété 'r'\n // qui sera utilisé pour dessiner le rayon des cercle\n {r: \"count\"},\n {x: \"weight\"}\n )\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":218,"value":"### *Beeswarm* (pour représenter une distribution)","pinned":false,"hidden":false,"mode":"md"},{"id":220,"value":"Plot.plot({\n height: 400,\n marks: [\n Plot.dot(\n olympians.slice(0, 1000),\n // La transformation 'dodge' (on pourrait dire \"esquive\" en français) \n // calcule une autre dimension (ici en Y) de la position de manière\n // à ce que les points soient densément empilés sans se chevaucher\n Plot.dodgeY(\"middle\", {x: \"weight\"}))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":298,"value":"### *Beeswarm* (pour représenter une distribution) + Couleur en fonction d'une modalité","pinned":false,"hidden":false,"mode":"md"},{"id":289,"value":"Plot.plot({\n height: 400,\n color: { legend: true }, // Nécessaire pour avoir l'affichage de la légende\n marks: [\n Plot.dot(\n olympians.slice(0, 1000),\n // La transformation 'dodge' (on pourrait dire \"esquive\" en français) \n // calcule une autre dimension (ici en Y) de la position de manière\n // à ce que les points soient densément empilés sans se chevaucher\n Plot.dodgeY(\"middle\", {x: \"weight\", fill: 'sex'})\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":507,"value":"### *Diverging stacked dot plot*","pinned":false,"hidden":false,"mode":"md"},{"id":499,"value":"Plot.plot({\n y: {\n grid: true,\n label: \"← Women · Men →\",\n labelAnchor: \"center\",\n tickFormat: Math.abs\n },\n marks: [\n Plot.dot(\n olympians.slice(0, 1000),\n // La transformation \"stack\" pour former des empilement, ici sur l'axe Y\n // et avec stackY2 pour permettre un meilleur positionnement par rapport\n // à l'axe\n Plot.stackY2({\n x: 'weight',\n y: (d) => d.sex === \"male\" ? 1 : -1, // Position par rapport à l'axe\n fill: \"sex\",\n })\n ),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"### Boites à moustaches (*box plot*) - Pour visualiser plusieurs distributions","pinned":false,"hidden":false,"mode":"md"},{"id":54,"value":"Plot.plot({\n marginLeft: 100,\n marks: [\n // Les lignes pointillées, aux valeurs indiquées\n Plot.ruleX([40, 60, 80, 100, 120, 140, 160], { stroke: 'grey', strokeDasharray: '5 20', strokeWidth: 0.5 }),\n // Par rapport au box plot précédent, on spécifie le nom d'une variable\n // catégorielle ('sport'), qui va permettre de décomposer la\n // création des box plots pour produire des small multiples\n Plot.boxX(olympians, {x: \"weight\", y: \"sport\", sort: {y: \"x\"}}),\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":245,"value":"### *Facets* + Histogramme","pinned":false,"hidden":false,"mode":"md"},{"id":249,"value":"Plot.plot({\n marginRight: 100,\n title: 'Mon super graphique',\n subtitle: 'Avec les données de 2012',\n caption: 'Fig 1. ',\n // On utilise ici explicitement le concept de facet,\n // en spécifiant le jeu de données, l'axe sur lequel produire\n // les small multiples ('y') et la variable à utiliser ('sport')\n facet: {\n data: olympians,\n y: \"sport\",\n },\n marks: [\n Plot.rectY(olympians, Plot.binX({y: \"count\"}, {x: \"weight\"})),\n // Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1470,"value":"### *Facets* et *Dots* - Une autre manière de comparer plusieurs distributions ","pinned":false,"hidden":false,"mode":"md"},{"id":1471,"value":"Plot.plot({\n height: 400,\n marginTop: 0,\n marginLeft: 100,\n x: {inset: 10, grid: true, label: \"weight (kg) →\"},\n y: {axis: null, inset: 2},\n color: {legend: true},\n // On fait appel au mécanisme de facet,\n // en demandant à décomposer le tracé des points\n // selon la variable 'sport', sur l'axe Y\n facet: {\n data: olympians,\n y: \"sport\",\n marginLeft: 50\n },\n marks: [\n // Une marque pour le cadre\n Plot.frame({stroke: \"#aaa\", strokeWidth: 0.5}),\n // Une marque pour les points représentants les individus,\n // avec un remplissage différent selon les modalité de la variable \"sex\"\n Plot.dot(olympians, {x: \"weight\", y: \"sex\", fill: \"sex\", r: 1})\n ],\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"### Nuage de points (*scatter plot*)","pinned":false,"hidden":false,"mode":"md"},{"id":45,"value":"// Un scatter plot dans sa forme la plus simple\nPlot.plot({\n marks: [\n Plot.dot(olympians, {x: \"height\", y: \"weight\", stroke: 'red'})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1073,"value":"### Nuage de points (*scatter plot*) + filtrage des données et tooltip","pinned":false,"hidden":false,"mode":"md"},{"id":861,"value":"Plot.plot({\n grid: true,\n inset: 4,\n marks: [\n Plot.dot(\n olympians,\n {\n x: \"height\",\n y: \"weight\",\n stroke: 'red',\n // Seulement les athletes ayant gagné une médaille\n filter: d => d.bronze + d.silver + d.gold > 0,\n // Avec un tooltip au survol\n tip: true,\n // Deux champs à ajouter dans le tooltip\n channels: {\n 'Nombre de total de médailles': d => d.bronze + d.silver + d.gold,\n 'Sport': d => d.sport,\n },\n }\n ),\n Plot.frame()\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":214,"value":"### *Facets* + Nuage de points","pinned":false,"hidden":false,"mode":"md"},{"id":212,"value":"Plot.plot({\n height: 3000,\n width: 1000,\n marginRight: 100,\n // On peut utiliser le système de facet pour produire des small multiples\n // selon deux variables, ici 'sex' sur l'axe 'x' \n // et 'sport' sur l'axe 'y'\n facet: {\n data: olympians,\n y: \"sport\",\n x: \"sex\",\n },\n marks: [\n Plot.frame(),\n Plot.dot(olympians, {x: \"height\", y: \"weight\", stroke: 'darkgreen'})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"### *Density plot*","pinned":false,"hidden":false,"mode":"md"},{"id":109,"value":"Plot.plot({\n marks: [\n // On utilise pour ça la marque \"density\",\n // on peut utiliser une couleur fixe (comme \"red\") dans le champ stroke\n // ou une couleur basée sur la valeur de densité calculée (en mettant \"density\")\n Plot.density(olympians, { x: \"height\", y: \"weight\", stroke: \"density\" })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":175,"value":"### Hex bin","pinned":false,"hidden":false,"mode":"md"},{"id":179,"value":"Plot.plot({\n color: {\n scheme: \"ylgnbu\"\n },\n marks: [\n Plot.hexagon(olympians, Plot.hexbin({fill: \"sum\"}, {x: \"height\", y: \"weight\"}))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":148,"value":"### Nuage de points et régression linéaire (un seul groupe)","pinned":false,"hidden":false,"mode":"md"},{"id":144,"value":"Plot.plot({\n marks: [\n Plot.dot(penguins, {x: \"culmen_length_mm\", y: \"culmen_depth_mm\"}),\n // On utilise les mêmes propriétés x et y que pour la marque \"dot\"\n Plot.linearRegressionY(penguins, {x: \"culmen_length_mm\", y: \"culmen_depth_mm\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":162,"value":"### Nuage de points et régression linéaire (plusieurs groupes)\n","pinned":false,"hidden":false,"mode":"md"},{"id":158,"value":"Plot.plot({\n inset: 4,\n marks: [\n // On ajoute aussi\n Plot.dot(\n penguins,\n {\n x: \"culmen_length_mm\",\n y: \"culmen_depth_mm\",\n fill: 'species', // On ajoute la propriété 'fill' pour avoir un remplissage différent selon l'espèce\n tip: true, // On ajoute la propriété 'tip' pour avoir des tooltips au survol\n }\n ),\n Plot.linearRegressionY(\n penguins,\n {\n x: \"culmen_length_mm\",\n y: \"culmen_depth_mm\",\n stroke: 'species', // Pour calculer les régressions linéaires pour chaque espèce\n }\n ),\n Plot.frame(),\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":169,"value":"### Carte de chaleur / *heatmap*","pinned":false,"hidden":false,"mode":"md"},{"id":713,"value":"*Jeu de données Weather:*","pinned":false,"hidden":false,"mode":"md"},{"id":714,"value":"Inputs.table(weather.slice(-365))","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"{\n const months = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'];\n \n return Plot.plot({\n subtitle: 'New-York - Température journalière maximale',\n marginLeft: 60,\n color: {\n legend: true, // Si on ne précise pas ça, la légende n'est pas affichée par défaut\n label: 'Température maximale', // Si on ne précise pas ça, le label est le nom de la variable\n },\n marks: [\n Plot.cell(weather.slice(-365), {\n x: d => d.date.getUTCDate(),\n y: d => months[d.date.getUTCMonth()],\n // Remplissage selon la variable \"temp_max\" (la progression de couleur utilisée est ici celle par défaut)\n fill: \"temp_max\",\n sort: { y: null } // Si on ne précise pas ça, l'axe est trié par ordre alphabétique des noms de mois\n }),\n ]\n })\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1323,"value":"### *Warming stripes*\n\n[Ce type de graphique](https://fr.wikipedia.org/wiki/Bandes_du_r%C3%A9chauffement_climatique) a été popularisé en 2018 par le climatologue Ed Hawkins et permet de représenter la variation chronologique de température, année par année par rapport à une valeur de référence (en bleu lorsque la valeur est inférieure et en rouge lorsque la valeur est supérieure).","pinned":false,"hidden":false,"mode":"md"},{"id":1325,"value":"Plot.plot({\n x: { round: true },\n color: { scheme: \"BuRd\" },\n width: 700,\n height: 200,\n marks: [\n Plot.barX(dataClimate, {\n x: \"Year\",\n fill: \"Anomaly\",\n interval: \"year\", // données annuelles (pour les étiquettes sur l'axe X)\n inset: 0, // pas d'espace entre les barres,\n tip: true,\n channels: {\n // On formatte nous même le champ \"Year\" du tooltip\n Year: d => `${d.Year.getUTCFullYear()}`\n }\n })\n ],\n caption: md`Data source: https://www.ncei.noaa.gov/access/monitoring/climate-at-a-glance/`\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":568,"value":"### Corrélogramme / *Correlogram*\n\nLa marque `cell` peut également être utilisée pour créer des matrice de corrélation (corrélogrames), ici combiné avec la marque `text` pour afficher les valeurs sur chacune des cellules.","pinned":false,"hidden":false,"mode":"md"},{"id":563,"value":"Plot.plot({\n marginLeft: 90,\n height: 380,\n width: 700,\n label: null, // Pour n'afficher ni le label de l'axe X ni le label de l'axe Y\n color: {\n scheme: \"RdYlBu\", // Il s'agit d'une palette \"divergente\" \"Red - Yellow - Blue\" de ColorBrewer\n pivot: 0, // La valeur correspondant au milieu de la palette \n legend: true, // Affichage de la légende\n label: \"correlation\",\n },\n marks: [\n Plot.cell(correlations, { x: \"a\", y: \"b\", fill: \"correlation\" }),\n Plot.text(correlations, {\n x: \"a\",\n y: \"b\",\n text: (d) => d.correlation.toFixed(2),\n // Pour avoir une bonne lisibilité, on utilise du texte noir quand la cellule est claire\n // et du texte blanc quand la cellule est foncée :\n fill: (d) => (Math.abs(d.correlation) > 0.6 ? \"white\" : \"black\")\n }),\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":497,"value":"### Diagramme en arbre","pinned":false,"hidden":false,"mode":"md"},{"id":382,"value":"Plot.plot({\n axis: null,\n margin: 20,\n marginRight: 120,\n marks: [\n Plot.tree(flare.slice(0, 50), {path: \"name\", delimiter: \".\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":208,"value":"### Entités géographiques","pinned":false,"hidden":false,"mode":"md"},{"id":204,"value":"Plot.plot({\n height: 400,\n // Il est nécessaire de définir une projection lorsque les données ne le sont pas déjà\n // (quand elles sont en coordonnées géographiques longitude / latitude)\n // et le \"domain\", c'est à dire ici l'emprise géographique de la carte à créer\n projection: { type: \"conic-conformal\", domain: quartiersParis },\n marks: [\n // La marque Plot.geo pour afficher les polygones représentant les quartiers\n Plot.geo(quartiersParis, {\n stroke: 'black'\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":196,"value":"### Carte choroplèthe","pinned":false,"hidden":false,"mode":"md"},{"id":197,"value":"Plot.plot({\n height: 400,\n projection: { type: \"conic-conformal\", domain: quartiersParis },\n // On définit l'échelle de couleurs qui sera utilisé pour le remplissage\n color: {\n type: \"quantile\",\n n: 6,\n scheme: \"Oranges\", // Il s'agit d'un type de palette présent dans ColorBrewer, et dans Plot\n label: \"Densité de population (hb / km2)\",\n legend: true,\n tickFormat: d => d.toFixed(),\n },\n marks: [\n Plot.geo(quartiersParis, {\n stroke: 'grey',\n // Cette fois on remplit selon la valeur de densité de population\n fill: (d) => (d.properties.P12_POP / d.properties.surface) * 1000000,\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":490,"value":"### Carte en symboles proportionnels (variable quantitative absolue) + remplissage selon une variable catégorielle","pinned":false,"hidden":false,"mode":"md"},{"id":463,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":1089,"value":"### Carte en symboles proportionnels (variable quantitative absolue) + remplissage selon une variable quantitative relative","pinned":false,"hidden":false,"mode":"md"},{"id":1002,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":1131,"value":"$35","pinned":false,"hidden":false,"mode":"md"},{"id":1138,"value":"res","pinned":false,"hidden":false,"mode":"ojs"},{"id":574,"value":"## Pour aller plus loin\n\nDeux incontournables :\n\n- [La documentation de Plot](https://observablehq.com/plot)\n- [La galerie de Plot](https://observablehq.com/@observablehq/plot-gallery)\n\nÉgalement utile si vous avez l'habitude d'utiliser *ggplot2* :\n- [Comparaison entre Plot et *ggplot2*](https://observablehq.com/@observablehq/plot-from-ggplot2)\n\nPar ailleurs, n'hésitez pas à utiliser la barre de recherche sur la plateforme Observable ni à naviguer dans les graphiques en tendance actuellement (https://observablehq.com/trending).","pinned":false,"hidden":false,"mode":"md"},{"id":577,"value":"## Réaliser des visualisations plus compliquées, avec Plot, en combinant les marques","pinned":false,"hidden":false,"mode":"md"},{"id":590,"value":"**Exemple 1 :**\n\nLa visualisation suivante a été réalisée avec Plot par [Jo Wood]() (source : https://observablehq.com/@jwolondon/wheat-and-wages) et est inspirée du graphique de William Playfair représentant [le prix du blé et le salaire hebdomadaire de 1565 à 1821](https://commons.wikimedia.org/wiki/File:Chart_Showing_at_One_View_the_Price_of_the_Quarter_of_Wheat,_and_Wages_of_Labour_by_the_Week,_from_1565_to_1821.png)","pinned":false,"hidden":false,"mode":"md"},{"id":583,"value":"result","pinned":false,"hidden":false,"mode":"ojs"},{"id":874,"value":"**Exemple 2 :**\n\nLa visualisation suivante a été créée avec Plot par Allison Horst et Philippe Rivière (source: https://observablehq.com/@observablehq/us-energy-mix-bubble-map-recreation) et vise à récréer une carte présente dans un [article du Washington Post](https://www.washingtonpost.com/graphics/national/power-plants/).","pinned":false,"hidden":false,"mode":"md"},{"id":890,"value":"chart","pinned":false,"hidden":false,"mode":"ojs"},{"id":896,"value":"**Exemple 3 :**\n\nÉvolution du traffic routier pendant la période du COVID, avec Plot, par Philippe Rivière (Source : https://observablehq.com/@fil/france-road-traffic-covid).\n\nToutes les valeurs de l'ensemble de données sont normalisées en fonction de la moyenne du trafic journalier au cours de la période comprise entre 13 janvier 2020 et le 02 février 2020 (évitant ainsi les vacances scolaires et l'impact des restrictions COVID).","pinned":false,"hidden":false,"mode":"md"},{"id":901,"value":"chart2","pinned":false,"hidden":false,"mode":"ojs"},{"id":572,"value":"---\n\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":561,"value":"correlations = {\n function corr(x, y) {\n const n = x.length;\n if (y.length !== n)\n throw new Error(\"The two columns must have the same length.\");\n const x_ = d3.mean(x);\n const y_ = d3.mean(y);\n const XY = d3.sum(x, (_, i) => (x[i] - x_) * (y[i] - y_));\n const XX = d3.sum(x, (d) => (d - x_) ** 2);\n const YY = d3.sum(y, (d) => (d - y_) ** 2);\n return XY / Math.sqrt(XX * YY);\n }\n \n const fields = [\"economy (mpg)\", \"cylinders\", \"displacement (cc)\", \"power (hp)\", \"weight (lb)\", \"0-60 mph (s)\", \"year\"]\n \n return d3.cross(fields, fields).map(([a, b]) => ({\n a,\n b,\n correlation: corr(Plot.valueof(cars, a), Plot.valueof(cars, b))\n }))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"quartiersParis = FileAttachment(\"quartier_paris_pop12_pop07.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1327,"value":"dataClimate = (await FileAttachment(\"data-1880-2021@1.csv\").csv()).map((d => ({Year: new Date(d.Year, 0, 1, 1), Anomaly: +d.Anomaly})))","pinned":false,"hidden":false,"mode":"ojs"},{"id":483,"value":"import { legendRadius } from '@recifs/a-radius-legend-for-plot-665';","pinned":false,"hidden":false,"mode":"ojs"},{"id":875,"value":"import { chart } from '@observablehq/us-energy-mix-bubble-map-recreation';","pinned":false,"hidden":false,"mode":"ojs"},{"id":898,"value":"import {chart as chart2} from '@fil/france-road-traffic-covid';","pinned":false,"hidden":false,"mode":"ojs"},{"id":579,"value":"import { result } from '@sd-progwebdataviz/playfairs-wheat-and-wages'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1134,"value":"import { res } from '@hrbrmstr/machinating-observable-plot-axis-text'","pinned":false,"hidden":false,"mode":"ojs"},{"id":585,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W36","stdlib":"1","titling":"auto"}