Learning D3.js 5 Mapping - Second Edition

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.geoMercator(); 
  var mexico = void 0; 
 
  var geoID = function(d) { 
    return "c" + d.properties.ID_1; 
  };