Home icon
Data Visualisation Guide

Responsiveness: animation and streaming data

2 minutes read

Responsive data visualisation

When space is limited, and visualisations or small multiples cannot be presented next or on top of each other in one view, the visualisations can be “stacked in time” by showing them in sequence over time. A popular file format for short animations of data visualisations is the GIF file.

3 small multiple maps showing the share of Chicago residents within 1 or 2 miles of Wal-Mart in 2005, 2010 and 2015

On wider screens, this small series of maps are presented next to each other. Source: npr.org

An animation that shows the 3 maps above in sequence

On smaller screens, the user is shown a looping gif animation. Source: npr.org

The reverse strategy is sometimes also used: showing an animated version of a chart on bigger screens, and a static one on smaller ones. In those cases, the static chart for smaller screens is usually a fallback, because making the animation work properly would involve much development work.

This visualisation showing the share of men and women at different levels in the workforce is animated on scroll on large screens. Source: wsj.com

On smaller screens, the animated chart is replaced with a static version. Source: wsj.com

Related pages

Responsiveness: adapting annotations, axes and legends

Responsive text annotations

Choosing charts: the medium

Scaling charts

Responsive data visualisation: introduction

Responsiveness: scaling visualisations

Responsive data visualisation