d3.js
Proyecciones D3

Proyecciones de Mercator

Una proyección de Mercator es una de las proyecciones más reconocibles utilizadas en los mapas. Como todas las proyecciones de mapas, tiene distorsión y, para un Mercator, la proyección es más notable en las regiones polares. Es una proyección cilíndrica, los meridianos se ejecutan verticalmente y las latitudes se ejecutan horizontalmente.

La escala depende del tamaño de su svg, para este ejemplo, todas las escalas utilizadas tienen un svg de 960 píxeles de ancho por 450 píxeles de alto.

El siguiente mapa muestra una Indicatriz de Tissot para una proyección de Mercator, cada círculo es en realidad del mismo tamaño, pero la proyección obviamente muestra que algunos son más grandes que otros:

Esta distorsión se debe a que la proyección intenta evitar un estiramiento unidimensional del mapa. A medida que los meridianos comienzan a fusionarse en los polos norte y sur, la distancia entre ellos comienza a acercarse a cero, pero la superficie de la proyección es rectangular (no el mapa, aunque también es rectangular) y no permite un cambio en la distancia. Entre los meridianos en la proyección. Esto estiraría las características a lo largo del eje x cerca de los polos, distorsionando su forma. Para contrarrestar esto, un Mercator estira el eje y, así como uno se acerca a los polos, lo que hace que los indicadores sean circulares.

La proyección para el mapa de arriba es esencialmente la proyección predeterminada de Mercator modificada ligeramente:

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

Para centrar la proyección en un punto dado con una latitud conocida y una longitud conocida, puede desplazarse fácilmente a ese punto especificando el centro:

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

Esto se desplazará a esa función (pero no a zoom) en la superficie proyectada (que se parece al mapa de arriba).

Las escalas deberán adaptarse al área de interés, los números más grandes son iguales a las funciones más grandes (mayor grado de acercamiento), los números más pequeños al contrario. Reducir el zoom puede ser una buena forma de orientarse para ver dónde se encuentran sus características en relación con el punto en el que se ha centrado, si tiene problemas para encontrarlas.

Debido a la naturaleza de una proyección de Mercator, las áreas cercanas al ecuador o en latitudes bajas funcionarán mejor con este tipo de proyección, mientras que las áreas polares pueden estar altamente distorsionadas. La distorsión es uniforme a lo largo de cualquier línea horizontal, por lo que las áreas que son amplias pero no altas también pueden ser buenas, mientras que las áreas que tienen una gran diferencia entre sus extremos norte y sur tienen más distorsión visual.

Para India, por ejemplo, podríamos usar:

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

Lo que nos da (de nuevo con una indicación de Tissot para mostrar la distorsión):

Esto tiene un bajo nivel de distorsión, pero los círculos son en gran medida del mismo tamaño (puede ver una mayor superposición entre las dos filas superiores que las dos filas inferiores, por lo que la distorsión es visible). En general, sin embargo, el mapa muestra una forma familiar para la India.

La distorsión en el área no es lineal, se exagera en gran medida hacia los polos, por lo que Canadá con extremos norte y sur bastante alejados y una posición bastante cerca de los polos significa que la distorsión puede ser insostenible:

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

Esta proyección hace que Groenlandia se vea tan grande como Canadá, cuando en realidad Canadá es casi cinco veces más grande que Groenlandia. Esto se debe simplemente a que Groenlandia está más al norte que la mayor parte de Canadá (lo siento, Ontario, parece haber cortado parte de su extremo sur).

Debido a que el eje y se estira considerablemente cerca de los polos en un Mercator, esta proyección usa un punto considerablemente al norte del centro geográfico de Canadá. Si se trata de áreas de latitud alta, es posible que deba adaptar su punto de centrado para tener en cuenta este estiramiento.

Si necesita una proyección de Mercator para áreas polares, hay una manera de minimizar la distorsión y seguir utilizando una proyección de Mercator. Puedes lograr esto girando el globo. Si gira el eje x en el Mercator predeterminado, parecerá que gira hacia la izquierda o hacia la derecha (simplemente gire el globo en el cilindro que está proyectando), si, sin embargo, cambia el eje y del Mercator predeterminado, puede Gira la tierra de lado o hacia cualquier otro ángulo. Aquí hay un Mercator con una rotación ay de -90 grados:

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

Los puntos indicatrix están en las mismas ubicaciones que el primer mapa de arriba. La distorsión sigue aumentando a medida que se llega a la parte superior o inferior del mapa. Así es como aparecería un mapa de Mercator predeterminado si la Tierra girara alrededor de un Polo Norte en [0,0] y un Polo Sur en [180,0], la rotación ha girado el cilindro que estamos proyectando a 90 grados con respecto a los polos. Tenga en cuenta que los polos ya no tienen una distorsión insostenible, esto presenta un método alternativo para proyectar áreas cercanas a los polos sin demasiada distorsión en el área.

Usando Canadá como ejemplo nuevamente, podemos rotar el mapa a una coordenada central, y esto minimizará la distorsión en el área. Para hacerlo, podemos rotar nuevamente hacia un punto de centrado, pero esto requiere un paso adicional. Con el centrado nos movemos hacia una característica, con la rotación movemos la tierra debajo de nosotros, por lo que necesitamos el negativo de nuestra coordenada de centrado:

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

Tenga en cuenta que la indicación de Tissot está mostrando una distorsión baja en el área ahora. El factor de escala también es mucho más grande que antes, ya que este Canadá se encuentra ahora en el origen de la proyección, y en la mitad del mapa las características son más pequeñas que en la parte superior o inferior (consulte la primera indicación). No necesitamos [-96,64.15] porque el punto central u origen de esta proyección está en [-96,64.15] , el centrado nos alejaría de este punto.

Proyecciones Albers

Una proyección de Albers, o más bien, una proyección cónica de área uniforme de Albers, es una proyección cónica común y un proyecto oficial de varias jurisdicciones y organizaciones como la oficina de censos de EE. UU. Y la provincia de Columbia Británica en Canadá. Conserva el área a expensas de otros aspectos del mapa como la forma, el ángulo y la distancia.

Propiedades generales

La transformación general se captura en el siguiente gif:

(Basado en el bloque de Mike Bostock)

La proyección de Albers minimiza la distorsión en torno a dos paralelos estándar. Estos paralelos representan donde la proyección cónica cruza la superficie de la tierra.

Para este ejemplo, todas las escalas se utilizan con dimensiones de svg de 960 píxeles de ancho por 450 píxeles de alto, la escala cambiará con estas dimensiones

El siguiente mapa muestra una Indicatriz de Tissot para una proyección de Albers con paralelos estándar de 10 y 20 grados norte. Cada círculo es en realidad el mismo tamaño y forma, pero la proyección del mapa los distorsionará en forma (no área). Observe cómo, aproximadamente a unos 10 a 20 grados norte, los indicadores son más redondos que en otros lugares:

Esto fue creado con la siguiente proyección:

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

Si utilizamos paralelos que en las altitudes más altas, el grado de formación de arco en la proyección aumenta. Las siguientes imágenes utilizan los paralelos de 50 y 60 grados al norte:

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

Si tuviéramos paralelos negativos (del sur), el mapa sería cóncavo en lugar de arriba. Si un paralelo es norte y otro sur, el mapa será cóncavo hacia el paralelo más alto / más extremo, si están a la misma distancia del ecuador, entonces el mapa no será cóncavo en ninguna dirección.

Eligiendo paralelos

Como los paralelos marcan las áreas con la menor distorsión, deben elegirse en función de su área de interés. Si su área de interés se extiende de 10 grados al norte a 20 grados al norte, entonces la elección de paralelos de 13 y 17 minimizará la distorsión en todo el mapa (ya que la distorsión se minimiza a ambos lados de estos paralelos).

Los paralelos no deben ser los límites extremos norte y sur de su área de interés. Los paralelos pueden tener el mismo valor si solo desea que la proyección intersecte la superficie de la tierra una vez.

Las referencias y definiciones de proyección incluyen datos paralelos que puede utilizar para recrear proyecciones estandarizadas.

Centrado y Rotación

Una vez que se seleccionan los paralelos, el mapa debe posicionarse de manera que el área de interés se alinee correctamente. Si usa solo projection.center([x,y]) , el mapa simplemente se desplazará al punto seleccionado y no tendrá lugar ninguna otra transformación. Si el área objetivo es Rusia, la panorámica podría no ser ideal:

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

El meridiano central de una proyección de Albers es vertical, y necesitamos rotar la tierra debajo de la proyección para cambiar el meridiano central. La rotación para una proyección de Alber es el método para centrar una proyección en el eje x (o por longitud). Y a medida que la tierra gira por debajo de la proyección, utilizamos el negativo de la longitud que queremos centrar. Para Rusia, esto podría ser de unos 100 grados al este, por lo que giraremos el globo 100 grados hacia el otro lado.

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

Ahora podemos desplazarnos hacia arriba y hacia abajo y las características a lo largo y cerca del meridiano central estarán en posición vertical. Si usted .center() en el eje x, su centrado será relativo al meridiano central establecido por la rotación . Para Rusia es posible que desee desplazarse un poco hacia el Norte y acercar un poco:

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

Para una función como Rusia, el arco del mapa significa que los bordes más alejados del país se extenderán alrededor del polo, lo que significa que el punto central no puede ser el centroide de la función, ya que es posible que deba desplazarse más hacia el centro. Norte o sur de lo habitual.

Con la Tissots Indicatrix, podemos ver algo de aplanamiento cerca del polo en sí, pero esa forma es bastante cierta en toda la zona de interés (recuerde que para el tamaño de Rusia, la distorsión es bastante mínima, sería mucho menor para las funciones más pequeñas):

Parámetros predeterminados

A diferencia de la mayoría de las demás proyecciones, la proyección d3.geoAlbers viene con parámetros predeterminados que no son .rotate ([0,0]) y .center ([0,0]), la proyección predeterminada se centra y gira para los Estados Unidos. Esto también es válido para .parallels() . Por lo tanto, si alguno de estos no está configurado, se establecerán de forma predeterminada valores no cero.

Resumen

Una proyección de Albers se establece generalmente con los siguientes parámetros:

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

Donde a y b son iguales a los dos paralelos.

Proyecciones equidistantes azimutales

Propiedades generales:

Una proyección equidistante azimutal se reconoce mejor cuando se usa en áreas polares. Se utiliza en el emblema de la ONU . Desde el punto central, se conservan el ángulo y la distancia. Pero la proyección distorsionará la forma y el área para lograr esto, especialmente a medida que uno se aleja del centro. Del mismo modo, la distancia y el ángulo no son ciertos en lugares que no sean el centro. La proyección cae dentro de la categoría azimutal (en lugar de cilíndrica (Mercator) o cónica (Albers). Esta proyección proyecta la tierra como un disco:

(Basado en el bloque de Mike Bostock. Centrado en el Polo Norte, ignorar el artefacto triangular en la parte superior de la imagen una vez desplegado )

La escala depende del tamaño de su svg, para este ejemplo, todas las escalas utilizadas están dentro de un svg de 960 píxeles de ancho por 450 píxeles de alto (y la pantalla está recortada para un cuadrado donde sea necesario), a menos que se especifique lo contrario.

El siguiente mapa muestra una Indicatriz de Tissot para una proyección equidistante azimutal:

Esto fue creado con la siguiente proyección:

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

Centrado y Rotación:

El centrado simplemente desplazará un mapa pero no cambiará su composición general. Centrar un equidistante azimutal en el Polo Norte mientras no se cambian otros parámetros o en cero moverá el Polo Norte al centro de la pantalla, pero de lo contrario no cambiará el mapa de arriba.

Para centrar adecuadamente un área, necesitas girarla. Al igual que con cualquier rotación en d3, es mejor pensar que se mueve la tierra debajo de la proyección, por lo que al rotar la tierra -90 grados debajo del mapa en el eje y, en realidad, se ubicará el polo norte en el centro:

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

Del mismo modo, la rotación en el eje x se comporta de manera similar. Por ejemplo, para rotar el mapa de manera que el ártico canadiense esté en posición vertical, mientras se centra en el polo norte, podemos usar una proyección como esta:

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

Este mapa utiliza un svg 600x600

En general, esta simplicidad hace que una proyección equidistante azimutal sea más fácil de configurar, simplemente use la rotación. Una proyección típica se verá así:

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