Can I turn a D3 map projection clockwise around its centre point?

Question

How can I turn my map - if I can - clockwise by about 15-20 degrees, so that is looks like the map of the middle east I would see in an atlas?

Intuitively, .rotate looks like it should do it, but I've tried inserting different values and it just 'uncentres' the map.

The important bit of D3 code, I believe, is:

var projection = d3.geo.albers()
      .center([49.7, 27.4])
      .rotate([0, 0, 0])
      .parallels([12.6, 40])
      .scale(800)
      .translate([width / 2, height / 2]);

(1)

Thanks.

---

(2)

I'm trying to replicate a map the looks like this (2) - just because it is what people are familiar with seeing in a regular atlas.

Answer 1

Not knowing what you have tried thus far using projection.rotate() I still think this method will give the desired result. For example, a clockwise rotation by 20 degrees around LAT=49.7N, LON=27.4E as specified in your example could be done by:

projection.rotate([-49.7,-27.4,-20])

I set up a Plunk demonstrating the outcome.

---

Update

If you are not bound to using the Albers projection, there might be other options giving results which better fit your needs of

what people are familiar with seeing in a regular atlas.

I looked it up in three atlases where the Arabian Peninsula was depicted using the equirectangular projection which looks like your desired output:

var projection = d3.geo.equirectangular()
    .rotate([-49.7,-27.4])

You just center on LAT=49.7N, LON=27.4E by applying .rotate([-49.7,-27.4]) without the need to further roll the projection, i.e. you won't have the third element in the array supplied to rotate(). See my updated Plunk. To me this looks like what I would expect it look when seeing it in an atlas.