Colorbrewer scale only returning lightest values on D3 map

Question

Im trying to use a colorbrewer scale on a D3 map, and for some reason it's only returning the lightest values, which is making the map look very washed out. I'm not sure what the problem is. Thoughts?

This is how I'm using the scale:

var colorScale = d3.scale.linear()
    .range(colorbrewer.OrRd[8])
    .domain([0, 16000]);

Here's a link to the map if you want to take a look:

http://www.pitt.edu/~kac232/PittsburghMap/map_yuji.html

Much appreciation in advance.

Answer 1

You want to use d3.scale.quantize() to transform a continuous domain into a discrete range; you're going from a number to a particular color that matches. A linear scale assumes a continuous range. Read some more about quantize in the documentation or see an example in action.

The appropriate way to do what you want would be:

var colorScale = d3.scale.quantize()
    .range(colobrewer.OrRd[8])
    .domain([0, 16000]);