09. Foundations of interactive, data-driven design

Example code used in class discussion.

Here is this code’s rmd file.

Slide 42

Let’s import some citibike data and calculate a transformed variable to graph interactively a few ways. First, we’ll load our typical functions,

library(tidyverse)

and import the data:

d <- read_csv('data/201901-citibike-tripdata.csv') 

We’ve used this data before. These data observations include a variable, gender, coded as 0 when riders do not self-identify, 1 when they self-identify as male, and 2 when they self-identify as female.

For riders who self-identify as a gender, let’s calculate the percentage of riders who indicate female at each station:

d <- d %>%
  filter(gender %in% 1:2) %>%
  group_by(
    `start station name`, 
    `start station longitude`, 
    `start station latitude`
  ) %>%
  summarise(
    female_pct = round(sum(gender == 2) / n() * 100, digits = 1)
  ) %>%
  ungroup()

Now, let’s map station longitude and latitude to the x and y axis, respectively, and map our new variable, female_pct, to the hue attribute of color:

p <- 
  ggplot(d) + 
  coord_fixed(ratio = 1) +
  geom_point(
    mapping = aes(
      x = `start station longitude`,
      y = `start station latitude`,
      color = female_pct
    ),
    size = 2
  ) 

Let’s add interactivity using functions in plotly:

library(plotly)
ggplotly(p = p)

Notice we did not specify anything regarding interactivity, but the function just chose some actions and interactions for us. More specifically, the function included a tooltip with the value of each variable we mapped. It also provided a toolbar that let the audience zoom in, select, and perform other actions.

The library includes other functions (not discussed today) that let us specify the types of actions we want the graphic to respond to and how it should respond.

Slide 43

Now, let’s do the same thing with another library of functions, ggiraph, which aims to provide a grammar of interactive graphics. Again, we basically just code with the ggplot2 grammar of graphics, but for the geom_<type> functions, we use an interactive version: geom_<type>_interactive and include one or two additional parameters (data_id and tooltip):

library(ggiraph)

p <- 
  ggplot(d) + 
  coord_fixed(ratio = 1) +
  geom_point_interactive(
    mapping = aes(
      x = `start station longitude`,
      y = `start station latitude`,
      color = female_pct,
      data_id = `start station name`,
      tooltip = str_c(
        'Station: ', `start station name`, '\n',
        'Longitude: ', `start station longitude`, '\n',
        'Latitude: ', `start station latitude`, '\n',
        'Female Usage: ', female_pct, ' %'
      )
    ),
    size = 2
  ) 

girafe(ggobj = p)

In this case, we had to create the tooltip ourselves, but it’s pretty straight-forward: we’re just concatenating strings together using the function str_c. The bonus is we can actually create anything to put in that tooltip.

Slides 44-58

Let’s graph the same information using Tableau. Here’s the packaged workbook as demonstrated in class discussion.

And here’s another Tableau packaged workbook where I’ve approximately re-created various exploratory graphics we first made in week two code demonstrations.