Design, programming
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.
More JavaScript maps: Republican primary tracker, Earthquake in Japan
Design, programming, production
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.
Design, programming
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.
More user-centered projects: How does your income compare?
Design, programming
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.
More Flash maps: Unemployment by County (read my blog post), A closer look at AIDS groups, Life expectancy across the U.S.
Design, programming
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.
Related: Interactive memorial with Photosynth
Design, programming
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.
Design, programming
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.
Design, programming
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.
More charts: Where are the jobs?
Design, programming
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.
More games:
Make a royal match, How well are you aging?, Washington Metro art
Design, programming
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.
More of my panorama projects:
• Egypt Panoramas (panorama template)
More investigative design:
•Two worlds, On the trail of a serial rapist, Fatal flights
Design, programming
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.
More timeline examples:
• Newer 2/3 width version
• FBI’s Most Wanted List (incorporates audio players)
• Deciding on a surge strategy
Photography, audio
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.”
More of my photography:
• Atacama Stories: Hand-hewn Copper (Select “Mining” and then “Hand-hewn copper”)