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

Carte

Une carte est une représentation visuelle des données géographiques. Elle montre l'emplacement des points ou des caractéristiques de données dans une région géographique précise.

Sur cette page

Quand utiliser cette composante

  • Pour montrer l'emplacement des points de données sur une carte.
  • Pour montrer la distribution géographique des données.
  • Pour comparer les données entre les régions.

Exemples

  • Une carte montrant la distribution des cas d'une maladie spécifique, telle que le virus du Nil occidental.
  • Une carte montrant l'emplacement des sites de consommation supervisée.

Quoi éviter

  • N'utilisez pas une carte pour montrer des données qui n'ont pas un emplacement géographique clair.
  • N'utilisez pas une carte lorsqu'il n'y a rien à apprendre de la distribution géographique des données.

Design et code

HTML 
<!-- Ajouter ce div dans la bonne section -->
  <div class="col-md-12" style="padding-right: 0px;" id="map"></div>
JS 
<!-- Ajouter ces références -->
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script type="text/javascript" src="https://health-infobase.canada.ca/src/js/polyfill.js"></script>
  <script src="https://health-infobase.canada.ca/src/js/topojson.v2.min.js"></script>
  <script src="https://health-infobase.canada.ca/src/js/polylabel.js"></script>
  <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    
  <!-- Ajouter ce script --> 
  <script>
    // Language
    var language = $('html').attr('lang');
    const margin = {
        top: 10,
        right: 10,
        bottom: 10,
        left: 10
      },
      width = 1300 - margin.left - margin.right, //width of the section
      height = 1200 - (margin.top) - (margin.bottom); //height of the section
    var path
    var hrid
    d3.csv("/src/design-manual/data/fr/map/AllPTs3.csv", function(d) {
      d.Year = +d["Year"]
      d.CNISP_beds = +d["CNISP_beds"]
      d.total = +d["total"]
      d.proportion = +d["proportion"]
      d.Percentage = +d["Percentage"]
      d.Prov = d["Prov"]
      return d;
    }).then(function(data) {
      console.log(data)
      var nestedData = d3.nest().key(function(d) {
        return d.Year;
      }).key(function(d) {
        return d.Prov;
      }).object(data);
      //Converts the PRUID number to the acronym
      function PruidtoProv(pruid) {
        if (pruid == 10) {
          return "NL";
        } else if (pruid == 11) {
          return "PE";
        } else if (pruid == 12) {
          return "NS";
        } else if (pruid == 13) {
          return "NB";
        } else if (pruid == 24) {
          return "QC";
        } else if (pruid == 35) {
          return "ON";
        } else if (pruid == 46) {
          return "MB";
        } else if (pruid == 47) {
          return "SK";
        } else if (pruid == 48) {
          return "AB";
        } else if (pruid == 59) {
          return "BC";
        } else if (pruid == 60) {
          return "YT";
        } else if (pruid == 61) {
          return "NT";
        } else if (pruid == 62) {
          return "NU";
        }
      }
  
      function colour() {
        d3.selectAll(".PRUID").transition().style("fill", function(d, i) {
          pr = PruidtoProv(d.properties.PRUID)
          console.log(nestedData[2021][pr][0]["proportion"])
          val = nestedData[2021][pr][0]["proportion"]
          if (!isNaN(val) && val != -1) {
            return ColourChoice(val) //color2(nestedData.get(d.properties.PRUID)[0][ddl2]); function that returns the colour
          } else {
            return "#e6e6e6";
          }
        });
      }
      var colours = ["#A52770", "#D83C76", "#F65D6D", "#FD876F", "#FFB185"]
  
      function ColourChoice(val) {
        if (val >= .80) {
          return colours[0]
        } else if (val >= .60) {
          return colours[1]
        } else if (val >= .40) {
          return colours[2]
        } else if (val >= .20) {
          return colours[3]
        } else if (val >= 0) {
          return colours[4]
        } else {
          return "#e6e6e6"
        }
      }
      d3.json('/src/design-manual/data/fr/map/output.json').then(function(mapJSON) {
        var svg = d3.select('#map').append('svg').attr("id", "svg").attr('width', "100%").attr('height', "100%").attr("preserveAspectRatio", "xMinYMin meet").attr("viewBox", "0 0 900 900")
        var healthregions = topojson.feature(mapJSON, mapJSON.objects.Can_PR2016);
        const projection2 = d3.geoIdentity((function(x, y) {
          return [2 * x, y];
        })).reflectY(true).fitSize([880, 880], healthregions);
        // what is used to generate the path for the provinces
        path = d3.geoPath().projection(projection2);
        hrid = svg.append('g').attr("id", "mapGroup").attr("transform", "translate(0,0)").selectAll('g').data(healthregions.features).enter();
        hrid.append("g").attr("class", "regions").attr("id", function(d) {
          return "g" + d.properties["PRUID"]
        }).attr("tabindex", 0).attr("data-taborder", function(d) {
          return d.properties.TABORDER;
        }).attr("focusable", "true").append('path').attr("id", function(d) {
          return "path" + d.properties["PRUID"]
        }).attr("class", "PRUID").attr("d", path).attr("stroke", "white").attr("stroke-width", 0.5).style("opacity", 0.85)
        colour();
      });
    });
  </script>

Lignes directrices sur le contenu et le design

Lignes directrices sur l'accessibilité

  • Fournissez un tableau de données avec la carte.
  • Si la carte raconte une histoire claire, incluez cette histoire dans le texte alternatif. Par exemple, si la carte montre que les nombres sont beaucoup plus élevés dans une région spécifique, écrivez cela dans le texte alternatif.
  • Suivez les lignes directrices générales sur l'accessibilité.
Date de modification :