1

This is a similar question to this one (which was answered for ggplot2), this one (which was answered for R) and is a follow up question to this one (which is still looking for an answer).

How could I use this recent Constrained Zoom plot by Mike Bostock (http://bl.ocks.org/mbostock/4987520) but have the starting position with the pacific in the center rather than Africa?

Like this... enter image description here

Obviously just adjusting the .translate([0, 0]) values in the code moves the map, but there is no 'wrapping' that would allow the map to be presented as above.

I am convinced that there must be a simple way to accomplish this, as it seems like a fundamental capability, I just can't see or find a solution.

Community
  • 1
  • 1
d3noob
  • 2,133
  • 3
  • 29
  • 36
  • The d3 example you refer to calls `.translate()` on the zoom object. I haven't tried this, but I would think that, instead, calling `.translate()` on the projection object would do the trick. Don't know how that'll interact with the zoom behavior though. – meetamit Feb 20 '13 at 20:51
  • I'm not quite sure I understand you correctly. The translate I adjusted was in the `var = projection` section. I think the suggestion has merit, but I tried quite a few variants adding in the `.translate()` in different areas and had no luck. Thanks for the thought though. It sounds like a good direction. – d3noob Feb 21 '13 at 04:38

1 Answers1

1

OK, The answers was pretty obvious in the end and many thanks to the guys at Hashbang whose post set me on the right path.

The problem I was having was assuming that I needed to use the .translate() function to shift the map to the correct location, when in fact the .translate() function just moves the points on the returned map. So in other words it literally translates what you have to another location (duh!).

What I should have done is use the .rotate function to rotate the map about its longitude by using the function like so;

var projection = d3.geo.mercator()
    .translate([0, 0])
    .scale(width)
    .rotate([-180,0]);

This simply wraps the map around and gives full control as desired. A fully functioning example is here.

d3noob
  • 2,133
  • 3
  • 29
  • 36