d3.js
Proiezioni D3

Proiezioni di Mercatore

Una proiezione Mercator è una delle proiezioni più riconoscibili utilizzate nelle mappe. Come tutte le proiezioni cartografiche ha distorsione e per un Mercatore, la proiezione è più evidente nelle regioni polari. È una proiezione cilindrica, i meridiani corrono verticalmente e le latitudini corrono orizzontalmente.

La scala dipende dalla dimensione del tuo svg, per questo esempio, tutte le scale utilizzate sono con una larghezza di 960 pixel per svg di 450 pixel di altezza.

La mappa qui sotto mostra una Indicatrix di Tissot per una proiezione di Mercatore, ogni cerchio è in realtà la stessa dimensione ma la proiezione ovviamente ne mostra alcuni più grandi di altri:

Questa distorsione è dovuta al fatto che la proiezione tenta di evitare uno stiramento unidimensionale della mappa. Quando i meridiani iniziano a fondersi ai poli nord e sud, la distanza tra loro inizia ad avvicinarsi a zero, ma la superficie della proiezione è rettangolare (non la mappa, sebbene sia anch'essa rettangolare) e non consente un cambiamento nella distanza tra i meridiani nella proiezione. Ciò estenderebbe le caratteristiche lungo l'asse x vicino ai poli, distorcendo la loro forma. Per contrastare questo, un Mercatore allunga l'asse y e uno si avvicina ai poli, il che rende gli indicatori circolari.

La proiezione per la mappa sopra è essenzialmente la proiezione predefinita di Mercator spostata un po ':

var projection = d3.geoMercator()
    .scale(155)
    .center([0,40]) // Pan north 40 degrees
    .translate([width/2,height/2]);

Per centrare la proiezione su un dato punto con una latitudine nota e una longitudine conosciuta, è possibile effettuare una panoramica su tale punto facilmente specificando il centro:

var projection = d3.geoMercator()
    .center([longitude,latitude])

Questo verrà spostato su quella caratteristica (ma non sullo zoom) sulla superficie proiettata (che appare come la mappa sopra).

Le bilance dovranno essere adattate all'area di interesse, i numeri più grandi saranno uguali a caratteristiche più grandi (maggiore è il grado di ingrandimento), i numeri più piccoli al contrario. Lo zoom può essere un buon modo per orientarsi nel vedere dove sono le caratteristiche relative al punto su cui ti sei centrato - se hai problemi a trovarle.

A causa della natura di una proiezione di Mercatore, le aree vicine all'equatore oa basse latitudini faranno meglio con questo tipo di proiezione, mentre le aree polari possono essere molto distorte. La distorsione è anche lungo qualsiasi linea orizzontale, quindi le aree che sono larghe ma non alte possono essere anche buone, mentre le aree che hanno una grande differenza tra i loro estremi nord e sud hanno una maggiore distorsione visiva.

Per l'India, ad esempio, potremmo usare:

var projection = d3.geoMercator()
    .scale(800)
    .center([77,21])
    .translate([width/2,height/2]);

Il che ci dà (di nuovo con l'indicatrice di Tissot per mostrare la distorsione):

Questo ha un basso livello di distorsione, ma i cerchi hanno in gran parte le stesse dimensioni (puoi vedere una sovrapposizione maggiore tra le prime due righe rispetto alle due righe in basso, quindi la distorsione è visibile). Nel complesso, tuttavia, la mappa mostra una forma familiare per l'India.

La distorsione nell'area non è lineare, è molto esagerata verso i poli, quindi il Canada con estremi nord e sud piuttosto distanti e una posizione abbastanza vicina ai poli significa che la distorsione potrebbe essere insostenibile:

var projection = d3.geoMercator()
    .scale(225)
    .center([-95,69.75])
    .translate([width/2,height/2]);

Questa proiezione rende la Groenlandia grande come il Canada, quando in realtà il Canada è quasi cinque volte più grande della Groenlandia. Questo è semplicemente perché la Groenlandia è più a nord della maggior parte del Canada (mi dispiace, Ontario, sembra che abbia tagliato fuori alcune delle tue estremità meridionali).

Poiché l'asse y è considerevolmente allungato vicino ai poli di un Mercatore, questa proiezione utilizza un punto considerevolmente a nord del centro geografico del Canada. Se si ha a che fare con aree di latitudine elevata, potrebbe essere necessario adattare il punto di centratura per tenere conto di questo allungamento.

Se hai bisogno di una proiezione di Mercatore per aree polari, c'è un modo per ridurre al minimo la distorsione e utilizzare ancora una proiezione di Mercatore. Puoi raggiungerlo ruotando il globo. Se si ruota l'asse x sul Mercator predefinito, apparirà una panoramica a sinistra o a destra (basta girare il globo nel cilindro su cui si sta proiettando), se tuttavia si modifica l'asse y del Mercator predefinito, è possibile gira la terra lateralmente o in qualsiasi altra angolazione. Ecco un Mercatore con una rotazione di -90 gradi:

var projection = d3.geoMercator()
.scale(155)
.rotate([0,-90]);
.translate([width/2,height/2]);

I punti dell'indicatore si trovano nelle stesse posizioni della prima mappa in alto. La distorsione aumenta ancora quando si raggiunge la parte superiore o inferiore della mappa. Ecco come apparirà una mappa di Mercator predefinita se la terra ruotasse attorno a un polo nord a [0,0] ea un polo sud a [180,0], la rotazione ha trasformato il cilindro su cui stiamo proiettando a 90 gradi rispetto a i poli. Nota come i poli non hanno più una distorsione insostenibile, questo presenta un metodo alternativo per proiettare le aree vicino ai poli senza troppa distorsione nell'area.

Usando di nuovo il Canada come esempio, possiamo ruotare la mappa su una coordinata centrale, e questo minimizzerà la distorsione nell'area. Per fare ciò possiamo ruotare nuovamente su un punto di centraggio, ma questo richiede un passo in più. Con il centraggio facciamo una panoramica su una caratteristica, con rotazione spostiamo la terra sotto di noi, quindi abbiamo bisogno del negativo della nostra coordinata di centraggio:

var projection = d3.geoMercator()
    .scale(500)
    .rotate([96,-64.15])
    .translate([width/2,height/2]);    

Notare che l'indicatrix del Tissot mostra ora una bassa distorsione nell'area. Il fattore di scala è anche molto più grande di prima, perché questo Canada è ora all'origine della proiezione, e lungo il centro della mappa le caratteristiche sono più piccole che nella parte superiore o inferiore (vedi prima indicatrice sopra). Non abbiamo bisogno di centrare perché il punto centrale o l'origine di questa proiezione è a [-96,64.15] , il centraggio ci allontanerebbe da questo punto.

Proiezioni di Albers

Una proiezione di Albers, o più propriamente, una proiezione conica di area uguale di Albers, è una proiezione conica comune e un progetto ufficiale di un certo numero di giurisdizioni e organizzazioni come l'ufficio di censimento degli Stati Uniti e la provincia della Columbia Britannica in Canada. Conserva l'area a spese di altri aspetti della mappa come forma, angolo e distanza.

Proprietà generali

La trasformazione generale viene catturata nella seguente gif:

(Basato sul blocco di Mike Bostock)

La proiezione di Albers minimizza la distorsione intorno a due paralleli standard. Questi paralleli rappresentano dove la proiezione conica interseca la superficie terrestre.

Per questo esempio, tutte le scale sono usate con dimensioni di 960 pixel di larghezza per 450 pixel di altezza, la scala cambierà con queste dimensioni

La mappa qui sotto mostra una Indicatrix di Tissot per una proiezione di Albers con paralleli standard di 10 e 20 gradi nord. Ogni cerchio è in realtà della stessa dimensione e forma, ma la proiezione della mappa ne distorce la forma (non l'area). Si noti come a circa 10 o 20 gradi nord, gli indicatori siano più arrotondati che altrove:

Questo è stato creato con la seguente proiezione:

var projection = d3.geoAlbers()
    .scale(120)
    .center([0,0])
    .rotate([0,0])
    .parallels([10,20])
    .translate([width/2,height/2]);

Se usiamo paralleli che nelle altitudini più elevate, il grado di arco nella proiezione aumenta. Le seguenti immagini utilizzano i paralleli di 50 e 60 gradi nord:

var projection = d3.geoAlbers()
    .scale(120)
    .center([0,70]) // shifted up so that the projection is more visible
    .rotate([0,0])
    .parallels([40,50])
    .translate([width/2,height/2]);

Se avessimo dei paralleli negativi (meridiani), la mappa sarebbe concava verso il basso invece che verso l'alto. Se un parallelo è nord e uno sud, la mappa sarà concava verso il parallelo più alto / più estremo, se sono la stessa distanza dall'equatore, allora la mappa non sarà concava in alcuna direzione.

Scegliere Parallels

Poiché i paralleli contrassegnano le aree con la minima distorsione, dovrebbero essere scelte in base alla zona di interesse. Se l'area di interesse si estende da 10 gradi nord a 20 gradi nord, scegliere i paralleli di 13 e 17 ridurrà al minimo la distorsione su tutta la mappa (poiché la distorsione è ridotta a entrambi i lati di questi paralleli).

I paralleli non dovrebbero essere i confini estremi del nord e del sud della vostra area di interesse. I paralleli possono essere entrambi lo stesso valore se si desidera che la proiezione intersechi la superficie della terra solo una volta.

I riferimenti e le definizioni di proiezione includono dati paralleli che è possibile utilizzare per ricreare proiezioni standardizzate.

Centratura e rotazione

Una volta selezionati i paralleli, la mappa deve essere posizionata in modo che l'area di interesse sia allineata correttamente. Se si utilizza solo projection.center([x,y]) , la mappa verrà semplicemente spostata sul punto selezionato e non verrà eseguita alcuna altra trasformazione. Se l'area di destinazione è la Russia, il panning potrebbe non essere l'ideale:

var projection = d3.geoAlbers()
    .scale(120)
    .center([0,50]) // Shifted up so the projection is more visible
    .rotate([0,0])
    .parallels([50,60])
    .translate([width/2,height/2]);

Il meridiano centrale di una proiezione di Albers è verticale, e abbiamo bisogno di ruotare la terra sotto la proiezione per cambiare il meridiano centrale. La rotazione per la proiezione di un Alber è il metodo per centrare una proiezione sull'asse x (o per longitudine). E mentre la terra gira sotto la proiezione, usiamo il negativo della longitudine che vogliamo centrare. Per la Russia, questo potrebbe essere di circa 100 gradi est, quindi ruoteremo il globo di 100 gradi nell'altro senso.

var projection = d3.geoAlbers()
    .scale(120)
    .center([0,60])
    .rotate([-100,0])
    .parallels([50,60])

Ora possiamo spostarci su e giù e le feature lungo e vicino al meridiano centrale saranno dritte. Se si .center() sull'asse x, il centraggio sarà relativo al meridiano centrale impostato dalla rotazione . Per la Russia potremmo voler fare una panoramica a nord e ingrandire un po ':

var projection = d3.geoAlbers()
    .scale(500)
    .center([0,65])
    .rotate([-100,0])
    .parallels([50,60])

Per una caratteristica come la Russia, l'arco della mappa significa che i bordi lontani del paese si allungheranno attorno al polo, il che significa che il punto di centraggio potrebbe non essere il centroide della tua funzione in quanto potrebbe essere necessario effettuare una panoramica più nord o sud del solito.

Con la Tissots Indicatrix, possiamo vedere un appiattimento vicino al polo stesso, ma quella forma è abbastanza vera in tutta l'area di interesse (ricordate che per le dimensioni della Russia, la distorsione è piuttosto minima, sarebbe molto meno per le caratteristiche più piccole):

Parametri predefiniti

A differenza della maggior parte delle altre proiezioni, la proiezione d3.geoAlbers viene fornita con parametri predefiniti che non sono .rotate ([0,0]) e .center ([0,0]), la proiezione predefinita è centrata e ruotata per gli Stati Uniti. Questo vale anche per .parallels() . Quindi, se uno di questi non è impostato, verrà impostato automaticamente su valori diversi da zero.

Sommario

Una proiezione di Albers è generalmente impostata con i seguenti parametri:

var projection = d3.geoAlbers()
    .rotate([-x,0])
    .center([0,y])
    .parallels([a,b]);

Dove a e b sono uguali ai due paralleli.

Proiezioni equidistanti azimutali

Proprietà generali:

Una proiezione equatoriale azimutale è meglio riconosciuta quando viene utilizzata in aree polari. È usato nell'emblema delle Nazioni Unite . Dal punto centrale, l'angolo e la distanza sono preservati. Ma la proiezione distorce la forma e l'area per ottenere ciò, specialmente quando ci si allontana dal centro. Allo stesso modo, la distanza e l'angolo non sono veri in posizioni diverse dal centro. La proiezione rientra nella categoria azimutale (piuttosto che cilindrica (Mercator) o conica (Albers). Questa proiezione proietta la Terra come un disco:

(Basato sul blocco di Mike Bostock. Centrato sul Polo Nord, Ignora l'artefatto triangolare sulla parte superiore dell'immagine una volta ripiegato )

La scala dipende dalla dimensione del tuo svg, per questo esempio, tutte le scale utilizzate sono all'interno di una larghezza di 960 pixel per un pixel svg di 450 pixel (e lo schermo ritagliato per un quadrato dove necessario) - se non diversamente specificato.

La mappa qui sotto mostra una Indicatrix di Tissot per una proiezione equidistal azimutale:

Questo è stato creato con la seguente proiezione:

var projection = d3.geoAzimuthalEquidistant()
   .scale(70)
   .center([0,0])
   .rotate([0,0])
   .translate([width/2,height/2]);

Centratura e rotazione:

Centrare semplicemente pan di una mappa ma non modifica la sua composizione generale. Centrando un equidistante azimutale al Polo Nord mentre si lasciano invariati altri parametri o zero si sposterà il polo nord al centro dello schermo, ma altrimenti non cambierà la mappa sopra.

Per centrare correttamente un'area, è necessario ruotarla. Come con qualsiasi rotazione in d3, è meglio pensarla come spostare la terra sotto la proiezione, quindi ruotare la terra di 90 gradi sotto la mappa sull'asse y posizionerà effettivamente il polo nord nel mezzo:

var projection = d3.geoAzimuthalEquidistant()
   .scale(70)
   .center([0,0])
   .rotate([0,-90])
   .translate([width/2,height/2]);

Allo stesso modo, la rotazione sull'asse x si comporta in modo simile. Ad esempio, per ruotare la mappa in modo che l'Artico canadese sia verticale, mentre si centra sul polo nord, possiamo usare una proiezione come questa:

var projection = d3.geoAzimuthalEquidistant()
    .scale(400)
    .center([0,0])
    .rotate([100,-90])
    .translate([width/2,height/2]);

Questa mappa utilizzava uno svg 600x600

Nel complesso, questa semplicità rende un azimutale equidistante una proiezione più semplice da impostare, basta usare la rotazione. Una proiezione tipica sarà simile a:

var projection = d3.geoProjection()
   .center([0,0])
   .rotate([-x,-y])
   .scale(k)
   .translate([width/2,height/2]);