d3.js - Scaling in d3js -

d3.js - Scaling in d3js -

if have set of info numbers percentages ranging -0.75 0.3, , want create heat map -0.75 "bright red" tiles , .3 values "bright greenish values" , in between scaled between that.

i have this:

js

var color = d3.scale.quantize() .domain([-.7, .3]) .range(d3.range(11).map(function(d) { homecoming "q" + d + "-11"; }));

css

.rdylgn .q0-11{fill:rgb(255,0,0)} .rdylgn .q1-11{fill:rgb(255,50,50)} .rdylgn .q2-11{fill:rgb(255,100,100)} .rdylgn .q3-11{fill:rgb(255,150,150)} .rdylgn .q4-11{fill:rgb(255,200,200)} .rdylgn .q5-11{fill:rgb(255,255,255)} .rdylgn .q6-11{fill:rgb(200,255,200)} .rdylgn .q7-11{fill:rgb(150,255,150)} .rdylgn .q8-11{fill:rgb(100,255,100)} .rdylgn .q9-11{fill:rgb(50,255,50)} .rdylgn .q10-11{fill:rgb(0,255,0)}

but numbers don't seem scale right. percentages seem scaled so:

.3 = q0 greenish .0 = q2 -.1 = q4 -.5 = q5 white -.7 = q11 reddish

it makes sense -.5 middle value of white, because median of .3 , -.7, don't want that. help?

fortunately there simple way accomplish want. utilize polylinear scale, regular d3.scale.linear() anchor points @ each value new color should start.

to have reddish negative values, white @ zero, , greenish positive, use:

polylinear_color = d3.scale.linear() .domain([-0.3, 0, 0.7]) .range(['rgb(255,0,0)','rgb(255,255,255)','rgb(0,255,0)'])

the scale interpolation , instead of using classes set .attr('fill',function(d){return polylinear_color(d);}); on things beingness colored.

i made jsfiddle illustrate, here.

d3.js