Animations, interactive elements, and Shiny

Prof Ron Yurko

2024-10-09

Reminders, previously, and today…

  • Infographic is due Friday night!

  • You should be working on your presentations for Jamie…

  • Walked through basics of text data with bag-of-words representation

  • Created word cloud visualizations of counts and bar charts of TF-IDF values

TODAY:

  • Discuss the role of animations

  • Walk through interactive visualizations

  • Introduction to Shiny for creating apps

Storytelling with animation…

f1_data_ex |>
  ggplot(aes(x = round, y = points, group = name, color = name)) +
  geom_line(size = 2) +
  scale_x_continuous(breaks = seq(1, 17, 1)) +
  labs(title = "The race for third place in the 2020 F1 season",
       y = "Accumulated points", x = NULL) +
  theme_bw()

Storytelling with animation…

Use gganimate to add animations

We could incrementally reveal the results at each stage to emphasize the story of progression

library(gganimate)
f1_data_ex |>
  ggplot(aes(x = round, y = points, group = name, color = name)) +
  geom_line(size = 2) +
  scale_x_continuous(breaks = seq(1, 17, 1)) +
  labs(title = "The race for third place in the 2020 F1 season",
       y = "Accumulated points", x = NULL) +
  theme_bw() +
  transition_reveal(round)

Use gganimate to add animations

Using animation to add a dimension

txhousing |> 
  group_by(city, year) |> 
  summarize(median = mean(median, na.rm = TRUE),listings = mean(listings, na.rm = TRUE)) |> 
  ggplot(aes(x = median, y = listings, color = (city == "Houston"), 
             size = (city == "Houston"))) +
  geom_point(alpha = 0.5, show.legend = FALSE) +
  scale_color_manual(values = c("black", "darkred")) +
  scale_size_manual(values = c(2, 4)) +
  scale_x_continuous(labels = scales::dollar, name = "Median Price") +
  scale_y_continuous(labels = scales::label_number(scale_cut = scales::cut_short_scale())) +
  theme_bw() +
  labs(x = "Median Price", y = "Avg. of Monthly Listings",
       subtitle = "Houston in red")

Using animation to add a dimension

Using animation to add a dimension

txhousing |> 
  group_by(city, year) |> 
  summarize(median = mean(median, na.rm = TRUE), listings = mean(listings, na.rm = TRUE)) |> 
  ggplot(aes(x = median, y = listings, color = (city == "Houston"),
             size = (city == "Houston"))) +
  geom_point(alpha = 0.5, show.legend = FALSE) +
  scale_color_manual(values = c("black", "darkred")) +
  scale_size_manual(values = c(2, 4)) +
  scale_x_continuous(labels = scales::dollar, name = "Median Price") +
  scale_y_continuous(labels = scales::label_number(scale_cut = scales::cut_short_scale())) +
  theme_bw() +
  labs(x = "Median Price", y = "Avg. of Monthly Listings",
       subtitle = "Houston in red", title = "Year: {frame_time}") + 
  transition_time(year)

Using animation to add a dimension

Reminders about animation

Some key points to think about before adding animation to a visualization:

  1. Always make and describe the original / base graphic first that does NOT include animation.
  1. Before adding animation to the graph, ask yourself: How would animation give you additional insights about the data that you would otherwise not be able to?
  1. Never add animation just because it’s cool!
  1. When presenting, make sure you explain exactly what is being displayed with animation and what within the animation you want to emphasize. This will help you determine if animation is actually worth including.

A bridge between R and JavaScript

  • JavaScript enables web developers to create client-side web applications

  • Computations are happening in the client’s browser, instead of the host’s web servers

  • D3 (or D3.js) is the most popular JavaScript library for client-side dynamic data visualizations

    • D3 == ‘data-driven documents’

Leaflet: interactive HTML maps

  • addTiles(): builds layer with static map (default from OpenStreetMap)

  • addMarkers(): add marker at point location, e.g., CMU

  • Use tidygeocoder for spatial queries

cmu <- 
  tibble(address = "Carnegie Mellon University, Pittsburgh, PA") |>
  tidygeocoder::geocode(address, method = "osm")

library(leaflet)
leaflet() |> addTiles() |>
  addMarkers(data = cmu)

Leaflet: interactive HTML maps

DataTables (DT) package for interactive tables

library(DT)
datatable(penguins[, 1:6], options = list(pageLength = 5))

We have a plain plot…

scatter_plain <- penguins |> 
  ggplot(aes(x = body_mass_g, y = bill_length_mm, 
             color = species)) +
  geom_point(alpha = 0.5, size = 2) +
  labs(x = "Body Mass (g)", y = "Bill Length (mm)") +
  theme_bw()
scatter_plain

We have a plain plot…

Make it interactive with Plotly!

library(plotly)
ggplotly(scatter_plain)

Customize the tooltip

scatter_upd <- penguins |> 
  ggplot(aes(x = body_mass_g, y = bill_length_mm, 
             color = species, 
             text = paste("sex:", sex))) +
  geom_point(alpha = 0.5, size = 2) +
  labs(x = "Body Mass (g)", y = "Bill Length (mm)") +
  theme_bw()

ggplotly(scatter_upd, tooltip = c("text", "species"))

Customize the tooltip

Putting it all together with dashboards

  • Dashboards are popular way to make data and visualizations available to clients, managers, stakeholders, etc. to help with decision making

  • Typically include a mix of graphics and text, depending on the context

Interactive web apps with Shiny

Shiny is used to build interactive web applications in R

You do NOT need to be a web developer to create Shiny apps, you just need to learn some additional syntax to augment your R code

Every Shiny app consists of two scripts (can be saved into one file app.R)

  1. ui.R: controls user interface, sets up the display, widgets for user input
  • New code specific to Shiny
  1. server.R: code to generate / display the results! Communicates with ui.R with reactive objects: processes user input to return output
  • Traditional R code: load packages, data wrangling, create plots

Can be run locally or deployed on a Shiny app server for public viewing

DO IT LIVE

Recap and next steps…

  • Discussed the role of animation in visualizations

  • Overview of different interactive elements and basics of Shiny

  • I never discussed making fancy tables, but check out the gt package