Scrolling In Data Visualization

Examples

Here are a set of videos and links of examples of Scrollytelling in Data Visualizations.

These were collected for my OpenVis Conf Talk on Scrollytelling. Check this link for video, slides, code, and more!

Scrollable Dimension

These are examples of using scroll to show a dimension of the data. They aren't necessarily difficult to implement technically, but provide a way to take advantage of the dynamic nature of the web.

One Mile Scroll

Source: Daniel Eatock

Scroll through an actual mile. Allows for collaborative additions of new heights of things.

One Pixel Moon

Source: Josh Worth

A visualization of the entire solar system, translating physical space to pixels using the measure that the moon is one pixel.

Orbiting Satellites

Source: quartz

Scrolling down, we leave Earth and head towards the atmosphere to understand better just how many satellites are orbiting us from various positions in space.

Scroll as a Trigger

For these, the scroll just starts an animation or visualization. Here, the act of scrolling to a part of the page indicates the viewers readiness to ingest a new piece of content.

Hottest Year on Record

Source: Bloomberg

An initial scroll indicates that the user is ready to experience this visualization, and starts an animation that layers on average temperatures over the years, culminating in this years record breaking statistics.

World Cup Balls

Source: NY Times

The history of the soccer balls used in the World's Cup. Scrolling initiates image loading as well as the start of smooth, infographic style animations to show ball construction, and their changes over the years.

Scroll as Steps

Scrolling can move the viewer through different steps or segments of a visualization. These examples replace the stepper with scrolling.

Color Meaning

Source: Muyueh

Visualizing the relationships between colors and language, this interesting visualization steps us through how Chinese and English languages shape their respective speakers' interpretations of what colors are.

Clubs that Connect

Source: NY Times

An elaborate exploration of the highly interconnected network of World Cup players and the clubs they are associated with. Each step provides more detail on subsets of the data. The final piece allows the user to explore to find the clubs and players they are most interested in.

US Addicted to SUVs

Source: Bloomberg

Scrolling slices and dices a bubble chart every-which-way to show American auto sales trends and the continued rise of the ever expansive SUV.

Continuous Scrolling

Next, instead of atomic increments in the story, the scroll can be incorporated into a continuous transition of the data that is being displayed.

Scrollytelling

Finally, when continuous scrolling is combined with the presentation of many different media types, we reach scrollytelling. Most famous is probably still Snow Fall. Typically combines text with video and images, but there is no reason why interactive components could not be presented in the mix too.

Shark & Minnow

Source: NY Times

Shark And Minnow uses text, images, and video based maps to talk about the difficulties uncertainty faced by the Philippines, and other nearby countries due to China's rising power and desire to assert its dominance.