CODEWITHSUNDEEP
javascriptd3.jsdata-visualizationcolorbrewer
kacmcgrath
kacmcgrath

Reputation: 147

Colorbrewer scale only returning lightest values on D3 map

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.

Upvotes: 1

Views: 1398

Answers (2)

yelper
yelper

Reputation: 183

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]);

Upvotes: 2

kacmcgrath
kacmcgrath

Reputation: 147

I wish I knew how this worked, but I only know why it worked. I wound up just specifying three hex values instead of using colorbrewer and for the domain I used 0, 8000, 16000. D3 took care of the rest.

Upvotes: 0

Related Questions