d3.js
D3-projektioner

Mercator projektioner

En Mercator-projektion är en av de mest kännbara projektioner som används i kartor. Liksom alla kartprojektioner har den snedvridning och för en Mercator är projektionen mest synlig i polära regioner. Det är en cylindrisk projektion, meridianerna går vertikalt och breddegraderna går horisontellt.

Skala beror på storleken på din svg, för detta exempel är alla skalor med en bredd på 960 pixlar med 450 pixel hög svg.

Kartan nedan visar en Tissots indikator för en Mercator-projektion, varje cirkel är i verkligheten samma storlek men projektionen visar uppenbarligen några som är större än andra:

Denna snedvridning beror på att projektionen försöker undvika en endimensionell sträckning av kartan. När meridianerna börjar smälta samman vid nord- och sydpolen börjar avståndet mellan dem närma sig noll, men ytan på projektionen är rektangulär (inte kartan, även om den också är rektangulär) och tillåter inte en förändring i avståndet mellan meridianer i projektionen. Detta skulle sträcka funktioner längs x-axeln nära polerna och förvränga deras form. För att motverka detta sträcker en Mercator y-axeln såväl som man närmar sig polerna, vilket gör indikatorerna cirkulära.

Projektionen för kartan ovan är i grund och botten standard Mercator-projektionen flyttas upp lite:

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

För att centrera projektionen på en given punkt med en känd latitud och en känd longitud kan du enkelt panorera till den punkten genom att ange centrum:

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

Detta kommer att panorera till den funktionen (men inte zooma) på den projicerade ytan (som ser ut som kartan ovan).

Skalor måste anpassas efter intresseområdet, större antal motsvarar större funktioner (större zoomningsgrad), mindre antal motsatt. Zooma ut kan vara ett bra sätt att få dina lager för att se var dina funktioner är relativt den punkt du har centrerat på - om du har problem med att hitta dem.

På grund av karaktären av en Mercator-projektion kommer områden nära ekvatorn eller på låga breddegrader att göra bäst med denna typ av projektion, medan polära områden kan vara mycket förvrängda. Distorsion är även längs vilken horisontell linje som helst, så områden som är breda men inte höga kan också vara bra, medan områden som har en stor skillnad mellan deras norra och södra ytterpunkter har mer visuell distorsion.

För Indien kan vi till exempel använda:

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

Som ger oss (igen med en Tissots indikator för att visa distorsion):

Detta har en låg distorsionsnivå, men cirklarna är i stort sett samma storlek (du kan se en större överlappning mellan de två översta raderna än de två nedre raderna, så distorsion är synlig). Sammantaget visar kartan dock en känd form för Indien.

Förvrängning i området är inte linjär, det är kraftigt överdrivet mot polerna, så Kanada med ganska långt ifrån varandra norra och södra ytterpunkter och en position ganska nära polerna betyder att snedvridning kan vara ohållbar:

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

Denna projicering får Grönland att se lika stor ut som Kanada, när Kanada i verkligheten är nästan fem gånger större än Grönland. Detta beror helt enkelt på att Grönland är längre norrut än huvuddelen av Kanada (tyvärr Ontario, jag verkar ha avskuren en del av din södra extremitet).

Eftersom y-axeln är avsevärt sträckt nära polerna i en Mercator, använder denna projektion en punkt avsevärt norr om Canadas geografiska centrum. Om du arbetar med områden med hög latitud kan du behöva skräddarsy din centreringspunkt för att redovisa denna sträckning.

Om du behöver en Mercator-projektion för polära områden finns det ett sätt att minimera snedvridning och fortfarande använda en Mercator-projektion. Du kan uppnå detta genom att rotera världen. Om du roterar x-axeln på standard Mercator ser du ut att panorera den åt vänster eller höger (du snurrar bara klotet i cylindern som du projicerar på), om du ändrar y-axeln för standard Mercator kan du vrid jorden i sidled eller till någon annan vinkel. Här är en Mercator med en rotation på -90 grader:

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

Indikatorpunkterna är på samma platser som den första kartan ovan. Förvrängningen ökar fortfarande när de når upp till toppen eller botten av kartan. Så här ser en standard Mercator-karta ut om jorden roterade runt en nordpol vid [0,0] och en sydpol vid [180,0], rotationen har vänt cylindern som vi projicerar på till 90 grader relativt stolparna. Observera hur polerna inte längre har ohållbar distorsion, detta är en alternativ metod för att projicera områden nära polerna utan för stor snedvridning i området.

Genom att använda Kanada som exempel igen kan vi rotera kartan till en centrumkoordinat, och detta minimerar snedvridning i området. För att göra det kan vi rotera till en centreringspunkt igen, men detta kräver ett extra steg. Med centrering panorerar vi till en funktion, med rotation flyttar vi jorden under oss, så vi behöver det negativa av vår centreringskoordinat:

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

Observera att Tissot's indikatrix visar låg snedvridning i området nu. Skalafaktorn är också mycket större än tidigare, eftersom detta Kanada nu är vid ursprunget till projektionen, och längs mitten av kartan är funktionerna mindre än överst eller nederst (se första indikatrix ovan). Vi behöver inte centrera eftersom mittpunkten eller ursprunget för denna projektion är vid [-96,64.15] , centrering skulle flytta oss från denna punkt.

Albers prognoser

En Albers-projektion, eller mer korrekt, en Albers-konisk projicering med lika område, är en vanlig konisk projektion och en officiell projektion av ett antal jurisdiktioner och organisationer som den amerikanska folkräkningsbyrån och provinsen British Columbia i Kanada. Det bevarar området på bekostnad av andra aspekter på kartan, som form, vinkel och avstånd.

Generella egenskaper

Den allmänna transformationen fångas i följande gif:

(Baserat på Mike Bostocks block )

Albers-projektionen minimerar distorsion kring två standardparalleller. Dessa paralleller representerar där den koniska projektionen korsar jordens yta.

För detta exempel används alla skalor med 960 pixlar breda med 450 pixlar höga svg-dimensioner, skalan kommer att ändras med dessa dimensioner

Kartan nedan visar en Tissots indikatrix för en Albers-projektion med standardparalleller på 10 och 20 grader norr. Varje cirkel är i verkligheten samma storlek och form, men kartprojektionen kommer att förvrida dessa i form (inte område). Lägg märke till hur indikatorerna omkring cirka 10 till 20 grader norr är rundare än någon annanstans:

Detta skapades med följande projektion:

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

Om vi använder paralleller som i högre höjder ökar graden av ljusbåge i projektionen. Följande bilder använder parallellerna 50 och 60 grader norr:

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

Om vi hade negativa (sydliga) paralleller skulle kartan vara konkav i stället för upp. Om en parallell är norr och en söder, kommer kartan att vara konkav mot den högre / mer extrema parallellen, om de är samma avstånd från ekvatorn kommer kartan inte att vara konkav i någon riktning.

Att välja paralleller

Eftersom paralleller markerar områdena med minsta snedvridning bör de väljas utifrån ditt intresseområde. Om ditt intressanta område sträcker sig från 10 grader norr till 20 grader norr, kommer du att välja paralleller på 13 och 17 minimera snedvridning på hela kartan (eftersom snedvridning minimeras på båda sidor av dessa paralleller).

Paralleller bör inte vara de extrema norra och södra gränserna för ditt intressanta område. Paralleller kan båda ha samma värde om du bara vill att projektionen ska korsa jordens yta en gång.

Projektionsreferenser och definitioner innehåller parallella data som du kan använda för att återskapa standardiserade projektioner.

Centrering och rotering

När paralleller har valts, måste kartan placeras så att intressanta område anpassas korrekt. Om du bara använder projection.center([x,y]) kommer kartan helt enkelt att panoreras till den valda punkten och ingen annan transformation kommer att ske. Om målområdet är Ryssland kanske panorering inte är perfekt:

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

Den centrala meridianen i en Albers-projektion är vertikal, och vi måste rotera jorden under projektionen för att ändra den centrala meridianen. Rotation för en Albers projektion är metoden för att centrera en projektion på x-axeln (eller med longitud). Och när jorden snurrar under projektionen använder vi det negativa av den longitud vi vill vara centrerad. För Ryssland kan det vara cirka 100 grader öst, så vi snurrar jordklotet 100 grader på andra håll.

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

Nu kan vi panorera upp och ner och funktionerna längs och nära den centrala meridianen kommer att vara upprätt. Om du .center() på x-axeln kommer din centrering att vara relativt den centrala meridianen som ställts in av rotationen . För Ryssland kanske vi vill panorera lite nord och zooma in lite:

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

För en funktion som Ryssland betyder kartbågen att landets yttersta kanter kommer att sträckas upp runt polen, vilket innebär att centreringspunkten kanske inte är centrum för din funktion, eftersom du kan behöva panorera mer till norr eller söder än vanligt.

Med Tissots Indicatrix kan vi se en viss utjämning nära själva polen, men den formen är ganska sann i hela det intressanta området (Kom ihåg att för Rysslands storlek är snedvridning ganska minimal, det skulle vara mycket mindre för mindre funktioner):

Standardparametrar

Till skillnad från de flesta andra projektioner kommer d3.geoAlbers-projektionen med standardparametrar som inte är .rotate ([0,0]) och .center ([0,0]), standardprojektionen är centrerad och roterad för USA. Detta gäller också för .parallels() . Så om något av dessa inte är inställt kommer standardvärdet att vara icke-nollvärden.

Sammanfattning

En Albers-projektion är generellt inställd med följande parametrar:

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

Där a och b är lika med de två parallellerna.

Azimuthal Equidistant Projections

Generella egenskaper:

En Azimuthal Equidistant-projektion känns bäst när den används i polära områden. Det används i FN: s emblem . Från mittpunkten bevaras vinkel och avstånd. Men projektionen kommer att förvränga form och område för att uppnå detta, särskilt när man rör sig längre från mitten. På samma sätt är avstånd och vinkel inte sanna på andra platser än centrum. Projektionen faller inom kategorin azimuthal (snarare än cylindrisk (Mercator) eller konisk (Albers). Denna projicering projicerar jorden som en skiva:

(Baserat på Mike Bostocks block . Centrerat på North Pole, Ignorera den triangulära artefakten ovanpå bilden när den är utfälld )

Skala beror på storleken på din svg, för detta exempel är alla skalor som ligger inom en 960 pixel bred med 450 pixel hög svg (och skärmen klipps ut för en kvadrat där det behövs) - om inget annat anges.

Kartan nedan visar en Tissots indikator för en Azimuthal Equidistant-projektion:

Detta skapades med följande projektion:

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

Centrera och rotera:

Centrering panorerar helt enkelt en karta men ändrar inte dess totala sammansättning. Om du centrerar en azimutal ekvidistant på Nordpolen medan du lämnar andra parametrar oförändrade eller vid noll kommer du att flytta nordpolen till mitten av skärmen - men annars förändrar inte kartan ovan.

För att centrera ett område på rätt sätt måste du rotera det. Som med alla rotationer i d3, är det bäst att tänka på det som att flytta jorden under projektionen, så att rotera jorden -90 grader under kartan på y-axeln faktiskt placerar nordpolen i mitten:

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

På samma sätt uppträder rotation på x-axeln på samma sätt. Till exempel, för att rotera kartan så att den kanadensiska arktis är upprätt, medan vi centrerar på nordpolen, kan vi använda en projektion som denna:

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

Den här kartan använde en 600x600 svg

Sammantaget gör denna enkelhet en azimutal ekvistant till en enklare projektion att ställa in, använd bara rotation. En typisk projektion kommer att se ut som:

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