Case Study 1: The Warming Stripes Animation

Case Study 1: The Warming Stripes Animation

Ed Hawkins's warming stripes (Chapter 11 Case Study 2) have been animated in several ways over the years. The animated version builds the stripes one year at a time, turning a static image into a short video that reveals the warming as a process. This case study examines what the animation adds and what it loses.

The Situation

Chapter 11's case study covered Ed Hawkins's warming stripes — a horizontal sequence of colored bars, each representing one year's temperature anomaly, colored from blue (cold) to red (warm). The chart became one of the most widely-shared climate visualizations ever because of its extreme minimalism and visceral impact. It compressed 170+ years of climate data into a single strip of color that anyone could read in a second.

In the years after the original release, Hawkins and others produced animated versions of the same chart. The animated version starts with a blank (or historical) section and adds one year at a time, building the full stripe from left to right. Over 5-10 seconds of animation, the viewer watches the temperatures transition from mostly-blue to mostly-red. The final frame is identical to the static warming stripes.

The animated version has been shared on social media, embedded in news articles, projected on buildings, and used in science education. It sits alongside the static version as a complementary tool — not a replacement, but an extension. For some audiences and contexts, the animation adds something the static image cannot. For others, the static version is still the right choice.

This case study builds the animation in matplotlib, examines what the animation adds over the static version, and identifies when each form is appropriate.

The Data

The underlying data is the same as Chapter 11: global annual temperature anomalies from ~1850 to the present, typically from the HadCRUT or NASA GISS datasets. For this case study, assume you have years and anomalies as numpy arrays.

import numpy as np

years = np.arange(1850, 2025)
# Synthetic data with a warming trend
anomalies = -0.3 + (years - 1850) * 0.01 + np.random.randn(len(years)) * 0.15

The data is small (175 data points) and simple (one number per year). The matplotlib code for the animation is correspondingly simple.

The Animation

Here is a complete matplotlib implementation:

import numpy as np
import matplotlib.pyplot as plt
import matplotlib.colors as mcolors
from matplotlib.animation import FuncAnimation

# Set up the figure
fig, ax = plt.subplots(figsize=(14, 4))

# Normalize the anomalies for the colormap
vmin = anomalies.min()
vmax = anomalies.max()
norm = mcolors.Normalize(vmin=vmin, vmax=vmax)
cmap = plt.cm.RdBu_r

# Pre-compute the colors for each year
colors = [cmap(norm(a)) for a in anomalies]

# Limits and styling
ax.set_xlim(years.min() - 0.5, years.max() + 0.5)
ax.set_ylim(0, 1)
ax.set_axis_off()

# Empty list to hold the bar artists as they are added
bars = []

def update(frame):
    if frame == 0:
        # Clear all bars at the start (for loops)
        for bar in bars:
            bar.remove()
        bars.clear()
    else:
        # Add one new bar for the current year
        year = years[frame - 1]
        color = colors[frame - 1]
        bar = ax.bar(year, 1, width=1, color=color, edgecolor="none")[0]
        bars.append(bar)
    return bars

ani = FuncAnimation(
    fig,
    update,
    frames=len(years) + 1,
    interval=40,
    blit=False,  # blit=False because we add new artists each frame
)

ani.save("warming_stripes.gif", writer="pillow", fps=25, dpi=100)

Walk through the design decisions:

1. Pre-compute the colors. The colormap lookup is expensive; doing it once at the start avoids repeating the computation every frame.

2. Bars list as state. The bars list tracks the Rectangle artists that have been added so far. Each frame adds one new bar. When the animation loops, the update function clears the list and starts over.

3. blit=False. Because the animation adds new artists each frame (rather than modifying existing ones), blit would not work. This is a slower rendering mode, but for a 175-frame animation it is still acceptable.

4. Minimal styling. The ax.set_axis_off() call hides all spines, ticks, and labels. The animation, like the static version, is pure colored bars against a white background. No axes, no title, no annotations — the color is the only encoding.

5. Interval of 40 ms. At 25 fps, the 175-frame animation takes about 7 seconds to play. This is long enough to show the progression but short enough to hold viewer attention.

6. GIF output at 100 DPI. A GIF at 100 DPI is sufficient for web display and social media sharing. Higher DPI would produce larger files without much visual improvement.

The result is a GIF that builds the warming stripes one year at a time, transitioning smoothly from mostly-blue (early years) to mostly-red (recent years). The final frame is the static warming stripes chart.

What the Animation Adds

Compared to the static warming stripes, the animation adds several specific things:

1. A sense of process. The viewer watches the warming happen rather than seeing the end state. The accumulation of red bars over time conveys "this is unfolding" in a way that a single static image cannot.

2. Temporal directionality. In the static stripes, the left-to-right order is convention, not explicit — readers have to know that time flows left-to-right. In the animation, the temporal flow is unmistakable because the bars appear in sequence. This is especially useful for audiences who are seeing the chart for the first time and might not know which side is "past" and which is "future."

3. Pacing for emphasis. The animation can pause at specific moments — a key year, an extreme event, a transition point — to draw attention. The static chart cannot. If the animation slows briefly at the 1960s-70s (when warming accelerated), the viewer is cued to notice that region.

4. Reveal for a live audience. In a presentation or classroom, an animated build gives the speaker something to talk about during the animation. "In 1850, temperatures were relatively stable. Now watch what happens as we move into the 20th century..." The animation provides a visual anchor for verbal narration.

5. Shareability in animated formats. Some social media platforms (Twitter, some Instagram formats) prefer video or GIF content over static images. The animation reaches audiences that a static image might not.

What the Animation Loses

The animation is not strictly better than the static version. It also loses several things:

1. Instant read time. The static warming stripes can be absorbed in one second. The animation takes 7 seconds to play — 7x longer. For audiences with very short attention spans (social media scrolls, slide transitions), the static version is more reliable.

2. Print/PDF compatibility. The animation only works in formats that support motion (web, slide decks with video, social media). Print publications, PDF reports, and academic papers cannot include animations. The static version is the only option for these.

3. Precise comparison between specific years. In the static version, the reader can look at any two years simultaneously and compare them directly. In the animation, the reader can only see one "current state" at a time; to compare specific years, they would need to pause or scrub through the animation.

4. Memorability as a single image. The static warming stripes are memorable because they are a single image — the reader can picture them mentally. An animation is harder to picture; the reader remembers "something building up in red" without the specific final form. For viral sharing, the memorable single image wins.

5. The thumbnail problem. Social media platforms often show animations as their first frame (which might be mostly-empty for a "building" animation). The static version has a single, always-meaningful thumbnail. The animation may not look appealing until it starts playing.

When Each Form Is Right

Based on the trade-offs, here is a pragmatic guide:

Use the static warming stripes when: - The chart will be printed or included in a PDF. - The audience has very short attention (e.g., Twitter scroll). - Viewers need to compare specific years directly. - The chart will be shared primarily as a thumbnail or single image. - The context is a scientific publication.

Use the animated warming stripes when: - The chart will be presented live (conference talk, classroom). - The context supports video (slide deck, webpage, Instagram story). - The audience has a few seconds of attention. - The process of warming is the key message. - The audience is first-time viewers who need temporal flow to be explicit.

Use both when: - A major report or story can include both — the animation as a "watch this" moment and the static version as a "see the full data" reference. - An article has space for multiple visualizations of the same story. - The context is important enough to justify producing both (e.g., IPCC reports, major newspaper features).

The key insight is that the animation and the static chart are complementary, not competitive. They serve different contexts and audiences. A chart maker who has both versions available can choose the right one for each specific use.

Lessons for Practice

1. Animation is a design choice, not a technical upgrade. Animating the warming stripes is not a "better version" of the static chart; it is a different version for different contexts. Choose based on the use case, not on the assumption that motion is always better.

2. Pre-compute what you can. The color lookup for each bar is done once before the animation starts, not in every frame. This is a general pattern: move static work out of the update function.

3. Know when blit cannot help. Animations that add new artists each frame cannot use blit, because blit only re-renders a stable set of artists. For these, accept the slower rendering mode.

4. Short is usually better. The 7-second animation is long enough to show the progression but short enough to hold attention. A 30-second version would lose most viewers. Test your animations for appropriate duration.

5. End with a meaningful static frame. The final frame of the animation is identical to the static warming stripes — so readers who watch the animation and then share a screenshot get the full static version as the still.

6. Combine with the static version. For important stories, produce both the animated and static versions. Use the animation for presentations and the static for print. The extra production effort is usually worthwhile.

Discussion Questions

On the instant-read advantage of the static version. The static warming stripes can be absorbed in one second. The animation takes seven. Is the longer read time a fair trade-off for the added sense of process, or is speed always the higher priority?
On the thumbnail problem. Animations often look empty or incomplete at their first frame. Could the warming stripes animation be designed to have a meaningful first frame (e.g., starting at the final state and rewinding)? What would change?
On the educational context. In a classroom, the animation provides a visual anchor for verbal narration. Does this make animation more valuable for teaching than for publication? Should teachers prioritize animated versions of canonical charts?
On the ethics of animation. Chapter 4 argued that hiding uncertainty is a form of visualization dishonesty. Does animation add or remove honesty? Does the process of watching the warming happen reveal more of the truth, or does it add drama that distorts the steady-state story?
On audience adaptation. The warming stripes work for public audiences; the animation works for presentation audiences. What about for scientific audiences — would they prefer the full monthly-anomaly heatmap from Chapter 14 instead?
On the general principle. Beyond warming stripes, what other canonical charts would benefit from an animated version? What charts would definitively not benefit?

The warming stripes animation is a small example of a general principle: the same data can be visualized multiple ways, each appropriate for a specific context and audience. The animated version does not replace the static version; it extends the chart maker's toolkit. For presentations, you reach for the animation; for publications, the static image. Knowing when each is right is part of the craft.