Una mappa alla perfezione: utilizzare D3.js per creare bellissime mappe Web
Pubblicato: 2022-03-11Data Driven Documents, o D3.js, è "una libreria JavaScript per la manipolazione di documenti in base ai dati". O per dirla più semplicemente, D3.js è una libreria di visualizzazione dei dati. È stato sviluppato da Mike Bostock con l'idea di colmare il divario tra la visualizzazione statica dei dati e le visualizzazioni dei dati interattive e animate.
D3 è una potente libreria con un sacco di usi. In questo tutorial parlerò di un'applicazione particolarmente interessante di D3: la creazione di mappe. Analizzeremo le sfide comuni legate alla creazione di una mappa Web utile e informativa e mostreremo come, in ogni caso, D3.js offre agli sviluppatori JavaScript abili tutto ciò di cui hanno bisogno per rendere le mappe belle e piacevoli.
A cosa serve D3.js?
D3.js può associare qualsiasi dato arbitrario a un Document Object Model (DOM) e quindi, tramite l'uso di JavaScript, CSS, HTML e SVG, applicare trasformazioni al documento guidate da tali dati. Il risultato può essere un semplice output HTML o grafici SVG interattivi con comportamenti dinamici come animazioni, transizioni e interazioni. Tutte le trasformazioni e i rendering dei dati vengono eseguiti lato client, nel browser.
Nella sua forma più semplice, D3.js può essere utilizzato per manipolare un DOM. Ecco un semplice esempio in cui D3.js viene utilizzato per aggiungere un elemento paragrafo a un corpo di documento vuoto, con il testo "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>Il punto di forza di D3.js, tuttavia, sta nella sua capacità di visualizzazione dei dati. Ad esempio, può essere utilizzato per creare grafici. Può essere utilizzato per creare grafici animati. Può anche essere utilizzato per integrare e animare diversi grafici collegati.
D3 per mappe Web e visualizzazione di dati geografici
Ma D3.js può essere utilizzato per molto di più della semplice manipolazione DOM o per disegnare grafici. D3.js è estremamente potente quando si tratta di gestire informazioni geografiche. La manipolazione e la presentazione dei dati geografici può essere molto difficile, ma costruire una mappa con un D3.js è abbastanza semplice.
Ecco un esempio D3.js che disegnerà una mappa del mondo basata sui dati archiviati in un formato di dati compatibile con JSON. Devi solo definire la dimensione della mappa e la proiezione geografica da utilizzare (ne parleremo più avanti), definire un elemento SVG, aggiungerlo al DOM e caricare i dati della mappa usando JSON. Lo stile delle mappe viene eseguito tramite 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>Dati geografici per D3
Per questo tutorial su D3.js, tieni presente che la creazione di mappe funziona meglio con i dati formattati nei formati JSON, in particolare le specifiche GeoJSON e TopoJSON.
GeoJSON è "un formato per codificare una varietà di strutture di dati geografici". È progettato per rappresentare oggetti geometrici discreti raggruppati in raccolte di funzioni di coppie nome/valore.
TopoJSON è un'estensione di GeoJSON, che può codificare la topologia in cui le geometrie sono "cucite insieme da segmenti di linea condivisi chiamati archi". TopoJSON elimina la ridondanza memorizzando le informazioni relazionali tra le caratteristiche geografiche, non solo le informazioni spaziali. Di conseguenza, la geometria è molto più compatta e combinata laddove le geometrie condividono le caratteristiche. Ciò si traduce con un file TopoJSON tipico dell'80% più piccolo rispetto al suo equivalente GeoJSON.
Quindi, ad esempio, data una mappa con diversi paesi confinanti tra loro, le parti condivise dei confini verranno archiviate due volte in GeoJSON, una per ogni paese su entrambi i lati del confine. In TopoJSON, sarà solo una riga.
Librerie di mappe: Google Maps e Leaflet.js
Oggi, le librerie di mappe più popolari sono Google Maps e Leaflet. Sono progettati per ottenere "mappe scivolose" sul Web in modo semplice e veloce. "Mappe scivolose" è un termine che si riferisce alle moderne mappe Web basate su JavaScript che consentono lo zoom e la panoramica della mappa.
Il volantino è un'ottima alternativa a Google Maps. È una libreria JavaScript open source progettata per creare mappe interattive ottimizzate per dispositivi mobili, tenendo conto della semplicità, delle prestazioni e dell'usabilità. Leaflet dà il meglio di sé quando si sfrutta l'ampia selezione di mappe raster disponibili su Internet e offre la semplicità di lavorare con le mappe affiancate e le loro capacità di presentazione.
Leaflet può essere utilizzato con grande successo se combinato con le funzionalità di manipolazione dei dati di D3.js e per l'utilizzo di D3.js per la grafica vettoriale. Combinandoli insieme si ottiene il meglio in entrambe le librerie.
Google Maps è più difficile da combinare con D3.js, poiché Google Maps non è open source. È possibile utilizzare Google Maps e D3 insieme, ma questo è per lo più limitato alla sovrapposizione dei dati con D3.js su mappe di sfondo di Google Maps. Un'integrazione più profonda non è davvero possibile senza l'hacking.
Proiezioni - Oltre Mercatore Sferico
La questione di come proiettare mappe della Terra sferica tridimensionale su superfici bidimensionali è un problema vecchio e complesso. La scelta della migliore proiezione per una mappa è una decisione importante da prendere per ogni mappa web.
Nel nostro semplice tutorial sulla mappa del mondo D3.js sopra, abbiamo utilizzato il sistema di coordinate di proiezione Spherical Mercator chiamando d3.geo.mercator() . Questa proiezione è anche nota come Web Mercator. Questa proiezione è stata resa popolare da Google quando hanno introdotto Google Maps. Successivamente, anche altri servizi web hanno adottato la proiezione, ovvero OpenStreetMap, Bing Maps, Here Maps e MapQuest. Ciò ha reso Spherical Mercator una proiezione molto popolare per le mappe scivolose online.
Tutte le librerie di mappatura supportano la proiezione sferica di Mercatore pronta all'uso. Se desideri utilizzare altre proiezioni, dovrai utilizzare, ad esempio, la libreria Proj4js, che può eseguire qualsiasi trasformazione da un sistema di coordinate all'altro. Nel caso di Leaflet, c'è un plugin Proj4Leaflet. Nel caso di Google Maps, beh, non c'è nulla.
D3.js porta le proiezioni cartografiche a un livello completamente nuovo con il supporto integrato per molte proiezioni geografiche diverse. D3.js modella le proiezioni geografiche come trasformazioni geometriche complete, il che significa che quando le linee rette vengono proiettate sulle curve, D3.js applica il ricampionamento adattivo configurabile per suddividere le linee ed eliminare gli artefatti di proiezione. Il plug-in Extended Geographic Projections D3 porta il numero di proiezioni supportate a oltre 40. È anche possibile creare una proiezione personalizzata completamente nuova utilizzando d3.geo.projection e d3.geo.projectionMutator .
Mappe raster
Come accennato in precedenza, uno dei principali punti di forza di D3.js è lavorare con i dati vettoriali. Per utilizzare i dati raster c'è un'opzione per combinare D3.js con Leaflet. Ma c'è anche un'opzione per fare tutto solo con D3.js usando d3.geo.tile per creare mappe scivolose. Anche con solo D3.js, le persone stanno facendo cose straordinarie con le mappe raster.
Manipolazione vettoriale al volo
Una delle maggiori sfide nella cartografia classica è la generalizzazione delle mappe. Vuoi avere la geometria più dettagliata possibile, ma i dati devono adattarsi alla scala della mappa visualizzata. Avere una risoluzione dei dati troppo alta aumenta il tempo di download e rallenta il rendering, mentre una risoluzione troppo bassa rovina i dettagli e le relazioni topologiche. Le mappe scivolose che utilizzano dati vettoriali possono incorrere in un grosso problema con la generalizzazione delle mappe.
Un'opzione è eseguire in anticipo la generalizzazione della mappa: disporre di set di dati diversi con risoluzioni diverse, quindi visualizzare il set di dati appropriato per la scala correntemente selezionata. Ma questo moltiplica i set di dati, complica la manutenzione dei dati ed è soggetto a errori. Tuttavia, la maggior parte delle librerie di mappatura sono limitate a questa opzione.
La soluzione migliore è fare la generalizzazione della mappa al volo. Ed ecco che arriva di nuovo D3.js, con le sue potenti funzionalità di manipolazione dei dati. D3.js consente di semplificare la linea nel browser.
Voglio di più!
D3.js non è facile da padroneggiare e ha una curva di apprendimento ripida. È necessario avere familiarità con molte tecnologie, in particolare gli oggetti JavaScript, la sintassi del concatenamento jQuery, SVG e CSS e, naturalmente, l'API di D3. Inoltre, è necessario avere un po' di abilità nel design per creare una bella grafica alla fine. Fortunatamente, D3.js ha una grande comunità e ci sono molte risorse in cui le persone possono approfondire. Un ottimo punto di partenza per l'apprendimento di D3 sono questi tutorial.
Se ti piace imparare esaminando esempi, Mike Bostock ha condiviso più di 600 esempi D3.js sulla sua pagina web. Tutti gli esempi di D3.js hanno un repository git per il controllo della versione e sono forkabili, clonabili e commentabili.
Se stai usando CartoDB, sarai felice di sapere che CartoDB rende le mappe D3 un gioco da ragazzi.
E per un piccolo bonus alla fine, ecco uno dei miei esempi preferiti che mostra le cose incredibili di cui è capace D3:
- terra, una mappa del vento 3D animata globale del mondo intero realizzata con D3.js. La Terra è una visualizzazione delle condizioni meteorologiche globali, basata sulle previsioni meteorologiche realizzate dai supercomputer dei National Centers for Environmental Prediction, NOAA / National Weather Service e convertite in JSON. È possibile personalizzare i dati visualizzati come le altezze per le letture della velocità del vento, modificare i dati sovrapposti e persino modificare la proiezione terrestre.