Timelines, Story Maps

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.

This feature is based on a horizontal axis and buttons.

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

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

• TimelineJS
• Tik Tok
• Fold
• Timeline Setter
• HSTRY

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.

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.

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.

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.

• A timeline of same-sex marriage in the US Boston Globe

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.

• StoryMap JS
• Odyssey.js
• TimeMapper
• TourBuilder
• Story Maps
• Leaflet.js Playback
• Tripline