Drawing the world by hand

At Lucerne’s Gletschergarten, among old maps, models and reliefs of the Swiss Alps, we’ll find an expo from Ueli Läuppi, a local cartographer that makes hand drawings and colorings of maps using a particular projection that highlights a thorough representation of the mountains.

Moreover, Läuppi has moved his studio to the museum and on certain days you can actually see him completing a precipitation map from an Asian region using a rapidograph and a box with carefully labeled Caran d’Ache color pencils to differentiate rainfall ranges.

Läuppi’s work is at he crossroads between science and art. His extensive research (documented on video) evidences his background as an engineer, and his will power to temporarily move his studio to the museum borders on performance art.  It’s also evident that Läuppi knows a thing or two about visualization. His maps are very eloquent when it comes to representing data and explaining their meaning.

Personally, I consider that the staging of this desk in the middle of the exhibition with the rest of the unfinished pieces sends a message: maps are made by people and it’s hard to draw maps.

All of this reminded me of a post about the wireframes and skeletons for web apps and pages and the opinions of some experts who believe presenting sketches instead of perfect lines gives your output a “work in progress” feeling, opening the doors for engagement and getting better and more timely feedback from your clients.

 

In Sketchy Rendering for Information Visualization, Jo Wood, Petra Isenber, Tobias Isenberg, Jason Dykes, Nadia Boukhelifa and Aidan Slingsby, propose drawing visualizations as if they were made with a marker on a board, in order to communicate that the design is not complete, that is open to criticism and changes, and that visualizations and dashboards represent a narrative in progress. Also, unlike architectural drawings or industrial designs, graphics don’t represent tangible objects, so they don’t need to be accurate. Their goal is to help tell a story. Just as the proverbial business plan written in a napkin, graphics with sketches aim to illustrate a point and it’s ok to sacrifice some accuracy.

The imprecision suggested by sketchy features may reinforce perceptions of simplicity and thus reduce the expectation of cognitive effort required to interpret the visual scene

As part of the method illustrated on paper, authors have created a free library to be used with Processing that provides astonishing results:

They seem hand-drawn, right?

And maybe there’s another key: just as with Läuppi’s maps, these graphics convey the idea that visualization was thought out and made by a human and that there’s meticulous work behind them.

A Handsome Atlas gathers visualizations completed at the end of the XIX century for the US census. These are graphics of great beauty, charts that tell a story and that are truly different from the automatic output done on excel.

We forget that graphics need to be well-thought; that they should communicate something, be memorable and situate themselves between art and science.  And although a computer does the rendering job on the screen, when visualizing data we’re also drawing the world by hand.

Läuppi’s expo will be displayed at the Glacier Garden until September 15th of 2013.

 

How to create better charts

nope, this is not a good chart

We’re often tempted to include some kind of accessorizing effect in our charts without knowing that deep down we’re making them impossible to interpret and thus ruining their purpose. A typical case is the 3D pie chart.

Many people, including executives, have a certain likeness for 3D charts. Somehow they believe that these look “modern”. I invite you to take a look at this chart and try to determine which one is the biggest slice:

Item A is twice as big as item C. B is the same as D. But you wouldn’t be able to tell that from the chart.

The pie chart is the worst to establish comparisons. Cognitively we’re terrible at estimating areas. If we add to this perspective, we have what Tufte calls Chartjunk:

Too many data presentations, alas, seek to attract and divert attention by means of display apparatus and orna- ment. Chartjunk has come to corrupt all sorts of information exhibits and computer interfaces.

The chart at the beginning of this post is another example of Chartjunk. The designer uses a “clever” design to disguise a chart with only 5 data points. The same thing usually happens with infographics, those increasingly common posters whose main goal is to promote a designer and not present information

In Envisioning Information, Tufte introduces a basic information design principle:

By giving the focus over to data rather than data-containers, these design strategies are transparent and self-effacing in character. Designs so good that they are invisible.

Designs so good that they are invisible. That’s exactly it.

Data/ink

Tufte invented a concept that I really like: the “data/ink” ratio. The idea is to maximize that number, meaning:  to use the same amount of “ink” in order to make a chart comprehensible.

Look at the following set of charts. Doesn’t it seem like the chart on the right says the same thing, but that the information is displayed better?

Less ink= more clarity

 

We removed from the left-side chart:

  • Color background
  • Grid
  • Borders

In other cases you can eliminate the zeroes from the numbers on the axes. Instead of placing “15,000.00”, is way better to put “15m”.

Every drop of ink that doesn’t represent data is also chartjunk. And using chartjunk isn’t good:

Lurking behind chartjunk is contempt both for information and for the audience. Chartjunk promoters imagine that numbers and details are boring, dull, and tedious, requiring ornament to enliven. Cosmetic decoration, which frequently distorts the data, will never salvage an underlying lack of content. If the numbers are boring, then you’ve got the wrong numbers. Credibility vanishes in clouds of chartjunk; who would trust a chart that looks like a video game?

Many software vendors try to convince us that we need “pretty” charts, with 3D textures and bright colors. Charts that conceal the data instead of displaying the information; charts that get your attention, but aren’t useful for much else.

Kaiser Fung gathers in his blog junkcharts a notable graphic collection that seem good but that are in fact terrible to fulfill their purpose. This other post from Smashing Magazine is a good example of what not do when creating charts.

 

So, how do I create good charts?

Seek inspiration. The excelcharts blog offers a gallery of elegant and invisible design examples. Lately, I’ve been experimenting with Tableau Public and D3.js. One of the most positive things of these tools is that they guide you by the hand when it comes to creating visualizations and prevent you from adding junk.  Take a look at some of the examples, see some ideas and above all remember that the most important thing is to transmit the information as clearly as possible, and not to present “pretty” charts.

If you need a little more spiritual aid, I recommend Stephen Few’s Information Dashboard Design. A short and easy to read book; ruthless when it comes to tearing down old notions and clear when teaching the principles of good design for dashboards and reports in general.

And if you have no idea where to start and what type of chart you should do, take a look at this post.

 

How to choose the right chart

There’s a chart for every situation. Each type of information that you have and each analysis that you want to make can be benefited or harmed by the chart you choose.

The idea of displaying data graphically is to help the other person understand what you mean to say. Do you think sales are at risk? Do we have a problem in one of the regions? Help me see that information as clearly as you do.

Pie charts are used to display the parts of a whole and the bar charts are used for comparisons. Many people confuse them or feel tempted to display results with a pie chart. However humans are terrible at estimating areas. This slide from vovici clearly tells the difference:

But there are customers that request a specific chart “just because”. To these persons I usually show this diagram from Andrew Abela that helps you choose the right chart, according to the type of data that you have (click to enlarge):

choosing_a_good_chart

Once you have the best type of chart, remember that every presentation needs to tell a story. What matters the most is that they understand and remember what you meant to say. Therefore, your chart must help you narrate, help you stay focused on that story and prevent the data from getting lost in a poorly chosen chart.


In this other post I wrote a bit about how to prevent your data from getting lost within those fancy effects that, even though we like them, aren’t useful to make decisions.

 

Telling stories with charts


In The Visual Display of Quantitative Information, Tufte highlights Minard’s famous graphic where the story of the lives (and deaths) of over 400,000 soldiers is told during Napoleon’s invasion of Russia. Tufte declares it the first infographic that combines geographical elements with time and temperature variables. But the most relevant aspect of the chart is that it tells a story in a very effective manner. For instance, we can compare this chart with the one that is found in the campaign’s Wikipedia article:

This graphic has a lot details, including information regarding the mobilizations and the commanders. However, it fails to highlight something crucial: the harshness of the russian winter.

minardDetail

Minard’s visualization fluently tells the drama of a failed campaign, the inhumane temperatures, the embarrassing recall of a decimated army. It’s so clear, that it provides information with just a glance, and yet it invites to a scrutiny that is rewarded with the understanding of a story.

And at the end, this is what we should do with graphics: no just provide information but awaken an interest, tell a story.