Hope this clarifies and thank you very much for your comments!

]]>But there’s a place making me confused, I can not found your email, so I decide leave a comment here.

In the chapter 4, we use a projection to draw a real map, the projection need to be scaled and translationed to a new place, but the translation part seems a little weird, check the follows

Now, we have an accurate scale of our map, given our set width and height.

var t = [(width – s * (b[1][0] + b[0][0])) / 2, (height – s *

(b[1][1] + b[0][1])) / 2];

As we saw in Chapter 2, Creating Images from Simple Text, when we scale in SVG, it scales all the attributes (even x and y). In order to return the map to the center of the screen, we will use the translate function.

The translate function receives an array with two parameters: the amount to translate in x, and the amount to translate in y. We will calculate x by finding the center (topRight – topLeft)/2 and multiplying it by the scale. The result is then subtracted from the width of the SVG element.

Our y translation is calculated similarly but using the bottomRight – bottomLeft values divided by 2, multiplied by the scale, then subtracted from the height.

Finally, we will reset the projection to use our new scale and translation:

projection.scale(s).translate(t);

yes, you said “(topRight – topLeft)/2”, but the code is “s * (b[1][0] + b[0][0])”, I have thought a long time but still dont know why, could you please help me? My email is viclm@live.com, thanks a lot!

]]>BTW, this blog site is really helpful, thanks for you effort explaining things like this.

]]>