Manuel de conception de l'Infobase Santé
Table des matières
Carte thermique
Une carte thermique est une représentation visuelle des données qui utilise la couleur pour montrer les valeurs de 2 ou plusieurs variables.
Sur cette page
Quand utiliser cette composante
- Pour montrer la relation entre 2 ou plusieurs variables.
- Pour montrer la distribution des données en deux ou plusieurs dimensions.
- Pour identifier les tendances ou les motifs dans les données.
Exemples
- Une carte thermique montrant la distribution d'un facteur de risque pour une maladie, tel que l'obésité ou la consommation de tabac.
- Une carte thermique montrant la distribution de la consommation d'antimicrobiens par province.
Quoi éviter
- N'utilisez pas les cartes thermiques pour montrer des données qui n'ont pas une valeur numérique claire.
- N'utilisez pas les cartes thermiques pour montrer des données avec des unités 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="scatterGraph"></div>JS
<script>
// dimensions and margins
const margin = {top: 50, right: 30, bottom: 70, left: 100},
width = 600 - margin.left - margin.right,
height = 600 - margin.top - margin.bottom;
// append the svg
const svg = d3.select("#heatMapGraph")
.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})`);
// row and columns
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
const years = ["2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009"]
// aAxis
const x = d3.scaleBand()
.range([ 0, width ])
.domain(months)
.padding(0.01);
svg.append("g")
.attr("transform", `translate(0, ${height})`)
.call(d3.axisBottom(x))
.style("font-size","14px");
// yAxis
const y = d3.scaleBand()
.range([ height, 0 ])
.domain(years)
.padding(0.01);
svg.append("g")
.call(d3.axisLeft(y))
.style("font-size","14px");
// graph title
svg.append("text")
.attr("text-anchor", "end")
.attr("x", width/2 + margin.left + 50)
.attr("y", -10)
.style("font-weight","bold")
.style("font-size", "24px")
.text("Température moyenne en °C");
// xAxis label
svg.append("text")
.attr("text-anchor", "end")
.attr("x", width/2 + margin.left - 40)
.attr("y", height + margin.top + 0)
.style("font-weight","bold")
.style("font-size", "23px")
.text("Mois");
// 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("Année");
// Build color scale
const myColor = d3.scaleLinear()
.range(["white", "#EB5F44"])
.domain([1,100])
//dummy data
let data = [
{
"month": "Jan",
"year": "2000",
"value": "30"
},
{
"month": "Jan",
"year": "2001",
"value": "95"
},
{
"month": "Jan",
"year": "2002",
"value": "22"
},
{
"month": "Jan",
"year": "2003",
"value": "14"
},
{
"month": "Jan",
"year": "2004",
"value": "59"
},
{
"month": "Jan",
"year": "2005",
"value": "52"
},
{
"month": "Jan",
"year": "2006",
"value": "88"
},
{
"month": "Jan",
"year": "2007",
"value": "20"
},
{
"month": "Jan",
"year": "2008",
"value": "99"
},
{
"month": "Jan",
"year": "2009",
"value": "66"
},
{
"month": "Feb",
"year": "2000",
"value": "37"
},
{
"month": "Feb",
"year": "2001",
"value": "50"
},
{
"month": "Feb",
"year": "2002",
"value": "81"
},
{
"month": "Feb",
"year": "2003",
"value": "79"
},
{
"month": "Feb",
"year": "2004",
"value": "84"
},
{
"month": "Feb",
"year": "2005",
"value": "91"
},
{
"month": "Feb",
"year": "2006",
"value": "82"
},
{
"month": "Feb",
"year": "2007",
"value": "89"
},
{
"month": "Feb",
"year": "2008",
"value": "6"
},
{
"month": "Feb",
"year": "2009",
"value": "67"
},
{
"month": "Mar",
"year": "2000",
"value": "96"
},
{
"month": "Mar",
"year": "2001",
"value": "13"
},
{
"month": "Mar",
"year": "2002",
"value": "98"
},
{
"month": "Mar",
"year": "2003",
"value": "10"
},
{
"month": "Mar",
"year": "2004",
"value": "86"
},
{
"month": "Mar",
"year": "2005",
"value": "23"
},
{
"month": "Mar",
"year": "2006",
"value": "74"
},
{
"month": "Mar",
"year": "2007",
"value": "47"
},
{
"month": "Mar",
"year": "2008",
"value": "73"
},
{
"month": "Mar",
"year": "2009",
"value": "40"
},
{
"month": "Apr",
"year": "2000",
"value": "75"
},
{
"month": "Apr",
"year": "2001",
"value": "18"
},
{
"month": "Apr",
"year": "2002",
"value": "92"
},
{
"month": "Apr",
"year": "2003",
"value": "43"
},
{
"month": "Apr",
"year": "2004",
"value": "16"
},
{
"month": "Apr",
"year": "2005",
"value": "27"
},
{
"month": "Apr",
"year": "2006",
"value": "76"
},
{
"month": "Apr",
"year": "2007",
"value": "24"
},
{
"month": "Apr",
"year": "2008",
"value": "1"
},
{
"month": "Apr",
"year": "2009",
"value": "87"
},
{
"month": "May",
"year": "2000",
"value": "44"
},
{
"month": "May",
"year": "2001",
"value": "29"
},
{
"month": "May",
"year": "2002",
"value": "58"
},
{
"month": "May",
"year": "2003",
"value": "55"
},
{
"month": "May",
"year": "2004",
"value": "65"
},
{
"month": "May",
"year": "2005",
"value": "56"
},
{
"month": "May",
"year": "2006",
"value": "9"
},
{
"month": "May",
"year": "2007",
"value": "78"
},
{
"month": "May",
"year": "2008",
"value": "49"
},
{
"month": "May",
"year": "2009",
"value": "36"
},
{
"month": "Jun",
"year": "2000",
"value": "35"
},
{
"month": "Jun",
"year": "2001",
"value": "80"
},
{
"month": "Jun",
"year": "2002",
"value": "8"
},
{
"month": "Jun",
"year": "2003",
"value": "46"
},
{
"month": "Jun",
"year": "2004",
"value": "48"
},
{
"month": "Jun",
"year": "2005",
"value": "100"
},
{
"month": "Jun",
"year": "2006",
"value": "17"
},
{
"month": "Jun",
"year": "2007",
"value": "41"
},
{
"month": "Jun",
"year": "2008",
"value": "33"
},
{
"month": "Jun",
"year": "2009",
"value": "11"
},
{
"month": "Jul",
"year": "2000",
"value": "77"
},
{
"month": "Jul",
"year": "2001",
"value": "62"
},
{
"month": "Jul",
"year": "2002",
"value": "94"
},
{
"month": "Jul",
"year": "2003",
"value": "15"
},
{
"month": "Jul",
"year": "2004",
"value": "69"
},
{
"month": "Jul",
"year": "2005",
"value": "63"
},
{
"month": "Jul",
"year": "2006",
"value": "61"
},
{
"month": "Jul",
"year": "2007",
"value": "54"
},
{
"month": "Jul",
"year": "2008",
"value": "38"
},
{
"month": "Jul",
"year": "2009",
"value": "93"
},
{
"month": "Aug",
"year": "2000",
"value": "39"
},
{
"month": "Aug",
"year": "2001",
"value": "26"
},
{
"month": "Aug",
"year": "2002",
"value": "90"
},
{
"month": "Aug",
"year": "2003",
"value": "83"
},
{
"month": "Aug",
"year": "2004",
"value": "31"
},
{
"month": "Aug",
"year": "2005",
"value": "2"
},
{
"month": "Aug",
"year": "2006",
"value": "51"
},
{
"month": "Aug",
"year": "2007",
"value": "28"
},
{
"month": "Aug",
"year": "2008",
"value": "42"
},
{
"month": "Aug",
"year": "2009",
"value": "7"
},
{
"month": "Sep",
"year": "2000",
"value": "5"
},
{
"month": "Sep",
"year": "2001",
"value": "60"
},
{
"month": "Sep",
"year": "2002",
"value": "21"
},
{
"month": "Sep",
"year": "2003",
"value": "25"
},
{
"month": "Sep",
"year": "2004",
"value": "3"
},
{
"month": "Sep",
"year": "2005",
"value": "70"
},
{
"month": "Sep",
"year": "2006",
"value": "34"
},
{
"month": "Sep",
"year": "2007",
"value": "68"
},
{
"month": "Sep",
"year": "2008",
"value": "57"
},
{
"month": "Sep",
"year": "2009",
"value": "32"
},
{
"month": "Oct",
"year": "2000",
"value": "19"
},
{
"month": "Oct",
"year": "2001",
"value": "85"
},
{
"month": "Oct",
"year": "2002",
"value": "53"
},
{
"month": "Oct",
"year": "2003",
"value": "45"
},
{
"month": "Oct",
"year": "2004",
"value": "71"
},
{
"month": "Oct",
"year": "2005",
"value": "64"
},
{
"month": "Oct",
"year": "2006",
"value": "4"
},
{
"month": "Oct",
"year": "2007",
"value": "12"
},
{
"month": "Oct",
"year": "2008",
"value": "97"
},
{
"month": "Oct",
"year": "2009",
"value": "72"
},{
"month": "Nov",
"year": "2000",
"value": "19"
},
{
"month": "Nov",
"year": "2001",
"value": "85"
},
{
"month": "Nov",
"year": "2002",
"value": "53"
},
{
"month": "Nov",
"year": "2003",
"value": "45"
},
{
"month": "Nov",
"year": "2004",
"value": "71"
},
{
"month": "Nov",
"year": "2005",
"value": "64"
},
{
"month": "Nov",
"year": "2006",
"value": "4"
},
{
"month": "Nov",
"year": "2007",
"value": "12"
},
{
"month": "Nov",
"year": "2008",
"value": "97"
},
{
"month": "Nov",
"year": "2009",
"value": "72"
},{
"month": "Dec",
"year": "2000",
"value": "19"
},
{
"month": "Dec",
"year": "2001",
"value": "85"
},
{
"month": "Dec",
"year": "2002",
"value": "53"
},
{
"month": "Dec",
"year": "2003",
"value": "45"
},
{
"month": "Dec",
"year": "2004",
"value": "71"
},
{
"month": "Dec",
"year": "2005",
"value": "64"
},
{
"month": "Dec",
"year": "2006",
"value": "4"
},
{
"month": "Dec",
"year": "2007",
"value": "12"
},
{
"month": "Dec",
"year": "2008",
"value": "97"
},
{
"month": "Dec",
"year": "2009",
"value": "72"
}
];
svg.selectAll()
.data(data, function(d) {return d.month+':'+d.year;})
.join("rect")
.attr("x", function(d) { return x(d.month) })
.attr("y", function(d) { return y(d.year) })
.attr("width", x.bandwidth() )
.attr("height", y.bandwidth() )
.style("fill", function(d) { return myColor(d.value)} )
</script>Lignes directrices sur le contenu et le design
- Utilisez une palette de couleurs séquentielle ou divergente (voir Couleurs).
- Incluez une légende pour la palette de couleurs.
- Envisagez d'inclure la valeur dans chaque cellule.
- 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 la carte thermique raconte une histoire claire, incluez cette histoire dans le texte alternatif. Par exemple, si la carte thermique montre une relation ou une distribution de données claires, décrivez-la dans le texte alternatif.
- Suivez les lignes directrices générales sur l'accessibilité.
- Date de modification :