On Tue, Dec 20, 2011 at 10:57 AM, Nate Hill <[log in to unmask]> wrote:
> This way, when I loop through and hit my CSS {background-color:rgb(255,
> **data**, 255);} each piece of data will generate a different color and
> I'll have the maximum spread in proportionally correct colors from 0-255.
I'd need to see exactly what you're doing, but I think this method may
leave you somewhat unsatisfied. The magenta-white color scale isn't
gonna be lovely, and there's no sense of absolute scale to this
technique. Maybe that's what you want, but... probably not. You might
want to say "Hey, values are supposed to be from 0 to 450; anything
outside this range should be clamped. Or highlighted. Or something."
Anyhow, for "perceptually good" color scales, this is a great resource:
http://colorbrewer2.org/
... and if you want a good way to generate color ramps in javascript,
the most excellent d3.js library will help you out:
http://mbostock.github.com/d3/
In this case, to create a scale like this, you'd do:
var data = [6, 457, 97, 200, 122];
var color_scale = d3.scale.linear().domain([d3.min(data),
d3.max(data)]).range(['#FF00FF', '#FFFFFF']); // we're expecting data
from 6..457, and will output magenta to white...
console.log(color_scale(6)); // rgb(255,0,255);
console.log(color_scale(457)) // rgb(255,255,255);
console.log(color_scale(500)) // rgb(255,279,255); //oops!
color_scale.clamp(true);
console.log(color_scale(500)) // rgb(255,255,255); //better!
-n
