title: d3 choropleth map colors
body: <p>I'm trying to recreate the map shown <a href="https://s23.postimg.org/47evvful7/fertility_rates_in_europe_2013.png" rel="nofollow noreferrer">here</a> using D3 but I'm having trouble binning the values from my data and mapping them to colors. Currently I'm using scale.quantile that I believe sets the number of bins according to the range which should be 8 since I have 8 colors. So it would bin up the fertility values into 8 different bins and map each bin to each color but the colors are incorrect. In my data Sweden has a fertility rate of 1.89 and Russia 1.7 but they are the same color on my map which looks like <a href="https://s27.postimg.org/63lk9uyar/map1.png" rel="nofollow noreferrer">this</a> with my current code. What am I doing wrong?</p>
  
  <pre><code>        var width5 = 700;
          var height5 = 500;
  
          buckets = 8,
  
          colors = ['#ff1a1a','#ff471a','#ffd633','#ffff1a','#ccff33',' #66ff66','#00ff00',' #009900'];
  
  
          var projection = d3.geo.mercator()
                                 .center([ 13, 52 ])
                                 .translate([ width5/2.5, height5/1.7 ])
                                 .scale([ width5/1.5 ]);
  
          var path = d3.geo.path()
                           .projection(projection);
  
  
          var mapchart = d3.select("#mapchartarea")
                      .append("svg")
                      .attr("width", width5)
                      .attr("height", height5);
  
          d3.json("data/europe_geo_fertility.json", function(error,collection) {
              if(error) throw error;
  
              console.log(d3.min(collection.features, function(d) { return d.properties.fertility;}))
  
              // Sets color for each country according to fertility rate
              var colorScale = d3.scale.quantile()
                  .domain([0, buckets -1, d3.max(collection.features, function(d) { return d.properties.fertility;})])
                  .range(colors);
  
              // Draws Map
              mapchart.selectAll("path")
                 .data(collection.features)
                 .enter()
                 .append("path")
                 .attr("d", path)
                 .attr("stroke", "rgba(8, 81, 156, 0.2)")
                 .attr("fill", "rgba(8, 81, 156, 0.6)")
                 .style("fill", function(d) { return colorScale(d.properties.fertility); });
  
              // Adds name of each country
              mapchart.selectAll("text")
              .data(collection.features)
              .enter()
              .append("svg:text")
              .text(function(d){
                  return d.properties.name;
              })
              .attr("x", function(d){
                  return path.centroid(d)[0];
              })
              .attr("y", function(d){
                  return  path.centroid(d)[1];
              })
              .attr("text-anchor","middle")
              .attr('font-size','6pt');                  
  
          });
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/UDYq1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UDYq1.png" alt="enter image description here"></a></p>