Information Graphics

Tax Calculators on Wonkbook

This week we launched two new interactives embedded in Ezra Klein’s blog, Wonkbook. Ezra and Dylan Matthews put together the information, Todd Lindeman designed it and Andrew Metcalf built it. I helped with styles, etc. It’s a fun experience, and I love that it’s built for the blog. Check them out!

Romney version here:

Obama version here:

Washington Post Olympics graphics and multimedia roundup

Here’s some of what the WaPo team put together for the London Olympics:

The definition of perfection
I designed this piece about how gymnastics scoring worked. Wilson Andrews developed it and edited/animated the videos, and Bonnie Berkowitz did the writing.

definition of perfection

Profiles in Speed
This six-part series we developed in the run-up to the Olympics featured greats like Missy Franklin, Michael Phelps and Carmelita Jeter. Videos, infographics, and awesome articles. I especially love the segment on technology.

profiles in speed

Are you over the hill for Olympic sports?
As part of the Profiles in Speed series, I developed this graphic which lets you see where you fit into the Olympic age spectrum. Flowing Data wrote about it here.

over the hill

Four more pieces after the jump! »

NICAR presentation on visualization

I just got back from the NICAR conference in St. Louis, where I gave a talk with Bill Keaggy on Best Visualization Practices. There’s delicious stack of links here: and the presentation is here (click the settings gear and open speaker notes to find out what we talked about):

Chrys Wu kept a detailed list of links if you want to check out some of the other sessions. I also got the see the St. Louis arch! Very exciting:

St. Louis Arch

View from the top: St. Louis Arch

A workout at work and/or my 15 minutes of fame

To create this graphic about exercises you can do at the office, the entire graphics department of the Post got together twice a day to do the exercises. It was a hilarious group activity — we attracted a lot of stares from passersby in the newsroom. I really enjoyed jumping around a little bit in the middle of the day to get the blood pumping.

The graphic was a fun collaboration between Laura Stanton, who illustrated many of the department members, Sohail Al-Jamea, who created the animations, Bonnie Berkowitz, who was our exercise leader and researched and wrote all the text and conducted the survey, and me — I helped design and build the interactive and set up the videos and polls.

So far we have had a lot of people voting — about 1,700 for the first exercise. It’s fun to see how people have responded to each exercise, and we’re hoping it is promoting engagement with the piece.

Analyzing the U.S. tax code, break by break, and other recent charts

Today, we came out with a new graphic that looks at the tax breaks on the books this year. It is part of Running in the Red, a series the Post has been running for the past few months, and accompanied Lori Montgomery’s front-page story, “Ever-increasing tax breaks for U.S. families eclipse benefits for special interests,” a great story that explains spending through the tax code.

The graphic is all CSS and JavaScript. With charts that only have bars, it’s simple to dynamically add sized divs with background colors that create charts. The data will update automatically if necessary and it works across all browsers and mobile platforms with no workarounds:

And has details for each of the 172 breaks currently active (see below). Added bonus: I learned a ton about the tax code.

And a couple more (relatively) recent charts:

This one I worked on with Alicia Parlapiano and Neil Irwin. Because I wanted to create animate transitions and interactivity, I used Flash to create this graphic. It has detailed drilldowns to look at employment in each sector of the economy. I tried to inject more annotation into this graphic (and the taxes one above) than we have done in the past with data-driven graphics. Instead of throwing a bunch of data out there, we’re providing more context and guided views — by category and by sector versus a completely self-guided data dive.

This was a fun chart I helped our intern, Heather Billings, with at the beginning of the summer. We used flot to make these charts showing how the lead changed between the Heat and the Mavericks during the NBA finals. This was particularly fun for me because I got really into the NBA finals this year and watched every game. I know, hard to believe, but true. I was a having a great time analyzing the outcome of the games and reading all the news — and if you missed it, this was a great article from Bill Simmons at Grantland.

And another one about when and if China’s economy will pass the United States to become the world’s largest.

Recap from Malofiej 19


Photos: Malofiej 19 at the University of Navarra

In March, I set out for Pamplona, Spain, to join the jury of Malofiej 19. For three days, we judged hundreds of entries in the digital contest, while colleagues on the print side saw over 1,000 entries. Check out the awards here.

Other jury members came from all over the world — Germany, Argentina, Chile, Spain, Italy, and the United States. I met a ton of awesome people who share a passion for infographics and alternative forms of storytelling. Gert Nielson keeps a good log of the goings on at his blog, Visual Journalism. Kaitlin Yarnall of National Geographic wrote a summary piece for the Society of News Design blog here. Javier Errea, who organizes the event, also wrote a post on his blog (in Spanish).

I really liked Stephen Few’s presentation on Infographics and the Brain — reminding us all to think not only of how we want to present the information, but how it will be perceived. It doesn’t matter how good it looks or how clever we think it is if it misses the basic point: helping people understand information.

I gave my presentation on the power of using social media and user-generated content in graphics. I focused on two types of input — that which comes directly from our users (games, polls, submissions) and that which comes from existing social networks (facebook, twitter, foursquare, flickr). The amount of information out there is incredible, and we have to figure out how to use it in ways that show how people fit into their world. The opportunities are endless. Recently some interesting projects have come out that harness some of that power, including the Wall Street Journal’s Foursquare project, a look at check-ins over a week’s time in New York and San Francisco, and the New York Times Bin Laden emotion grid.

For more photos from Malofiej, go here.

Mapping the news: Libya and Japan

The past several weeks have been full of foreign news, and we have been producing lots of graphics to explain what’s happening. I have worked on these two graphics, one about the earthquake and subsequent tsunami in Japan, and one that explains what is going on in Libya.

For a full explanation of the process of creating the Japan graphic, visit the new Innovations blog at the WP (excerpted below):

Friday morning, as news of the earthquake in Japan spread, we started pulling together an interactive map that would show readers where and how events unfolded. Over the next 36 hours, we would continually expand and improve the information, design and interactivity of the map as the news of the earthquake and tsunami came in. Read more »

For Libya, we combined an event tracker with audio and video from the ground. The reports from correspondents on the ground is my favorite part.

Both graphics are done using javascript and jquery, so check them out on your tablet devices!