Show me step-by-step

I’m a fan of what I’ve been calling “stepper maps”: interactive maps with navigation tools to let users explore the locations of events in chronological order. I guess you could also call them “timeline maps.”

A Chicago Tribune interactive on gun smuggling really drew my attention to this design:

A few months later they also released a taco map (and apparently an admin tool called “the taco app”) that takes users on a tour of the suburban taco joints writer Kevin Pang profiled. These examples stood out to me because they’re so directed and focused on elements of the story. The navigation felt natural to me, probably because I’ve grown so used to maps with forward/back buttons:

Zach Wise at the Northwestern Knight Lab just released a developer version of StoryMapJS, which connects maps to timeline storytelling with familiar navigation tools. The New York Times is also riffing on stepper maps with their immersive interactives of the Silk Road and the Russian heartland. These examples don’t have forward/back buttons, but the story elements are connected to the map to the guide reader across settings.

I took a stab at my own simple stepper map using data I collected on all the wifi cafes I visited in New York this summer:

A standalone version (with url routing!) is here. Thanks Ryan Nagle for showing me step-by-step how to integrate Backbone.js with maps. Code for my stepper map is on GitHub.