Welcome to my portfolio.

I'm focused on creating data-driven graphics and multimedia pieces that feature powerful storytelling and strong interaction design.
I really enjoy working in collaborative environment, coming up with creative solutions, and incorporating new technologies into projects.
For a running list of all my work, see my delicious stack or all my links tagged 'work'. My resume is here. If you have questions or suggestions, shoot me a line.

Design, programming

Published in The Washington Post, July 21, 2011

I worked with Dan Keating (data) and Nathaniel Kelso (GIS) to create this JavaScript map that shows 30 years of census data, including plurality, population, population density, family type and percent change. Due to an extremely high number of polygons (this map goes down to block groups), we’re using live API calls to grab data at the user’s request. We’re using tile-based lookups to find out which geographies to load, and using Polygonzo by Michael Geary to help manage drawing large numbers of polygons on the Google map. We’ve used custom styles to clean up Google’s base map, and allowed users to bookmark any view within the app to share with others. This map has an iPad version that was one of the first graphics we made specifically for the device.

Tools used: JavaScript, jQuery, Google Maps API, Polygonzo, Google Charts API, Bit.ly API, CSS

More JavaScript maps: Republican primary tracker, Earthquake in Japan

Coming home a different person

Design, programming, production

Published in The Washington Post, October 3, 2010

I worked closely with Whitney Shefte and Alberto Cuadra to create this piece. We storyboarded the intro video, motion graphics segments, and the flow of the piece together, then each created the individual parts. I built the interactivity around the intro page menu, the brain segment, and the package navigation. It features deep linking to each video, gallery, or multimedia segment.

Tools used: Flash/ActionScript 3.0 with audio and video players, Javscript, CSS, SWFAddress by Asual, Adobe Photoshop

Awards: POYi Documentary of the Year, Peabody Award (2010), Online Journalism Award for Multimedia Feature Presentation (large site), Finalist for the Pulitzer Prize for Explanatory Reporting, SND Digital Design competition (Use of Multimedia), WHNPA Eyes of History 2011: 1st Place for Multimedia Package (In-Depth) and 2nd Place for Multimedia Innovation

Design, programming

Published in The Washington Post, October 30, 2011

I worked with Dan Keating (database) on this project, which takes a unique approach to user-generated data. It mashes up responses from users with actual numbers on unemployment, median income and population growth to see how people’s perceptions line up with reality. A week after launch we had nearly 5,000 responses. We use IP location to target the experience to the user’s county and state, and ask them to make a rating and, optionally, give us some demographic information and leave a comment. Read more here.

Tools used: JavaScript, jQuery, Quicksand plugin, Echo comments API, Google Visualization API, Bit.ly API, CSS

More user-centered projects: How does your income compare?

Campaign 2010 Race Maps

Design, programming

Published in The Washington Post, The Telegraph (UK), and Yahoo News, 2010

I created these three race maps (house, senate, and governors) to correlate with the redesign of PostPolitics. I also created a live results map for election night. We really wanted to give a complete picture of the 2010 races, so we have current race ratings (except for the House, where we have state of the race), election history, and demographics that let you see some cool patterns — like how states vote when they have a high percentage of seniors or high poverty rates. Favorite features: really cool zoom functionality, which I explain in my blog, and a slider that shows historical results.

Tools used: Flash/ActionScript 3.0

Awards: Bronze, Malofiej 19

More Flash maps: Unemployment by County (read my blog post), A closer look at AIDS groups, Life expectancy across the U.S.

Design, programming

Published in The Washington Post, Aug. 24, 2011

I heard that Nikki Kahn and Megan Rossman had been out shooting interviews with civil rights leaders in advance of the unveiling of the Martin Luther King Jr. memorial in D.C., and I approached them with the idea of doing a presentation that combined photography and videos and used the memories of those interviewed to tell the story of King’s life. I organized the memories so that they flowed through stages of King’s life and built up to the building of the memorial. I wanted to let the beautiful photos and powerful video quotes shine, so I went with a simple, clean interface that used strong pull quotes to draw people into the story. I really like the elegant navigation and the ability to share each story.

Tools used: JavaScript, jQuery, CSS, OmniPlayer API

Related: Interactive memorial with Photosynth

Top-secret connections

Design, programming

Published in The Washington Post, July 19, 2010

This graphic visualizes the redundancy and relationships in Top Secret America. Specifically, it shows which government organizations do what types of top-secret work, and how many companies they work with. The centerpiece is the color-wheel, which allows users to sort the government organizations in three different ways. It also has individual views of each government organization, work type, and a couple dozen companies. It is all dynamically drawn, fullscreen capable, and utilizes deep linking. For a more complete description, visit my blog. I also helped Nathaniel Kelso with the map for the project, particularly some of the design work and the motion graphics, which I blogged about here.

Tools used: Flash/ActionScript 3.0, Adobe Illustrator, JavaScript, After Effects, Google Maps API

Awards: WHNPA Eyes of History 2011: 2nd Place for Multimedia Package (In-Depth) , 2010 George Polk Award in Journalism (Category: National Reporting), SXSW Finalist for Technical Achievement, Goldsmith Prize for Investigative Reporting Finalist

In the news: Fast Company infographic of the day, Infosthetics: Visualizing the National Security Buildup

The Battle of Wanat

Design, programming

Published in The Washington Post, October 3, 2009

For this story about a battle in a remote part of Afghanistan that had greater implications for the war there, reporter Greg Jaffe came to us with a ton of found videos, photo and audio. I came up with the idea to do a horizontal pane timeline that would allow us to integrate all the media into one experience instead of breaking it up into several pieces. I built this horizontal scrolling interface, which has video and audio players embedded in it. I also designed and laid out all the photography and text in the piece. I think it has a simple and easy user interface, which drives interaction with the multimedia items inside the project.

Tools used: Flash/ActionScript 3.0 with audio and video players, Adobe Photoshop, CSS

Awards: Bronze, Malofiej 18; WHNPA Eyes of History 2010: 2nd place for Best Multimedia Package (Simple); SND Quarterly (Winter 2009)

Design, programming

Published in The Washington Post, September 18, 2011

This piece looks at all the tax breaks on the books in the United States, how much they cost and when they went into effect. It breaks down all the tax expenditures by category and value and highlights important movements. I created the charting, interaction and design of the javascript visualization at the top of the page. We focused a lot on adding an annotation layer to this piece, so it’s not just a deep data dive. While the granular information is there, it is secondary to the analysis we are providing. Read more here.

Tools used: JavaScript, jQuery, CSS

More charts: Where are the jobs?

D.C. Budget Game

Design, programming

Published in The Washington Post, April 14, 2009

The budget game is an educational tool that allows users to make adjustments to the proposed budget to find out what is cut or gained by increasing or decreasing expenditures and revenues. It also allows users to save their budget to a database and compare their choices with those of other users. It simplifies a complex process by breaking it down to the simple math elements and letting people see how it all fits together. I designed and built all the elements of this graphic, which runs off a database created by our tech team.

Tools used: Adobe Photoshop, Illustrator, Flash/ActionScript 3.0, CSS

More games:
Make a royal match, How well are you aging?, Washington Metro art

rawlings timeline

Design, programming

Published in The Washington Post, April 18, 2009

This project recreates the scene where DeOnte Rawlings was shot, and tries to lend clarity to what happened (there was debate about whether police had reason to shoot at him or not). Alex Garcia had shot some panoramas of the scene, so instead of just having them in a gallery, I suggested that we try to create a 3-D crime scene timeline, by using Flash Panorama Player’s hotspot technology. I had only used it once before so it took some time to set up, but I really like the effect. It gives a great sense of place and is a really powerful storytelling tool.

Tools used: Flash/ActionScript 3.0 and Flash Panorama Player, CSS

More of my panorama projects:
Egypt Panoramas (panorama template)

More investigative design:
Two worlds, On the trail of a serial rapist, Fatal flights

Timeline template

Design, programming

Created for The Washington Post, December 2009

The timeline template takes an XML file in the embed code parameters, which allows the same flash movie to be used over and over again for all our projects. This way we can roll out changes to all our timelines, past and future. It automatically creates the time frame based on first and last year, and then places all the timeline points. It autosizes the boxes and allows for several combinations of video, photography, audio players, text and related links.

Tools used: Flash/ActionScript 3.0, XML

More timeline examples:
Newer 2/3 width version
FBI’s Most Wanted List (incorporates audio players)
Deciding on a surge strategy

Critter

Photography, audio

From the Carolina Photojournalism Workshop, March 2006

I did the photography and audio for this piece about a mud-racing mechanic on the eastern shore of North Carolina. I spent several days with Critter at his shop, at home and out and about in Newport. He’s an incredible character and he gave me an open look into his life. To watch, go here and click “Critter.”

Tools used: Canon 30D, ProTools, Soundslides

In the news: Endeavors Magazine

More of my photography:
Atacama Stories: Hand-hewn Copper (Select “Mining” and then “Hand-hewn copper”)