Animations, Interactive Elements, and Shiny

Lecture 12

Shannon Gallagher

October 5, 2026

source("_setup.R")

Reminders, previously, and today…

• decide when motion encodes a real dimension,
• use interaction to support a task rather than conceal complexity,
• recognize accessibility and reproducibility costs,
• choose among static figures, animation, and interactive tools.

Storytelling with animation…

Animation can help when the message is:

• movement,
• transition,
• accumulation,
• order,
• changing state.

It is usually worse for precise comparison across distant frames.

Use gganimate to add animations

An animated chart still needs:

• stable scales,
• a visible time marker,
• enough time to read each frame,
• a static fallback,
• a clear ending state.

Changing axes can make ordinary change look dramatic.

Checkpoint 1 · Animate or facet?

For monthly storm locations, choose between animation and twelve small multiples. State the audience task that makes your choice better.

Using animation to add a dimension

library(gganimate)

monthly_map +
  transition_time(month) +
  labs(title = "Month: {frame_time}") +
  shadow_mark(alpha = 0.08)

anim_save("storm-events.gif")

The export is an artifact. Save the code, data boundary, dimensions, and frame rate.

A bridge between R and JavaScript

Useful interactions include:

• filtering to a known subgroup,
• looking up an exact value,
• zooming a dense map,
• comparing selected cases,
• revealing details on demand.

“The user can explore” is not a complete design goal.

Make a plain plot interactive with Plotly

library(plotly)

p <- ggplot(state_metrics, aes(event_records, property_damage,
                               text = state_upper)) +
  geom_point()

ggplotly(p, tooltip = "text")

Tooltips should contain the identifiers and values needed for the task—not every column.

Leaflet: interactive HTML maps

Interactive maps should begin at a useful extent and offer:

• a visible legend,
• meaningful popups,
• restrained layers,
• keyboard-accessible alternatives where possible,
• a static summary of the main finding.

Checkpoint 2 · Define the interaction

Write one user story: “A ___ needs to ___ so that ___.” Then specify the single filter, tooltip, or selection that best supports that task.

Putting it all together with dashboards

A dashboard is appropriate when users return to monitor or query changing information.

A fixed report is often better for:

• a stable argument,
• a small number of findings,
• required reading order,
• print or archival use.

Interactive web apps with Shiny

The NOAA Storm Events Explorer connects one audience task to four coordinated views:

• hazards and measure define the comparison,
• the map answers where,
• the seasonal chart answers when,
• the incident table supplies details on demand.

The month play control is purposeful animation: motion encodes time while the annual chart remains visible as a static comparison.

The commented app.R is written as a reading guide from inputs to reactives to outputs.

Accessibility costs

For animated or interactive work, provide:

• a static alternative,
• descriptive text,
• sufficient contrast,
• non-color encodings where needed,
• keyboard access,
• reduced-motion support.

Reproducibility costs

Interactive artifacts add dependencies:

• package and browser versions,
• hosting,
• external tiles or APIs,
• runtime data,
• permissions,
• maintenance.

Use the simplest medium that answers the question.

Checkpoint 3 · Choose the medium

Choose static report, animation, or interactive tool for one NOAA question. Defend the choice using comparison accuracy, audience task, accessibility, and maintenance.

Recap and next steps…

• Motion should encode change, not decorate it.
• Interaction must correspond to a defined user task.
• Every rich medium needs a static and accessible fallback.
• Complexity creates maintenance obligations.

Next: critique, revision, and client communication.