As promised in a previous post on learning information graphics (sometimes shortened to “infographics”), I’m posting my raw notes from Day 1 of an information graphics workshop taught last month by Alberto Cairo and Xaquin G.V., two leading practitioners.

Alberto Cairo teaches an infographics seminar by Medialab Prado on Flickr

Above, Alberto Cairo teaches a data visualization seminar at Medialab-Prado in Madrid in 2007.

Xaquin wrote about the course in his native Spanish on his site, Xocas.com (and here’s Google’s attempt at an English translation).

As for me, I’m posting my raw notes from the class. There are a lot of them (it was a 12-hour day), and because they’re raw, some bits won’t make sense. But like the process of designing information graphics itself, I’ll be culling and organizing what’s here and eventually, the patterns and lessons will become clear.

You can participate in the evolution of this post by asking questions, suggesting links, and finding the graphics discussed. Feel free to leave them in comments or email me.

Beyond Bootcamp “Creating Effective Online Infographics” Notes

RULE: In graphics, the less you know, the more abstract the representation should be.
Use simple diagrams that respect proportions, precision and accuracy.

KEY: How will infographic help inform the reader understand the story?
“Infographics is not art, it is a conveyance of information.”

Pie charts are easily distorted and require people to read additional text to understand the information the pie chart tries to convey.
Instead of pie charts, it’s better to use a bar chart to show relationships between proportions.

Good information graphics do not “simplify” information. They’re not meant to degrade the data to make the information more “accessible.” Information graphics are a tool to make stories deeper and to provide context. A complex topic demands a complex graphic. Precision is key.

  • Visual Skills
  • Organization
  • Color
  • Type

RULE: “Form Follows Function” < -- most important rule.
What is the nature of the data?
If the goal of the graphic is to represent change, show change.
If the goal is to faciliate comparison, display a comparison, don’t do a map.

(Example graphic) A defesa dos Vizinhos (Brasil)
Goal is to display the relationship of quantitative data, not geographic data, which was the execution.

    Problems:

  • It’s difficult to successfully compare the numbers. Is Brasil’s army much larger than Colombia’s?
  • Variables are not visually related. Is there a correlation between populations and military expenses? Brasil is the most powerful country in absolute terms, but which i most powerful in relative terms.
  • Should the map be the key visual element of the graphic? (In this case, no. The important information is the numbers.)

In class, Cairo used a scatterplot diagram. Military x Population. On another graph, he showed military manpower-to-budget relationship.

The information could have also been well represented on three linear plots stacked one above the other:
Population, military budget, military forces.

NYT “Paper Trail” by Hannah Fairfield (data from 2005, World Resources INstitute, UN) – Multivariate scatterplot.
(Paper consumption per capita x GDP per capita, with total paper consumption and change in paper consumption.)

Exame (Brazil)
Information Graphics: The use of diagrams to transform data into information
Diagram: Visual representation of quantities, spaces or relationships.

Bayeux Tapestry depicting the Battle of Hastings (1066)
An illustration (early comic) that illustrated the battle and celebrated the Norman victory.
(Cairo suggests we read the Wikipedia entry to learn more.)

T-and-O maps (Goal: represent the world according to religious teaching)
Mappa Mundi at Hereford Cathedral (1278)
Cairo calls them “maps of the imagination.” Their purposes is not to accurately represent the physical world, but to depict the world as dictated by religious precepts.

Which leads us to: A diagram is an abstract representation of reality.

Leonardo da Vinci – Renaissance: The world could be understood by reason, not religious thinking.
Leonardo’s revolution: explanations could be conveyed by illustration in combination with text.

“De Humani Corporis Fabrica,” Andrea Vesalius (XVI)
The most accurate and precise book on anatomy. The books were used until the 19th century.

John Snow (1854) Map of cholera outbreak in Soho/London
Epidemiologist was able to show the source of cholera was a contaminated water pump by noting the number of deaths per building on a street map.

William Playfair (19th cent.) “The Commercial and Economic Atlas” / “Statistical Breviary”
Playfair invented line, pie and bar charts. Ideas were based on cartography. Playfair was an engineer who knew about cartography.

NEW TOPIC: Exploring cognitive psychology
How does the brain gather, process and synthesize information?

To help people comprehend abstraction: Only keep the things that are relevant and eliminate what’s extraneous.
Why do diagrams work, even if sometimes their shape is not physically precise?
Cairo’s favorite graphic: Harry Beck’s London Tube map.
– The goal was to help people get from one point to another.
– Gave up a representation of distance for clarity.

Diagrams aid thinking by taking advantage of how the mind processes visual information.
Hierarchy
– Color is quicker to process than shape. (Highlight what’s important.)
– Brain tends to group things based on proximity
– Brain tends to group things based on similarity
– Brain tends to group things by enclosure

Orientation
– Based on assumptions about weight (density) and light (illumination)

Movement
– Don’t pair words with movement
– Do pair words with static images, then take away text when things are in motion to allow reader to focus on the action

Bubble maps (bubble graphics) are good for showing trends.
But if you’re trying to make comparisons, a bar chart will be the simplest, most effective presentation.

LINEAR GRAPHICS (Used to illustrate a process)
There’s still room for linear graphics, e.g., Intro > Step 1 > Step 2 > Step 3 > secondary information.

    Tips for creating linear explanations:

  1. In print you create hierarchy by using sizes and colors (or shades or gray). In an online graphic, you have an additional tool: time.
  2. Put the newsworthy information first. The secondary (background) elements, should be placed at the end of the animation. Place the main information on the main timeline. Use rollover buttons for complementary data.
  3. Don’t show too many elements at each step of the action. As a general rule, each stop in the movie should explain just one fact.
  4. Don’t show large blocks of text and a moving object at he same time. Otherwise, the reader won’t know where to look.
  5. The more complex the thing you have to explain, the more steps you will need to do it, but be careful. Use as few steps as you can without jeopardizing the depth of the graphic.

    BREAKING NEWS ONLINE GRAPHICS
    All graphics produced in the last 10 years of elmundo.es have been stored online. Look. Learn.

    If you want to have one desk doing graphics for all platforms, use technologies and software that facilitate the transition between platforms.
    – Cairo suggests using 3D software for modeling illustrations (rather than 2D drawing). Several versions of the same graphic can be rendered and exported to various media/platforms. He uses Maya or 3D Studio Max.
    – Blender is open source. Cairo says it’s not as powerful as Maya or 3D Studio Max, but it’s still a good tool.

    Don’t think about one platform first. Think about all platforms available simultaneously.

    While Vu Nguyen was a UNC student, he created a 3D model for White City Stories. Cairo says it’s beautiful and informative. The story took 2-3 weeks (total) of full-time work to produce the piece. Nguyen is now at MSNBC.

    NEW NARRATIVE FORMS
    Look through “The Met’s New Greek and Roman Galleries” (NYT)
    Video, photographs, 360 views, audio

    Look at “Chasing Crusoe” (UNC-CH/U-Andes project)
    Wanted to show the fictional story, the real person and culture the story is related to, and the link between the two.

    Identify which media will tell the story best.

    “South of Here“

    PROVIDING CONTEXT
    Create layers of depth
    – Series
    – Collections
    – Spanish Royal Wedding 2004
    – Athens Olympic Games

    NEW PARADIGM
    Some graphics can be software tools.
    Whatever data is in binary format can be represented in multiple ways; infographics journalists become developers.
    The tools become a way for readers to interact with the information.
    Ex: NYT: Is it better to buy or rent?
    Some of the most effective infographics tools come from public transport providers. Ex: Madrid Metro trip planner

    THREE KINDS OF INTERACTION
    Instruction – User issues commands to a system with the goal of releasing a response or achieving a goal
    calorie calculator (ElMundo.es)
    “The Ancient Way” about Galicia, Spain.

    Manipulation – The user changes the physical (virtual) settings of objects in the virtual scene: sizes, positions, colors, etc.
    How would you live in a 25 square meter apartment? (ElMundo.es)
    NYT campaign finance map

    Exploration – The user can move freely around a virtual scene.
    Online games (RPGs)
    The work of Second Story Interactive Studios
    Monticello Explorer, an interactive site from the Thomas Jefferson Foundation

    Programming allows the separation of design from content and the creation of dynamic presentations.
    In traditional infographics (as what’s produced in Illustrator), design and content (data and its shape) are in the same file.
    With programming, you can create a template, then dynamically load the data into the file, allowing for faster collaborative development of the infographic.
    – XML (Data)
    – Flash graphic

    Photo: Medialab_Prado/Flickr