Une projection cartographique est une opération consistant à convertir des coordonnées polaires (latitude et longitude) en coordonnées sur papier (en cm) ou sur l’écran (en pixels). Certains outils en ligne, comme par exemple Leaflet et Mapbox GL, se sont fait une spécialité de faciliter la navigation dans une carte comportant des couches de données géospatiales. Mais rares sont ceux qui se concentrent sur la question des projections, et permettent de choisir comment présenter les données.
d3.js, une librairie javascript développée par Mike Bostock (avec des contributions essentielles de Jason Davies), est l’une des rares à proposer une grande variété de projections et d’utilitaires pour les exploiter pleinement. Les possibilités sont infinies, et cet article vise à en présenter quelques unes.
Style
De manière remarquable, avec d3.js, les éléments graphiques que l’on crée à partir des données sont souvent au format SVG, ce qui autorise à leur attribuer le style que l’on veut. L’exemple ci-dessous montre comment, en employant les fonctionnalités de SVG comme <defs> et <use>, et la librairie textures.js, on peut créer une carte et la colorer de façon personnalisée.
Mais il n’y a pas que SVG, et l’exemple ci-dessous montre comment créer un style d’« esquisse » avec un algorithme qui dessine directement l’image dans le navigateur, au format canvas.
L’idée centrale est que tous les outils habituels du HTML5, de SVG et de CSS peuvent être mis à contribution pour exprimer nos données géospatiales, ce qui offre des possibilités assez puissantes.
Données
Beaucoup de gens emploient les projections de d3.js pour personnaliser la représentation de données ayant une dimension géographique. Les exemples qui suivent montrent un échantillon des possibilités :
Ces exemples indiquent que la taille, la forme, et même le nombre de cartes peuvent être adaptées aux besoins des visualisations. On trouvera quantité d’autres exemples sur cette recherche
Transitions
Les transitions sont un autre concept puissant de d3. Lorsque les données sous-jacentes à une visualisation passent d’un état à un autre (par exemple, lorsque l’on passe d’une année à la suivante), il est possible de faire une transition de manière continue et fluide entre les deux états, ce qui permet à l’utilisateur de suivre l’évolution dans sa cohérence. C’est vai aussi pour les données géospatiales : il est possible de modifier par des transitions continues tous les paramètres d’une projection (le centre, l’échelle et la rotation). Il est même possible de passer d’une projection à une autre !
Les transitions d’une projection à l’autre permettent de faire ressentir les différences entre elles.
Cet exemple montre deux représentations différentes des données : une carte choroplèthe standard, et un cartogramme de Dorling.
Cet exemple permet à l’utilisateur de choisir entre une projection orthographique (la forme du globe vue de la Lune) et la traditionnelle projection de Mercator.
On peut aussi exploiter les transitions pour provoquer le mal de mer !
Comme dit l’adage, « la seule chose qui ne change pas c’est le changement ». De nombreuses possibilités s’ouvrent dès lors que les visualisations peuvent représenter des éléments en mouvement.
Interactions
Les projections permettent de créer n’importe quel élément interactif dans le navigateur. Toutes les possibilités offertes par les API des navigateurs modernes sont donc accessibles aux cartes.
Dans l’exemple suivant une version agrandie de la carte est générée à droite, centrée sur l’emplacement du curseur de la souris sur la carte de gauche.
Cet autre exemple utilise une distorsion « fisheye » autour du curseur pour permettre à l’utilisateur d’inspecter des points serrés à l’intérieur de la carte.
Géometrie
On peut vouloir créer une géométrie à partir des données, pour calculer des approximations ou créer des groupements visuels. N’importe quel algorithme qui fonctionne sur des coordonnées à deux dimensions est applicable au sein des projections de D3. Par exemple, les diagrammes de Voronoi permettent les choses suivantes :
D’emploi moins courant, la recherche d’enveloppe concave est une technique utile pour créer des groupes de données.
Ce qu’il faut retenir, c’est que les projections de d3 connectent vos cartes aux nombreuses richesses du domaine du graphisme en deux dimensions.
Compositions
Au-delà du rendu des éléments cartographiques, on peut aussi inventer des manière de les agencer sur la page. D’autant que beaucoup de formes géographiques sont très facilement reconnaissables, et deviennent même parfois iconiques, et utilisables hors du cadre de la carte à strictement parler.
L’exemple ci-dessous superpose deux lieux sur la même projection, pour former une image pédagogique.
Une fois que vos données géospatiales sont transformées en éléments de page Web (DOM, vous pouvez les mettre en page avec la même flexibilité que n’importe quel autre élément.
Étendre les projections
d3 offre une ensemble très riche de projections, qui s’accroît chaque fois que quelqu’un en implémente une nouvelle.
C’est souvent nécessaire pour les pays dont les territoires ne sont pas proches géographiquement, et on fait alors usage de la capacité de d3 à gérer des projections composites pour pouvoir dessiner l’ensemble du territoire sur un même écran.
Toute projection, quelle qu’elle soit, aplatit le globe 3D sur une surface plane, et crée dès lors une distorsion.
L’exemple ci-dessous permet d’inspecter visuellement les distorsions engendrées par certaines projections.
Les projections interrompues permettent au cartographe amateur de décider lui-même de la façon dont la Terre doit être découpée lorsqu’on l’aplatit. CAR LA TERRE N’EST PAS PLATE.
Il est même possible d’imprimer et de découper cette projection le long de l’« interruption ».
Collez ça sur une balle de tennis, et voilà : vous avez créé votre propre globe !
Conclusion
Nous avons vu qu’il était possible, grâce aux projections de d3, de personnaliser le style des surfaces cartographiées, leur géométrie, la disposition des données, de créer des transitions entre différents états, de faire des compositions.
Si la visualisation de données géospatiales a déjà une riche histoire, celle-ci ne fait que commencer. N’hésitez pas à utiliser les exemples indiqués comme points de départ pour vos propres expérimentations, et à en chercher d’autres.