Objectif du TP

1. Réaliser une carte du covid en France similaire à celle ci-dessous.

Rendu pour ce TP

Le rendu final est à faire sur Tomuss. Le TP peut se faire en binôme.

Le TP sera noté 0, 1, ou 2. Si vous arrivez à la partie 4, vous aurez 1 (=10/20), si vous arrivez à la fin 2 (=20/20).

1. Chargement du fond de carte

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

Voir l'exemple vu en cours:

Dans l'exemple du cours nous utilisons une projection Américaine. 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 covid, pour commencer nous allons démarrer avec un sous ensemble des données allant de juin à novembre 2021 en métropole (plutôt que le jeu de données entier.) En vous inspirant du code vu en cours les afficher sur la carte (voir la structure ci-dessous). On va filtrer les donnees pour ne garder que les lignes ou sexe == 0 (tous les genres, plutôt que 1 ou 2 = homme ou femme)

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

Utiliser la colonne hosp du tableau CSV, pour récupérer les hospitalisations du département pour un jour donné.
var dataValue = parseInt(data[i].hosp); 


var jourChoisi = "2021-09-12" // pour demarrer on code en dur un jour a afficher

d3.csv("covid.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 ou (sexe == 0)

    color.domain([0, 2000]);

    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 jourDepChoisi = 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 = jourDepChoisi.hosp;
	  }

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

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

data[i].jour permet d'accéder au jour courant pour la ligne i du tableau, data[i].hosp permet d'accéder aux hospitalisations. 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 d'hospitalisations à 0 et un max à 2000.

En vous inspirant de l'exemple vu en cours, 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).

Mi-chemin

Si vous arrivez à ce stade vous pouvez soumettre vous aurez 1/2.

Sauvegarder votre projet à ce stade pour pouvoir y revenir en cas de problème par la suite.

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 quotidiennes 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 un jour donné

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 0 (correspondant normalement au 2021-06-01). Modifier votre code de dessin pour récupérer la valeur d'hospitalisation pour le jour passé 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 jour du jeu de données (il y en a 178 du 1e juin au 25 novembre 2021).

<div>
  <input id="slider" type="range" value="0" min="0" max="178" 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(+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 la semaine selectionnée );