title: d3.js- noob- how to bind data to path from external svg by path ID?
body: <p>I'm attempting to make a chloropleth map using an SVG file of the counties and a csv of data for each of these.  I'm new to D3 and working off of an example that used geoJSON.(thank you Scott Murray).
  The example ties the data to the shapes like so:</p>
  
  <pre><code>d3.json("us-states.json", function(json) {
  
                      //Merge the ag. data and GeoJSON
                      //Loop through once for each ag. data value
                      for (var i = 0; i &lt; data.length; i++) {
  
                          var dataState = data[i].state;              //Grab state name
                          var dataValue = parseFloat(data[i].value);  //Grab data value, and convert from string to float
  
                          //Find the corresponding state inside the GeoJSON
                          for (var j = 0; j &lt; json.features.length; j++) {
  
                              var jsonState = json.features[j].properties.name;
  
                              if (dataState == jsonState) {
  
                                  //Copy the data value into the JSON
                                  json.features[j].properties.value = dataValue;
  
                                  //Stop looking through the JSON
                                  break;
  
                              }
                          }       
                      }
  
                      //Bind data and create one path per GeoJSON feature
                      svg.selectAll("path")
                         .data(json.features)
                         .enter()
                         .append("path")
                         .attr("d", path)
                         .style("fill", function(d) {
                              //Get data value
                              var value = d.properties.value;
  
                              if (value) {
                                  //If value exists…
                                  return color(value);
                              } else {
                                  //If value is undefined…
                                  return "#ccc";
                              }
                         });
  </code></pre>
  
  <p>But I am having trouble in adapting this to the svg. I don't need to have it create the paths- they're already there, but how would one write essentially: " if data.County == path id, bind that row's data to the path" ? </p>
  
  <p>Any help is much appreciated!!</p>