Six Ways to Visualize Change Over Time in Web Maps Sep 19, 2021

Data visualization is an attempt to answer questions about raw data. These questions typically start with words like what; how much; when; and of course, where. In addition to these, people frequently ask questions about how a data variable changes over time. These could be questions such as the following:

How did population change from 2010 to 2020?
Over the last 30 years, has the climate been warmer or cooler?
Where has voter turnout increased or decreased since the last election?
In this article, I demonstrate six ways to visualize change over time using the ArcGIS API for JavaScript with the following approaches:

1.Toggle layer visibility
2.Swipe widget
3.Side-by-side views
4.Stacked rings
5.Above-and-below theme

Toggle layer visibility in this app to explore the average educational attainment in 2010 compared to 2020.
Pink areas show where women outperform men in school. Yellow areas show where men outperform women. The 2020 numbers show an overall increase in women outperforming men in school from 2010 compared to 2020.

1 Toggle Layer Visibility
The classic way to compare change is to display the data in separate layers and toggle each layer’s visibility on and off. I created an app that visualizes average educational attainment for Mexico in 2010 and 2020 by adding both layers to a GroupLayer with an exclusive visibility mode property. That makes it easy for the user to toggle layers off and on using the LayerList widget as shown in Listing 1.

This approach works well when two layers differ greatly, and those differences can easily be spotted when layer visibility changes. This is generally true of choropleth maps (maps that use polygons with a fill color). This approach is not as effective when the layers use graduated symbols.
Listing 1
The Swipe widget splits the view of a feature, so that values at two times can be viewed simultaneously.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.