Animate Maps with Plotly Specific. Invigorate Your Infographics! | by Lee Vaughan | Jul, 2023

The next code was written in Jupyter Lab and is introduced by cell.

Putting in and Importing Libraries

Plotly Specific is a high-level model of the Plotly graphing library and requires Plotly as a dependency. You possibly can set up it with both conda or pip.

Right here’s the conda set up:

conda set up -c plotly plotly_express

And right here’s the pip model:

pip set up plotly

To put in the pandas knowledge evaluation bundle, use both:

conda set up pandas

or:

pip set up pandas

We’ll additionally want the NumPy (Numerical Python) library. You shouldn’t want to put in it straight because it’s included with pandas.

Listed below are the imports. We’re utilizing aliases for simpler typing:

import numpy as np
import pandas as pd
import plotly.categorical as px

Loading and Making ready the Information

For comfort, I’ve created a CSV file of the required knowledge and saved it on this Gist. The file consists of columns for the state identify, its official abbreviation, the date it entered the union, and the order through which it entered. The file is sorted in ascending order by date. We’ll load it as a pandas DataFrame as a result of Plotly Specific performs very effectively with pandas.

Along with the day, we’ll need to animate the information utilizing the 12 months of statehood. This may make it simpler to acknowledge states that entered the union in the identical 12 months. To do that, we’ll make a brand new DataFrame column, named 12 months, and typecast it as an integer.

# Load the statehood knowledge and put together a "12 months" column:
df = pd.read_csv('https://bit.ly/44qtTyk')
df['Year'] = df['date_entered'].str[-4:].astype('int')
df.head(3)

Plotting a Static Choropleth Map Coloured by Date of Entry

Making a choropleth map in Plotly Specific couldn’t be simpler. Simply name the built-in choropleth() methodology.

The primary argument is the DataFrame that we need to animate. After that, we simply must reference columns within the DataFrame.

Plotly Specific additionally comes with some built-in geospatial datasets. To pick out the one for American states, we’ll use the scope, locationmode, and areas parameters. The abbr argument, used with the areas parameter, represents the state’s official abbreviation, reminiscent of NY for New York and TX for Texas.

For shade, I selected the Portland shade scale. if you wish to attempt one thing completely different, then go to the Plotly docs to see the accessible choices.

Professional Tip: to reverse a Plotly shade bar, append “_r” to the tip of its identify.

# Plot the DataFrame as a static map:
fig = px.choropleth(df, 
areas='abbr', 
locationmode='USA-states', 
shade='12 months', 
color_continuous_scale=px.colours.diverging.Portland, 
scope='usa',
hover_data=['state', 'order', 'Year'],
title='States by Date of Entry into Union')
fig.update_layout(width=750, peak=500)

The ensuing map is presently static (non-animated), nevertheless it comes with many interactive options. You possibly can hover the cursor over a state to see a pop-up window of its metadata. The toolbar on the higher proper permits actions reminiscent of taking a screenshot, zooming, panning, field choosing, and resetting to the “dwelling” display screen.

Regardless of all this performance, the map is just a little boring. Let’s jazz it up by including animation.

Animating by Entry Date

You possibly can animate the earlier map with only one additional parameter, animation_frame. Right here, we animate utilizing the data_entered column, which captures the date the state entered the union.

To make sure that the colour bar consists of the information’s minimal and most values, we have to embody an argument for the range_color parameter. In any other case, the dimensions will default to the worth of the state actively being displayed. This time, I selected the Earth shade bar, as a result of it has an vintage, “historic” look.

# Plot the Dataframe as an animation exhibiting every state so as of admission:
fig = px.choropleth(df, 
areas='abbr', 
locationmode='USA-states', 
shade='12 months', 
color_continuous_scale=px.colours.diverging.Earth, 
scope='usa',
hover_data=['state', 'order'],
animation_frame='date_entered',
range_color= (min(df.12 months), max(df.12 months)),
title='The Date Every State Entered the Union')
fig.update_layout(width=750, peak=500)

To run the animation, both press the play button or use the slider. Just one state will show at a time. The attention-grabbing factor right here is that the states don’t enter in a logical development from east to west, however “soar round” rather a lot from north to south and from east to west.

Animating by Entry 12 months

To see all of the states that entered the union in a given 12 months, simply change the animation_frame argument to the 12 months column.

# Animate the states grouped by 12 months of admission:
fig = px.choropleth(df, 
areas='abbr', 
locationmode='USA-states', 
shade='12 months', 
color_continuous_scale=px.colours.diverging.Earth, 
scope='usa',
hover_data=['state', 'order'],
animation_frame='12 months',
range_color= (min(df.12 months), max(df.12 months)))
fig.update_layout(width=750, peak=500)

Animating the States Grouped Over a Massive Timeframe

Whereas animating the states by their day or 12 months of entry is attention-grabbing, it’s onerous to get the massive image. Within the following instance, we’ll lump the states collectively over 4 vital timespans:

1. When the 13 unique colonies entered the union
2. The following enlargement as much as the Civil Battle
3. The settling of the wild west
4. The twentieth century

To group the states over these timespans, we’ll use NumPy’s choose() methodology to create a brand new column within the DataFrame. This requires three steps:

1. Create a listing of the situations for the brand new column utilizing date ranges,
2. Create a listing of values for the brand new column for every situation,
3. Create the brand new column by calling the np.choose() methodology and passing it the lists from the 2 earlier steps.

We’ll identify the brand new column Timespan. To make use of it for the animation, change the animation_frame argument to Timespan.

# Animate the states grouped by giant timeframes:
situations = [(df['Year'] >= 1787) & (df['Year'] <= 1790),
(df['Year'] >= 1791) & (df['Year'] <= 1860),
(df['Year'] >= 1861) & (df['Year'] <= 1900),
(df['Year'] >= 1901) & (df['Year'] <= 1959)]
values = ['Original 13 Colonies', 'Antebellum Expansion', 
'Westward Expansion', 'Twentieth Century']
df['Timespan'] = np.choose(situations, values)
# Animate the states grouped by 12 months of admission:
fig = px.choropleth(df, 
areas='abbr', 
locationmode="USA-states", 
shade='12 months', 
color_continuous_scale=px.colours.diverging.Earth, 
scope="usa",
hover_data=['state', 'order'],
animation_frame='Timespan',
range_color= (min(df.12 months), max(df.12 months)))
fig.update_layout(width=750, peak=500)
# Set the animation velocity (in millseconds):
fig.format.updatemenus[0].buttons[0].args[1]["frame"]["duration"] = 2000
fig.present()

Notice that we modified the velocity of the animation (in milliseconds) within the final line. You need to use this code with any earlier animations when you discover them too quick.

Making Static Infographics

What if you wish to seize the outcomes as static pictures, for instance, to make handouts?

Effectively, for jobs like this, I prefer to “hardwire” the outcomes by copying and enhancing the grasp DataFrame after which looping by the copies to plot the maps. This supplies for higher management over issues like determine titles and shade bar ranges.

And to make sure that the colour bar consists of the finish members for every time interval, we’ll present 4 lists that specify the dates we need to see annotated.

# Make static maps of the states grouped over giant timeframes:
# Create new DataFrames for designated time spans
original_13 = df[(df['Year'] >= 1787) & (df['Year'] <= 1790)].copy()
antebellum_expansion = df[(df['Year'] >= 1791) & (df['Year'] <= 1860)].copy()
western_expansion = df[(df['Year'] >= 1861) & (df['Year'] <= 1900)].copy()
twentieth_century = df[(df['Year'] >= 1901) & (df['Year'] <= 1959)].copy()
# Make a listing of DataFrames to loop by
time_frames = [original_13, antebellum_expansion, 
western_expansion, twentieth_century]
# Make a listing of the dates you need to see within the shade bar
colorbar_dates = [[1787, 1788, 1789, 1790],
[1791, 1800, 1810, 1820, 1830, 1840, 1850, 1859],
[1861, 1870, 1880, 1890, 1896],
[1907, 1920, 1930, 1940, 1950, 1959]]
# Make a listing of the determine titles for every DataFrame
figure_titles = ["Original 13 Colonies (1787-1790)", 
"Antebellum Expansion (1791-1860)", 
"Western Expansion (1861-1900)", 
"Twentieth Century (1901-1959)"]
# Loop by and plot the DataFrames
for i, data_frame in enumerate(time_frames):
fig = px.choropleth(data_frame, 
areas='abbr', 
locationmode="USA-states", 
shade='12 months', 
color_continuous_scale=px.colours.diverging.Earth, 
scope="usa",
hover_data=['state', 'order'],
range_color=(min(data_frame['Year']), 
max(data_frame['Year'])),
title=figure_titles[i])
fig.update_layout(width=750, peak=500)
fig.update_layout(coloraxis_colorbar=dict(tickvals=colorbar_dates[i],
ticks='exterior',
thickness=15))
fig.present()

Static Maps with Persistence

We’re nonetheless not getting the (really) massive image. It will be good to see all the states within the union on a given date.

The code within the following cell “builds up” the map over time. The states added in earlier timeframes stay seen on the map in order that the final map reveals all the states of the union.

To perform this, we have to refilter the grasp DataFrame in order that the minimal worth preserved is all the time 1787. We’ll additionally want a brand new dates listing higher suited to this new visualization.

  # Make static maps of the states grouped over giant timeframes, with persistence:
# Create new DataFrames for designated time spans
original_13 = df[(df['Year'] >= 1787) & (df['Year'] <= 1790)].copy()
antebellum_expansion = df[(df['Year'] >= 1787) & (df['Year'] <= 1860)].copy()
western_expansion = df[(df['Year'] >= 1787) & (df['Year'] <= 1900)].copy()
twentieth_century = df[(df['Year'] >= 1787) & (df['Year'] <= 1959)].copy()
# Make a listing of DataFrames to loop by
time_frames = [original_13, antebellum_expansion, 
western_expansion, twentieth_century]
# Make a listing of the dates you need to see within the shade bar:
colorbar_dates = [1787, 1790, 1800, 1820, 1840, 1859, 
1880, 1896, 1910, 1920, 1940, 1959]
# Make a listing of the determine titles for every DataFrame
figure_titles = ["States through 1790", 
"States through 1860", 
"States through 1900", 
"States through 1959"]
# Loop by and plot the DataFrames
for i, data_frame in enumerate(time_frames):
fig = px.choropleth(data_frame, 
areas='abbr', 
locationmode="USA-states", 
shade='12 months', 
color_continuous_scale=px.colours.diverging.Earth, 
scope="usa",
hover_data=['state', 'order'],
range_color=(min(data_frame['Year']), 
max(data_frame['Year'])),
title=figure_titles[i])
fig.update_layout(width=750, peak=500)
fig.update_layout(coloraxis_colorbar=dict(tickvals=colorbar_dates,
ticks='exterior',
thickness=15))
fig.present()

For brevity, I’m solely exhibiting one of many 4 maps generated by the earlier cell.