使用Google Visualization Geochart色阶的3种颜色尺寸

Question

I have three different 'vectors' for my data. For each row in my data, I have what percent like dogs, what percent like cats, and what percent like other pets.

A  20, 40, 40
B  10, 20, 70
C  80,  0, 20
D  90, 10,  0
...

I want to use a Google Visualization Geochart to represent countries by color according to which pet they prefer. I would like to do that by assigning an RGB value depending on what percent of people in the country like that certain type of pet.

So 100, 0, 0 would be 100% red. 0, 100, 0 would be 100% green. 0, 0, 100 would be 100% blue. And everything in between.

If coding the colors by hand, this is easy using javascript like this . The issue that I have is that every single row will have a different combination (I have very good data on pet preferences down to several decimal points), and that would require me to assign a color value for each row, and I have about 200 of them.

While that is a last resort, I'd much rather use the gradients built-in to the Geochart to do the heavy lifting for me.

The issue is that the color-gradient allows only 2d gradients. I can have multiple gradients, but I cannot determine if using only 2d gradients I can represent a 3d colorspace.

So I could create a gradient for:

• Red to Green
• Green to Blue
• Blue to Green

Will this cover the range of color possibilities, or will it simply give me control over the hue, but not the saturation or the brightness? Is this doable, or am I just better off going with the workaround?

Answer 1

I ended up doing it manually since it was significantly easier. I ended up with 4 vectors for my data, so I colored them using the CMYK color model. For each vector, I calculated the % as a portion of either the C, M, Y, or K components of the color.

I then converted it to RGB using the following logic (pseudo-code):

C' = C * (100% - K) + K
M' = M * (100% - K) + K
Y' = Y * (100% - K) + K

R = 255 - 255 * C'
G = 255 - 255 * M'
B = 255 - 255 * Y'

I converted those to HTML color codes and tossed them in an array. I then assigned a value to each row corresponding to the element in the array that colors it, and tossed it in the colorAxis.colors portion of the options.

The result was mind-bogglingly hideous and entirely impractical as a way of conveying information. Not only were the colors hideous (Cyan, Magenta, and Yellow is not a nice combination of colors), but you really couldn't tell what the heck the mix was unless you are a bonafide color expert (my audience is not).

Back to the drawing board it is!