---
title: "Animations, Interactive Elements, and Shiny"
subtitle: "Lecture 12"
author: "Shannon Gallagher"
date: "October 5, 2026"
date-format: long
format:
  revealjs:
    theme: ../mads-36613-assignments/lecture_drafts/theme.scss
    slide-number: c/t
    chalkboard: true
    code-fold: show
    code-line-numbers: true
    smaller: true
    linestretch: 1.25
    fig-width: 8
    fig-height: 4.5
    footer: "MaDS Data Visualization · Fall 2026"
execute:
  echo: true
  warning: false
  message: false
---

```{r setup}
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?

::: {.checkpoint}
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

```{r animation-pattern, eval=FALSE}
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

```{r plotly-pattern, eval=FALSE}
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

::: {.checkpoint}
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](../../noaa-dashboard.html) 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.

::: {.source-note}
The [commented `app.R`](../demos/noaa-shiny-dashboard/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

::: {.checkpoint}
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.