Thanks Nate- I'll get this working and check back with these other options.
I've got a top 25 list of fiction titles, and I'm making a set of divs
change color according to how many times they've been checked out. If it
looks bad and it's a lousy approach no doubt I'll try something else.
On Tue, Dec 20, 2011 at 9:40 AM, Nate Vack <[log in to unmask]> wrote:
> 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
>
--
Nate Hill
[log in to unmask]
http://www.natehill.net
