Red + green + blue = something else

10 June, 2011 (18:35) | data visualization | By: jerome

I’ve been posting quite a few times on Tableau these last few days, so I’ll end up the week with one viz I had previously shared on twitter with some success.

Powered by Tableau

so what’s the story?
I have been inspired to do this via the work on onformative which I discovered on But does it float.

I was struck by how the proximity of a red dot, a green dot and a blue dot was interpreted by our human eyes as a spot of another color. Then again, this is how monitors work. If you look hard enough on your lcd screen you may see the sub-pixels.
This is also why, in an image such as this one, the segments of the line appear unaligned, although logically this line is one pixel wide.

Physically, the segments are indeed unaligned, as the each segment uses sub-pixels of a different color which don’t have the same horizontal position within one pixel.

However, I didn’t realize that this effect would work with patches of blue, green and red much bigger than a subpixel.
I made the underlying dataset from a picture of my daughter Violette when she was 2. I converted the picture to a list of values of red, green and blue (thanks, processing) which were all associated to a x and y position on the screen and the name of their layer (so they could be turned on or off). These x and y positions were derived from the position of the pixel on the original image, but the red, blue and green dots are all shifted in one direction so they form a triangle.
Then, I’ve added some extra layers as noise to obfuscate the image.

Here, the effect is voluntary. Then again, if you position lots of marks one next to the other, you could re-create it accidentally, and instead of seeing three distinct dots, your users would see just one and of a different color at that!

Comments

Comment from Alex Kerin
Time June 10, 2011 at 7:33 pm

Jerome, love it. Is it the size of the pixel that is giving the effect? Or do you have a custom color scale for each layer?

Comment from jerome
Time June 10, 2011 at 9:07 pm

Hi Alex and congrats for your win!
yes it is size of the mark that does it, though other things work (like filters for some values).

Write a comment