Interactive examples

The Washington Post effectively visualizes casualties of the Civil War

Washington Post cartographer Gene Thorp recently published an interactive graphic detailing all of the battles and casualties during the four years of the American Civil War. Using a Google map API with a Flash timeline banner, this clean interactive graphic allows users to see multiple dimensions of the battles and casualties.

I asked Gene to give some insight into the project:

“Beyond Flash, ActionScript 3.0 and the Google API, I also used Adobe Illustrator, PhotoShop and Vectorworks with Dick Furno’s Azimuth plug in to create the tile maps. (More zoom levels of mapping to come.) It is hard to say how long it took to create the interactive. I started to learn ActionSript 3.0 almost two years ago with this interactive in mind. The
custom tile maps and data gathering I started about a year ago. There is no database that has the locations for all Civil War sites – I only have on my interactive 4,300 out of a supposed 10,000+ engagements – so doing the research for that took up quite a bit of time as well.”

I enjoyed both playing the timeline at an aggregate level, as well as clicking on specific battles to learn more about why certain ones had more casualties than the others.

I encourage you to spend some time with this interactive as well to see how a timeline and map mashup can enhance a data-rich story.

According to Post interactive developer Kat Downs, they are utilizing maps for a number of their recent interactive packages. For their recent Libya and Japan maps she noted that they were produced with javascript and jquery, making them user-friendly on tablet devices.

I love the idea of developing for a variety of devices along with the idea of using Flash as a side element and an API for the map element.

I remember programming map interactives entirely in Flash and it was beyond painful. It is so refreshing to see that these types of interactives can now be programmed in days versus weeks!

HT: Paul Franz

Other posts that might interest you:

• The Guardian launches “Arab spring: an interactive timeline of Middle East protests”
• WSJ visualizes Foursquare user activity in “A week on Foursquare”
• Crunching 30 years into an interactive

© 2012 Innovative Interactivity (II).
Download II's Security Policy (PDF)