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

Graphique linéaire

Un graphique linéaire est une représentation visuelle des données qui utilise une série de points de données connectés pour montrer les valeurs de différents points de données au fil du temps.

Sur cette page

Quand utiliser cette composante

  • Pour montrer le changement de la valeur d'un point de données au fil du temps.
  • Pour comparer les valeurs de différents points de données au fil du temps.
  • Pour montrer les tendances ou les motifs dans les données au fil du temps.

Quand utiliser des graphiques multilignes

  • Vous avez plusieurs points ou séries de données que vous voulez comparer.
  • Vous voulez montrer la relation entre différents points ou séries de données.
  • Vous voulez montrer comment différents points ou séries de données évoluent au fil du temps.

Exemples

  • Un graphique linéaire montrant l'évolution des cas rapportés d'une maladie spécifique au fil du temps.
  • Un graphique linéaire montrant l'évolution de l'espérance de vie moyenne dans une population au fil du temps.

Quoi éviter

  • N'utilisez pas de graphiques linéaires pour montrer des données qui n'ont pas une valeur numérique claire.
  • N'utilisez pas de graphiques linéaires pour montrer des données avec des unités ou des échelles différentes.
  • N'utilisez pas de graphiques linéaires si vous n'essayez pas de transmettre une tendance au fil du temps.

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="lineGraph"></div>
JS 
<script>
      // dimensions and margins 
      const margin = {top: 10, right: 10, bottom: 50, left: 130},
          width = 580 - margin.left - margin.right,
          height = 520 - margin.top - margin.bottom;
      
      // append the svg
      const svg = d3.select("#lineGraph")
        .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})`);
      
      d3.csv('/src/design-manual/data/fr/line-graph/dummyData.csv',
      function(d){
        // date formatting
          return { date : d3.timeParse("%Y-%m-%d")(d.date), price : d.price }
        }).then(
      
        function(data) {
          // yAxis
          const y = d3.scaleLinear()
            .domain([0, d3.max(data, function(d) { return +d.price; })])
            .range([ height, 0 ]);
            
          svg.append("g")
            .call(d3.axisLeft(y).tickFormat(y => `$${y}`))
            .style("font-size","19px");
            
           // xAxis (date format)
          const x = d3.scaleTime()
            .domain(d3.extent(data, function(d) { return d.date; }))
            .range([ 0, width ]);
            
          svg.append("g")
            .attr("transform", `translate(0, ${height})`)
            .call(d3.axisBottom(x))
            .style("font-size","19px");
          // 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("Année");
        
          // yAxis label
          svg.append("text")
              .attr("text-anchor", "end")
              .attr("transform", "rotate(-90)")
              .attr("y", -margin.left + 45)
              .attr("x", -margin.top - height/2 + 20)
               .style("font-weight","bold")
               .style("font-size", "23px")
              .text("Prix");
            
          // add the main path
          svg.append("path")
            .datum(data)
            .attr("stroke", "blue")
            .attr("stroke-width", 1.2)
            .attr("fill", "none")
            .attr("d", d3.line()
              .x(function(d) { return x(d.date) })
              .y(function(d) { return y(d.price) })
              );
      })
              
  </script>

Lignes directrices sur le contenu et le design

  • Si vous ne commencez pas l'axe Y à 0 pour mieux montrer une tendance, indiquez clairement que l'axe a été coupé.
  • Essayez de limiter le nombre de lignes affichées en même temps pour éviter la confusion.
  • Utilisez judicieusement la couleur pour différencier les lignes ou mettre en évidence des lignes spécifiques.
  • Considérez la possibilité d'ajouter les étiquettes directement à côté des lignes, au lieu de sur l'axe.
  • 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 linéaire raconte une histoire claire, incluez cette histoire dans le texte alternatif. Par exemple, si le graphique montre une augmentation ou une diminution claire au fil du temps, incluez cette information dans le texte alternatif.
  • Suivez les lignes directrices générales sur l'accessibilité.
Date de modification :