javascript - with - D3.js Map: ¿Cómo rotarlo?

maps with d3 js

Question

Estoy construyendo un mapa de Filipinas con d3.js y, por alguna extraña razón, el mapa parece rotar a la izquierda, por lo que el país no se ve como realmente es. Intenté modificar el campo projection.rotate pero no parece que sea la línea de corrección.

        var width = 1060,
        height = 860;

    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height)
        .style("overflow", "auto");

    d3.json("ph.json", function(error, ph) {
      if (error) return console.error(error);

      var subunits = topojson.feature(ph, ph.objects.ph_subunits);

      var projection = d3.geo.albers();
      projection.rotate([-4 ,0]);
      projection.scale(3000);
      projection.center([122.427150, 12.499176]);
      projection.parallels([10, 15])
      projection.translate([width / 2, height / 2]);

      var path = d3.geo.path()
           .projection(projection)
           .pointRadius(2);
      svg.append("path")
        .datum(subunits)
        .attr("d", path);

    });

Este es el código.

¡Cualquier ayuda sería genial!

¡Gracias!

Answer 1

Las proyecciones de Albers pueden ser un poco complicadas si no conoce las transformaciones subyacentes.

Esta es la proyección predeterminada de albers con sus paralelos establecidos en 10 y 15 .parallels([10,15]) , como en su pregunta, y una escala de 100 (la rotación y el centro por defecto serán [0,0]):

Esta forma se debe a la naturaleza cónica de la proyección. Si se eligen los paralelos del sur, la concavidad se invierte. Latitudes / paralelos más extremos darán como resultado una mayor flexión. Los paralelos seleccionados deben correr a través de su área de interés ya que el área cercana a los paralelos es donde se minimiza la distorsión.

Si quisiéramos decir, concéntrese en Australia (mantendré los paralelos iguales a los de la imagen anterior por el bien de la demostración):

Simplemente podríamos usar el centro geográfico de Australia como el centro de la proyección .projection.center([x,y]) y escalar a un nivel apropiado .projection.scale(1000) :

El único cambio es que Australia es más grande, todavía está tan distorsionado como cuando estaba en la esquina del mapa y más pequeño. Se movió hacia arriba / abajo e izquierda / derecha y luego se amplió sin otras transformaciones.

Como su pregunta conjetura, la rotación es la solución al problema de mostrar áreas que no están cerca del meridiano principal.

Si rotamos el primer mapa (que es lo mismo que el segundo mapa) en 100 grados de longitud .projection.rotate([100,0]) , obtenemos:

El mundo ha girado 100 grados, y una línea imaginaria dibujada verticalmente a través del centro del mapa se alinea con el meridiano a -100 grados de longitud o 100 grados al oeste.

Si nuestra área de interés es Centroamérica (para lo cual los paralelos que usaste -y he seguido usando- funcionarán), entonces el siguiente paso es desplazar el centro del mapa hacia arriba y hacia abajo a lo largo del meridiano central de la proyección. Para América Central, este cambio podría ser de 20 grados: .projection.center([0,20]) . Con una escala adecuada, digamos 1000, el resultado será el siguiente:

Por lo tanto, para Filipinas, usando su centro de coordenadas [122.427150, 12.499176] y paralelos, una proyección ideal de Albers podría verse así:

        projection.rotate([-122.427150,0])
              .center([0,12.499176])
              .scale(1200)
              .parallels([10,15]);

Que para mí cedió: