title: D3 Choropleth Map CSV
body: <p>I'm struggling getting my choropleth map to work. I have a CSV file of values and district names I want to match to my TopoJSON map. The data on the CSV map looks like this:</p>
  
  <pre><code>id, values
  NAIROBI,50
  MOMBASA,10
  KWALE,20
  KILIFI,40
  TANA RIVER,50
  LAMU,10
  </code></pre>
  
  <p>The id column is for names of districts in Kenya, the values are arbitrary and are just meant to generate colors according to the domain set for the threshold scale I am using. For some reason the colors just won't generate. Here is the rest of my code. Please let me know where I am going wrong? I keep trying to fix it to no avail:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
              &lt;script type="text/javascript" src="d3.v3.js"&gt;&lt;/script&gt;
              &lt;script type="text/javascript" src="js/topojson.js"&gt;&lt;/script&gt;
              &lt;script type="text/javascript" src="js/jquery.js"&gt;&lt;/script&gt;
              &lt;script type="text/javascript" src="js/bootstrap.js"&gt;&lt;/script&gt;
  
  
  
              &lt;link rel="stylesheet" href="css/bootstrap.css" media="screen"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="row"&gt;
          &lt;header class="span12"&gt;
              &lt;h1&gt;Aphellion Activity 1 - Kenya Maps&lt;/h1&gt;
              &lt;h3&gt;The goal of this activity is generate two maps one drawn with D3.js using GeoJSON to generates the paths, the other drawn using TopoJSON to generate the paths.&lt;/h3&gt;
          &lt;/header&gt;
          &lt;/div&gt;
          &lt;/br&gt;
          &lt;div class="row"&gt;
              &lt;div  class="span6" id="Map1"&gt;
                  &lt;p&gt;This first map of Kenya was made using TopoJSON.&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="span6" id="Map2"&gt;
                  &lt;p&gt;This second map of Kenya was made using GeoJSON.&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
      &lt;script type="text/javascript"&gt;
          var width = 460;
          var height = 400;
  
          //Setting the color domains for the choropleth maps
          var color = d3.scale.threshold()
                      .domain([10, 20, 30, 40, 50])
                      .range(["#9e9ac8", "756bb1", "dadaeb", "bcbddc", "#E82D0C"]);
  
       //TopoJSON Map
          //new projection
             var projection = d3.geo.mercator()
                              .center([36.8000, 1.2667])
                              .scale([1000])
                              .translate([width/2, height/2]);
  
  
  
          var path = d3.geo.path().projection(projection);
  
           //Drawing Choropleth
  
           var svg = d3.select("div#Map1")
                      .append("svg")
                      .attr("width", width)
                      .attr("height", height);
  
          var g = svg.append("g")
                      .call(d3.behavior.zoom()
                      .scaleExtent([1, 10])
                      .on("zoom", zoom));
  
          d3.json("js/output.json", function(error, topology) {
              d3.csv("js/Schools.csv", function(error, Schools) {
                var rateById = {};
  
                Schools.forEach(function (d) {
                rateById[d.id] = +d.values;
                    });
  
        g.append("g")
              .attr("class", "districts")
              .selectAll("path")
              .data(topojson.feature(topology, topology.objects.kenya).features)
              .enter()
              .append("path")
              .attr("d", path)
              .style("fill", function(d) {
                  return color(rateById[d.id]);
              });
  
  
          });                        
          });
  
          //Draw a rect around the map
          svg.append("rect").attr("width", width).attr("height", height).style("stroke", "black").style("fill", "none")
                     ;
  
          function zoom() {
              g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")")};
      &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>