Abstract State Map: Basic Recipe

d3 sandwich

Recipe: Abstract State Map

Step #4: Changing the Color of Selected States

You're almost there! All you have left to do: change the color of the selected states.

The nice thing: all the techniques you need to use are variations on the themes we've seen so far.

Let's start by playing with the code. Change the color/fill of the selected states and change the states to be selected -- you can add up to 5 states. 


// States that will be given a different color
var selected_states = [  {"state": "OR"},  {"state": "MA"} ];
...

svg_area.selectAll("rect")
  .data( selected_states, function(d) { return d.state; });
    .style("fill", "Orange");
Fill
Selected States

(Some Header)

{Remember how we said sometimes you select? One reason we picked this recipe: now you're going to see it in action. This is a technique you use much less frequently, but we still thought it be good for you to see it on your first time out..}

{what's the d.state for? We want to tell it to only pick the states in __. How does it know how to pick them? Essentially we are telling it to use states as a key}