TP3 DataViz: Données spatiales avec D3.js

Objectif du TP

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

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 v6 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 du covid similaire à celles du TP1, pour commencer nous allons démarrer avec un sous ensemble des données allant de mars à avril 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). Utiliser fill pour colorer chaque région selon l'intensité des hospitalisations.

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

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

d3.csv("covid-france-mars-avril.csv").then(function(data) {
    color.domain([0, 2000]);

    d3.json("departements-version-simplifiee.geojson").then(function(json) {
      //On fusionne les donnees avec le GeoJSON des departements
      for (var i = 0; i < data.length; i++) {
      ...
      }

      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.

Ajuster l'échelle des couleurs au besoin.

4. Tooltip

En vous inspirant du block suivant ajouter un tooltip avec le nom et la valeur de la région. Attention la gestion des événements a changé avec d3v6, voir ici (le changement est minimal, on passe maintenant par un pointer event qui est plus générique qu'un mouse event).

Rendu pour ce TP

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

Bonus

5. Ajout d'un slider temporel

Rajouter un slider qui permettra de naviguer entre les différentes semaines du jeu de données.

<div>
  <input id="slider" type="range" value="1" min="1" max="60" step="1" />
  <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.

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é.

7. 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() {
	updateViz(+this.value);
});
				

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

d3.select('#day').html( valeur de la semaine selectionnée );

Appeler la fonction de dessin de la carte drawMap() (voir l'étape suivante).

	// update the elements
	function updateViz(value) {
		console.log("update " + "value");
		d3.select('#data').html(daysArray[value]);
		drawMap(value);
	}

8. Dessiner et mettre à jour la carte

Revoir les principes de update et enter en D3 vu dans le 1e TP.

Dessiner la carte comme précedemment, avec carte.enter().

Gérer la mise à jour de la carte, en partant du code ci-dessous. NB: la mise à jour ne demande pas de tout redessiner.

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

  // code en cas de mise a jour de la carte / de changement de semaine
  carte
    .attr("class", "update")
    ...

  // code pour la creation de la carte quand les donnees sont chargees la 1e fois.
  carte.enter()
    .append("path")
    .attr("class", "enter")
    ...
}