Motion graphics for the 2012 election

Motion graphics for the 2012 election

Published in The Washington Post, 2012

During the 2012 primary season, we started talking about how to tell the story of the election as a whole. I worked with AJ Chavar, video editor, Sohail Al-Jamea, motion designer, and Karen Yourish and Chris Cillizza, reporters, to storyboard and produce this motion graphic, which led our site the morning after Barack Obama won re-election. We did extensive storyboarding to ensure we would be prepared no matter the outcome of the election. I’m proud of this video because it’s fast-paced, has a great storyline and uses compelling graphics and smart visual approaches to keep the viewer’s attention.

Role: Story development, visual editing, producer

Skills used: Storyboarding, visual editing, project management

More election videos:

New homicides map

We just launched this interactive map with details about 2,294 homicides that occurred in D.C. between 2000 and 2011. You can find the killings in your neighborhood, follow the trends over time, and learn how the victims died and what happened to their cases.

Key findings featured in the graphic:
Click the headline to jump straight to that view in the map.

Homicides in D.C. are down 55 percent since 2000
The number of homicides in the District fell last year to 108, a 49-year low. Despite the decline, homicide continues to be a tough crime to solve and prosecute in the city.

Motives: Drug killings down 84 percent
The most common motives for homicide in D.C. are arguments, drugs and retaliation. About 2 percent are classified as gang-related. Homicides involving drugs have decreased about 84 percent since 2000. Drug-related homicides accounted for eight of the city’s killings last year, compared with 49 in 2000.

Most dangerous age: 24 percent of those killed were in their early 20s
More than half of the District’s homicide victims between 2000 and 2011 were between the ages of 15 and 29. About 93 percent of those victims were male, and 94 percent were African American.

Homicides map

Published in The Washington Post, Oct. 14, 2012

As I designed this app, I was thinking about how to allow people to quickly find homicides in their area. That led to a decision to focus on neighborhoods. We let people see groupings of crimes that are meaningful to them in both the map and corresponding charts. To surface trends at a city-wide level, we added four promo spots above the map that send people directly to important stories in the app. And a timelapse feature lets people view trends, year by year, across the city and in specific neighborhoods. We’re getting great feedback from users; many people are telling us that they found surprising and intriguing information in the app.

Role: Design, light programming

Tools used: JavaScript, Google Maps API, Flot, CSS

Awards: Gold medal in the SND Digital competition, Silver medal at Malofiej for design

More JavaScript maps: 2010 census, Republican primary tracker, Earthquake in Japan

Seeing liberty through the lens

The Post has some of the best photojournalists in the world, and it’s always such a pleasure to work with them. For this three-part series on Virginia voters, Melina Mara took portraits of Virginians and interviewed them. Nick Kirkpatrick recorded and edited audio from the interviews. Then Bonnie Jo Mount traveled the state to photograph the themes: women, economy, and faith. Grace Koerber designed the beautiful package, and I was her editor. After she left the Post to go back to school for interior design, I handled the second two installments, putting together the mosaics and working on package branding. I love the slideshow and mosaic pattern Grace designed — it’s an inspiring way to do individual portraits and interviews. The ability to view images as a mosaic or in a full-screen gallery view is awesome.

For part two and three, I designed the mosaics. It was fun to lay out the page, especially with Bonnie Jo’s amazing photographs to work with. You can’t go wrong:

Say What? Interactive transcript player tool is a new way to tell speech stories

Ryan speech

Yesterday, we launched a new project: an interactive transcript player that matches up the words of the speech, Post analysis, and reaction from Twitter.

I have been wanting to do a Twitter project for a while, and this time all the pieces fit together. After I pitched the idea, Cory Haik coordinated a partnership with VoterTide, a great company in Omaha that does aggregation and analysis of Twitter trends specifically around politics, that made the Twitter analysis segment possible. I designed the piece, and we were able to get two awesome developers, Leslie Passante and Jeremy Bowers, to build it.

My favorite things are the ‘watch highlights’ view, where you can see all the Post analysis and skip everything else, and the addition of the social layer. Here’s an excerpt from the ‘Ask the Post’ blog post we put together on it:

… VoterTide will provide user reactions as they happen on Twitter, and we’ll match that to the moment in time these reactions occurred during the speech. We will package these reactions to reveal insights into the nation’s response to the conventions and their most-watched speeches.

We’ve gotten some great reaction from this project on washingtonpost.com and on Twitter. It was also written up by Poynter:

So as the GOP nominee took to the podium and the president prepares to do the same at next week’s DNC, it is appropriate that journalists roll out the coolest newest thing. The Washington Post did just that.

“Some innovations we have done, you step back and say, ‘That was fun.’ And some you might say, ‘We produced a new story form.’ But this time I think we can say both,” Haik said.

Totally agree! And we just did another one for Mitt Romney’s speech. This project would not be possible without the awesome producers who put it together: Haley Crum and Mary Keister. Check it out!

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! »

StoriesFrom.us

Launched on July 7, 2012

StoriesFrom.us

StoriesFrom is a storytelling platform that allows individuals and organizations to create rich, community-driven documentary projects online. The site was made possible through a Knight News Challenge grant from the John S. and James L. Knight Foundation, cosponsored by Google. I built the front end of the site based on designs by Grant Kindrick. The site was optimized for the iPad and included complex gesture-specific functionality like the “wall,” pictured above. I themed Drupal templates to create the story pages (video, slideshow, and text options) and built several other page types, including a map featuring geolocated tweets based on specific keywords, multiple project displays and a complex navigation system.

Role: Front-end development

Tools used: JavaScript (MVC framework), MapBox, PHP, Drupal theming

Note: Due to changes in the Twitter API, the live tweet display is no longer functional.

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: http://bit.ly/nicar2012 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