Scrollytelling Video Mapping

Last year ProPublica posted a story map in the article The Tragedy of North Birmingham which includes an impressive combination of a story map with a scrolling video. As you read through the ProPublica account of the industrial air & land pollution being caused by industry in this Alabama town you might notice how a Mapbox story map seamlessly and impressively elides from a satellite view to an overhead aerial drone video.

If you watch the GIF above closely you can spot the transition from overhead satellite view to scroll driven aerial video. The transition is used to move from a general discussion of the dangerous overall levels of pollution in Birmingham to a focus on one resident, Lamar Mabry. In the story this focus on Lamar is used to personalize the effects of the dangerous levels of toxic contamination in Birmingham. This personalization of the story is achieved visually by transitioning from an overhead map aerial layer of Lamar's neighborhood to a drone video pan into a close-up of his home.

This visual transition is achieved by cutting from a Mapbox Storymap to a ScrollyVideo.js driven video. The Mapbox Interactive Storytelling template allows users to tell stories with maps. It allows you to create mapped data visualizations which include scrolling information windows, that are used to provide written context as a map pans and zooms to show different locations or data. 

In The Tragedy of North Birmingham ProPublica has combined the use of a Mapbox Story Map with ScrollyVideo.js. ScrollyVideo is a JavaScript library which creates responsive scroll driven videos. Apply the library to a video file and you can progress (or rewind) through the video by scrolling on a web page. Using time-stamps in the video you can overlay scrolling information windows, which (as in a Mapbox Story Map) can be used to provide written context to the visual media.

ProPublica combines a Mapbox map with ScrollyVideo video in its article by simply replacing the map element with the ScrollyVideo element. The transition works so well because the map ends with an aerial view which is almost identical to the first frame of the overhead video.