RGB values varying with array values?

Question

I have a project in which I am using d3js.I have to plot a line.But the twist is the color of line will vary with every array value(every 20px of line holds one element of following array).I have created lines but, I am facing problems with the colour intensity.I thought about for loops,but I am not getting exact results.I think I am not able to swith from one colour to another.

(for example--from dim red-->light red-->little dark red-->dark red)

I have a json with over 10k values.I have simplified my arrays for understanding purpose.

var array_1=[0.0,0.1,0.3,0.5,0.7,0.9]

var array_2=[0.02,0.04,0.06,0.08,0.09]

var array_3=[0.001,0.002,0.004,0.007,0.008]

MyQuestion:For any given color(red,blue,green,yellow etc etc),I should be able to plot the according to these array values in such a way that Greater the number will be,Intense the color will be.

Is it possible to create an algorithm that can manipulate the RGB values of any colour with array values that are numeric?If possible,it will be very kind of you to give some sample.

Answer 1

You just need to convert from YCbCr (YUV) to RGB since the Y in YUV is luminescence it's as modifying the intensity of the color.

The formulas can be found on wikipedia here: http://en.wikipedia.org/wiki/YCbCr

There is also an example of this implemented in JavaScript here: http://www.mikekohn.net/file_formats/yuv_rgb_converter.php

For example on Micael Kohn's page you can try setting a color in RGB and covert it to YUV. After that just lower or raise the Y value and convert it to RGB. You will notice that it's like changing the intensity.

EDIT:

Here you go, wrote an example for you, just click on the div

function yuv2rgb(Y,U,V){
    R = Y + 1.4075 * (V - 128)
    G = Y - 0.3455 * (U - 128) - (0.7169 * (V - 128))
    B = Y + 1.7790 * (U - 128)
    return { r:Math.floor(R) , g:Math.floor(G) , b:Math.floor(B)}
}

function rgb2yuv(R,G,B){
    Y = R *  0.299000 + G *  0.587000 + B *  0.114000
    U = R * -0.168736 + G * -0.331264 + B *  0.500000 + 128
    V = R *  0.500000 + G * -0.418688 + B * -.081312 + 128
    return { y:Math.floor(Y) , u:Math.floor(U) , v:Math.floor(V)}
}

http://jsfiddle.net/b3FCK/