Objectif du TP

Réaliser une carte de l'évolution de déchets en France entre 2009 et 2019.

Rendu pour ce TP

Le rendu final est à déposer sur Tomuss, un lien vers le code, un autre vers la visualisation en ligne.

1. Chargement du fond de carte

Charger le fond de carte des départements français métropolitains avec D3.js.

Voir un exemple de carte :

Basculez sur une projection plus générique comme d3.geoConicConformal. Nous utilisons la v7 de D3.js la page de référence sur les projections est ici.

Positioner la carte sur la France, en utilisant la projection suivante : d3.geoConicConformal().center([2.454071, 46.279229]).scale(2800);

2. Chargement des données

Charger les données de déchets par département de l'Ademe. On va filtrer les donnees pour ne garder que les lignes ou L_TYP_REG_DECHET == DEEE et ANNEE = 2011

Nous utilisons le fichier geojson suivant, décrivant les départements français métropolitain.

Utiliser la colonne TONNAGE_T du tableau CSV, pour récupérer les déchets du département pour une année donnée.
var dataValue = parseFloat(data[i].TONNAGE_T); 



var annéeChoisie = "2014" // pour demarrer on code en dur une année à afficher

d3.csv("mesDonnes.csv").then(function(data) {

    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
    var cleanData = data.filter( TODO ); // TODO ne garder que les lignes où (L_TYP_REG_DECHET === "DEEE")

    color.domain([0, 20000]);

    d3.json("departements-version-simplifiee.geojson").then(function(json) {
        //On fusionne les donnees avec le GeoJSON des departements

        //On parcours les departements du GeoJSON un par un
        for (var j = 0; j < json.features.length; j++) {
			var departement = json.features.TODO // TODO

            // find permet d'eviter de faire une boucle sur toutes les donnees 
            // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find#find_an_object_in_an_array_by_one_of_its_properties
            var anneeDepChoisi = cleanData.find(function(row) {
                return TODO; // find renvoie la ligne du tableau si la fonction qu'on lui passe en argument renvoie True.    
            })
            json.features[j].properties.value = anneeDepChoisi.hosp;
	  }

      // on dessine
      svg.selectAll("path")
      ...
        .style("fill", function(d) {
              var value = d.properties.value;
              ...
      });
    });
});

3. Afficher les données d'une année

data[i].ANNEE permet d'accéder au jour courant pour la ligne i du tableau, data[i].TONNAGE_T permet d'accéder aux tonnage de déchets. Un fichier de méta-données décrivant les colonnes est disponible ici.

4. Ajuster l'échelle des couleurs.

L'échelle des couleurs a été définie sur un domaine donné avec un minimum de déchet de 0 et un max à 20000.

Adaptez le calcul du domaine en utilisant d3.min et d3.max.

5. Tooltip

En vous inspirant du code suivant ajouter un tooltip avec le nom et la valeur de la région. La gestion des événements a changé avec d3v6 ( voir ici = faites attention aux exemples que vous regardez, et aux suggestions de LLM).

6. Traitement des données

Nous allons maintenant élargir le jeu de données. Cette fois ci, à la place d'injecter une valeur donnée dans l'objet geojson, nous allons injecter un tableau des valeurs annuelles pour un département donné. En pratique il faut de remplacer votre find(...), par un filter(...) qui va ne garder que les lignes correspondant à un département.

7. Dessiner la carte pour une année donnée

Bouger le code de dessin de la carte dans une fonction dediée. Que vous appelerez après le chargement et le traitement de vos données avec l'argument 2009. Modifier votre code de dessin pour récupérer le volume de déchets pour l'année passée en argument (normalement l'argument correspond à la position dans le tableau que vous avez crée juste au-dessus). 


function drawMap(currentDay) {
  carte = svg.selectAll("path").data(json.features);

  carte.join("path")
    .attr("class", "enter")
    ...
}

8. Ajout d'un slider temporel

Rajouter un slider qui permettra de naviguer entre les différents années du jeu de données (il y en a 7: {2009, 2011, 2013, 2015, 2017, 2019, 2021}). 

<div>
  <input id="slider" type="range" value="0" min="0" max="6" step="1" /><br/>
  <span id="day">day</span>
</div>

On ajoutera aussi un élement textuel (dans le span) pour afficher la valeur du slider, et s'assurer ainsi que les évènements sont bien capturés par le code javascript plus tard.

9. Modification des données à afficher

Ajouter un listener sur le slider, qui appellera une fonction updateViz en cas de changement, pour mettre à jour la visualisation: 


d3.select("#slider").on("input", function() {
    drawMap(String(2009 + 2*this.value));
});

Dans drawMap faites en sorte qu'en cas de changement du slider, le texte sous le slider affiche la semaine sélectionnée. 

d3.select('#day').html( valeur de l'année selectionnée );