D3.js Map with Albers projection: how to rotate it?

Question

I am building a map of the Philippines with d3.js, and for a strange reason the map looks like it is rotated to the left, so the country does not look the way it really is. I tried to change the projection.rotate field, but it doesn't seem to be a correction line.

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

    });

This is the code.

Any help would be great!

Thank!

Answer 1

Albers projections can be a little tricky if you don't know the basic transforms. If you don’t display the USA (for which the d3.geoAlbers options are used by default), you probably need to change the parallels, rotation, and center.

Standard parallels

, 10 15 .parallels([10,15]), , 100 ( , [0,0]):

. , . / .

, - , .

, ( ):

.projection.center([x,y]) .projection.scale(1000):

, , , , . / /, - .

, - , .

( ) 100 .projection.rotate([100,0]), :

100 , , , -100 100 .

- ( , - -), . 20 : .projection.center([0,20]). , 1000, :

, , [122.427150, 12.499176] , :

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

:

:

projection.parellels([a,b])
  .rotate([-x,0])
  .center([0,y])
  .translate([w/2,h/2])

a b - , , y - , x - .

(projeciton.fitSize/projection.fitExtent) , , .