Sélection de la langue

Gouvernement du Canada / Government of Canada

Manuel de conception de l'Infobase Santé

  Table des matières

Table des matières


Table des matières

Diagramme circulaire et diagramme en anneau

Un diagramme circulaire est une représentation visuelle des données sur les tailles relatives ou les proportions de différents points de données.

Un diagramme en anneau est similaire à un diagramme circulaire, mais il a un trou au centre, ce qui facilite la comparaison des proportions de différents points de données.

Sur cette page

Quand utiliser cette composante

  • Pour montrer la taille relative ou la proportion de différents points de données.
  • Pour comparer les proportions de différents points de données.
  • Pour illustrer une relation « partie à tout ».

Exemples

  • Un diagramme circulaire illustrant le montant dépensé pour la santé par différentes catégories, telles que les soins hospitaliers, les médicaments sur ordonnance et les soins préventifs.
  • Un diagramme en anneau montrant la proportion de décès dus à différentes causes dans une population.

Quoi éviter

  • N'utilisez pas de diagrammes circulaires ou de diagrammes en anneau pour montrer des données sans valeur numérique claire.
  • N'utilisez pas de diagrammes circulaires ou de diagrammes en anneau pour montrer des données avec des unités ou des échelles différentes.
  • Les diagrammes circulaires et les diagrammes en anneau sont généralement difficiles à lire s'il y a trop de catégories, alors évitez d'utiliser des diagrammes circulaires avec plus de 5 à 6 catégories.
  • Dans la plupart des cas, il existe des alternatives plus efficaces aux diagrammes circulaireset et aux diagrammes en anneau (comme les diagrammes à barres ou les diagrammes à barres empilées).

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="pieGraph"></div>
JS 
<script>
  const width = 650, height = 650, margin = 100;
    
  // radius of the pie graph is half the width or half the height
  const radius = Math.min(width, height) / 2 - margin;
  
  const svg = d3.select("#pieGraph")
    .append("svg")
      .attr("width", width)
      .attr("height", height)
    .append("g")
      .attr("transform", `translate(${width/2},${height/2})`);
  
  // dummy fruit data
  const data = {Pommes: 26, Oranges: 12, Poires:33, Bananes:8, };
  
  const color = d3.scaleOrdinal()
    .domain(["Pommes", "Oranges", "Poires", "Bananes",])
    .range(d3.schemeDark2);
  
  // compute the position of each group
  const pieGraph = d3.pie()
    .sort(null) 
    .value(d => d[1]);
    
  const pieData = pieGraph(Object.entries(data));
  
  const arc = d3.arc()
  // size of the inner hole (to get a pie chart instead od a doughnut chart, change inner radius to 0)
    .innerRadius(radius * 0.5)
    .outerRadius(radius * 0.8);
  
  // arc for label positioning
  const outerArc = d3.arc()
    .innerRadius(radius * 0.9)
    .outerRadius(radius * 0.9);

  // build the pie chart path
  svg
    .selectAll('path')
    .data(pieData)
    .join('path')
        .attr('d', arc)
        .attr('fill', d => color(d.data[1]))
        .attr("stroke", "white")
        .style("opacity", 0.7)
        .style("stroke-width", "2px");

  // Add lines for labels
  svg
    .selectAll('polyline')
    .data(pieData)
    .join('polyline')
      .attr("stroke", "black")
      .style("fill", "none")
      .attr("stroke-width", 1.3)
      .attr('points', function(d) {
        const position1 = arc.centroid(d);
        const position2 = outerArc.centroid(d);
        const position3 = outerArc.centroid(d); 
        const middleAngle = d.startAngle + (d.endAngle - d.startAngle) / 2;
        position3[0] = radius * 0.95 * (middleAngle < Math.PI ? 1 : -1); 
        return [position1, position2, position3]
      })

  // Add the polylines between chart and labels:
  svg
    .selectAll('text')
    .data(pieData)
    .join('text')
      .text(d => d.data[0])
      .attr('transform', function(d) {
          const position = outerArc.centroid(d);
          const middleAngle = d.startAngle + (d.endAngle - d.startAngle) / 2
          position[0] = radius * 0.99 * (middleAngle < Math.PI ? 1 : -1);
          return `translate(${position})`;
      })
      .style('text-anchor', function(d) {
          const middleAngle = d.startAngle + (d.endAngle - d.startAngle) / 2
          return (middleAngle < Math.PI ? 'start' : 'end')
      });
</script>

Lignes directrices sur le contenu et le design

  • Essayez de limiter le nombre de catégories pour éviter la confusion.
  • Utilisez les couleurs judicieusement pour différencier les différentes catégories.
  • Si possible, pensez à inclure les étiquettes directement dans les zones du diagramme.
  • 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 diagramme circulaire ou le diagramme à anneau raconte une histoire claire, incluez cette histoire dans le texte alternatif. Par exemple, si le diagramme montre qu'une catégorie a une valeur beaucoup plus élevée que les autres, écrivez cela dans le texte alternatif.
  • Suivez les lignes directrices générales sur l'accessibilité.
Date de modification :