Experiment 3 – adding click events to our visualization

We've seen how to make a map and set different colors to the different regions of this map. Next, we will add a little bit of interactivity. This will illustrate a simple reference to bind click events to maps. For this experiment, we will build on the previous exercise, example-3.html. You can see the completed experiment at http://localhost:8080/chapter-4/example-4.html.

First, we need a quick reference to each state in the country. To accomplish this, we will create a new function called geoID right below the mexico variable:

  var height = 600;
  var width = 900;
  var projection = d3.geo.mercator();
  var mexico = void 0;

  var geoID = function(d) {
    return "c" + d.properties.ID_1;
  };

This function takes in a state data element and generates a new selectable ID based on the ID_1 property found in the data. The ID_1 property contains a unique numeric value for every state in the array. If we insert this as an id attribute into...