Book Image

Learning D3.js Mapping

Book Image

Learning D3.js Mapping

Overview of this book

Table of Contents (14 chapters)
Learning D3.js Mapping
Credits
About the Authors
About the Reviewers
www.PacktPub.com
Preface
6
Finding and Working with Geographic Data
Index

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...