Experiment 1 – adjusting the bounding box

Now that we have our foundation, let's start with our first experiment. For this experiment, we will manually zoom in to a state of Mexico using what we learned in the previous section. The code can be found in example-2.html (http://localhost:8080/chapter-4/example-2.html); however, feel free to edit example-1.html to learn as you go.

For this experiment, we will modify one line of code:

  var b = path.bounds(states.features[5]);

Here, we are telling the calculation to create a boundary based on the sixth element of the features array instead of every state in the country of Mexico. The boundaries data will now run through the rest of the scaling and translation algorithms to adjust the map to the one shown in the following screenshot:

We have basically reduced the min/max of the boundary box to include the geographic coordinates for one state in Mexico (see the next screenshot), and D3 has scaled and translated this information for us...