D3.js - Geografie
Le coordinate geospaziali vengono spesso utilizzate per i dati meteorologici o sulla popolazione. D3.js ci offre tre strumenti per i dati geografici:
Paths - Producono i pixel finali.
Projections - Trasformano le coordinate della sfera in coordinate cartesiane e
Streams - Accelerano le cose.
Prima di apprendere cosa sono le geografie in D3.js, dovremmo comprendere i seguenti due termini:
- D3 Geo Path e
- Projections
Cerchiamo di discutere questi due termini in dettaglio.
D3 Geo Path
È un generatore di percorsi geografici. GeoJSON genera una stringa di dati del percorso SVG o esegue il rendering del percorso in una tela. Una tela è consigliata per proiezioni dinamiche o interattive per migliorare le prestazioni. Per generare un D3 Geo Path Data Generator, puoi chiamare la seguente funzione.
d3.geo.path()Qui, il d3.geo.path() la funzione di generatore di percorso ci permette di selezionare quale proiezione cartografica vogliamo utilizzare per la traduzione da coordinate geografiche a coordinate cartesiane.
Ad esempio, se vogliamo mostrare i dettagli della mappa dell'India, possiamo definire un percorso come mostrato di seguito.
var path = d3.geo.path()
svg.append("path")
.attr("d", path(states))Proiezioni
Le proiezioni trasformano la geometria poligonale sferica in geometria poligonale planare. D3 fornisce le seguenti implementazioni di proiezione.
Azimuthal - Le proiezioni azimutali proiettano la sfera direttamente su un piano.
Composite - Composite è costituito da diverse proiezioni composte in un unico display.
Conic - Proietta la sfera su un cono e poi srotola il cono sul piano.
Cylindrical - Proiezioni cilindriche proiettano la sfera su un cilindro contenitore, quindi srotolano il cilindro sul piano.
Per creare una nuova proiezione, è possibile utilizzare la seguente funzione.
d3.geoProjection(project)Costruisce una nuova proiezione dal progetto di proiezione grezzo specificato. La funzione di progetto prende la longitudine e la latitudine di un dato punto in radianti. È possibile applicare la seguente proiezione nel codice.
var width = 400
var height = 400
var projection = d3.geo.orthographic()
var projections = d3.geo.equirectangular()
var project = d3.geo.gnomonic()
var p = d3.geo.mercator()
var pro = d3.geo.transverseMercator()
.scale(100)
.rotate([100,0,0])
.translate([width/2, height/2])
.clipAngle(45);Qui possiamo applicare una qualsiasi delle proiezioni di cui sopra. Parliamo brevemente di ciascuna di queste proiezioni.
d3.geo.orthographic()- La proiezione ortografica è una proiezione azimutale adatta per visualizzare un singolo emisfero; il punto di prospettiva è all'infinito.
d3.geo.gnomonic() - La proiezione gnomonica è una proiezione azimutale che proietta grandi cerchi come linee rette.
d3.geo.equirectangular()- L'equirettangolare è la proiezione geografica più semplice possibile. La funzione identità. Non è né di area uguale né conforme, ma a volte viene utilizzato per i dati raster.
d3.geo.mercator() - La proiezione Sferica di Mercatore è comunemente usata dalle librerie di mappe piastrellate.
d3.geo.transverseMercator() - La proiezione trasversale di Mercatore.
Esempio di lavoro
Creiamo la mappa dell'India in questo esempio. Per fare ciò, dobbiamo attenerci ai seguenti passaggi.
Step 1 - Apply styles - Aggiungiamo stili nella mappa utilizzando il codice seguente.
<style>
path {
stroke: white;
stroke-width: 0.5px;
fill: grey;
}
.stateTN { fill: red; }
.stateAP { fill: blue; }
.stateMP{ fill: green; }
</style>Qui abbiamo applicato colori particolari per gli stati TN, AP e MP.
Step 2 - Include topojson script - TopoJSON è un'estensione di GeoJSON che codifica la topologia, definita di seguito.
<script src = "http://d3js.org/topojson.v0.min.js"></script>Possiamo includere questo script nella nostra codifica.
Step 3 - Define variables - Aggiungi variabili nel tuo script, utilizzando il codice seguente.
var width = 600;
var height = 400;
var projection = d3.geo.mercator()
.center([78, 22])
.scale(680)
.translate([width / 2, height / 2]);Qui, la larghezza SVG è 600 e l'altezza è 400. Lo schermo è uno spazio bidimensionale e stiamo cercando di presentare un oggetto tridimensionale. Quindi, possiamo distorcere gravemente la dimensione / forma del terreno usando ild3.geo.mercator() funzione.
Il centro è specificato [78, 22], questo imposta il centro della proiezione nella posizione specificata come una matrice a due elementi di longitudine e latitudine in gradi e restituisce la proiezione.
Qui, la mappa è stata centrata su 78 gradi ovest e 22 gradi nord.
La scala è specificata come 680, questo imposta il fattore di scala della proiezione sul valore specificato. Se la scala non è specificata, restituisce il fattore di scala corrente, il cui valore predefinito è 150. È importante notare che i fattori di scala non sono coerenti tra le proiezioni.
Step 4 - Append SVG - Ora, aggiungi gli attributi SVG.
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);Step 5 - Create path - La seguente porzione di codice crea un nuovo generatore di percorsi geografici.
var path = d3.geo.path()
.projection(projection);Qui, il generatore di percorsi (d3.geo.path ()) viene utilizzato per specificare un tipo di proiezione (.projection), che è stato definito in precedenza come proiezione di Mercatore utilizzando la proiezione variabile.
Step 6 - Generate data - indiatopo.json - Questo file contiene così tanti record, che possiamo facilmente scaricare dal seguente allegato.
Scarica indiatopo.json file
Dopo che il file è stato scaricato, possiamo aggiungerlo alla nostra posizione D3. Il formato di esempio è mostrato di seguito.
{"type":"Topology","transform":{"scale":[0.002923182318231823,0.0027427542754275428],
"translate":[68.1862,8.0765]},"objects":
{"states":{"type":"GeometryCollection",
"geometries":[{"type":"MultiPolygon","id":"AP","arcs":
[[[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,
25,26,27,28,29,30,31,32,33,34]],[[35,36,37,38,39,40,41]],[[42]],
[[43,44,45]],[[46]],[[47]],[[48]],[[49]],[[50]],[[51]],[[52,53]],
[[54]],[[55]],[[56]],[[57,58]],[[59]],[[60]],[[61,62,63]],[[64]],
[[65]],[[66]],[[67]],[[68]],[[69]],[[-41,70]],
[[71]],[[72]],[[73]],[[74]],[[75]]],
"properties":{"name":"Andhra Pradesh"}},{"type":"MultiPolygon",
"id":"AR","arcs":[[[76,77,78,79,80,81,82]]],
"properties":{"name":"Arunachal Pradesh"}},{"type":"MultiPolygon",
"id":"AS","arcs":[[[83,84,85,86,87,88,89,90,
91,92,93,94,95,96,97,98,99,100,101,102,103]],
[[104,105,106,107]],[[108,109]]], ......
........................................Step 7 - Draw map - Ora, leggi i dati dal file indiatopo.json file e disegna la mappa.
d3.json("indiatopo.json", function(error, topology) {
g.selectAll("path")
.data(topojson.object(topology, topology.objects.states)
.geometries)
.enter()
.append("path")
.attr("class", function(d) { return "state" + d.id; })
.attr("d", path)
});Qui, caricheremo il file TopoJSON con le coordinate per la mappa dell'India (indiatopo.json). Quindi dichiariamo che agiremo su tutti gli elementi del percorso nel grafico. È definito come g.selectAll ("percorso"). Quindi estrarremo i dati che definiscono i paesi dal file TopoJSON.
.data(topojson.object(topology, topology.objects.states)
.geometries)Infine, lo aggiungeremo ai dati che visualizzeremo utilizzando il file .enter() metodo e quindi aggiungiamo tali dati come elementi di percorso utilizzando il .append(“path”) metodo.