Swupnil made this graph for a research meeting we had today:
It looks so cool. I think it’s the gray colors.
So here’s my advice to you: If you want to make your graphs look cool, use lots of gray.
19 thoughts on “Gray graphs look pretty”
Gray can be good, and I like to use it. And it copies well on a B&W printer (not everyone has color copiers). But it’s got limits. I think you can use up to two different shades of gray, but more can be a problem – e.g., it’s harder to distinguish different saturation levels than, say, line widths or primary color hues.
Gray is good where you have lots of elements that should be visible but not attract too much attention away from the main point. Examples are grid lines (I like black for the axes, though) and a lot of data points.
But why, in CSS styling color names, do we have “gray” and “lightgrey”? Can’t we pick either “a” or “e”? So weird.
Yes. Just to be clear: when I said that gray looks good, I wasn’t saying that I prefer grayscale to color. For maps I usually prefer a bi-directional color scheme as in Figure 2 of this paper. My point in this post was not about gray-scale images but just about the idea that gray lines have a cool, understated look that can make a graph look more professional.
Lots of websites are going to grey text and it’s really annoying – it may look cool visually but when I have to read it then I need to put on my reading glasses which I don’t have to do for black text. The graphs above look fuzzy and unreadable to me.
I think the big trick is to use a primarily black and while color scheme, with a single element that’s red. Red contrasts really nicely with black/grey/white.
Each bar shows the weight of a component: the current estimate (as the design progresses), the target or goal value, the remaining margin, and the maximum the spacecraft could handle. Weights always grow as the project moves forward, and you have to track how much margin you have left.
@Zach “Red contrasts really nicely with black/grey/white.”
Not if you are somewhat red/green colorblind like I am. I can see reds, but I need more area or intensity than a person with normal color vision. And *please* don’t use red and green in the same graph. Since most color-deficient people have pairs of problem colors, it’s better to mix colors from the different pairs: red with blue, for example.
I can usually tell cyan from a gray. It’s better to use saturation as a secondary cue: light cyan vs darker gray, for example. Or dark red vs light gray. But many red-green colorblind people (mostly men, it’s sex-linked it seems) might have trouble even with the degree of saturation of their problem colors, and might see the red as black or dark gray.
Please don’t use pixel-thin lines and expect folks like me to know what color they are.
I’m really glad you helped bring up the issue of people with color vision deficiencies (CVD) in the audience.
> I can see reds, but I need more area or intensity than a person with normal color vision.
I’m guessing you have protanomaly?
> It’s better to use saturation as a secondary cue: *light* cyan vs *darker* gray, for example. Or *dark* red vs *light* gray.
Perhaps you mean to suggest brightness as a secondary cue, especially since you mention troubles with saturation?
> Please don’t use pixel-thin lines and expect folks like me to know what color they are.
Excellent point for people to keep in mind for CVD audience members. Even when anomalous trichromats (“moderately colorblind”) can distinguish between two hues in theory, they require greater visual area than color-normal people require.
Lastly, I would like to recommend the Color Oracle color vision deficiency simulator for people who are worried about CVD audience members:
Once you design something, you can simulate deuteranopia or protanopia (which affects ~5% of males and ~0.5% of females) and check it out. It also has a feature to simulate tritanopia, but that only affects ~1/300000 people.
>you can simulate deuteranopia or protanopia (which affects ~5% of males and ~0.5% of females)
To be more precise, simulating deuteranopia and protanopia is good for considering the ~5% of males and ~0.5% of females that have one of the following: {deuteranopia, protanopia, deuteranomaly, protanomaly}. The “-omaly” afflictions are less severe than the “-opia” afflictions.
1) Andrew, Can you link or otherwise provide access to a larger version? Even a larger version of just one chart would be helpful. (I think I like the gray palette but would like to look at higher res before forming a stronger opinion.)
You can click a couple times for a larger version but it’s still kinda blurry. I’m not really recommending these graphs (although they did just fine for their purpose), just making the general point that gray looks cool. Looking cool isn’t the only thing—indeed, by pointing out that gray looks cool, I’m trying to some extent to demystify “looking cool.”
Yeah, I downloaded the 1024×683 and it looked a bit blurry. I like the gray for the data if/when you want to emphasize the trend line – the foreground/background contrast works for me.
Thanks Swupnil. That figure reinforces my initial reaction. The foreground/background contrast is good for emphasizing the trend line while keeping you aware of the data.
@Jacob Egner: “I’m guessing you have protanomaly?” Yes, though not as bad as some. I totally fail the color charts, but in practice I can see reds and greens – *depending* on area, brightness, the exact colors, etc.
Jacob Egner: “Lastly, I would like to recommend the Color Oracle color vision deficiency simulator for people who are worried about CVD audience members:
Yes, or just print it in B&W, that will probably give you a pretty good idea of how well the different features can be distinguished. Since different kinds of deficiencies can see different colors, and different saturation within those colors, it’s not possible to get a single presentation for all. But B&W comes close, and at least one can design with the most common condition, protanopia (though even there can you encounter large variations in what people can see).
Note that I’m not saying don’t use colors. I use them. Just keep in mind that if you don’t consider the limitations of people like me, we won’t be able to understand your graphs.
If we are mainly talking about graphs, I think it’s good to use as many secondary cues as you can. So three line widths, for example (thin, medium, and wide). Two or *maybe* three levels of intensity (even if you use a color, say blue, you can use light blue and dark blue, for example). Solid vs dashed lines. Open vs closed symbols.
Gray can be good, and I like to use it. And it copies well on a B&W printer (not everyone has color copiers). But it’s got limits. I think you can use up to two different shades of gray, but more can be a problem – e.g., it’s harder to distinguish different saturation levels than, say, line widths or primary color hues.
Gray is good where you have lots of elements that should be visible but not attract too much attention away from the main point. Examples are grid lines (I like black for the axes, though) and a lot of data points.
But why, in CSS styling color names, do we have “gray” and “lightgrey”? Can’t we pick either “a” or “e”? So weird.
Tom:
Yes. Just to be clear: when I said that gray looks good, I wasn’t saying that I prefer grayscale to color. For maps I usually prefer a bi-directional color scheme as in Figure 2 of this paper. My point in this post was not about gray-scale images but just about the idea that gray lines have a cool, understated look that can make a graph look more professional.
I’ve got a problem with “look professional” vs “be professional”. To me, the latter means “user-friendly”, and that’s what’s important.
Lots of websites are going to grey text and it’s really annoying – it may look cool visually but when I have to read it then I need to put on my reading glasses which I don’t have to do for black text. The graphs above look fuzzy and unreadable to me.
I think the big trick is to use a primarily black and while color scheme, with a single element that’s red. Red contrasts really nicely with black/grey/white.
Yes, I especially like Figure 1 in that.
Here’s one I did in black, gray, and white. I usually avoid bar charts, but this time it seemed like the best way.
http://www.tompassin.net/test/bar_chart_example.png
Each bar shows the weight of a component: the current estimate (as the design progresses), the target or goal value, the remaining margin, and the maximum the spacecraft could handle. Weights always grow as the project moves forward, and you have to track how much margin you have left.
@Zach “Red contrasts really nicely with black/grey/white.”
Not if you are somewhat red/green colorblind like I am. I can see reds, but I need more area or intensity than a person with normal color vision. And *please* don’t use red and green in the same graph. Since most color-deficient people have pairs of problem colors, it’s better to mix colors from the different pairs: red with blue, for example.
I can usually tell cyan from a gray. It’s better to use saturation as a secondary cue: light cyan vs darker gray, for example. Or dark red vs light gray. But many red-green colorblind people (mostly men, it’s sex-linked it seems) might have trouble even with the degree of saturation of their problem colors, and might see the red as black or dark gray.
Please don’t use pixel-thin lines and expect folks like me to know what color they are.
I’m really glad you helped bring up the issue of people with color vision deficiencies (CVD) in the audience.
> I can see reds, but I need more area or intensity than a person with normal color vision.
I’m guessing you have protanomaly?
> It’s better to use saturation as a secondary cue: *light* cyan vs *darker* gray, for example. Or *dark* red vs *light* gray.
Perhaps you mean to suggest brightness as a secondary cue, especially since you mention troubles with saturation?
> Please don’t use pixel-thin lines and expect folks like me to know what color they are.
Excellent point for people to keep in mind for CVD audience members. Even when anomalous trichromats (“moderately colorblind”) can distinguish between two hues in theory, they require greater visual area than color-normal people require.
Lastly, I would like to recommend the Color Oracle color vision deficiency simulator for people who are worried about CVD audience members:
http://colororacle.org/
Once you design something, you can simulate deuteranopia or protanopia (which affects ~5% of males and ~0.5% of females) and check it out. It also has a feature to simulate tritanopia, but that only affects ~1/300000 people.
>you can simulate deuteranopia or protanopia (which affects ~5% of males and ~0.5% of females)
To be more precise, simulating deuteranopia and protanopia is good for considering the ~5% of males and ~0.5% of females that have one of the following: {deuteranopia, protanopia, deuteranomaly, protanomaly}. The “-omaly” afflictions are less severe than the “-opia” afflictions.
Gray is classy and elegant, but difficult to read for those of us with aging eyes….
Carol:
This particular image is unreadable to me too; I actually purposely did it at this scale to emphasize the general look rather than the details.
What’s going on in that bottom right graph?
1) Andrew, Can you link or otherwise provide access to a larger version? Even a larger version of just one chart would be helpful. (I think I like the gray palette but would like to look at higher res before forming a stronger opinion.)
2) MATLAB users: Now that it’s been out for a few years, what do you think of the parula colormap? (I strongly prefer parula over jet in most circumstances.) Ref – http://www.mathworks.com/tagteam/81137_92238v00_RainbowColorMap_57312.pdf
Chris:
You can click a couple times for a larger version but it’s still kinda blurry. I’m not really recommending these graphs (although they did just fine for their purpose), just making the general point that gray looks cool. Looking cool isn’t the only thing—indeed, by pointing out that gray looks cool, I’m trying to some extent to demystify “looking cool.”
Yeah, I downloaded the 1024×683 and it looked a bit blurry. I like the gray for the data if/when you want to emphasize the trend line – the foreground/background contrast works for me.
Hi Chris, here’s a a figure with 4 plots that might be easier to see. It’s in a similar vain.
https://drive.google.com/file/d/0B8mjRdab_ezsZENnNXpSanVRdUk/view?usp=sharing
Thanks Swupnil. That figure reinforces my initial reaction. The foreground/background contrast is good for emphasizing the trend line while keeping you aware of the data.
@Jacob Egner: “I’m guessing you have protanomaly?” Yes, though not as bad as some. I totally fail the color charts, but in practice I can see reds and greens – *depending* on area, brightness, the exact colors, etc.
Jacob Egner: “Lastly, I would like to recommend the Color Oracle color vision deficiency simulator for people who are worried about CVD audience members:
http://colororacle.org/”
Yes, or just print it in B&W, that will probably give you a pretty good idea of how well the different features can be distinguished. Since different kinds of deficiencies can see different colors, and different saturation within those colors, it’s not possible to get a single presentation for all. But B&W comes close, and at least one can design with the most common condition, protanopia (though even there can you encounter large variations in what people can see).
Note that I’m not saying don’t use colors. I use them. Just keep in mind that if you don’t consider the limitations of people like me, we won’t be able to understand your graphs.
If we are mainly talking about graphs, I think it’s good to use as many secondary cues as you can. So three line widths, for example (thin, medium, and wide). Two or *maybe* three levels of intensity (even if you use a color, say blue, you can use light blue and dark blue, for example). Solid vs dashed lines. Open vs closed symbols.
Can’t believe no one has made a 50 shades of gray joke yet. They write themselves.