Autopsie d'une dataviz [8.3] : coder une carte choroplèthe avec D3js

Troisième et ultime volet d'un tutoriel qui décrit la marche à suivre pour coder une carte avec la librairie D3js. Passage en revue du code.

Il est temps, après avoir préparé un geojson complet et léger et s'être posé quelques questions technique sur la future carte, de passer au Javascript.

Pour ceux qui auraient eu des soucis lors de la première partie et souhaitent quand même faire ce volet, ils pourront trouver le geojson correspond sur ce répertoire GitHub.

Comment fonctionne D3 ?

D3, pour Data-Driven Documents, est une librairie Javascript initiée par Mike Bostock et qui connaît un important succès public et critique, notamment dans le petit milieu du journalisme de données.

Elle a l'énorme avantage d'être très exhaustive, permettant de coder à la fois des histogrammes ou des cartes.

D'un autre côté, elle demande un certain bagage en code, et surtout est parfois aux fraises sur support mobile, ce qui peut constituer un handicap alors que des lib plus optimales comme Highcharts ou Leaflet sont dans les parages.

Techniquement, D3 permet de générer des formes vectorielles au format SVG, qui peut facilement être stylisé avec du CSS. On peut donc directement coder une ou plusieurs classes et ensuite les affecter aux éléments SVGqui nous intéressent.

Côté script, on trouve en général :

• l'ossature de notre visualisation en variables : axes des ordonnées et des abscisses pour les graphes, projections pour les cartes, sélection des div qui vont accueillir les futurs formes vectorielles
• une fonction qui va animer tout ça à partir d'un ou de plusieurs fichiers de données

Les premiers bouts de code

On va commencer petit à petit en créant un fichier HTML à côté du fichier geojson et **du petit plugin d3.tip.js **(présent dans le répertoire GitHub précédemment cité) qui nous permettra de construire de belles infobulles interactives.

La structure de base

On va dans cette première partie :

• appeler la librairie
• créer des balises