Posted on

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…

Posted on

D.C.’s rock scene: 9:30 club turns 30

A multimedia history of the 9:30 club
A multimedia history of the 9:30 club

I spent the last few days working on this piece about the 30th anniversary of the opening of the 9:30 club, one of the best venues in D.C. (and a lot of people would say the whole country). Alex Garcia shot some great concert video and interviewed some key people, and Josh du Lac wrote the magazine story. I pulled it all together in this multimedia slideshow, which has several different text layouts and video in varying sizes. The content of this is the coolest part — there are some great stories in there about the old club: how there were so many rats they had something called the “rat highway,” how Will Smith (The Fresh Prince) showed up and just left without playing the show because he was so disgusted at how the place looked and smelled, and a whole bunch more. There are also some great photos from the ’80s and ’90s. I pulled the illustrations from the magazine layout, which you can see here.

Posted on

New project: Graphic explains the search for a serial rapist

Rapist's trail spans four states, 13 years

I worked on this graphic with reporters Josh White and Maria Glod, who collected an incredible amount of information on the East Coast Rapist, a man who has been on the loose for 13 years and is a suspect in 17 cases. For this important story, I organized the data that Josh and Maria collected into an easy-to-use interface that had the details of each case, including a small photo gallery, a google map, a quote and all the case information. I built an interface that drew connections between the cases and allowed people to sort the cases by date, location, existence of dna samples, and the weapon used. It also featured a map interface, a gallery and a video. Keep reading this post »

Posted on

Videos from India Trip

A full year after Whitney and my trip to India, we finally finished up the piece we were working on for it: India in Motion, which was published on The Washington Post’s website. Whitney did over 20 short videos reflecting the sights and sounds of the country.

India in Motion

There are videos from almost all the places we visited, chief among them Mumbai, Udaipur and Rishikesh. I designed the piece and built the player, which had some similarities to Scene In in that it was a series player and I used some of the same code, but look and feel wise, it is pretty different. Keep reading this post »

Posted on

Virginia Election Coverage

I worked on two graphics for the recent election in Virginia — a map that shows the results of the 2009 governor’s race and election results back to ’97, and a delegates meter showing the balance of power in the VA House of Delegates.

VA Election: Results Map
VA Election: Live Results

The governor map showed live results throughout the night, and at the end of the night historical results showed up as well, so that users could look at how voting patterns have shifted since previous elections. I think this was really interesting given the speculation about how the 2008 presidential election might impact this year’s race in Virginia.

VA Elections: Historical Data
VA Elections: Historical Voting Shifts

The delegates meter was a quick piece, I just used some circle drawing math in AS3 to create 100 segments in a half-circle, and fill them in as the results came in. When you roll over the segments, you see current results for that district.

VA Elections; Delegates Meter
VA Elections; Delegates Meter

I made small versions of these graphics to go on our local homepage on Tuesday night and Wednesday morning. They were simplified versions that linked out to the full graphics. I think that was a smart way to push traffic to our graphics on election night, while giving  casual viewers a current tally of results.

VA Election: Local HP
VA Election: Local HP
Posted on

The Politics of the Prize

I created this graphic about controversial winners in Nobel Peace Prize history based off of some of the development work I’d done for the helicopters project. The timeline and slideshow componenets are very similar, I just switched the look of the slideshow portion and made the timeline interact with the slideshow.

[Politics of the Prize]
Timeline: Politics of the Prize

Reusing the classes I’d created saved a lot of time — it only took a few hours to create this piece. With the improvements we could have a 15-minute turnaround on future projects.

Posted on

The Battle of Wanat

Yesterday we launched a multimedia narrative on the Battle of Wanat, one of the deadliest battles that have taken place in Afghanistan since the war began. I designed and developed this timeline in collaboration with Greg Jaffe, Liz Heron, Ben de la Cruz, Laris Karklis and several others.

It combines video, audio, maps, documents and photography to tell the story of what took place on July 13, 2008, when Taliban fighters launched a major assault on a small U.S. Army outpost in Afghanistan, killing nine soldiers and wounding 27. It chronicles the battle from the perspective of a lieutenant killed in the fight, Jonathan Brostrom, and his father, who has been seeking answers to what went wrong.

Posted on

New Series: Fatal Flights

Last Friday The Washington Post published an investigative series, “Fatal Flights,” on medical helicopters in the U.S.

I worked on three graphics for the piece: two for the first day and one that ran Sunday. The first piece, Fatal Crashes Since 1980, combined a timeline, trend data and crash and victim information for all fatal crashes since 1980.


We also put together this timeline of the 2008 Maryland crash that uses audio and maps to piece together what happened during the search for Trooper 2.



I also created this simple state-by-state map that incorporates filters for different data points. The map shows how helicopters are concentrated throughout the states and how helicopter numbers relate to medicare population and trips.

Posted on

Recent Design and Development Work

I said I was going to publish some of my recent work, so here goes. All of this stuff has been done in the past several months and has been published on washingtonpost.com.

I worked on this interactive graphic about North Korean prison camps last month. It explores the five major camps and goes into detail about camp 15. Laris Karklis did the maps, Blaine Harden wrote the text, and I did the design and build.

In April, I worked with Amanda Zamora and Alexandra Garcia on this panoramic timeline of the scene of the shooting of DeOnte Rawlings. It uses three panoramic images, a map, and multiple hot spots to lead the reader through the sequence of events that led to Rawlings’ death. I used the same technology (Flash Panorama Player’s hotspots plugin) for this as I did for the Skipjack pano piece I posted below, but I think this is a much more sophisticated use of hotspot technology.

In April we also launched the D.C. budget game, which people can use to learn more about the city budget and what programs would stay or go with varying levels of funding. Users can save their budgets and compare their choices with other users.

For Barack Obama’s first 100 days, I created this sortable photo gallery that lets readers see exactly what he was doing. Load time is pretty slow, so future iterations will be much leaner.


Scene In: This player for a new series on fashion in D.C. by Alexandra Garcia utilizes the new AS3 video player Jesse Foltz created and features a logo illustration by Noel Smart. I designed the series player and built out the functionality. A new episode comes out every other Thursday.

[Scene In]