d3.js
D3 Projecties

Mercator-projecties

Een Mercator-projectie is een van de meest herkenbare projecties die in kaarten worden gebruikt. Zoals alle kaartprojecties heeft het vervorming en voor een Mercator is projectie dit het meest merkbaar in de poolgebieden. Het is een cilindrische projectie, meridianen lopen verticaal en breedtegraden lopen horizontaal.

Schaal is afhankelijk van de grootte van uw svg, in dit voorbeeld hebben alle gebruikte schalen een svg van 960 pixels breed bij 450 pixels hoog.

De onderstaande kaart toont een Tissot's Indicatrix voor een Mercator-projectie, elke cirkel is in werkelijkheid even groot, maar de projectie toont duidelijk een aantal groter dan andere:

Deze vervorming is omdat de projectie probeert een eendimensionale uitrekking van de kaart te voorkomen. Naarmate meridianen op de Noord- en Zuidpool beginnen te fuseren, begint de afstand tussen hen nul te naderen, maar het oppervlak van de projectie is rechthoekig (niet de kaart, hoewel het ook rechthoekig is) en staat geen verandering in de afstand toe tussen meridianen in de projectie. Hierdoor worden elementen langs de x-as bij de polen uitgerekt, waardoor hun vorm wordt vervormd. Om dit tegen te gaan, rekt een Mercator de y-as uit en benadert men de polen, waardoor de indicatoren cirkelvormig zijn.

De projectie voor de bovenstaande kaart is in wezen de standaard Mercator-projectie een beetje verschoven:

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

Als u de projectie op een bepaald punt met een bekende breedtegraad en een bekende lengtegraad wilt centreren, kunt u gemakkelijk naar dat punt pannen door het centrum op te geven:

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

Hiermee wordt overgeschakeld naar die functie (maar niet op zoom) op het geprojecteerde oppervlak (dat lijkt op de bovenstaande kaart).

Schalen moeten worden aangepast aan het interessegebied, grotere getallen zijn gelijk aan grotere functies (grotere mate van inzoomen), kleinere getallen het tegenovergestelde. Uitzoomen kan een goede manier zijn om te bepalen waar uw functies zich bevinden ten opzichte van het punt waarop u bent gericht - als u problemen ondervindt om ze te vinden.

Vanwege de aard van een Mercator-projectie, zullen gebieden in de buurt van de evenaar of op lage breedtegraden het beste werken met dit type projectie, terwijl polaire gebieden sterk kunnen worden vervormd. Vervorming is zelfs langs elke horizontale lijn, dus gebieden die breed maar niet hoog zijn, kunnen ook goed zijn, terwijl gebieden met een groot verschil tussen hun noordelijke en zuidelijke uitersten meer visuele vervorming hebben.

Voor India zouden we bijvoorbeeld kunnen gebruiken:

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

Dat geeft ons (opnieuw met een Tissot's indicatrix om vervorming te tonen):

Dit heeft een laag vervormingsniveau, maar de cirkels zijn grotendeels even groot (u ziet een grotere overlapping tussen de bovenste twee rijen dan de onderste twee rijen, dus vervorming is zichtbaar). Over het algemeen toont de kaart echter een vertrouwde vorm voor India.

Vervorming in het gebied is niet lineair, het is sterk overdreven richting de polen, dus Canada met vrij ver uit elkaar gelegen noordelijke en zuidelijke uitersten en een positie vrij dicht bij de polen betekent dat vervorming onhoudbaar kan zijn:

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

Door deze projectie ziet Groenland er net zo groot uit als Canada, terwijl Canada in werkelijkheid bijna vijf keer groter is dan Groenland. Dit komt simpelweg omdat Groenland verder naar het noorden ligt dan het grootste deel van Canada (Sorry Ontario, ik lijk een deel van je zuidelijke extremiteit te hebben afgesneden).

Omdat de y-as in een Mercator aanzienlijk wordt uitgerekt nabij de polen, gebruikt deze projectie een punt aanzienlijk ten noorden van het geografische centrum van Canada. Als u te maken heeft met gebieden met een grote breedtegraad, moet u mogelijk uw centreerpunt aanpassen om rekening te houden met dit uitrekken.

Als u een Mercator-projectie nodig hebt voor poolgebieden, is er een manier om vervorming te minimaliseren en toch een Mercator-projectie te gebruiken. Je kunt dit bereiken door de wereldbol te roteren. Als u de x-as op de standaard Mercator draait, lijkt u deze naar links of rechts te pannen (u draait eenvoudig de bol in de cilinder waarop u projecteert), maar als u de y-as van de standaard Mercator wijzigt, kunt u draai de aarde zijwaarts of in een andere hoek. Hier is een Mercator met een rotatie van -90 graden:

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

De indicatrixpunten bevinden zich op dezelfde locaties als de eerste kaart hierboven. Vervorming neemt nog steeds toe naarmate men de bovenkant of onderkant van de kaart bereikt. Dit is hoe een standaard Mercator-kaart zou verschijnen als de aarde rond een noordpool op [0,0] en een zuidpool op [180,0] draaide, de rotatie de cilinder waarop we projecteren 90 graden ten opzichte van de Polen. Merk op hoe de polen niet langer onhoudbare vervorming hebben, dit is een alternatieve methode om gebieden nabij de polen te projecteren zonder al te veel vervorming in het gebied.

Door Canada weer als voorbeeld te gebruiken, kunnen we de kaart naar een centrale coördinaat draaien, en dit zal de vervorming in het gebied minimaliseren. Om dit te doen kunnen we weer naar een centreerpunt draaien, maar dit vereist een extra stap. Met centreren pannen we naar een functie, met roteren verplaatsen we de aarde onder ons, dus we hebben het negatieve van onze centreren-coördinaat nodig:

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

Merk op dat de indicatrix van de Tissot nu in het gebied weinig vervorming vertoont. De schaalfactor is ook veel groter dan voorheen, omdat dit Canada nu aan de oorsprong van de projectie ligt en in het midden van de kaartelementen kleiner zijn dan aan de boven- of onderkant (zie eerste indicatrix hierboven). We hoeven niet te centreren omdat het middelpunt of de oorsprong van deze projectie op [-96,64.15] , centreren zou ons van dit punt af bewegen.

Albers-projecties

Een Albers-projectie, of beter gezegd, een Albers-kegelprojectie voor een gelijk gebied, is een gemeenschappelijke conische projectie en een officieel project van een aantal rechtsgebieden en organisaties zoals het Amerikaanse volkstellingbureau en de provincie British Columbia in Canada. Het behoudt het gebied ten koste van andere aspecten van de kaart, zoals vorm, hoek en afstand.

Algemene eigenschappen

De algemene transformatie is vastgelegd in de volgende gif:

(Gebaseerd op het blok van Mike Bostock)

De Albers-projectie minimaliseert vervorming rond twee standaard parallellen. Deze parallellen stellen voor waar de conische projectie het aardoppervlak snijdt.

Voor dit voorbeeld worden alle schalen gebruikt met 960 pixels breed bij 450 pixels hoog svg-afmetingen, schaal zal veranderen met deze afmetingen

De onderstaande kaart toont een Tissot's Indicatrix voor een Albers-projectie met standaard parallellen van 10 en 20 graden ten noorden. Elke cirkel heeft in werkelijkheid dezelfde grootte en vorm, maar de kaartprojectie zal deze in vorm (geen gebied) vervormen. Merk op hoe ongeveer ongeveer 10 tot 20 graden noord, de indicatoren ronder zijn dan elders:

Dit is gemaakt met de volgende projectie:

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

Als we parallellen gebruiken die op grotere hoogten toenemen, neemt de mate van boogvorming in de projectie toe. De volgende afbeeldingen gebruiken de parallellen van 50 en 60 graden noord:

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]);

Als we negatieve (zuidelijke) parallellen hadden, is de kaart concaaf omlaag in plaats van omhoog. Als één parallel noorden en één zuiden is, is de kaart concaaf naar de hogere / extremere parallel, als ze zich op dezelfde afstand van de evenaar bevinden, dan zal de kaart in geen enkele richting concaaf zijn.

Parallels kiezen

Omdat parallellen de gebieden met de minste vervorming markeren, moeten ze worden gekozen op basis van uw interessegebied. Als je interessegebied zich uitstrekt van 10 graden noord tot 20 graden noord, dan zal het kiezen van parallellen van 13 en 17 de vervorming door je hele kaart minimaliseren (omdat vervorming aan beide zijden van deze parallellen wordt geminimaliseerd).

Parallels zouden niet de extreme noordelijke en zuidelijke grenzen van uw interessegebied moeten zijn. Parallellen kunnen beide dezelfde waarde hebben als u slechts een keer wilt dat de projectie het aardoppervlak kruist.

Projectiereferenties en definities bevatten parallelle gegevens die u kunt gebruiken om gestandaardiseerde projecties te maken.

Centreren en roteren

Nadat parallellen zijn geselecteerd, moet de kaart zo worden geplaatst dat het interessegebied goed is uitgelijnd. Als u alleen projection.center([x,y]) , wordt de kaart eenvoudig naar het geselecteerde punt gepand en vindt er geen andere transformatie plaats. Als het doelgebied Rusland is, is pannen misschien niet ideaal:

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]);

De centrale meridiaan van een Albers-projectie is verticaal en we moeten de aarde onder de projectie draaien om de centrale meridiaan te veranderen. Rotatie voor de projectie van Alber is de methode voor het centreren van een projectie op de x-as (of op lengtegraad). En terwijl de aarde onder de projectie draait, gebruiken we het negatieve van de lengtegraad die we willen centreren. Voor Rusland kan dit ongeveer 100 graden oost zijn, dus we draaien de wereld 100 graden de andere kant op.

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

Nu kunnen we omhoog en omlaag pannen en de functies langs en nabij de centrale meridiaan zullen rechtop staan. Als u .center() op de x-as .center() , is uw centrering relatief ten opzichte van de centrale meridiaan die is ingesteld door de rotatie . Voor Rusland willen we misschien een beetje naar het noorden pannen en een beetje inzoomen:

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

Voor een element als Rusland betekent de boog van de kaart dat de uiterste randen van het land rond de paal worden uitgerekt, wat betekent dat het centreerpunt mogelijk niet het middelpunt van uw element is, omdat u mogelijk meer naar de noord of zuid dan normaal.

Met de Tissots Indicatrix zien we wat afvlakking in de buurt van de paal zelf, maar die vorm is redelijk waar in het hele interessegebied (vergeet niet dat voor de grootte van Rusland vervorming vrij minimaal is, het zou veel minder zijn voor kleinere functies):

Standaard parameters

In tegenstelling tot de meeste andere projecties, wordt de d3.geoAlbers-projectie geleverd met standaardparameters die geen .rotate ([0,0]) en .center ([0,0]) zijn, de standaardprojectie is gecentreerd en gedraaid voor de Verenigde Staten. Dit geldt ook voor .parallels() . Dus als een van deze niet is ingesteld, worden deze standaard ingesteld op niet-nulwaarden.

Samenvatting

Een Albers-projectie wordt meestal ingesteld met de volgende parameters:

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

Waar a en b gelijk zijn aan de twee parallellen.

Azimuthal Equidistant Projections

Algemene eigenschappen:

Een Azimuthal Equidistant-projectie wordt het best herkend bij gebruik in poolgebieden. Het wordt gebruikt in het embleem van de VN . Vanuit het middelpunt blijven hoek en afstand behouden. Maar de projectie zal de vorm en het gebied vervormen om dit te bereiken, vooral als men verder van het midden komt. Evenzo zijn afstand en hoek niet waar op andere locaties dan het midden. De projectie valt in de azimutale categorie (in plaats van cilindrisch (Mercator) of conisch (Albers). Deze projectie projecteert de aarde als een schijf:

(Gebaseerd op het blok van Mike Bostock. Gecentreerd op de Noordpool, negeer het driehoekige artefact bovenop de afbeelding als het eenmaal is uitgeklapt )

Schaal is afhankelijk van de grootte van uw svg, voor dit voorbeeld zijn alle gebruikte schalen binnen een svg van 960 pixels breed bij 450 pixels hoog (en indien nodig schermgeknipt voor een vierkant) - tenzij anders aangegeven.

De onderstaande kaart toont een Tissot's Indicatrix voor een Azimuthal Equidistant projectie:

Dit is gemaakt met de volgende projectie:

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

Centreren en roteren:

Centreren zal eenvoudig een kaart verschuiven maar de algemene samenstelling niet wijzigen. Als u een azimutale equidistant op de Noordpool centreert terwijl u andere parameters ongewijzigd of op nul laat, wordt de noordpool naar het midden van het scherm verplaatst - maar anders wordt de kaart hierboven niet gewijzigd.

Om een gebied goed te centreren, moet u het draaien. Zoals bij elke rotatie in d3, is het het beste om te denken dat de aarde onder de projectie wordt verplaatst, dus als de aarde -90 graden onder de kaart op de y-as wordt gedraaid, wordt de noordpool eigenlijk in het midden geplaatst:

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

Evenzo gedraagt rotatie op de x-as zich op dezelfde manier. Om bijvoorbeeld de kaart zodanig te draaien dat het Canadese noordpoolgebied rechtop staat, terwijl we ons op de noordpool concentreren, kunnen we een projectie als deze gebruiken:

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

Deze kaart gebruikte een 600x600 svg

Over het algemeen maakt deze eenvoud een azimutale equidistant een gemakkelijker in te stellen projectie, gebruik gewoon rotatie. Een typische projectie ziet eruit als:

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