2b:null 2c:["$","title",null,{"children":"Nuage de points | ToulouseDataviz | Observable"}] 31:T199c,chart = { const height = 500; const margin = { top: 20, right: 20, bottom: 30, left: 40 }; // axis const xAccessor = (d) => d.flipper_length_mm; const yAccessor = (d) => d.body_mass_g / 1000; const xScale = d3 .scaleLinear() .domain(d3.extent(penguins, xAccessor)) .range([margin.left, width - margin.right]) .nice(); const yScale = d3 .scaleLinear() .domain(d3.extent(penguins, yAccessor)) .rangeRound([height - margin.bottom, margin.top]) .nice(); const colorScale = ["#4269d0", "#efb118", "#ff725c"]; const xAxis = d3.axisBottom(xScale); const yAxis = d3.axisLeft(yScale); const xTitle = (g) => g .append("text") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("x", width - margin.right - 80) .attr("y", height - margin.bottom - 5) .html("longueur de la nageoire (mm)"); const yTitle = (g) => g .append("text") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("y", 10) .html("poids (kg)"); // legend const legend = d3 .scaleOrdinal() .domain(penguins.map((d) => d[extraVariables.stroke.value])) .range(colorScale); const legendLabelColor = d3Legend .legendColor() .shape( "path", d3.symbols.map((s) => d3.symbol().type(s)()) ) .scale(legend) .labelOffset(20) .shapePadding(40); const shape = d3.scaleOrdinal( penguins.map((d) => d[extraVariables.symbol.value]), d3.symbols.map((s) => d3.symbol().type(s)()) ); const legendLabelSymbol = d3Legend .legendSymbol() .scale(shape) .labelOffset(20) .shapePadding(40); // marks const color = extraVariables.stroke.value ? d3.scaleOrdinal(colorScale) : d3.scaleOrdinal(["#000"]); // graph const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("background", "#f0f0f0"); svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(xAxis); svg.append("g").call(yAxis).attr("transform", `translate(${margin.left},0)`); const yLabel = svg.append("g").call(yTitle); const xLabel = svg.append("g").call(xTitle); // grid const xGrid = (g) => g .selectAll("line") .data(xScale.ticks()) .join("line") .attr("x1", (d) => xScale(d)) .attr("x2", (d) => xScale(d)) .attr("y1", margin.top) .attr("y2", height - margin.bottom) .style("stroke-width", 0.2) .style("stroke", "black"); const xgridlines = svg.append("g").call(xGrid); const yGrid = (g) => g .attr("class", "grid-lines") .selectAll("line") .data(yScale.ticks()) .join("line") .attr("x1", margin.left) .attr("x2", width - margin.right) .attr("y1", (d) => yScale(d)) .attr("y2", (d) => yScale(d)) .style("stroke-width", 0.2) .style("stroke", "black"); const ygridlines = svg.append("g").call(yGrid); let minSize = Number.MAX_SAFE_INTEGER; let maxSize = 0; data.forEach((d) => { if ( d?.[extraVariables.size.value] && !isNaN(d?.[extraVariables.size.value]) ) { minSize = Math.min(minSize, d[extraVariables.size.value]); maxSize = Math.max(maxSize, d[extraVariables.size.value]); } }); const offset = maxSize - minSize; const scaleFn = (x) => ((x - minSize) / offset) * 1.5 + 0.5; const symbols = svg .append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .selectAll("path") .data(penguins) .join("path") .attr("transform", (d) => { const scale = d[extraVariables.size.value] ? " scale(" + scaleFn(d[extraVariables.size.value]) + ")" : ""; return ( `translate(${xScale(xAccessor(d))}, ${yScale(yAccessor(d))})` + scale ); }) .attr("stroke-width", 1) .attr("stroke", (d) => color(d[extraVariables.stroke.value])) .attr("fill", "none") .attr("d", (d) => shape(d[extraVariables.symbol.value])); if (extraVariables.stroke.value) { svg .append("g") .call(legendLabelColor) .attr( "transform", `translate(${width - margin.right - margin.left - 50}, ${height - 200})` ) .style("font-size", "13px") .style("font-family", "sans-serif"); } if (extraVariables.symbol.value) { svg .append("g") .call(legendLabelSymbol) .attr( "transform", `translate(${width - margin.right - margin.left - 150}, ${ height - 200 })` ) .style("font-size", "13px") .style("font-family", "sans-serif"); } if (extraVariables.size.value) { //titre svg .append("g") .append("text") .attr("x", 30) .attr("y", 0) .text(`${extraVariables.size.label}`) .attr( "transform", `translate(${width - margin.right - margin.left - 350}, ${ height - 175 })` ) .style("font-size", "13px") .style("font-family", "sans-serif"); svg .append("g") .append("path") .attr("d", d3.symbol(d3.symbolCircle)) .attr( "transform", `translate(${width - margin.right - margin.left - 300}, ${ height - 150 })` + " scale(" + scaleFn(minSize) + ")" ) .attr("fill", "none") .attr("stroke", "#000") .attr("stroke-width", 1); svg .append("g") .append("text") .attr("x", 30) .attr("y", 0) .text(minSize.toFixed(2)) .attr( "transform", `translate(${width - margin.right - margin.left - 300}, ${ height - 150 })` ) .style("font-size", "13px") .style("font-family", "sans-serif"); svg .append("g") .append("path") .attr("d", d3.symbol(d3.symbolCircle)) .attr( "transform", `translate(${width - margin.right - margin.left - 300}, ${ height - 120 })` + " scale(" + scaleFn(maxSize) + ")" ) .attr("fill", "none") .attr("stroke", "#000") .attr("stroke-width", 1); svg .append("g") .append("text") .attr("x", 30) .attr("y", 0) .text(maxSize.toFixed(2)) .attr( "transform", `translate(${width - margin.right - margin.left - 300}, ${ height - 120 })` ) .style("font-size", "13px") .style("font-family", "sans-serif"); } return svg.node(); }32:T467,html4 = !extraVariables.size.label || !extraVariables.stroke.label || !extraVariables.symbol.label ? html`

Choisir une variable pour la couleur, le symbole et taille !

` : html`

Représenter quatre dimensions : graphe par "${extraVariables.size.label}", "${extraVariables.stroke.label}" et "${extraVariables.symbol.label}"

Nous avons réussi à afficher la variable quantitative, et si nous rajoutions un peu de couleur pour la variable "${extraVariables.symbol.label}" ?

${smFive_color} Ce n'est pas idéal, les points continuent à se superposer.
Nous pouvons éviter cela en créant une matrice :

la séparation horizontale est fournie par "${extraVariables.stroke.label}"
la séparation verticale est donnée par "${extraVariables.symbol.label}"

En bonus, toute la population des pingouins est représentée sous forme de nuage de points éthéré : cela permet de localiser chaque groupe dans l' ensemble de la population.

${smMatrix}

`33:[{"id":"715db1223e067f00500780077febc6cebbdd90c151d3d78317c802732252052ab0e367039872ab9c77d6ef99e5f55a0724b35ddc898a1c99cb14c31a379af80a","href":"https://static.observableusercontent.com/files/715db1223e067f00500780077febc6cebbdd90c151d3d78317c802732252052ab0e367039872ab9c77d6ef99e5f55a0724b35ddc898a1c99cb14c31a379af80a","name":"penguins.csv","type":"text/csv","lastModified":1706485953807.904,"size":13506}] 2f:{"id":"3aa7141915aea136","slug":"nuage-de-points","title":"Nuage de points","thumbnail":"33c4dc3ce860e14c320d7d311f92d50d3a9da0b2576893d789cbbbd52b309f92","access_level":"public","create_time":"$D2024-01-28T23:52:33.807Z","update_time":"$D2024-02-09T15:19:06.294Z","view_time":null,"first_public_time":"$D2024-02-01T23:05:48.546Z","fork":{"id":"e48bf34c52588bc9","slug":"plot-scatterplot","title":"Plot Scatterplot","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"356546a635010146","login":"tdvz","name":"ToulouseDataviz","avatar_url":"https://avatars-next.observableusercontent.com/8cc8684f3b4b43d6bc2009295d66ea4d6c8dd1f1277afd34eb0f010ade242a05","tier":"starter_2024"},"version":1041,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c522b6e3c699beb9","login":"vvivanloc","name":"Vincent VIVANLOC","avatar_url":"https://avatars-next.observableusercontent.com/3805f5966b13c10af07bad51a9da6491b27c8d208657dce68a8cfb60a9ab85db","tier":null}],"members":[{"type":"team","id":"356546a635010146","login":"tdvz","name":"ToulouseDataviz","avatar_url":"https://avatars-next.observableusercontent.com/8cc8684f3b4b43d6bc2009295d66ea4d6c8dd1f1277afd34eb0f010ade242a05","tier":"starter_2024","role":"editor"},{"type":"individual","id":"c522b6e3c699beb9","login":"vvivanloc","name":"Vincent VIVANLOC","avatar_url":"https://avatars-next.observableusercontent.com/3805f5966b13c10af07bad51a9da6491b27c8d208657dce68a8cfb60a9ab85db","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"d3620e7df67703ac","slug":"production-design-guidelines","title":"Guide DataViz","owner":{"id":"356546a635010146","login":"tdvz","name":"ToulouseDataviz"}},"type":"notebook","body":{"title":"Nuage de points","cells":[{"id":1032,"value":"# Nuage de points","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":611,"value":"html0 = html`

${\"Nuage de points\"}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":0,"value":"html00 = html`

Les données

\n\n

Nous utilisons les données sur les pingouins d'Allison Horst. C'est un jeu de données recueilli par le docteur Kristen Gorman et maintenu par Allison Horst qui décrit les pingouins de la base de recherche américaine Palmer en Antarctique.

\n\n

\nChaque pingouin est caractérisé par son espèce, son île d'origine, la longueur et l'épaisseur de son bec, la longueur de ses nageoires, sa masse et son sexe.\n

\n\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":583,"value":" ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":596,"value":"data","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":604,"value":"html01 = html`

Graphique en nuage de points

\n
\n

\nNous avons choisi d'associer, en abscisse, la longueur de la nageoire et en ordonnées, la masse.\nIl nous reste à représenter l'espèce, l'île d'origine, la longueur et l'épaisseur de son bec et le sexe du pingouin.\n

\n
\n

Essayez de représenter le maximum d'informations avec un nuage de points.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":565,"value":"html02 = html`

Variables

Choisissez-la ou les variables à représenter.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":63,"value":"viewof extraVariables = Inputs.form({\n stroke: Inputs.select(selectOptionsQualitative, {\n label: \"Couleur\",\n format: (x) => x.label\n }),\n\n symbol: Inputs.select(selectOptionsQualitative, {\n label: \"Symbole\",\n format: (x) => x.label\n }),\n size: Inputs.select(selectOptionsQuantitative, {\n label: \"Taille\",\n format: (x) => x.label\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":904,"value":"html03 = html`

${viewof extraVariables}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":573,"value":"html04 = html`

Graphique

Parmi ces différentes variables graphiques : la couleur, le symbole et la taille ; la couleur semble celle qui est la plus lisible.
Lorsque le symbole permet de représenter aussi les différents ensembles, si c'est utile quand les cartouches de couleurs de votre imprimante sont vides, cela reste moins efficace que la couleur.
La taille est la variable la moins adaptée : il est difficile de comparer la taille des différents points.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":149,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":915,"value":"html05 = html`

Essayez de combiner deux variables : il y a trop de variables utilisées ?
Choisissez d'associer une couleur pour l'ile d'origine des pingouins : trop de points sont superposés !

\n\nLa lisibilité de ce graphique se dégrade rapidement !
\n \n \n\n Mais alors, que faire dans ces deux cas ? la réponse ci-dessous.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":575,"value":"html21 = html`

Graphique en multiples petits

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":757,"value":"html1 = !extraVariables.stroke.label\n ? html`

Choisir une variable pour la couleur !

`\n : html`

Replacer la couleur \"${extraVariables.stroke.label}\" par des multiples petits

Ici, la variable représentée précédemment sous forme de couleur : \"${extraVariables.stroke.label}\" sert désormais à construire trois multiples petits et permet d'éviter des points superposés.

\n
\n${smColor}\n
\nQuelle représentation préférez-vous ?

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":944,"value":"html2 = !extraVariables.symbol.label\n ? html`

Choisir une variable pour le symbole !

`\n : html`

Replacer le symbole \"${extraVariables.symbol.label}\" par des multiples petits

Même remarque que précédemment.

\n
\n${smSymbol}\n
\nQuelle représentation préférez-vous ?

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":554,"value":"smSymbol = {\n return Plot.plot({\n facet: {\n data: penguins,\n x: extraVariables.symbol.value\n },\n color: {\n legend: true,\n scheme: \"Observable10\"\n },\n x: { label: \"longueur de la nageoire (mm)\" },\n y: { label: \"poids (kg)\" },\n marks: [\n Plot.frame(),\n Plot.dot(penguins, {\n x: \"flipper_length_mm\",\n y: (d) => d[\"body_mass_g\"] / 1000\n })\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":954,"value":"html3 = !extraVariables.size.label\n ? html`

Choisir une variable pour le taille !

`\n : html`

Représenter la variable quantitative \"${extraVariables.size.label}\" par des multiples petits

Comment représenter la variable quantitative \"${extraVariables.size.label}\" ?

\nNous sommes tentés de la représenter par une couleur mais ce n'est pas très lisible.

\n
\n${smSymbol_color}\n
\n

Pour y voir plus clair, il est nécessaire de remplacer l'ordonnée précédente (le poids) par \"${extraVariables.size.label}\"

\n
\n ${smSymbol_axis}\n
\n

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":524,"value":"smSymbol_color = {\n return Plot.plot({\n facet: {\n data: penguins,\n x: extraVariables.stroke.value\n },\n color: {\n label: `${extraVariables.size.label}`,\n legend: true\n },\n x: { label: \"longueur de la nageoire (mm)\" },\n y: { label: \"poids (kg)\" },\n marks: [\n Plot.frame(),\n Plot.dot(penguins, {\n x: \"flipper_length_mm\",\n y: (d) => d[\"body_mass_g\"] / 1000,\n stroke: (d) => d[extraVariables.size.value]\n })\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":824,"value":"smSymbol_axis = {\n return Plot.plot({\n facet: {\n data: penguins,\n x: extraVariables.stroke.value\n },\n color: {\n legend: true\n },\n x: { label: \"longueur de la nageoire (mm)\" },\n y: { label: extraVariables.size.label },\n marks: [\n Plot.frame(),\n Plot.dot(penguins, {\n x: \"flipper_length_mm\",\n y: (d) => d[extraVariables.size.value]\n })\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":973,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":788,"value":"smFive_color = {\n return Plot.plot({\n facet: {\n data: penguins,\n x: extraVariables.stroke.value\n },\n color: {\n legend: true,\n scheme: \"Observable10\"\n },\n x: { label: \"longueur de la nageoire (mm)\" },\n y: { label: extraVariables.size.label },\n marks: [\n Plot.frame(),\n Plot.dot(penguins, {\n x: \"flipper_length_mm\",\n y: (d) => d[extraVariables.size.value],\n stroke: (d) => d[extraVariables.symbol.value]\n })\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":816,"value":"smMatrix = {\n return Plot.plot({\n grid: true,\n marginRight: 60,\n facet: { label: null },\n x: { label: \"longueur de la nageoire (mm)\" },\n y: { label: extraVariables.size.label },\n marks: [\n Plot.frame(),\n Plot.dot(penguins, {\n x: \"flipper_length_mm\",\n y: (d) => d[extraVariables.size.value],\n fill: \"#aaa\",\n r: 1\n }),\n Plot.dot(penguins, {\n x: \"flipper_length_mm\",\n y: (d) => d[extraVariables.size.value],\n fx: extraVariables.stroke.value,\n fy: extraVariables.symbol.value\n })\n ]\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":865,"value":"html5 = html`

Conclusion

Un nuage de points permet de représenter facilement un jeu de données avec deux variables.
La couleur peut être utile pour une troisième variable.
Ne pas hésiter à se servir des *multiples petits* s'il y a plus de trois variables ou si les points se superposent.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":127,"value":"smColor = {\n return Plot.plot({\n facet: {\n data: penguins,\n x: extraVariables.stroke.value\n },\n color: {\n legend: true,\n scheme: \"Observable10\"\n },\n x: { label: \"longueur de la nageoire (mm)\" },\n y: { label: \"poids (kg)\" },\n marks: [\n Plot.frame(),\n Plot.dot(penguins, {\n x: \"flipper_length_mm\",\n y: (d) => d[\"body_mass_g\"] / 1000\n })\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":560,"value":"- Inspiré par les bloc-notes\n - [scatterplot-symbols-d3 en D3.js](https://observablehq.com/@nikomccarty/scatterplot-symbols-d3)\n - [Plot.dot](https://observablehq.com/@observablehq/plot-dot).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":599,"value":"* Données","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4,"value":"data = FileAttachment(\"penguins.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":153,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":84,"value":"selectOptionsQualitative = [\n { value: null, label: null },\n { value: \"sex\", label: \"Sexe\" },\n { value: \"island\", label: \"Ile\" },\n { value: \"species\", label: \"Espece\" }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":489,"value":"selectOptionsQuantitative = [\n { value: null, label: null },\n { value: \"culmen_length_mm\", label: \"Longueur du bec (mm)\" },\n { value: \"culmen_depth_mm\", label: \"Epaisseur du bec (mm)\" }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":151,"value":"d3Legend = require('d3-svg-legend')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"