Une carte à la perfection : utiliser D3.js pour créer de superbes cartes Web
Publié: 2022-03-11Data Driven Documents, ou D3.js, est « une bibliothèque JavaScript pour manipuler des documents basés sur des données ». Ou pour le dire plus simplement, D3.js est une bibliothèque de visualisation de données. Il a été développé par Mike Bostock avec l'idée de combler le fossé entre l'affichage statique des données et les visualisations de données interactives et animées.
D3 est une bibliothèque puissante avec une tonne d'utilisations. Dans ce didacticiel, je vais discuter d'une application particulièrement convaincante de D3 : la création de cartes. Nous passerons en revue les défis courants liés à la création d'une carte Web utile et informative, et montrerons comment, dans chaque cas, D3.js donne aux développeurs JavaScript compétents tout ce dont ils ont besoin pour que les cartes soient belles et agréables.
A quoi sert D3.js ?
D3.js peut lier n'importe quelle donnée arbitraire à un modèle d'objet de document (DOM), puis, grâce à l'utilisation de JavaScript, CSS, HTML et SVG, appliquer des transformations au document qui sont pilotées par ces données. Le résultat peut être une simple sortie HTML ou des graphiques SVG interactifs avec un comportement dynamique comme des animations, des transitions et des interactions. Toutes les transformations de données et les rendus sont effectués côté client, dans le navigateur.
Dans sa forme la plus simple, D3.js peut être utilisé pour manipuler un DOM. Voici un exemple simple où D3.js est utilisé pour ajouter un élément de paragraphe à un corps de document vide, avec le texte "Hello World":
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3 Hello World</title> <script src="http://d3js.org/d3.v3.min.js"></script> </head> <body> <script type="text/javascript"> d3.select("body").append("p").text("Hello World"); </script> </body> </html>La force de D3.js, cependant, réside dans sa capacité de visualisation des données. Par exemple, il peut être utilisé pour créer des graphiques. Il peut être utilisé pour créer des graphiques animés. Il peut même être utilisé pour intégrer et animer différents graphiques connectés.
D3 pour les cartes Web et la visualisation de données géographiques
Mais D3.js peut être utilisé pour bien plus que la simple manipulation du DOM ou pour dessiner des graphiques. D3.js est extrêmement puissant lorsqu'il s'agit de gérer des informations géographiques. Manipuler et présenter des données géographiques peut être très délicat, mais construire une carte avec un D3.js est assez simple.
Voici un exemple D3.js qui dessinera une carte du monde basée sur les données stockées dans un format de données compatible JSON. Il vous suffit de définir la taille de la carte et la projection géographique à utiliser (plus à ce sujet plus tard), de définir un élément SVG, de l'ajouter au DOM et de charger les données de la carte à l'aide de JSON. Le style de la carte se fait via CSS.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3 World Map</title> <style> path { stroke: white; stroke-width: 0.5px; fill: black; } </style> <script src="http://d3js.org/d3.v3.min.js"></script> <script src="http://d3js.org/topojson.v0.min.js"></script> </head> <body> <script type="text/javascript"> var width = 900; var height = 600; var projection = d3.geo.mercator(); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); var path = d3.geo.path() .projection(projection); var g = svg.append("g"); d3.json("world-110m2.json", function(error, topology) { g.selectAll("path") .data(topojson.object(topology, topology.objects.countries) .geometries) .enter() .append("path") .attr("d", path) }); </script> </body> </html>Données géographiques pour D3
Pour ce didacticiel D3.js, gardez à l'esprit que la création de cartes fonctionne mieux avec des données formatées aux formats JSON, en particulier les spécifications GeoJSON et TopoJSON.
GeoJSON est "un format pour encoder une variété de structures de données géographiques". Il est conçu pour représenter des objets géométriques discrets regroupés dans des collections d'entités de paires nom/valeur.
TopoJSON est une extension de GeoJSON, qui peut coder la topologie où les géométries sont "cousues ensemble à partir de segments de ligne partagés appelés arcs". TopoJSON élimine la redondance en stockant des informations relationnelles entre les entités géographiques, et pas seulement des informations spatiales. En conséquence, la géométrie est beaucoup plus compacte et combinée là où les géométries partagent des caractéristiques. Il en résulte un fichier TopoJSON typique 80 % plus petit que son équivalent GeoJSON.
Ainsi, par exemple, étant donné une carte avec plusieurs pays limitrophes, les parties communes des frontières seront stockées deux fois dans GeoJSON, une fois pour chaque pays de part et d'autre de la frontière. Dans TopoJSON, ce ne sera qu'une ligne.
Bibliothèques de cartes : Google Maps et Leaflet.js
Aujourd'hui, les bibliothèques de cartographie les plus populaires sont Google Maps et Leaflet. Ils sont conçus pour obtenir rapidement et facilement des « cartes glissantes » sur le Web. «Slippy maps» est un terme faisant référence aux cartes Web modernes alimentées par JavaScript qui permettent de zoomer et de se déplacer autour de la carte.
Leaflet est une excellente alternative à Google Maps. Il s'agit d'une bibliothèque JavaScript open source conçue pour créer des cartes interactives adaptées aux mobiles, dans un souci de simplicité, de performance et de convivialité. Leaflet est à son meilleur lorsqu'il tire parti de la grande sélection de cartes raster disponibles sur Internet, et apporte la simplicité de travailler avec des cartes en mosaïque et leurs capacités de présentation.
Leaflet peut être utilisé avec beaucoup de succès lorsqu'il est combiné avec les fonctionnalités de manipulation de données de D3.js et pour utiliser D3.js pour les graphiques vectoriels. Les combiner ensemble fait ressortir le meilleur des deux bibliothèques.
Google Maps est plus difficile à combiner avec D3.js, car Google Maps n'est pas open source. Il est possible d'utiliser Google Maps et D3 ensemble, mais cela se limite principalement à superposer des données avec D3.js sur des cartes d'arrière-plan Google Maps. Une intégration plus profonde n'est pas vraiment possible, sans piratage.
Projections - Au-delà de Mercator sphérique
La question de savoir comment projeter des cartes de la Terre sphérique tridimensionnelle sur des surfaces bidimensionnelles est un problème ancien et complexe. Choisir la meilleure projection pour une carte est une décision importante à prendre pour chaque carte Web.
Dans notre tutoriel de carte du monde simple D3.js ci-dessus, nous avons utilisé le système de coordonnées de projection Spherical Mercator en appelant d3.geo.mercator() . Cette projection est également connue sous le nom de Web Mercator. Cette projection a été popularisée par Google lors de l'introduction de Google Maps. Plus tard, d'autres services Web ont également adopté la projection, à savoir OpenStreetMap, Bing Maps, Here Maps et MapQuest. Cela a fait de Spherical Mercator une projection très populaire pour les cartes glissantes en ligne.
Toutes les bibliothèques de cartographie prennent en charge la projection Spherical Mercator prête à l'emploi. Si vous souhaitez utiliser d'autres projections, vous devrez utiliser, par exemple, la bibliothèque Proj4js, qui peut effectuer n'importe quelle transformation d'un système de coordonnées à un autre. Dans le cas de Leaflet, il existe un plugin Proj4Leaflet. Dans le cas de Google Maps, il n'y a, eh bien, rien.
D3.js amène les projections cartographiques à un tout autre niveau avec un support intégré pour de nombreuses projections géographiques différentes. D3.js modélise les projections géographiques sous forme de transformations géométriques complètes, ce qui signifie que lorsque des lignes droites sont projetées sur des courbes, D3.js applique un rééchantillonnage adaptatif configurable pour subdiviser les lignes et éliminer les artefacts de projection. Le plugin Extended Geographic Projections D3 porte le nombre de projections prises en charge à plus de 40. Il est même possible de créer une toute nouvelle projection personnalisée en utilisant d3.geo.projection et d3.geo.projectionMutator .
Cartes matricielles
Comme mentionné précédemment, l'une des principales forces de D3.js est de travailler avec des données vectorielles. Pour utiliser des données raster, il est possible de combiner D3.js avec Leaflet. Mais il existe également une option pour tout faire avec juste D3.js en utilisant d3.geo.tile pour créer des cartes glissantes. Même avec juste D3.js seul, les gens font des choses incroyables avec les cartes raster.
Manipulation vectorielle à la volée
L'un des plus grands défis de la cartographie classique est la généralisation des cartes. Vous souhaitez disposer d'une géométrie aussi détaillée que possible, mais ces données doivent s'adapter à l'échelle de la carte affichée. Une résolution de données trop élevée augmente le temps de téléchargement et ralentit le rendu, tandis qu'une résolution trop faible ruine les détails et les relations topologiques. Les cartes glissantes utilisant des données vectorielles peuvent rencontrer un gros problème avec la généralisation des cartes.
Une option consiste à effectuer une généralisation de la carte au préalable : pour avoir différents ensembles de données dans différentes résolutions, puis afficher l'ensemble de données approprié pour l'échelle actuellement sélectionnée. Mais cela multiplie les ensembles de données, complique la maintenance des données et est sujet aux erreurs. Pourtant, la plupart des bibliothèques de cartographie sont limitées à cette option.
La meilleure solution est de généraliser la carte à la volée. Et voici à nouveau D3.js, avec ses puissantes fonctionnalités de manipulation de données. D3.js permet de simplifier les lignes dans le navigateur.
Je veux plus!
D3.js n'est pas facile à maîtriser et sa courbe d'apprentissage est abrupte. Il est nécessaire de se familiariser avec de nombreuses technologies, à savoir les objets JavaScript, la syntaxe de chaînage jQuery, SVG et CSS, et bien sûr l'API de D3. En plus de cela, il faut avoir un peu de compétence en conception pour créer de beaux graphismes à la fin. Heureusement, D3.js a une grande communauté et il y a beaucoup de ressources dans lesquelles les gens peuvent creuser. Ces tutoriels sont un excellent point de départ pour apprendre D3.
Si vous aimez apprendre en examinant des exemples, Mike Bostock a partagé plus de 600 exemples D3.js sur sa page Web. Tous les exemples D3.js ont un référentiel git pour le contrôle de version et sont bifurquables, clonables et commentables.
Si vous utilisez CartoDB, vous serez heureux d'apprendre que CartoDB rend les cartes D3 un jeu d'enfant.
Et pour un petit bonus à la fin, voici l'un de mes exemples préférés montrant les choses incroyables dont D3 est capable :
- Earth, une carte mondiale des vents animée en 3D du monde entier réalisée avec D3.js. Earth est une visualisation des conditions météorologiques mondiales, basée sur les prévisions météorologiques faites par les superordinateurs des National Centers for Environmental Prediction, NOAA / National Weather Service et converties en JSON. Vous pouvez personnaliser les données affichées telles que les hauteurs pour les relevés de vitesse du vent, modifier les données superposées et même modifier la projection terrestre.