D3JS - Map

Répartition des prix Nobel jusque 2014

Dernière mise à jour le 15/12/2020
d3js5.x

Cet exemple est un complément de la carte choroplète représentant la densité de population en France. Celui-ci permet de visualiser la répartition des prix Nobel depuis sa création. La principale difficulté vient du fait que les Etats-Unis possèdent 350 prix Nobel alors que la plus part des pays en possèdent 0 ou moins d'une dizaine.

Pour éviter d'avoir les Etats-Unis en rouge foncé et tous les autres pays en jaune très clair, nous utilisons une échelle non linéaire basée sur la fonction racine carré. Ainsi nous projetons notre échelle non pas sur 0-350 mais sur 0-19 ce qui permet des différences de couleurs plus visibles.

var quantize = d3.scaleQuantile()
	.domain([0, Math.sqrt(d3.max(csv, e => +e.NobelCount))])
	.range(d3.range(9));

Nous redéfinissons également le scale de la légende en précisant qu'il n'est plus linéaire mais de type racine carré.

var legendScale = d3.scaleSqrt()
	.domain([0, d3.max(csv, e => +e.NobelCount)])
	.range([0, 9 * 20]);

Enfin, la fonction quantize doit être apellé avec la racine carré de la population

quantize(Math.sqrt(+e.NobelCount))

Le reste du code est identique, le fichier geoJSON contient tous les pays du monde et le fichier des prix Nobel est un simple fichier CSV.

D'autres exemples d'échelles

Pour mieux visualiser le problème introduit dans ce tutoriel voici la carte avec une échelle standard.

Il n'est plus possible de faire de distinction entre tous les pays en jaune clair. C'est-à-dire tous les pays qui ont moins de 39 prix Nobel. Ce chiffre correspond à la division du nombre maximum pour un pays, à savoir 350 pour les Etats-Unis, par le nombre de variations (scale) de notre graphique, à savoir 9. Pour conclure voici une dernière représentation en utilisant une échelle logarithmique.

L'échelle n'est pas affichée mais il faut bien avoir en tête qu'elle serait très écrasée. Elle permet de donner plus d'importance aux pays avec peu de prix Nobel. D3 offre encore d'autres types d'échelles qu'il convient de bien étudier pour choisir celle qui sera la plus représentative. Lorsque l'échelle n'est pas linéaire il est important d'associer au graphique une représentation de cette échelle afin de ne pas induire en erreur le lecteur. Dans ce dernier exemple on pourrait penser que l'Allemagne à presque le même nombre de prix Nobel que les Etats-Unis, ce qui n'est pas le cas (105 contre 350).

VOUS POURRIEZ AIMER


D3JS - Création d'une carte choroplèthe

Carte choroplèthe

Comment créer une carte dont les régions sont colorées en fonction de données statistiques et ajouter une échelle. Comment utiliser un jeu de couleurs pertinant et le rendre dynamique

D3JS - Utilisation de la projection orthographique pour une carte

Projection orthographique

Projection orthographique et rotation avec la souris ou le doigt

D3JS - Carte choroplèthe avancée

Carte choroplèthe avancée

Comprendre les nuances de couleurs, construire une légende agréable et être pertinent dans une cartographie

comments powered by Disqus