Tag Archive: interactive

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

Catching up on 2012

I’ve been completely delinquent about posting here. I will try to do better, and in the meantime, here is a selection of work from the first part of the year (am going to follow this up with some breakout posts on specific projects).

What’s at stake on Super Tuesday?
Going way back to Super Tuesday, we published this really fun motion graphic featuring Chris Cillizza and the delegate mountain that Todd Lindeman and Sisi Wei built. I worked on storyboarding it with the team, a well as helping in the studio (led by AJ Chavar and Sohail Al-Jamea) and with building out the page. The project was really fun and newsy, and a great job especially by animator Sohail, and of course Chris Cillizza.

super tuesday

Rescue and Recovery
This is a really powerful piece looking at Virginia Tech five years after the massacre, through the lens of an iconic image of survivor Kevin Sterne. I did design, development, audio and wrote one of the segments of the piece. I love the simplicity and amazing story. Again, an awesome team effort with work from Ben de la Cruz, Bill O’Leary, Josh du Lac and others:

VA tech five years later

Repairing the Washington Monument
This piece about the damage to the national icon just came out last week — featuring a 3-D model by Alberto Cuadra, and reporting by Cristina Rivero. Kathryn Faulkner, the summer intern in graphics, did most of the heavy lifting on the interactive side, with me in an editing role and pitching in to help with some of the tricky parts, like the rotating model. The piece turned out beautifully:

washington monument damage

New year, new post

It’s been a busy few months, but I’m gonna squeeze in a post for January! I’ve switched jobs at the Post and moved into a new role, Interactive Projects Editor, focusing on creating interactive projects that combine design and graphics with video, photography and social media. I’m really looking forward to the new challenge. In other news, I’m getting used to the new delicious and trying out this ‘stacks’ thing. I’ve got a few going, namely one on interactive maps and one for games and quizzes. I’ll keep those updated as I collect links around the web. And, some of my recent work….

Pinocchio tracker
The tracker part of this was originally done with Tableau, but we decided to rework it and to add a game element to it. It’s on a page of its own as well as in the right rail on all our politics content. Try it out!

The Media Divide
This piece was born from a project by Marc Fisher to track what media people consume in a day and see how it reflects their ideology. Evelio Contreras did this great video and we put it together in a calendar with links to all the news they watched/read/listened to, and combined that with a poll.

The Seat Pleasant 59
This project leads with Whitney Shefte’s awesome video about a class of students who were promised that if they graduated from high school, their college would be paid for. We tracked down the students and found out where they are now. My contribution was the list/grid view and filtering along with itemizing content for each of the dreamers.

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.

Moving away from Flash: A look at JavaScript drawing libraries

Excerpts from a new post for WP’s @innovations blog:
[Go to the blog to read the whole thing]

When Apple announced early last year that it would not support Flash on the iPhone and iPad, a passionate conversation erupted in the world of web development: Was Flash dead? If not, how would it survive? When should it be used? News developers asked these questions as well, and, at least in our newsroom, the conversation inspired some thinking about how to approach interactive development. Over the past year and a half, there has been steady movement toward more interactivity based on JavaScript and fewer Flash-only experiences.

Sorting out the budget proposals

Last week we published a graphic that compared four federal budget proposals through a series of charts. We used the jQuery library Flot to draw simple, interactive line charts that showed how the debt and deficit would change under the different plans. Flot is very easy to use, flexible and customizable, and is one of many free-to-use JavaScript graphing libraries out there (Dracula, Highcharts and RGraph are a few others). We also built a customized chart with CSS and JavaScript at the bottom of the page to show how different categories of spending would be affected.

Read the rest of the article…

Hot multimedia at Global Warning

A full five months after wrapping the Global Warning project, I think it’s time to do a blog post about it! I spent last fall working with a team of students on a National Security Reporting project at Northwestern University’s Medill School of Journalism. I was an adjunct professor, teaching the students multimedia design and light programming, and serving as the design lead for the project, which was led by Ellen Shearer and Josh Meyer.

After spending a couple of months in the discovery and ideas phases, we decided on several graphics that would address the main topic of the project: How could climate change affect national security?

Read more…