Documents basés sur les données, ou D3.js , est «une bibliothèque JavaScript pour manipuler des documents à partir de 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 interactif et des visualisations de données animées.
D3 est un bibliothèque puissante avec une tonne d'utilisations. Dans ce didacticiel, je vais aborder une application particulièrement intéressante de D3: la création de cartes. Nous allons passer en revue les défis communs de la création d'une carte Web utile et informative, et montrer comment dans chaque cas, D3.js donne développeurs JavaScript compétents tout ce dont ils ont besoin faire des cartes regarder et se sentir belle.
D3.js peut lier toutes les données arbitraires à 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 géré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 et rendus de données se font 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»:
D3 Hello World d3.select('body').append('p').text('Hello World'); 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 graphiques . Il peut être utilisé pour créer graphiques animés . Il peut même être utilisé pour intégrer et animer différents graphiques connectés .
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 en termes de manipulation information géographique . Manipuler et présenter des données géographiques peut être très délicat, mais créer 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 cartographiques à l'aide de JSON. Le style de la carte se fait via CSS.
D3 World Map path { stroke: white; stroke-width: 0.5px; fill: black; } 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) }); En relation: Vers des graphiques D3.js actualisables 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 le GeoJSON et TopoJSON Caractéristiques.
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 de géométrie discrets regroupés en 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 «assemblées à 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, pas simplement 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 entités. 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 se limitant les uns aux autres, les parties partagées des frontières seront stockées deux fois dans GeoJSON, une fois pour chaque pays de chaque côté de la frontière. Dans TopoJSON, ce ne sera qu'une ligne.
Aujourd'hui, les bibliothèques cartographiques les plus populaires sont Google Maps et Brochure . Ils sont conçus pour obtenir des «cartes glissantes» sur le Web rapidement et facilement. «Slippy maps» est un terme faisant référence aux cartes Web modernes alimentées par JavaScript qui permettent de zoomer et de faire un panoramique sur la carte.
La crise financière en Grèce expliquée
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, en gardant à l'esprit la simplicité, les performances et la 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.
La brochure peut être utilisée avec succès lorsque 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 à la superposition de données avec D3.js sur les cartes d'arrière-plan de Google Maps. Une intégration plus profonde n'est pas vraiment possible, sans piratage.
La question de savoir comment projeter des cartes de la Terre sphérique en 3 dimensions sur des surfaces en 2 dimensions est problème ancien et complexe . Choisir la meilleure projection pour une carte est une décision importante à prendre pour chaque carte Web.
Dans notre simple tutoriel sur la carte du monde D3.js ci-dessus, nous avons utilisé le Mercator sphérique système de coordonnées de projection en appelant d3.geo.mercator(). Cette projection est également connue sous le nom de Mercator Web . Cette projection a été popularisée par Google lors de l'introduction Google Maps . Plus tard, d'autres services Web ont également adopté la projection, à savoir OpenStreetMap , Cartes Bing , Cartes ici 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, le Proj4js bibliothèque, qui peut effectuer n'importe quelle transformation d'un système de coordonnées à un autre. Dans le cas de Leaflet, il y a un Proj4Leaflet brancher. Dans le cas de Google Maps, il n'y a rien.
D3.js amène les projections cartographiques à un tout autre niveau avec la prise en charge intégrée de nombreux projections géographiques . D3.js modélise les projections géographiques comme des 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. La Plug-in 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.
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 existe une option permettant de combiner D3.js avec Leaflet. Mais il y a aussi une option pour tout faire avec juste D3.js en utilisant d3.geo.tile créer cartes glissantes . Même avec juste D3.js seul, les gens font des choses incroyables avec des cartes raster.
L'un des plus grands défis de la cartographie classique est généralisation de la carte . Vous voulez avoir autant de géométrie 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 basse 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 à faire une généralisation de la carte au préalable: pour avoir différents jeux de données dans différentes résolutions, puis afficher le jeu 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 mappage sont limitées à cette option.
La meilleure solution consiste à généraliser les cartes à la volée. Et voici à nouveau D3.js, avec ses puissantes fonctionnalités de manipulation de données. D3.js permet simplification de la ligne à faire dans le navigateur .
la budgétisation des immobilisations est le processus de
D3.js n'est pas facile à maîtriser et il a une courbe d'apprentissage abrupte. Il faut se familiariser avec de nombreuses technologies, à savoir les objets JavaScript, la syntaxe de chaînage jQuery, SVG et CSS, et bien sûr API de D3 . En plus de cela, il faut avoir un peu de compétences en conception pour créer de jolis graphismes à la fin. Heureusement, D3.js a une grande communauté, et il y a beaucoup de ressources dans lesquelles les gens peuvent creuser. Un excellent point de départ pour apprendre D3 est ces tutoriels .
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 forkables, clonables et commentables.
Si vous utilisez CartoDB, vous serez heureux de l'entendre CartoDB fait des 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:
