0

I'm trying to recreate a map of the Netherlands from Mike Bostock's tutorial. I get the first step done and actually see the smaller map. But when I go to the second step and try to change the projection everything is blank. Is it possible that this is caused by the data including the Dutch Antilles? They are so far it apart that I might be looking at the ocean?

My files

0xcaff
  • 13,085
  • 5
  • 47
  • 55
user2123511
  • 186
  • 1
  • 1
  • 7

1 Answers1

0

It seems to me that setting the center attribute on the projection was messing things up, it might be because your data was crossing date line? I notice the the bounding box stretch way off to the south and west.

My approach was to set the scale and translation based on one of the centrally located provinces. The scale and translation were automatically calculated based on Mike's code in this stack overflow question. The idea is to use a unit projection and then to calculate the bounds of a given feature. These bounds are then used to calculate appropriate scale and translation (avoiding using the center attribute). The projection is then updated using the recalculated scale and transform.

The relevant code is:

//select a province to center on
var l = topojson.feature(nld, nld.objects.subunits).features[8],
    //calculate the bounds
    b = path.bounds(l),
    //calculate the scale based on the bounds (note that I've set the proportion to  
    //less than one so you can see all of the Netherlands)
    s = .125 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
    //calculate the translation based on the bounds
    t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];

//update the projection
projection
    .scale(s)
    .translate(t);

And you can find an example here

Community
  • 1
  • 1
user1614080
  • 2,854
  • 1
  • 19
  • 22
  • Wow really nice, I can see that you commented it nicely but it's still a bit advanced for me to understand what exactly is going on. – user2123511 Mar 04 '14 at 16:10
  • I've added some further explanation to the code in the google groups question [here](https://groups.google.com/forum/#!topic/d3-js/nKQmbdx6EMc). Hopefully, this will get you going, but if you have any specific questions post them. Also, if you're happy with the answer feel free to accept it – user1614080 Mar 06 '14 at 10:14