title: D3 Chloropleth Map Stops After Rendering One Region
body: <p>I'm trying to create a chloropleth map of Morocco in D3, colored differently based on population density. Currently, it renders the first region in the GeoJson, but thats the only thing it renders. This is the part where I load and render:</p>
  
  <pre><code>d3.csv("moroccoCSV.csv", function(data) {
  
          //Set input domain for color scale
          color.domain([
              d3.min(data, function(d) { return d.popDensity; }), 
              d3.max(data, function(d) { return d.popDensity; })
          ]);    
  
          var url = "Morocco.json";
          d3.json(url, function(geojson) {
  
              for (var i = 0; i &lt; data.length; i++) {
  
                              //Grab state name
                              var dataState = data[i].region;
  
                              //Grab data value, and convert from string to float
                              var dataValue = parseFloat(data[i].popDensity);
  
                              //Find the corresponding state inside the GeoJSON
                              for (var j = 0; j &lt; geojson.features.length; j++) {
  
                                  var jsonState = geojson.features[j].properties.NAME_1;
  
                                  if (dataState == jsonState) {
  
                                      //Copy the data value into the JSON
                                      geojson.features[j].properties.value = dataValue;
  
                                      //Stop looking through the JSON
                                      break;
  
                                  }
                              }       
                          }
          svg.selectAll("path")
             .data(geojson.features)
             .enter()
             .append("path")
             .attr("d", path)
              .style("stroke", "black")
             .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>The console registers the values of each region, and their path as well, but does not render them. Also, if I replace .attr("d", path) with .attr("d", path(geojson), the map prints all the regions but they are all of the same fill color.
  Any ideas?</p>