Experiment 2 – creating choropleths

One of the most common uses of D3.js maps is to make choropleths. This visualization gives you the ability to discern between regions, giving them a different color. Normally, this color is associated with some other value, for instance, levels of influenza or a company's sales. The Choropleths are very easy to make in D3.js. In this experiment, we will create a quick choropleth based on the index value of the state in the array of all the states. Look at the following code, or use your browser and go here: http://localhost:8080/chapter-4/example-3.html.

We will only need to modify two lines of code in the Update section of our D3 code. Right after the enter() section, add the following two lines:

  //Update 
  var color = d3.scaleLinear()
  .domain([0,33])
  .range(['red','yellow']); 

  //Enter
  mexico.enter()
  .append('path')
  .attr('d', path)
  .attr('fill', function(d,i){return color(i);});

The color variable uses another valuable D3 function named...