Ode aux projections de d3.js

#projections #code #d3.js #exemples #méthodologie #cartographie

6 juin 2016

 

S’il existe de nombreux outils permettant de faire des cartes informatisées, tous ont une chose en commun : en entrée, des coordonnées géographiques, et en sortie, une image en deux dimensions. À partir de là, les possibilités (info)graphiques sont infinies. Ian Johnson nous présente ici une sélection de projets réalisés avec les projections de la librairie javascript d3.js.

Ian Johnson (@enjalot)

Programmeur et infographiste http://enjalot.github.io/.

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.

PNG - 835.2 ko
Exemple de carte élémentaire
Mike Bostock

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.

PNG - 152.3 ko
Emploi de textures
Elijah Meeks

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.

PNG - 349.8 ko
Sketchy World : Projection approximative avec un aspect “esquisse”.
Elijah Meeks

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 :

PNG - 86.6 ko
Carte de flux
Allardw
PNG - 330.7 ko
Chroplèthe de petits multiples
Andrew Mollica
PNG - 174.6 ko
Codes postaux
Mike Bostock
PNG - 369.4 ko
Suivi au sol de débris de satellites
Kai Chang

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 !

GIF - 3.8 Mo
Exemple de transition
Jason Davies

Les transitions d’une projection à l’autre permettent de faire ressentir les différences entre elles.

PNG - 224.7 ko
Comparaison de projections
cliquez pour voir le projet
Kai Chang

Cet exemple montre deux représentations différentes des données : une carte choroplèthe standard, et un cartogramme de Dorling.

GIF - 866.6 ko
Transitions de représentations
Stamen

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.

GIF - 334.2 ko
Du globe au planisphère
Stamen

On peut aussi exploiter les transitions pour provoquer le mal de mer !

GIF - 1.9 Mo
Abus manifeste du mouvement
Ian Johnson

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.

PNG - 276.9 ko
Coloriage
Andrew Mollica

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.

PNG - 180.6 ko
Exemple de zoom local
Kai Chang

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.

GIF - 1.8 Mo
Effet de loupe “fisheye” ajouté à une projection d3
Philippe Rivière

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 :

PNG - 113 ko
Diagramme de Voronoi (1)
Halftone
PNG - 516.6 ko
Diagramme de Voronoi (2)
Mike Bostock

D’emploi moins courant, la recherche d’enveloppe concave est une technique utile pour créer des groupes de données.

PNG - 120.8 ko
Enveloppes concaves
Elijah Meeks

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.

PNG - 46.2 ko
Profil des États américains sous forme d’icones
Travis Taylor

L’exemple ci-dessous superpose deux lieux sur la même projection, pour former une image pédagogique.

PNG - 226.5 ko
Superposition de surfaces
Zan Armstrong

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.

PNG - 234.2 ko
Quelques-unes des nombreuses projections proposées par d3

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.

PNG - 71.4 ko
Projection composite
Roger Veciana i Rovira

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.

PNG - 148.3 ko
Distorsion de projection
Ian Johnson

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.

PNG - 154.5 ko
Projection sinusoïdale interrompue
Ian Johnson, à partir d’un exemple de Mike Bostock

Il est même possible d’imprimer et de découper cette projection le long de l’« interruption ».

PNG - 537.3 ko

Collez ça sur une balle de tennis, et voilà : vous avez créé votre propre globe !

JPEG - 93.5 ko

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.

Adresse permanente pour cet article : http://visionscarto.net/ode-aux-projections-de-d3-js.