Static to Interactive

The first example we will show is how to turn a static figure created with ggplot2 into an interactive version with plotly. The ggplotly() function from the plotly package is the ticket to doing this. Below is an example of creating a static scatterplot with ggplot2. Notice that I save this figure into the object named, p. This is then passed to the ggplotly() function to generate the equivalent plotly interactive figure. I did not explicitly print the static image, but I encourage you to print out the static image, named p here, to verify that it is indeed the same figure.

library(tidyverse)
library(plotly)
p <- ggplot(data = midwest) +
  geom_point(mapping = aes(x = popdensity, y = percollege))
ggplotly(p)

The interactive version allows you to hover over the points to see the specific values. In addition, there are specific ways to interact with the figure that show up just above the figure itself. These options include, zoom, pan around the image, toggle spike lines, save a png static image, compare points on hover, etc. There are also options to select data points, these are most useful when you link plots together in web-based applications so that a single image can be used to select the points that will show up in subsequent figures. This will be explored in more detail later.

p <- ggplot(midwest, 
       aes(x = popdensity, y = percollege, color = state)) +
  geom_point() + 
  scale_x_continuous("Population Density", 
                     breaks = seq(0, 80000, 20000)) + 
  scale_y_continuous("Percent College Graduates") + 
  scale_color_discrete("State") + 
  theme_bw()
ggplotly(p)

Your Turn

1. Using the starwars data, create a static ggplot and use the ggplotly function to turn it interactive.

Grouped bar plot

Building off the histogram example above, let’s create a bar chart. In the plotly syntax, the add_histogram() function is used for true histograms and for bar charts. Very confusing! The primary difference is that bar charts are created when a categorical variable is placed on the x-axis. In the example below, the character race is placed on the x-axis. In addition, the Film is specified with different colors, this allows the creation of bars for each unique Film and by default are placed as dodged bar charts.

plot_ly(lotr, x = ~Race, color = ~Film) %>% 
  add_histogram()

Bar plot of proportions

As we discussed when talking about static visualizations, dodged bar charts can be difficult to explore differences across the films due to differences in how popular each race is across the movies. In this case, normalizing the bar chart and stacking them based on the proportion each movie contains out of the total for each race. plotly does not do this by default, instead computations of these proportions need to be done first, then this summarized data can be plotted. Below is an example of doing this. First, the counts are calculated by race and film, then this is joined using another count just of race. This second count is how the standardization will be done. I encourage you to explore the lotr_prop data to understand what the data looks like.

These data are then passed to the plot_ly function after calculating the individual proportion of each race and film. To plot these bars, the add_bars() function is used to create the bars and finally, using the layout() function, the argument barmode = "stack" is used to create the final figure show. I encourage you to explore intermediate steps to understand what the output looks like in each step along the way.

## number of diamonds by cut and clarity (n)
lotr_count <- count(lotr, Race, Film)
## number of diamonds by cut (nn)
lotr_prop <- left_join(lotr_count, count(lotr_count, Race, wt = n), 
                       by = 'Race')

lotr_prop %>%
  mutate(prop = n.x / n.y) %>%
  plot_ly(x = ~Race, y = ~prop, color = ~Film, width = 900) %>%
  add_bars() %>%
  layout(barmode = "stack")

Scatterplots by Hand

Scatterplots are similar to the bar charts, the main difference is that variables are passed to both the x and y axes and the add_markers() function is used to create the scatterplot. Markers are plotly’s equivalent to points from ggplot2.

plot_ly(midwest, x = ~popdensity, y = ~percollege) %>%
  add_markers()

plot_ly(midwest, x = ~popdensity, y = ~percollege) %>%
  add_markers(symbol = ~state)

plot_ly(midwest, x = ~popdensity, y = ~percollege) %>%
  add_markers(color = ~state, color = ~state)

Line Graph

Line graphs have the same specification as the scatterplots in that the x and y axes have to be specified and the add_lines() function is used. In the example below, I first summarise the number of tropical storms that occurred each year from 1975 to 2015, then plot these values with a line plot. Not shown in the examples, but if there are multiple trajectories that you wish to plot, you can distinguish these with color or linetype aesthetics similar to the changing of markers or colors shown with scatterplots.

storms_yearly <- storms %>%
  group_by(year) %>%
  summarise(num = length(unique(name)))

plot_ly(storms_yearly, x = ~year, y = ~num) %>%
  add_lines()

Subplots

There are a few different ways to create subplots or facetted plots using ggplot2 terminology. In all of these elements, the subplot() function from plotly will be used. Three ways will be shown to create subplots, one that manually creates each unique plotly figure and combine with subplot(), a second will create a function that can be passed to a list, and the final will use facetting within ggplot2 and pass to the subplot() function.

storm_summary <- storms %>%
  group_by(year) %>%
  summarise(max_wind = max(wind),
         min_pressure = min(pressure))

p1 <- plot_ly(storm_summary, x = ~year, y = ~max_wind) %>%
  add_lines(name = 'Max Wind')
p2 <- plot_ly(storm_summary, x = ~year, y = ~min_pressure) %>%
  add_lines(name = 'Min Pressure')
subplot(p1, p2)

one_plot <- function(d) {
  plot_ly(d, x = ~Words) %>%
    add_histogram() %>%
    add_annotations(
      ~unique(Film), x = 0.5, y = 1, 
      xref = "paper", yref = "paper", showarrow = FALSE
    )
}

lotr %>%
  group_split(Film) %>%
  lapply(one_plot) %>% 
  subplot(nrows = 1, shareX = TRUE, titleX = FALSE) %>%
  hide_legend()

lotr_hist <- ggplot(lotr, aes(x = Words, fill = Film)) +
  geom_histogram(bins = 20) +
  facet_wrap(~ Film) + 
  theme_bw() + 
  theme(legend.position = 'none')

ggplotly(lotr_hist)

gganimate

The gganimate package is a way to add animation to static images. The figures can then be converted to gifs to be used within many different presentation modes including pdf, html, or others.

I’m going to use the gapminder data to visualize some of these (you’ll likely need to install the gapminder package if you are following along). When using gganimate, you start first with a static graphic.

library(gapminder)

ggplot(gapminder, aes(gdpPercap, lifeExp, size = pop, colour = country)) +
  geom_point(alpha = 0.7, show.legend = FALSE) +
  scale_colour_manual(values = country_colors) +
  scale_size(range = c(2, 12)) +
  scale_x_log10() +
  facet_wrap(~continent)

install.packages(c("gganimate", "gifski"))

library(gganimate)

anim <- ggplot(gapminder, aes(gdpPercap, lifeExp, size = pop, colour = country)) +
  geom_point(alpha = 0.7, show.legend = FALSE) +
  scale_colour_manual(values = country_colors) +
  scale_size(range = c(2, 12)) +
  scale_x_log10() +
  facet_wrap(~continent) +
  # Here comes the gganimate specific bits
  labs(title = 'Year: {frame_time}', x = 'GDP per capita', y = 'life expectancy') +
  transition_time(year) +
  ease_aes('linear')

anim_save(filename = "/Users/brandonlebeau/OneDrive - University of Iowa/Courses/Uiowa/Comp/Syntax/R/v2/gapminder.gif", animation = anim)