title: d3: color by separate array
body: <p>I have a map of us states, identified by fips codes and mapped with topoJSON.</p>
  
  <p>I also have an array of fips codes and population <code>data = [{fips: 1, pop: 2000}, {fips:2, pop: 3240}, etc.]</code></p>
  
  <p>I am trying to color the states by population with the below code. Any thoughts on why it isn't working?</p>
  
  <pre><code>g.append("g")
    .attr("id", "states")
  .selectAll("path")
    .data(state_features)
  .enter().append("path")
  .attr("d", path)
  .attr("class", "state")
  .style("fill", function(d) { 
       state = data.filter(function( obj ) { return obj.fips == d.id; })[0];
       return color(state.pop); })
  .on("mouseover", tip.show)
  
  svg.call(tip)
  </code></pre>
  
  <p>A similar idea works for my toolip:</p>
  
  <pre><code>var tip = d3.tip()
    .html(functioN(d, i) {
        state = data.filter(function( ob ) { return obj.fips == d.id;})[0]
        return state.pop;})
  </code></pre>