d3.js find top and bottom limits of quantize scale

Question

I've made a map in d3 that is tinted my values, so I've got:

var color= d3.scale.quantize().range(["#FAE3C3", "#EBAD95","#DB7768", "#CC403A", "#BC0A0C"]);

How does one find the actual limits of the scale, so I can create the map key? (I'd want it to update if I fed in new data).

Answer 1

You can get back the lower and upper bounds for a bin like so:

var bounds = color.invertExtent('#FAE3C3')

A possible solution for a legend would be to iterate through the color array and call color.invertExtent for each color.

If you want tidier breakpoints, I think you have to define them yourself and set them as the domain, for example if your minimum is 2 and your maximum is 59 you could do the following:

color= d3.scale.quantize()
    .domain([0, 60])
    .range(["#FAE3C3", "#EBAD95","#DB7768", "#CC403A", "#BC0A0C"]);

so that maximum - minumum is divisible by the number of colors.