Archives for category: Data + Graphics

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

Do you remember what it was like to be in school? About 40 journalists are reliving the college experience at the University of Miami Beyond Bootcamp multimedia workshop, directed by visual journalism guru Rich Beckman.

Over the last few months, I’ve met a number of his former students who tell stories of being cajoled and terrified of their former professor, and for good reason: The workshops are no joke: Twelve-hour days. Hands-on exercises. And in some cases, field work.

It may not be a picnic, but it is fun. For the time we’re here, we’re getting uninterrupted in-person access to an international group of highly accomplished photographers, reporters, editor-producers and thinkers. And that’s just the students.

Even if you can’t be in Miami, you can still get a taste of what it’s like to be at Bootcamp. For the next few days, you can check the ongoing tweet stream (hashtag #bootcamp).

And from noon to 2 p.m. ET Jan. 8-10, you’ll be able to watch a live stream of the lunchtime presentations below (livestream management courtesy of University of Miami journalism student Greg Linch).

  • Thursday: Paige West, Director of Interactive Projects, MSNBC.com
  • Update Friday: Panel discussion on multimedia practices and ethics.
  • Saturday: Rob Covey, SVP Content/Design, National Geographic Digital Media

Have you heard? Though most Americans still turn to TV to get national and international news, for the first time, the Web has overtaken newspapers as a news source.

In fact, according to a late December blog post by Nielsen Online, about two-thirds of all adults who were on the Web looked for news online in the 30 days prior to the post.

The news business is changing, but people still want information. Let’s not let them down.

To that end, I’m going back to school.

Recording Gear by kino-eye

For the next week, a small group of journalists will attend Beyond Bootcamp at the University of Miami School of Communication to polish their newsgathering skills.

Organizer Rich Beckman says he’s taken the multimedia workshops he held at the University of North Carolina and kicked ’em up a notch. In email, he’s promised we’ll be learning a lot of practical skills during intensive three-day sessions.

I’m especially excited to be learning about infographics from Alberto Cairo of UNC and Xaquin G.V. of The New York Times.

With luck, I’ll be able to apply some of what I’ve learned here. For sure, I’ll be able to share notes when I return.

How about you? If you’re a mid-career journalist or blogger, where are you planning to go and who are you planning to learn from to gather new ideas and keep your skills fresh?

Photo: kino-eye/Flickr

Vlad Studio has created a free typography map wallpaper that also works as a clock.

Whether you need to know the time or need to know Morocco’s location, this handy, free download can help you out. Enjoy.

Typographic Map, Wallpaper Clock by Vlad Studio

Typographic Map by Vlad Studio

My colleagues at WashingtonPost.com have launched TimeSpace: World, a way to dig through articles, video, photos and commentary in any given day from across the globe.

The method takes away the hierarchy imposed by a page layout. Instead, you get to quickly filter what you’re interested in and embed or share it by clicking on the “share” button to the right of the overlay.

This is the second iteration of TimeSpace, and there are more improvements to come, including a “play the day” feature. You’ll be seeing more changes in January.

Other news organizations, particularly in Europe, have come up with news maps of their own. Got any favorites?

America made history tonight, electing its first African American president.

Obama victory speech

Full transcript

As news organizations, watchdogs and voters prepare for the Super Bowl of politics, it seemed like a good idea to survey what will be online for Nov. 4.

Some sites will start their coverage early. Already, the massive, all-volunteer Twitter Vote Report has been logging and mapping voting problems and good experiences.

Most complaints so far have been about long wait times and registration confusion. To participate, send a tweet with the #votereport hashtag.

New to Twitter? Not on Twitter? There are other ways to send a report. Developer Nathan Freitas has come up with some additional ways to look through the data.

At 6 a.m. ET on Election Day, the Washington Post will begin tracking voter experiences and related national news on their Vote Monitor page. To participate and to send news tips, post a Twitter message to PostVoteMonitor.

In addition, WaPo has interactive maps, live discussions, blogging and articles peppered around its site and on their politics page. Be sure to have a look at the very cool TimeSpace map and timeline mashup.

The New York Times just announced a slew of goodies for election coverage. A very handy tool for those who want to jockey returns is the pop-up dashboard, which will include live election returns beginning at 6 p.m. ET, as well as electoral vote tallies from network news, CNN and the Associated Press.

The Grey Lady is also trying to create the largest online archive of polling place photographs taken by voters. Add your photo to the mix under a Creative Commons license on the Polling Places page.

Addicted to Flickr? Editors at Yahoo News will be culling election-related photos from the site and posting them on yahoo.com and news.yahoo.com. Put the word “election” somewhere in the title, comment or tag to be part of the search.

If you’re going to be out and about, bookmark the Online NewsHour’s mobile site. In addition to updates on the election, there’s a handy list of poll closing times and electoral votes.

NPR political analyst Ken Rudin has predicted Obama will win the race, but as we know, it ain’t over till it’s over. Want to map your own hypothetical outcome? Check out the You Predict map. The NewsHour will begin its TV broadcast at 9 p.m. ET, but you can follow developing coverage online now.

The Star-News may create the longest CoverItLive transcript ever with its Election Day live blog, which begins at 6:30 a.m. ET. The Wilmington, N.C., news organization reports record early voting returns in several counties. Thousands more are expected at the polls tomorrow.

STLToday.com, the website of the St. Louis Post-Dispatch, will have their reporters and photographers out in force, documenting any polling problems that may occur. In addition, they’ll be streaming Qik video from separate Democratic and Republican election parties, blogging and posting staff and reader photos. The content will go live Tuesday afternoon. Keep tabs on the coverage at www.stltoday.com/news/politics.

On the West Coast, the popular L.A. Times blogs Top of the Ticket and L.A. Now will be posting updates throughout the day. Around 4 p.m. PT, the homepage will flip from the usual center art surrounded by story links to an electoral map that will track returns for the presidential race as well as 12 hotly contested propositions. Sometime after, the site will launch a separate section on California.

MSNBC will be revamping its homepage for elections coverage. Before then, you can embed a customizable live results widget like the one below on your site.

Photo by Hilary McHone/Flickr

There are lots and lots of ways to keep up with tonight’s town hall between John McCain and Barack Obama.

You could watch on TV, of course, but what fun is that? Here are a few suggestions to make your viewing experience more engaging:

  • Graphic designer Erica Smith, whose creative and prolific mind has come up with the oft-cited Paper Cuts newspaper layoffs mashup, has just launched Presidential Bingo. Pick your candidate or pundit and mark away.
  • CurrentTV is again airing Hack the Debate. Watch on cable or online. If you’re on Twitter, include the hashtag #current somewhere in your message (at the end is good) and it’ll show up on the broadcast.
  • Update: NPR has two engagement efforts on Twitter tonight:
      Fact check the debate: Think one of the candidates is wrong? Find a source that proves it and tweet the URL with the #factcheck hashtag. You can monitor fact checking here. Need more detailed instructions? NPR’s got em.
      Rate the Debate: Send a Twitter message with the hashtag #dialtest and monitor one of two ways: verbally and graphically on Plodt.

      To participate:

      1. Follow Plodt on Twitter.

      2. Tweet about the debate, ranking the candidates’ performance on a scale of 1 to 10. For instance:
      Let me be clear, I’m ambivalent. *Obama 5.3*

      If they use the words Main Street one more time, I’m going to slit my wrists. *McCain 1* *Obama 1*

      Take that, non-maverick! *McCain 6*

      There are further details on these projects if you need them.

  • For more fact checking, PolitiFact.com, the Washington Posts’s Fact Checker live blog, which begins at 9 p.m. ET, and the post-debate wrap at FactCheck.org look promising.

Even if you can’t be at Belmont University, you can still be part of the action. Enjoy!

NBC may have a death grip on the U.S. broadcast of the Summer Olympics, but that hasn’t stopped other outlets from coming up with different ways to cover the Beijing Games online. Here are a few medal-contending approaches you may have missed.

Bird's Nest Beijing Olympics Venue, photo by Rich115 on Flickr

Soaring Over the Bar” from the New York Times
American gymnast Justin Spring explains the mechanics of some of his tricks (moves) on the high bar in this combo news graphic-video-audio feature. The video’s a little grainy and the difficulty legend in the lower left-hand corner could do a better job (is A the hardest or the easiest?), but we give the news organization props for another great interactive. Go Team NYT.

Now Diving: Sir Isaac Newton” from The Wall Street Journal
With the Journal’s reputation as the country’s dominant business news outlet and as the home of personal tech guru Walt Mossberg, it’s easy to forget they cover other subjects too.

This sparkling article by Barry Newman explains the evolution of the low-tech DiveCam in the high-tech Water Cube. It also includes an interactive graphic that demonstrates how the DiveCam works. Click to watch the diver plunge into the pool over … and over …. It’s geeky, but so much fun. Go Team WSJ.

Off the Wall: Foot Massage” from the Associated Press
(Go to the “Interactives” box, scroll down and click the title)
Say what you want about the Associated Press’s business policies, their reporters are still top contenders in solid reporting and creative story ideas. This video by John Marshall is a gem of the latter category.

Marshall has been sampling Beijing’s culture outside the Olympic venues in a video series called “Off The Wall.” In this piece, he took his tired dogs to a local foot massage spa and got an experience much different than he expected. Listen to the nat sound and the narrative. It’ll make you smile. Go Team AP.

Fourth-Place Medal’s Investigative Unit from Yahoo Sports
A team of Yahoos has been writing a rip-roaring Olympics blog and doing what bloggers to best: acting on reader questions. They call the posts “Olympic mysteries.” So far they’ve answered:

  • Who was that mas linda Paraguan marching in the opening ceremony?
  • Where was swimmer Cullen Jones during the rowdy 4×100 men’s relay celebration that kept Michael Phelps’s gold medal record hopes alive and solidified Jason Lezak’s reputation as the team’s strongest closer?
  • Why do divers shower between each dive?
  • What’s that black stuff on beach volleyball player Kerri Walsh’s shoulder?
  • And from a question asked last night during Michael Phelps’s 200 meter IM race, what’s on the golden Olympian’s iPod playlist?

The off-the-cuff blog has an enthusiastic following, judging by reader comments. Expect live-blogging and reader reaction again tonight as Phelps whips through water in the 100 meter fly, and women take to the track in the 10,000 meter final. Go Team 4PM.