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

Histogramme

Un histogramme est une représentation visuelle des données qui utilise des barres pour montrer la fréquence ou le nombre d'observations dans une plage de valeurs donnée.

Sur cette page

Quand utiliser cette composante

  • Pour montrer la distribution d'un ensemble de données continues.
  • Pour identifier les tendances ou les modèles dans les données.

Différence entre les diagrammes à barres verticales et les histogrammes

  • Les diagrammes à barres verticales sont utilisés pour montrer différents points de données pour différentes catégories. Chaque barre représente un nombre ou un montant pour une catégorie donnée.
  • Les histogrammes sont utilisés pour montrer la distribution d'un ensemble de données continues. Les barres dans un histogramme sont placées les unes à côté des autres, sans espace entre les barres, pour montrer la continuité des données.
  • Utilisez un diagramme à barres verticales lorsque vous voulez montrer la distribution des données à travers les catégories ou les groupes.
  • Utilisez un histogramme lorsque vous voulez montrer la distribution d'un ensemble de données continues.

Exemples

  • Un histogramme montrant la distribution des niveaux d'activité physique en fonction de l'âge.
  • Un histogramme montrant la distribution de l'âge de personnes diagnostiquées comme ayant une certaine maladie.

Quoi éviter

  • N'utilisez pas d'histogramme pour montrer des données qui n'ont pas une valeur numérique claire.
  • N'utilisez pas d'histogramme pour montrer des données qui ne sont pas continues.
  • N'utilisez pas d'histogramme pour montrer des données avec des unités différentes ou des échelles différentes.

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="histogramDiv"></div>
JS 
<script>
    // set the dimensions 
        const margin = {top: 10, right: 30, bottom: 50, left: 90},
            width = 620 - margin.left - margin.right,
            height = 520 - margin.top - margin.bottom;
        
      // append the svg 
      const svg = d3.select("#histogramDiv")
        .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
      d3.csv("/src/design-manual/data/fr/histograms/data.csv").then( function(data) {
      
        // xAxis
        const x = d3.scaleLinear()
            .domain([0, 1000])
            .range([0, width]);
            
        svg.append("g")
            .attr("transform", `translate(0, ${height})`)
            .call(d3.axisBottom(x))
            .style("font-size","17px");
      
        // set the parameters
        const histogramFunc = d3.histogram()
            .value(function(d) { return d.price; })   
            .domain(x.domain())  
            .thresholds(x.ticks(70)); 
      
        const allBins = histogramFunc(data);
      
        // yAxis
        const y = d3.scaleLinear()
            .range([height, 0]);
          
          y.domain([0, d3.max(allBins, function(d) { return d.length; })]);   
      
        svg.append("g")
            .call(d3.axisLeft(y))
            .style("font-size","17px");
            
            // xAxis label 
          svg.append("text")
              .attr("text-anchor", "end")
              .attr("x", width/2 + margin.left - 90)
              .attr("y", height + margin.top + 40)
              .style("font-weight","bold")
              .style("font-size", "23px")
              .text("Tranches");
        
          // yAxis label
          svg.append("text")
              .attr("text-anchor", "end")
              .attr("transform", "rotate(-90)")
              .attr("y", -margin.left + 35)
              .attr("x", -margin.top - height/2 + 20)
                .style("font-weight","bold")
                .style("font-size", "23px")
              .text("Prix");
              
        // append the bars
        svg.selectAll("rect")
          .data(allBins)
          .join("rect")
          .attr("x", 1)
          .attr("transform", function(d) { return `translate(${x(d.x0)} , ${y(d.length)})`})
              .attr("width", function(d) { return x(d.x1) - x(d.x0) -1})
              .attr("height", function(d) { return height - y(d.length); })
              .style("fill", "#336699")
      });
  </script>

Lignes directrices sur le contenu et le design

  • Commencez toujours l'axe Y à 0.
  • En général, utilisez la même couleur pour toutes les barres, à moins que vous ne vouliez mettre en évidence une plage spécifique.
  • Utilisez le bon nombre de barres pour séparer les données en plages – jouez avec les tailles de boîtes différentes.
  • Assurez-vous que toutes les boîtes ont une taille égale.
  • Faites en sorte que les barres se touchent (qu'il n'y ait pas d'espace entre elles).
  • 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 graphique à barres raconte une histoire claire, incluez cette histoire dans le texte alternatif. Par exemple, si le graphique montre une distribution qui ressemble à une courbe normale en forme de cloche, expliquez-le dans le texte alternatif.
  • Suivez les lignes directrices générales sur l'accessibilité.
Date de modification :