D3JS - Code barre des températures

Introduction

Cette visualisation ne contient ni échelle ni légende. Pourtant si on sait qu'elle est liée au réchauffement climatique elle devient immédiatement compréhensible. Nous comprenons qu'il s'agit d'une séquence qui se lit de gauche à droite, que le rouge indique la chaleur là où le bleu indique le froid. La succession des barres décrit une évolution temporelle, probablement sur le long terme. Si vous cherchez une visualisation à partager sur le réchauffement climatique celle-ci est vraiment intéressante, elle décrit les anomalies de température de 1880 à 2022. Chaque barre représente une année. On part de la température moyenne du globe pendant tout le 20ème siècle. Ensuite pour chaque année on affiche la différence entre cette température et la température de l'année. Ainsi dans les premières décennies du 19ème et 20ème les barres sont principalement bleues car les températures constatées sont en-dessous de la moyenne. En approchant de la fin du 20ème siècle et au début du suivant les courbes deviennent uniquement rouges.

Les données

Les données utilisées proviennent du NOAA et peuvent être extraites directement sous la forme d'un CSV.

year,value
1880,-0.12
1881,-0.08
1882,-0.10

Initialisation

L'initialisation est classique, on définit simplement la hauteur de nos barres. A noter que si on voulait être responsive sur ce point il faudrait la rendre dépendante de la largeur de la page (par exemple, height = width / 3). Nous définissons également deux scale basés sur l'interpolation continue des couleurs entre le bleu et le blanc pour les valeurs négatives et entre le blanc et le rouge pour les valeurs positives.

const margin = {top: 20, right: 20, bottom: 20, left: 20};
    width = document.getElementById("container").offsetWidth - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

const svg = d3.select("#chart").append("svg")
    .attr("id", "svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom);

let group = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

let scaleNegative = d3.scaleSequential()
    .interpolator(d3.interpolateBlues);

let scalePositive = d3.scaleSequential()
    .interpolator(d3.interpolateReds);

Création des barres

En chargeant notre csv on transforme les valeurs de température en nombre. L'ajout des barres se fait en itérant sur nos données et en construisant un rectangle pour chaque année. La définition du domain de nos scale est par contre importante, la température de 0° est toujours représentée par du blanc, le bleu le plus foncé correspond au min et le rouge le plus foncé au max.

d3.csv('/tutorials/d3js/bar-code-temperature/world-temperature-1880-2022.csv').then(function(csv) {
    csv.forEach(d => {
        d.value = +d.value;
    });

    addBarCodes(csv);
});

function addBarCodes(data) {
    scaleNegative.domain([0, d3.min(data, d => d.value)]);
    scalePositive.domain([0, d3.max(data, d => d.value)]);

    for (let i = 0; i < data.length; ++i) {
        let transX = (width / data.length) * i;
        
        group.append("rect")
            .attr("id", "year-" + data[i].year)
            .attr("x", transX)
            .attr("y", 0)
            .attr("width", (width / data.length))
            .attr("height", height)
            .attr("fill", data[i].value > 0 ? scalePositive(data[i].value) : scaleNegative(data[i].value));
    }
}

Conclusion

Cette visualisation démontre bien tout l'intérêt du framework D3JS, quelques lignes de code nous ont permis de construire une représentation propre et élégante d'un jeu de données.