Manuel de conception de l'Infobase Santé

Nuage de points

Un nuage de points est une représentation visuelle des données qui utilise des points ou des marqueurs pour montrer les valeurs de 2 ou plusieurs variables. Il est utilisé pour montrer la relation entre 2 choses.

Sur cette page

Quand utiliser cette composante
Quoi éviter
Design et code
Lignes directrices sur le contenu et le design
Lignes directrices sur l'accessibilité

Quand utiliser cette composante

Pour montrer la relation entre 2 ou plusieurs variables.
Pour montrer la distribution des données en 2 ou plusieurs dimensions.
Pour identifier les tendances ou les motifs dans les données.

Exemples

Un nuage de points montrant la relation entre le niveau d'activité physique et le risque de développer une maladie chronique.
Un nuage de points montrant la relation entre le niveau de revenu et l'accès aux soins.

Quoi éviter

N'utilisez pas un nuage de points pour montrer des données qui n'ont pas de valeur numérique claire.
N'utilisez pas un nuage de points pour montrer des données avec des unités ou des échelles différentes.
N'utilisez pas un nuage de points s'il n'y a pas de relation entre les variables.
Rappelez-vous qu'une corrélation entre 2 variables ne signifie pas nécessairement qu'une variable a causé l'autre.

Design et code

HTML

<!-- Ajouter la bibliothèque D3 dans la section head -->
<script src="https://d3js.org/d3.v7.min.js"></script>
   
<!-- Ajouter ce div dans la section où vous voulez ajouter le graphique -->
<div id="scatterGraph"></div>

<script>
  // dimensions and margins
  const margin = {top: 10, right: 30, bottom: 50, left: 90},
          width = 600 - margin.left - margin.right,
          height = 540 - margin.top - margin.bottom;

  // append the svg
  const svg = d3.select("#scatterGraph")
      .append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", `translate(${margin.left}, ${margin.top})`);

  //dummy data Price/Amount
  let data = [
    {"Price":29.80,"Amount":208},
    {"Price":39.80,"Amount":303},
    {"Price":16.50,"Amount":43},
    {"Price":87.10,"Amount":412},
    {"Price":67.31,"Amount":324},
    {"Price":9.10,"Amount":232},
    {"Price":3.30,"Amount":85},
    {"Price":10.10,"Amount":178},
    {"Price":45.33,"Amount":321},
    {"Price":45.21,"Amount":421},
    {"Price":12.13,"Amount":234},
    {"Price":32.19,"Amount":425},
    {"Price":18.31,"Amount":223},
    {"Price":5.90,"Amount":18},
    {"Price":4.99,"Amount":107},
    {"Price":13.32,"Amount":132},
    {"Price":78.11,"Amount":524},
    {"Price":32.31,"Amount":302},
    {"Price":82.31,"Amount":683},
    {"Price":62.31,"Amount":552},];

  // xAxis
  const x = d3.scaleLinear()
  .domain([0, 100])
  .range([ 0, width ]);

  svg.append("g")
    .attr("transform", `translate(0, ${height})`)
    .call(d3.axisBottom(x))
    .style("font-size","12px");

  // yAxis
  const y = d3.scaleLinear()
  .domain([0, 1000])
  .range([ height, 0]);

  svg.append("g")
    .call(d3.axisLeft(y))
    .style("font-size","12px");
      
  // xAxis label 
  svg.append("text")
      .attr("text-anchor", "end")
      .attr("x", width/2 + margin.left - 35)
      .attr("y", height + margin.top + 35)
      .style("font-weight","bold")
      .style("font-size", "23px")
      .text("Prix");

  // yAxis label
  svg.append("text")
      .attr("text-anchor", "end")
      .attr("transform", "rotate(-90)")
      .attr("y", -margin.left + 45)
      .attr("x", -margin.top - height/2 + 60)
        .style("font-weight","bold")
        .style("font-size", "23px")
      .text("Montant")

    // Add graph data points
    svg.append('g')
    .selectAll("dot")
    .data(data)
    .join("circle")
        .attr("cx", function (d) { return x(d.Price); } )
        .attr("cy", function (d) { return y(d.Amount); } )
        .attr("r", 7)
        .style("fill", "#69b3a2");
</script>

Lignes directrices sur le contenu et le design

Pensez à ajouter une ligne montrant la tendance s'il y a une relation claire entre les variables.
N'incluez pas trop de points de données - s'il y a trop de points, le graphique peut devenir confus.
Suivez les lignes directrices générales sur le design.

Lignes directrices sur l'accessibilité

Fournissez un tableau de données avec le graphique.
Si le nuage de points raconte une histoire claire, incluez cette histoire dans le texte alternatif. Par exemple, si le graphique montre une relation positive ou négative claire entre 2 variables, écrivez-le dans le texte alternatif.
Suivez les lignes directrices générales sur l'accessibilité.

Date de modification :: 2023-04-12

Sélection de la langue