title: Choropleth map scale and legend
body: <p>Let me preface this by saying I am brand new to D3.js and coding in general. I am an infographic artist and I've been using QGIS to generate maps, but am trying to use D3.js to generate a choropleth map for a story about Opioid deaths. Basically I am trying to recreate this map.
  <a href="https://i.stack.imgur.com/fKv1F.png" rel="nofollow noreferrer">map from the Economist</a></p>
  
  <p>I have tried to start by using this <a href="https://bl.ocks.org/mbostock/4060606" rel="nofollow noreferrer">map</a> by Mike Bostock and changing some of the parameters but am getting stuck with the color range and scale. The measurement is 1 per 100,000 population. I have a domain that starts at 1.543385761 and ends at 131.0814217. </p>
  
  <p>The code I'm struggling with is around the scale input and output:</p>
  
  <pre><code>var x = d3.scaleLinear()
      .domain([0, 132])
      .rangeRound([600, 860]);
  
  var color = d3.scaleThreshold()
      .domain(d3.range(2, 10))
      .range(d3.schemeBlues[9]);
  
  var g = svg.append("g")
      .attr("class", "key")
      .attr("transform", "translate(0, 40)");
  
  g.selectAll("rect")
    .data(color.range().map(function(d) {
        d = color.invertExtent(d);
        if (d[0] == null) d[0] = x.domain()[0];
        if (d[1] == null) d[1] = x.domain()[1];
        return d;
      }))
    .enter().append("rect")
      .attr("height", 8)
      .attr("x", function(d) { return x(d[0]); })
      .attr("width", function(d) { return x(d[1]) - x(d[0]); })
      .attr("fill", function(d) { return color(d[0]); });
  </code></pre>
  
  <p>I can see that I need some bit of code that will define everything 25 and over as the darkest color. Not even sure I want that to be my final legend but I'd love to know how to reproduce that. I am shocked I was able to get this far but feel a bit lost right now. thank you in advance!  </p>