Home icon
Data Visualisation Guide

Responsiveness: changing visual encoding

2 minutes read

Responsive data visualisation

After just removing a visualisation, the most radical way to adapt a visualisation for smaller screens is to change its visual encoding, and using another chart type.

In order to show time series with annotations on smaller screens, NPR changed the chart type from a line chart to a heatmap in the following example.

A line chart with 3 lines showing the number of times the words phone, smartphone, or mobile were mentioned in quarterly earnings calls of Yahoo, Google and Microsoft between 2006 and 2016

Source: hbr.org

Source: hbr.org

From an accessibility standpoint, showing a table with the data contained in a visualisation is a good idea. It can also be a good fallback on mobile screens, as demonstrated by this map by the New York Times:

A map of the US with arrows showing the increase in homicide rates in 2015

Source: nytimes.com

A smaller map with numbers, which are labelled with a table below the map

Source: nytimes.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