Timelines, Story Maps

Andrew Ba Tran
November 11, 2015

Timelines

Context of events can be told effectively with an interactive timeline.

The mix of multimedia, words, graphics, and video can provide an indepth look at an important topic.

Boston Globe

This feature is based on a horizontal axis and buttons.

New York Times

This is a scroll-based timeline. The line with dots representing events sticks to the top of the browser. This is great for mobile.

Washington Post

Another horizontally-inclined timeline. This time has photos and YouTube embedded videos.

WNYC

Fold

Tools to make timelines

Story maps

A story can also be geographically driven, especially if it unfolds across several places over time.

We'll go over examples of some effective examples and then look at some tools that you can use to create your own.

Riding the Silk Road (New York Times)

Riding the Silk Road (New York Times)

This interactive integrates the Silk Road map with photographs and cinemagraphs (looped GIFs) to capture scenes along the route.

Each dot on the map corresponds with a new piece of multimedia.

Beyond the Border (The Guardian)

Beyond the Border (The Guardian)

Beyond the Border (The Guardian)

These step-by-step maps adds context to a long story about the hardships migrants endure to cross the border and highlights the context in their country that would compel them to leave.

It uses SVG shapes and D3 transitions from charts and maps and text with ease.

This time, the emphasis is on the photos and the relation to one spot to another, emphasized by the zooming out and in between locations. This uses mapbox.

Dunkin Donuts vs Starbucks (Boston Globe)

Dunkin Donuts vs Starbucks (Boston Globe)

This starts out as a large map if people want to merely zoom in on the areas they want.

But there's also a guided tour option that jumps to a city and has annotated context to tell a story.

Sometimes, you're telling a state-by-state history of events.

Story Map

Some of these approaches give the reader a sense of motion through the journey as refernced by text.

Adds a sense of the physical, the distance, and also time.

The other maps are a cartographic narrative.

The New York Times map is navigating using the scroll button, which is natural, like gravity.

The others use buttons, like a slide show.

Tools to make story maps