[CODE4LIB] math problem
Here's a brain teaser for the mathematically inclined:
I've got a set of values that I want to scale to the 0-255 range so that I
can adjust colors in my CSS.
Say I have the following data: (6, 457, 97, 200, 122).
I'd like to scale those numbers so that the highest one, 475 = 255.
and the lowest one, 6 = 0.
All of the other numbers, 97, 200, and 122 should be scaled proportionally
to fit within the range.
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.
There's probably some math operation to do this, but I know I paid far too
little attention in math class as a kid. When will I ever need to use
this stuff in *real life*, I asked the teacher with a sneer.
If anyone could point me in the right direction I'd appreciate it.
--
Nate Hill
nathanielh...@gmail.com
http://www.natehill.net
Re: [CODE4LIB] math problem
Off the cuff, I think you're looking for
f(x) = (x-m) * 255 / (M-m)
where M is the maximum in the input data set, m in the minimum, and x is the
number in hand.
-Tod
On Dec 20, 2011, at 10:57 AM, Nate Hill wrote:
Here's a brain teaser for the mathematically inclined:
I've got a set of values that I want to scale to the 0-255 range so that I
can adjust colors in my CSS.
Say I have the following data: (6, 457, 97, 200, 122).
I'd like to scale those numbers so that the highest one, 475 = 255.
and the lowest one, 6 = 0.
All of the other numbers, 97, 200, and 122 should be scaled proportionally
to fit within the range.
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.
There's probably some math operation to do this, but I know I paid far too
little attention in math class as a kid. When will I ever need to use
this stuff in *real life*, I asked the teacher with a sneer.
If anyone could point me in the right direction I'd appreciate it.
--
Nate Hill
nathanielh...@gmail.com
http://www.natehill.net
Re: [CODE4LIB] math problem
(255*x)/457 ?
On Tue, Dec 20, 2011 at 8:57 AM, Nate Hill nathanielh...@gmail.com wrote:
Here's a brain teaser for the mathematically inclined:
I've got a set of values that I want to scale to the 0-255 range so that I
can adjust colors in my CSS.
Say I have the following data: (6, 457, 97, 200, 122).
I'd like to scale those numbers so that the highest one, 475 = 255.
and the lowest one, 6 = 0.
All of the other numbers, 97, 200, and 122 should be scaled proportionally
to fit within the range.
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.
There's probably some math operation to do this, but I know I paid far too
little attention in math class as a kid. When will I ever need to use
this stuff in *real life*, I asked the teacher with a sneer.
If anyone could point me in the right direction I'd appreciate it.
--
Nate Hill
nathanielh...@gmail.com
http://www.natehill.net
--
Cary Gordon
The Cherry Hill Company
http://chillco.com
Re: [CODE4LIB] math problem
The highest one (at least it's not me) is 457, btw.
On Tue, Dec 20, 2011 at 9:05 AM, Cary Gordon listu...@chillco.com wrote:
(255*x)/457 ?
On Tue, Dec 20, 2011 at 8:57 AM, Nate Hill nathanielh...@gmail.com wrote:
Here's a brain teaser for the mathematically inclined:
I've got a set of values that I want to scale to the 0-255 range so that I
can adjust colors in my CSS.
Say I have the following data: (6, 457, 97, 200, 122).
I'd like to scale those numbers so that the highest one, 475 = 255.
and the lowest one, 6 = 0.
All of the other numbers, 97, 200, and 122 should be scaled proportionally
to fit within the range.
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.
There's probably some math operation to do this, but I know I paid far too
little attention in math class as a kid. When will I ever need to use
this stuff in *real life*, I asked the teacher with a sneer.
If anyone could point me in the right direction I'd appreciate it.
--
Nate Hill
nathanielh...@gmail.com
http://www.natehill.net
--
Cary Gordon
The Cherry Hill Company
http://chillco.com
--
Cary Gordon
The Cherry Hill Company
http://chillco.com
Re: [CODE4LIB] math problem
Okay, maybe it is me.
(255*(x-6))/451
On Tue, Dec 20, 2011 at 9:03 AM, James Stuart james.stu...@gmail.com wrote:
255 * (point - data.min) / (data.max - data.min)
On Tue, Dec 20, 2011 at 11:57 AM, Nate Hill nathanielh...@gmail.com wrote:
Here's a brain teaser for the mathematically inclined:
I've got a set of values that I want to scale to the 0-255 range so that I
can adjust colors in my CSS.
Say I have the following data: (6, 457, 97, 200, 122).
I'd like to scale those numbers so that the highest one, 475 = 255.
and the lowest one, 6 = 0.
All of the other numbers, 97, 200, and 122 should be scaled proportionally
to fit within the range.
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.
There's probably some math operation to do this, but I know I paid far too
little attention in math class as a kid. When will I ever need to use
this stuff in *real life*, I asked the teacher with a sneer.
If anyone could point me in the right direction I'd appreciate it.
--
Nate Hill
nathanielh...@gmail.com
http://www.natehill.net
--
Cary Gordon
The Cherry Hill Company
http://chillco.com
Re: [CODE4LIB] math problem
On Tue, Dec 20, 2011 at 10:57 AM, Nate Hill nathanielh...@gmail.com 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', '#FF']); // 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
Re: [CODE4LIB] math problem
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 njv...@wisc.edu wrote:
On Tue, Dec 20, 2011 at 10:57 AM, Nate Hill nathanielh...@gmail.com
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', '#FF']); // 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
nathanielh...@gmail.com
http://www.natehill.net
Re: [CODE4LIB] math problem
On Tue, Dec 20, 2011 at 11:48 AM, Nate Hill nathanielh...@gmail.com wrote: 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. Ah, then a relative scale like you're proposing does make more sense. Neat! -n
