On Innovation

Friday morning, as news of the earthquake in Japan spread, we started pulling together an interactive map that would show readers where and how events unfolded. Over the next 36 hours, we would continually expand and improve the information, design and interactivity of the map as the news of the earthquake and tsunami came in.

The process illustrates how quickly web projects have to evolve and how crucial it is that they are up to date minute-by-minute.  As soon as we had new information, we had to post it because people everywhere were hungry to know more about what was happening.

Above: The map at the beginning (circa 9 a.m. Friday morning) and near completion (Saturday afternoon)

Here’s the breakdown of how we followed the events and updated and improved our map to reflect them (continued after the jump):

Early in the morning, as the news broke, Mark Luckie and Sam Sanders pulled data from the U.S. Geological Survey to create the first version of the map (top left) with Google My Maps.

As soon as we had that up, I started a custom map using the Google Maps Javascript API v3. With the API, we were able to host the map on our site, as well as add custom icons and clean up the map style. The second version of the map was still very simple, but read a little more easily than the first.



The next step was to add in the rest of the aftershocks that had occurred since the earthquake, as well as the tremors that led up to the quake. Nathaniel Vaughn Kelso created custom Google map tiles that held the information about the aftershocks (also from the U.S. Geological Survey). Preprocessing was accomplished in ArcGIS.



Next, we added a map of the tsunami intensity (also Google map tile overlays) that showed wave height and arrival times. Since this was our newest information, it led the presentation. The data source was NOAA but its map was obscured by other design elements. Nathaniel cleaned it up in Photoshop and transformed it to fit the same Mercator projection as the mashup. Our cartography design work is done in Illustrator where we add the storytelling elements (labels, text notes, etc) and stylize the data. The tiles were cut using a custom script in Illustrator and added to the mashup.



In addition, we updated our aftershocks map with a new version that more clearly showed the intensity of the main earthquake as compared to its aftershocks. These were also custom Google map overlays.



At the same time, we were updating the map to add new points of interest: we put in nuclear plants, tsunami-affected areas and shake lines. The Google map was styled to more closely resemble Post styles and to clean up background noise and make the icons and shake lines easier to read. The locations were taken from a Google Earth KMZ file that cartographer Laris Karklis started, and were initially loaded onto the map as a KML layer. Then we transferred it from a KML layer into individual markers that were more flexible. Graphics editor Karen Yourish collected information that allowed us to add photos and text into the rollover boxes for each location.



We still weren’t happy with the readability on the Google map as it was, so cartographer Gene Thorp created a new tile base that included population density data on Japan. This cleaned up the map a lot and really made the information we overlaid pop out. No more distracting Japanese translations on the place names!



And finally, we added some videos from a few of the places hit by the tsunami, which really illustrated what happened on the ground.

Throughout this process, we had to think fast about the elements we wanted to include and which technologies could make that happen quickly and effectively.  Storytelling and usability were our focus as we worked to keep up with a fast-breaking story. It was a whirlwind, but ultimately we ended up with a clean yet detailed map that showed how the events in Japan unfolded.

Kat Downs / Innovations Editor for Graphics