Interactivity

Exercise 11 — PMAP 8551, Summer 2024

Author

Chad Marchong

Published

June 29, 2024


Task 1: Reflection

In this lesson, we learned about visualizing data with interactive processes. With R, there are three ways to make visualizations interactive. Plotly can make single plots interactive, dashboards can be created with flexdashboards, and interactive apps can be created with Shiny. Explorable explanations are intended to change how text is interacted with by making the text capable of active thinking and exploration. This allows for the text to be understandable and critically engaging. Some concepts are challenging to understand in an initial reading and sometimes additional readings. Having interactive text allows the reader to engage with the concepts by actively updating the text to data or information that can be relatable. This can help improve the understandability and retention of what has been read. I have certainly seen good dashboards and bad dashboards. An example of a good dashboard was the Johns Hopkins University’s COVID-19 Dashboard (https://coronavirus.jhu.edu/map.html). The dashboard has data from around the world and the aggregated cases. The dashboard displays the important data and has the ability to filter the data based on geography. Bad dashboards will have too much or not enough data. The colors on the dashboards are not connected with the data. The dashboards don’t have appropriate filters or no filters. Finally, the dashboards are challenging to navigate.

Task 2: Interactive Plots

library(tidyverse)
library(plotly)
library(scales)
library(ggrepel)    # For non-overlapping labels
library(ggtext)     # For fancier text handling
library(extrafont)

# Load data here
data(mtcars)

# Moving car column to active column
mtcars <- mtcars |>
  rownames_to_column(var = "car")

Scatter Plot

# Creating rankings for low and high mpg and top ranking in each group
mtcars_mpg_rank  <- mtcars  |> 
  #group_by (mpg,car) |>
  mutate(low_ranking = rank(mpg, ties.method = "min")) |> 
  mutate(high_ranking = rank(mpg*-1, ties.method = "min")) |>
  mutate(top_ranked = ifelse(low_ranking <= 4, TRUE,
                  ifelse(high_ranking <= 4, TRUE,
                         FALSE))) |>
  mutate(top_four_rank = case_when(
    low_ranking <= 10 ~ "Lowest Ranked MPG",
    high_ranking <= 10 ~ "Highest Ranked MPG",
    TRUE ~ "Ranked MPG"))

# Calling default fonts
update_geom_defaults("text", list(family = "Lato"))
update_geom_defaults("label", list(family = "Lato"))
update_geom_defaults("label_repel", list(family = "Lato"))

#Creating scatter plot with labels and formatting
ggplot(mtcars_mpg_rank,
       aes(x = hp, y = qsec)) +
  annotate(geom = "segment", y = 12.5, yend = 25, x = 350, xend = 0) +
  geom_point(aes(color = top_four_rank)) +
  scale_color_manual(values = c("#2861AA", "#ce0e2d", "#525252")) + 
  scale_fill_manual(values = c("#2861AA", "#ce0e2d")) +
  scale_x_continuous(expand = c(0, 0), breaks = seq(0, 350, 50)) +
  scale_y_continuous(expand = c(0, 0), breaks = seq(0, 25, 2.5))  +
  guides(color = "none", fill = "none") +
  theme_bw(base_family = "Lato") +
  theme(plot.title = element_markdown(face = "bold", size = rel(1.6)),
        plot.subtitle = element_markdown(size = rel(1.3)),
        plot.margin = unit(c(0.5, 1, 0.5, 0.5), units = "lines")) +
  labs(title = "Quarter Mile Time", x = "Horse Power",
    y = "Quarter Mile Time (in Seconds)") + 
  labs(title = "Horse Power of Cars by Quarter Mile Time",
       subtitle = "Top ten cars with the <span style='color: #2861AA'>**highest**</span> or <span style='color: #ce0e2d'>**lowest**</span> miles per gallon (MPG) than the other cars",
       caption = "Source: 1974 Motor Trend US magazine.\nData comprises automobile design and performance for 32 automobiles.")

Interactive Scatter Plot

mtcars_mpg_rank_text  <- mtcars_mpg_rank |> 
  mutate(plot_label = paste0("Car: ", car,
                             case_when(
                                low_ranking <= 10 ~ paste0("<br>",ordinal(low_ranking), 
                                                           " Lowest Ranked MPG"),
                                high_ranking <= 10 ~ paste0("<br>",ordinal(high_ranking), 
                                                            " Highest Ranked MPG"),
                                TRUE ~ ""), "<br>", "<br>",
                              "Mile Per Hour: ", mpg, " MPG",
                             "<br>", 
                              "Horse Power: ", hp, " HP",
                             "<br>",
                              "Quarter Mile Time: ", qsec, " seconds",
                             "<br>", "<br>"))


#Creating scatter plot with labels and formatting
interactive_mtcars_plot <- ggplot(mtcars_mpg_rank_text,
       aes(x = hp, y = qsec)) +
  annotate(geom = "segment", y = 12.5, yend = 25, x = 350, xend = 0) +
  geom_point(aes(color = top_four_rank, text = plot_label)) +
  scale_color_manual(values = c("#2861AA", "#ce0e2d", "#525252")) + 
  scale_fill_manual(values = c("#2861AA", "#ce0e2d")) +
  scale_x_continuous(expand = c(0, 0), breaks = seq(0, 350, 50)) +
  scale_y_continuous(expand = c(0, 0), breaks = seq(0, 25, 2.5))  +
  guides(color = "none", fill = "none") +
  theme_bw(base_family = "Lato") +
  theme(plot.title = element_markdown(face = "bold", size = rel(1.6)),
        plot.subtitle = element_markdown(size = rel(1.3)),
        plot.margin = unit(c(0.5, 1, 0.5, 0.5), units = "lines")) +
  labs(title = "Quarter Mile Time", x = "Horse Power",
    y = "Quarter Mile Time (in Seconds)") + 
  labs(title = "Horse Power of Cars by Quarter Mile Time",
       subtitle = "Top ten cars with the <span style='color: #2861AA'>**highest**</span> or <span style='color: #ce0e2d'>**lowest**</span> miles per gallon (MPG) than the other cars",
       caption = "Source: 1974 Motor Trend US magazine.\nData comprises automobile design and performance for 32 automobiles.")


ggplotly(interactive_mtcars_plot, tooltip = "text")

Task 3: Create a Quarto Dashboard

Click here for Quarto dashboard