D3JS - Map

Répartition des prix Nobel jusque 2014

Dernière mise à jour le 13/06/2018

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, function(e) { return +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.scale.sqrt()
	.domain([0, d3.max(csv, function(e) { return +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).

A suivre : Bulles (Bubble Chart) Voir le tutoriel

comments powered by Disqus