html2 = !extraVariables.symbol.label
? html`<div style="background-color: #f0f0f0"><i>Choisir une variable pour le symbole !</i></div>`
: html`<div style="background-color: #f0f0f0"><h3>Replacer le symbole "${extraVariables.symbol.label}" par des multiples petits</h3><div>Même remarque que précédemment.</div>
<br>
${smSymbol}
<br/>
<i>Quelle représentation préférez-vous ?</i></div>`
html3 = !extraVariables.size.label
? html`<div style="background-color: #f0f0f0"><i>Choisir une variable pour le taille !</i></div>`
: html`<div style="background-color: #f0f0f0"><h3>Représenter la variable quantitative "${extraVariables.size.label}" par des multiples petits</h3><div>Comment représenter la variable quantitative "${extraVariables.size.label}" ?<div>
</div>
Nous sommes tentés de la représenter par une couleur mais ce n'est pas très lisible.</div>
<br>
${smSymbol_color}
<br/>
<div>Pour y voir plus clair, il est nécessaire de remplacer l'ordonnée précédente (le poids) par "${extraVariables.size.label}"</div>
<br>
${smSymbol_axis}
<br/>
</div>`
html4 = !extraVariables.size.label ||
!extraVariables.stroke.label ||
!extraVariables.symbol.label
? html`<div style="background-color: #f0f0f0"><i>Choisir une variable pour la couleur, le symbole et taille !</i></div>`
: html`<div style="background-color: #f0f0f0"><h3>Représenter quatre dimensions : graphe par "${extraVariables.size.label}", "${extraVariables.stroke.label}" et "${extraVariables.symbol.label}"</h3><div>Nous avons réussi à afficher la variable quantitative, et si nous rajoutions un peu de couleur pour la variable "${extraVariables.symbol.label}" ?
</div>
${smFive_color}
<i>Ce n'est pas idéal, les points continuent à se superposer.</i><br/>
Nous pouvons éviter cela en créant une matrice :
<ul>
<li> la séparation horizontale est fournie par "${extraVariables.stroke.label}"</li>
<li> la séparation verticale est donnée par "${extraVariables.symbol.label}"</li>
</ul>
<div>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.</div>
<br>
${smMatrix}
<br/>
</div>`
smMatrix = {
return Plot.plot({
grid: true,
marginRight: 60,
facet: { label: null },
x: { label: "longueur de la nageoire (mm)" },
y: { label: extraVariables.size.label },
marks: [
Plot.frame(),
Plot.dot(penguins, {
x: "flipper_length_mm",
y: (d) => d[extraVariables.size.value],
fill: "#aaa",
r: 1
}),
Plot.dot(penguins, {
x: "flipper_length_mm",
y: (d) => d[extraVariables.size.value],
fx: extraVariables.stroke.value,
fy: extraVariables.symbol.value
})
]
});
}
d3Legend = require('d3-svg-legend')
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
