invert d3 color scale

Question

I'm wondering, given a color, is there a way to get the value that color represents inside of a d3.js color scale?

I have preprojected topology rendered in canvas, and would like to show the value of the topology on hover. I can get the pixel value of the area the user is hovering over quite easily, but converting that back to the original value seems difficult.

Any ideas?

Answer 1

You can define your color array:

var myColor = {
    dom: [ 0,1,2,3,4,5,6,7,8,9 ],
    rag: [ "#ffffff", "#fff5f0", "#fee0d2", "#fcbba1", "#fc9272", "#fb6a4a", "#ef3b2c", "#cb181d", "#a50f15", "#67000d" ]
};

then assign it to your scale on d3:

var color = d3.scale.threshold()
              .domain(myColor.dom)
              .range(myColor.rag);

on "hover", in case using jQuery search inside array for a value

if ($.inArray( "#"+yourVariableHereWithTheColorSelected, myColor.rag )) {
   // do something because is true
}