title: D3.js manually creating a diverging color scale? Newbie here
body: <p>I'm trying to make a visualization, and I'm really getting tripped up on the color scale part. It's kind of laughable how confused this is making me, but lets chalk it up to me being a huge d3 newb...</p>
  <pre><code>var colorScale = d3.scaleLinear()
              .domain([-850, -500, -25, 0, 25, 500, 2100])
              .range([&quot;blue&quot;, &quot;lightblue&quot;, &quot;grey&quot;, &quot;white&quot;, &quot;grey&quot;, &quot;pink&quot;, &quot;red&quot;]);
            var labels = [&quot;-850 - -500&quot;, '-499 - -25','-24 - 25', '26 - 500', '501 - 2,100'];
  </code></pre>
  <p>Basically I just want to make a range where (-850 to -500) fills the polygon with blue, (-499 to -25) fills with light blue, (-25 to -1) fills with grey, (0) fills with white, (1-25) grey... so on and so forth. I don't want to have colors in between these discrete seven ranges, so scaleLinear is probably wrong--but I think there's a lot wrong here.</p>
  <p>I'm not familiar with the different d3.scaleXXX variations, but I have experimented with a few and I'm coming up empty handed. I'm not sure if it's because I'm not using the proper d3.scale function, or if my code/ranges are wonky... Or perhaps a combination of both. Anyway, thanks for the help.</p>