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. 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 open up your browser to 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.scale.linear().domain([0,33]).range(['red', 'yellow']);
  mexico.attr('fill', function(d,i) {return color(i)});

The color variable uses another valuable D3 function named scale. Scales are extremely powerful...