One man’s green is another man’s red

Thursday, September 30th, 2010

All school children learn: Go with green. Stop at red. Green is good. Red is bad. Stick to this and you’re less likely to be run over. Traffic lights are simple. Prices are not. For some it’s good if soybeans and wheat, coffee beans and cattle, stocks and money become more expensive. Others prefer it if things get cheaper.

Commodities: Prices of future contracts with the most open interest. - Source: Wall Street Journal, 2010-09-27, page 26.
Source: Wall Street Journal, 2010–09–27, page 26.

The Wall Street Journal used to see it that way, too. For resources, indices, and stocks, the price went down in dark gray and up in light gray. It was easy to differentiate and read. You could form an opinion on your own. Now resources and indices are green if they become more expensive. And red if they become cheaper.

Dear schoolchildren, sadly the adult world is more difficult than traffic lights. Look left and right before you cross the street. Even if the traffic lights are green. Dear chart designers, use more gray.

Major players and benchmarks, StoxxEurope50: Friday's best and worst. - Source: Wall Street Journal, 2010-09-27, page 25.
Source: Wall Street Journal, 2010–09–27, page 25.

Behind bars

Sunday, August 15th, 2010

In many charts you see changing backgrounds, colors, contrasts. They should separate what is side-by-side. But they connect what is separated. The eye looks out for meaning.

The Wall Street Journal wants to point out: Which quarters are a year. This works and is stylish. But: It connects 2006 with 2008 and 2010. And 2007 with 2009.

Quarterly change in output per hour at a seasonally adjusted annual rate. - Source: Wall Street Journal, 2010-05-07, page 9.
Source: Wall Street Journal, 2010–05–07, page 9.

The WAMS doesn´t point out anything. Background bars as stripes are CI. Because: Everything gets striped. Sometimes that replaces a scale. In the picture on the right every stripe is five wide. Bars and stripes build checks. That is not stylish. In other pictures every stripe is CI. They unite what does not belong together.

The rise of renewable energy sources. - Source: Welt am Sonntag,2010-02-21, page 25.
Source: Welt am Sonntag,2010–02–21, page 25. From left to right: Compensation for electricity fed into the grid for renewable energy in Bn Euro, Compensation for electricity fed into the grid for solar electricity in Cent/KWh, Electricity Generation 2009 in Terawatt hours (TWh)

Diagrams and CI don´t get along well.

Ping pong for the eyes

Friday, January 15th, 2010

He wrote about the Wall Street Journal. The European issue. And the facelift from 2009–11–17. Ha. He should have taken a look at the issue from 2009–11–13:


Source: Wall Street Journal Europe, 2009–11–13, p. 26.

You have to add up the overlaps to get the point. The colors are no better. You have to learn: Samsung is always on top. But has changing colors. The same as the competitor. But that is patterned. The competitors’ bars are pale at the end. Anyway, you have to add that. Ok, than I just read the numbers. Now my eyes go left-right, left-right, left-right, left-right.
The designer deserves the same. Once left, once right. Vigorously.

Red republic, red eyes

Tuesday, April 15th, 2008

The eye cannot sort colors into a ranking. It only works with hues. That is why most colored graphs are hard to read. Hue needs a continuous measure (€, cm, km/h, etc.). Normally. An exception: in the German newspaper “Welt am Sonntag”.

Red republic
Source: Welt am Sonntag, 2008–03–16, p. 6.

The strength of the new left-wing party in Germany is a discrete measure (Governing party, second most party, etc.). Still the idea of hues works. Great. Apart from that: beautiful Bavaria. The states to the right (”Sonntagsfrage Landtagswahl”, opinion poll for state elections) should be sorted. According to the share of the left-wing party.

Truckers and fashionistas both like … white!

Wednesday, January 30th, 2008

Thanks Emil! Not too bad a graphic. Color is used as an attribute of the object in question. Better done than this one.

Preferred varnish colors in the US

Varnish reflects. Steel sheets are bended. Unnecessary. White for “overall” is not the same as for “luxury”.

I don’t like the sorting. Descending per class. You see what is important per class. But I am more interested in differences between classes. Compare the overall statistics to the different segments.

White is trendy. How does it establish itself? I put it first in my version. And I only sort once. For overall. Sorting is constant for all classes.

But one might argue about that.

Varnish variants

The yellow river – only common to the Chinese

Friday, November 30th, 2007

Rolf had a great idea: A map is easy to understand, because rivers are blue and forest is green. It took a while before everyone acknowledged that.

Map with partly inverted colors
Maps are understood, if they adhere to the common notation

In business reporting one day values, currencies, periods and variances are graphed this way and that way the other day. Rolf insists that months are less wide than quarters and quarters are less wide than years.

Map with partly inverted colors

If such a notation is used consistently, graphical elements not only illustrate proportions but reveal additional content at a glance. This is a milestone in advancing communication between controllers and managers.

Speaking of color: For the Chinese red is a sign of good luck, while in the West it is a sign of danger. But that’s a different story.

Colored Cars

Sunday, September 30th, 2007

My friend Chiara has sent me a graph about car colors and color as an attribute. From the German newspaper “Nürnberger Nachrichten”. It’s about the temperature dogs have to endure when in summer they have to wait in a car. Definitely too hot. A special case of small multiples. It emphasizes the differences in varnish variants. Sad: the temperature is hard to read. Red needle on a red scale. Tiny marks. Uff. And each gauge uses much too much space. Numbers would’ve been much better. Directly on the varnish.

Colors could have been sorted from left to right according to temperature. White, red, blue. Interesting: the cool blue is much warmer than the hot red. I rate this graph A‑.

Temperature of different colors in a car

Temperature comparison of varnish colors.

No traffic-light colors, please!

Saturday, June 30th, 2007

Being dogmatic is still my nature. And I continue to hate traffic-light colors. However, I do like the traffic-light elements of Summize. They display product ratings with multi-color bars. In the example 35 products associated with Flipper more often receive a top rating than products which contain the brightest name in the universe.

Flipper vs. Bella - product ratings

Even better: the grey-scale variant and sparklines. Sparklines visualize the number of ratings per month. The color represents the mean of all ratings for a month. Distinguishing different values is much easier with the grey-scale variant.

Sparklines by Summize

Leading data graphics

Tuesday, May 15th, 2007

For the time being, the best data graphics come from the American elite papers. The New York Times, The Wall Street Journal and the Washington Post provide clean graphs, free of chart junk and information dense.

The Washington Post and The Wall Street Journal

Welt am Sonntag is close. Only the alternating background colors are nonsense. They change contrast and message. What is the message? Is it nicer in the light areas? What do I do wrong when I enter the dark areas?

Welt am Sonntag

Nonetheless: Thank you WAMS! The others make me cry anyway.

Stop! Is green greener than yellow?

Friday, March 30th, 2007

There were nice charts in the German journal “Bild der Wissenschaft” 3/2006. They showed risk maps for Germany. Sadly, they weren’t readable. A little trick and they would have been brilliant. A color gradient from dark red via yellow to dark green doesn’t represent a natural order. Neither for the human eye nor for mine. Green is no better, larger or warmer than yellow and yellow no better than red. If colors with identical intensity are used for lowest and highest values you cannot identify patterns.

Earthquake and winterstorm risk Germany

Left: Risk of earth quakes in Germany, right: risk of winter storms, source: CEDIM Risk Explorer

Cognition of colors has to be proportional to displayed values. It’s best with a gray scale. If color is required, different hues of the same color are easily distinguished by the eye. For differentiating positive and negative values a combination of two colors is o.k.

Traffic light vs. color hue

Traffic light colors vs. color hues – geo analysis example from DeltaMaster

What a pity that most designers of weather charts don’t know that, either. Zero degree Celsius is very blue. Plus one degree Celsius is only a little less blue. But never yellow.

weather map

Example of a weather chart

Small things that make a big difference

Wednesday, December 13th, 2006

Edward says: Use sparklines. Sparklines are data words. Or word graphics. A number without a history is boring. And can mislead. Even so, newspapers show lots of individual numbers. Deutsche Telekom’s revenues in the last quarter. The latest unemployment rate. Yesterday’s Dow Jones index. There’s room for a sparkline at the side. The size of a word. It shows nothing but the pattern of the values to date. You immediately understand it though. Whether it was higher some time in the past. Whether it’s been going up or down for a while. Whether it’s currently close to the historical high or low.

Here’s the development of the euro exchange rate compared to the US dollar. Since its introduction as book money on 1 January 1999 until today 1.32. Almost 3,000 values.

1. It’s not a sparkline without a number after it.

A sparkline is not simply a small time series. It needs the number after it. A sparkline doesn’t work without the number. If it’s there, we can see whether the previous numbers were totally different, slightly different, or more or less unchanged. We often don’t need to know things more precisely.

Wrong Right
Germany 37.7
France 130.4
Austria 75.1
Switzerland 56.6
Germany 37.7
France 130.4
Austria 75.1
Switzerland 56.6

You can add minimum or maximum to them if you wish. Or the initial value on the left.
You can’t write anything in the sparkline itself. Otherwise it will become larger than a word again.

2. The number belongs on the right.

The sparkline shows the number’s past. The number is the last point in the time series. That’s why the number belongs there. You should put things next to each other if they belong to each other. If a value’s on the left, you think it’s the first point in the journey through time. That’s why a sparkline’s number always belongs on the right.

The example shows how confusing it is if it’s done wrongly.

Wrong Right

Source: www.businessweek.com, retrieved 2006–12–12. Redesign: Me.

3. Scaling a sparkline impacts its meaning.

Careful! Scaling is important. Sparklines are small. Scaling is therefore very, very important. You often have several sparklines to compare. If you use the same scale for all of them, you are comparing the patterns and magnitudes of the series of values as well. That only works with similar values. If you use individual scales, you are merely comparing the patterns of the series of values. You compare the magnitudes using the numbers.

Scaled identically Scaled individually
South 9,786,026
North 2,812,324
East 743,415
West 140,476
South 9,786,026
North 2,812,324
East 743,415
West 140,476

Bars integrated in the table help you compare.

Scaled individually
South 9,786,026
North 2,812,324
East 743,415
West 140,476

4. Bars or lines?

Bars are easier to read. But they take up more space. I use bars for short time series, and lines for long ones. Mostly.

Short series Long series

5. Sparklines supplement figures, but do not replace them.

Sparklines are extremely nice in tables. Normally, tables show values for a point in time. Then you want to know how it was before then. So add sparklines. Sparklines can be used to incorporate the past of all values in nearly every table. But it’s wrong to omit the values altogether.

League table just with values

Wrong! Sparklines instead of values

Right! Sparklines and values

6. Sparklines like colors, but do not depend on them.

Publishers are still slightly afraid of sparklines. Especially of colored ones. Color printing is so expensive. But they don’t have to be in color. Sparklines work perfectly well without any coloring.

Single-colored

Now Min Max
Unemployment (1991–2009, in millions) 3.4 2.6 4.9

Multi-colored

Now Min Max
Unemployment (1991–2009, in millions) 3.4 2.6 4.9

SparkMaker helps you draw sparklines.