Display of values as continuous gradient...

7 Dec 2005 - 5:46pm
9 years ago
4 replies
467 reads
leo.frishberg a...
2005

Anyone have a good algorithm (or aware of reasonable conceptual
heuristic) for displaying continuous data as a "gradient?"

I have a set of data points along a continuum which cluster modally.
Displaying the modes as hot spots on a continuum has been proposed as a
display that would resonate with our users (like blue to red for rare to
frequent).

Pointers to Tufte-esque senstive discussions of the algorithms that
would support such a display would be appreciated.

Thanks!

Comments

9 Dec 2005 - 9:31am
ldebett
2004

Both Tufte and plenty of authors published by the ACM discuss the use of
color for encoding multivariate data in information displays.

Rules of thumb should be:

1. Design in grayscale first. Quantity can be communicated with variety in
size or brightness (or darkness). Identity can be communicated using shape.
2. Use color sparingly as highlight on things to draw extra special
attention to.
3. Understand the power of location and proximity. Use position and negative
space when possible to group data. 2 things close together often infer a
relationship. White space infers separation. (your "clusters")
4. Don't over-encode. A data point that is large, square and bright blue
must have 3 attributes to warrent that. If it has only 1, you've
over-encoded.

Here's a quote from Tufte's The Visual Display of Quantitative
Informationp. 154:

"Color often generates graphical puzzles. Despite our experiences with the
spectrum in science textbooks and rainbows, the mind's eye does not readily
give a visual ordering to colors [...].

"Because they do have a natural visual hierarch, varying shades of gray show
varying quantities better than color.

"The success of gray compared to the visually more spectactular color gives
us lead on how multifunctioning graphical elements can communicate complex
information without turning into puzzles. The shades of gray provide an
easily compreheded order to the data measures. This is the key. Central to
maintaining clarity in the face of complex are graphical methods that organize
and order the flow of graphical information presented to the eye."

Couple that with any graphic design 101 course that to design effectively
with color, one must start with grayscale and if the design doesn't work
there, it certainly won't work in color. Color must not be used as
decoration in charting multivariate data, it must be uses sparingly to
highlight important information.

Also, keep in mind that anytime you put red and blue together on screen -
either in close proximity or one on top of the other (red text on a blue
background), you will cause visual vibrations due to the extreme opposites
of the color spectrum your eye is trying to focus on. Red and blue creates a
virtual depth of field. This can be extremely difficult and painful to view.

In your case, you should 1. take advantage of the white space between your
clustered data to distinguish them (Gestalt principles of grouping) and 2.
use brightness or saturation for frequency, like rare = light blue, frequent
= bright (or dark) blue.

~Lisa

On 12/7/05, leo.frishberg at exgate.tek.com <leo.frishberg at exgate.tek.com>
wrote:
>
>
> Anyone have a good algorithm (or aware of reasonable conceptual
> heuristic) for displaying continuous data as a "gradient?"
>
> I have a set of data points along a continuum which cluster modally.
> Displaying the modes as hot spots on a continuum has been proposed as a
> display that would resonate with our users (like blue to red for rare to
> frequent).
>
> Pointers to Tufte-esque senstive discussions of the algorithms that
> would support such a display would be appreciated.
>
> Thanks!

9 Dec 2005 - 11:06am
leo.frishberg a...
2005

Thanks Lisa,

I appreciate the level of discussion at the theoretical level, and am
definitely evaluating the design from these perspectives.

Assuming, for the moment, that the actual color of the gradient makes
sense (whether it's gray or red/blue or purple/chartreuse), what I'm now
looking for is the actual algorithms to establish the gradient - which
gets more to the coding level. Probably not a topic that many on this
list are prepared to discuss, but at some point, as the IxD, I need to
establish not only the visual effect, but also the technical feasibility
of my proposal. In an effort to show I'm a team player, I want to help
engineering visualize a way to create the effect, reduce any team
member's anxiety about the level of difficulty in creating the effect,
and reduce the number of iterations back and forth as the development
team attempts to recreate what the design team is envisioning.

Leo

1. Design in grayscale first. Quantity can be communicated with variety
in
size or brightness (or darkness). Identity can be communicated using
shape.
2. Use color sparingly as highlight on things to draw extra special
attention to.
3. Understand the power of location and proximity. Use position and
negative
space when possible to group data. 2 things close together often infer a
relationship. White space infers separation. (your "clusters")
4. Don't over-encode. A data point that is large, square and bright blue
must have 3 attributes to warrent that. If it has only 1, you've
over-encoded.

9 Dec 2005 - 11:12am
ldebett
2004

What are you coding in? And what color space are you working in? RGB, HSB,
CIExy ;-) , Hex (web)?

On 12/9/05, leo.frishberg at exgate.tek.com <leo.frishberg at exgate.tek.com>
wrote:
>
>
> what I'm now looking for is the actual algorithms to establish the
> gradient - which
> gets more to the coding level.
>

9 Dec 2005 - 3:05pm
Jim Leftwich
2004

Color usage and color vision issues are very important to me, both
professionally as well as personally.

I agree with the sound advice Tufte and others give on the usage of
color in graphics where ranges or values are expressed. I'd also
like to add one important consideration that's partly addressed in
that listing though, and that's how color graphics are perceived
those with various degrees of color blindness.

As one of the approximately 7% of the male population with some
degree of red/green color blindness, I'm often frustrated by color-
coded maps and charts in print and online publications. The advice
to use value gradations works well to overcome some of the confusion
that can occur when colors (generally of low chroma/intensity such as
pastels) have red or green components.

Years ago in design school, I had a unique opportunity while taking a
color theory class, to observe and compare my own color vision in
context with that of many others. I discovered a number of
interesting things. First, I'm not terribly color blind, but I do
have lower sensitivity in the red and green portions of the color
spectrum. And interestingly, this results in a perception of "darker."

This explained why as a child, I'd insisted on calling purple "dark
blue," and brown "dark green." Any time there's a component of red
or green, I see it as darker, unless there's a much stronger
component of another color mixed in as well. It's sometimes
difficult for me to read red text on a black background, yet if I
hold up a red filter, it leaps out immediately. While I have no
problem seeing the green of John Deere tractors or grass, I can't see
the green in an oxidized copper roof. That simply looks like
concrete to me.

Beyond simply the issue of how color is used to encode comparitive or
symbolic information in graphics, there still exists a general
problem in the field of color vision, and that's the lack of a
measurement or accurate profiling system for color blindness. Unlike
when tested for visual acuity, if you're determined to be color
blind, the most you're going to be told is that they're protanopic,
deuteranopic, tritanopic, or rod monochromic. You're not given a
score or rating, nor a profile which characterizes your specific
level of color blindness

Imagine going to an optometrist and upon testing, they simply say,
"You're myopic. You can go home now." Or, "You've got
astigmatism." This would be absurd. We know that people have
varying degrees of vision acuity, and methods have been developed to
test these to very fine degrees.

Similarly, I've discovered over the years, in talking with many
people with varying levels and types of color blindness, that they're
all slightly different. And yet, with the exception of the
categorical types I've listed above, we still don't have sufficient
measurement of our individual color vision profiles.

A few years back, I speculated on one possible way this might be
tested, using a series of responses to comparitive color graphics
that would generate a 3D color perception profile. Some have
commented that such a profile wouldn't have to be 3D, but I'm
actually not certain about that, as the third axis was mapped to
chroma/intensity, from full (bright light, fluorescent) to low (dim
light, pastel). I'm still not convinced that color vision across the
spectrum is correlated to that axis in a straight line (i.e.: the
"dip" that you'd see in one part of the red and green portions of the
spectrum were the same depth at high and low chroma intensities).
Perhaps they are, but I've not been convinced of that, because we
don't currently have good profile mapping techniques that would prove
this.

Here's the piece I did on such a color blindness profile concept:

http://www.anigami.com/jimwich/jimwich_archives/
jimwich_12_2000.html#tetra

I've seen a lot of things on the web that purport to "show how things
look like to color blind people." I'm highly skeptical of these,
because as I've described above, I think there are significant
differences in many peoples' color blindness. If we had a way to
accurately measure the idiosyncrasies of individual color vision, we
could then perhaps use that profile to inversely boost certain
spectral ranges in a very accurate way on computer monitors.

Something like that would actually be very useful to me and others,
that are not totally color blind, and probably could see "normal"
color, if certain ranges were boosted and brightened.

Jim

- - - - - - - - - - - - - - - - - - -
James Leftwich, IDSA
Orbit Interaction
Palo Alto, California
http://www.orbitnet.com/

Syndicate content Get the feed