Hi I’m Tanya!

  • Independent data consultant, specializing in data analysis and visualization design
  • Previously worked in insurance industry
  • Fell in love with R via #TidyTuesday
  • Data geek based in St. Pete, FL

Use Cases for Interactive Viz

Exploring Data
Exploring Data

Useful for EDA projects to uncover more details about the data.

Dashboarding
Dashboarding

Great for dashboards or data applications like Shiny.

Interactive Storytelling
More Storytelling Tricks

For online mediums, invite audience to engage with visual content.

My own learning journey

The beginning my interactive data viz journey. I wanted to experiment and test out interactive elements without committing to learning a totally new language or library.

ggiraph enters the chat

  • What is it? Extension package for ggplot2 that allows users to create dynamic plots
  • Interactivity Hover events, click events, tooltips
  • Export Use as stand-alone htmlwidget, embed in Quarto HTML doc, or as a Shiny output

Today we’ll learn…

Basic ggiraph concepts
Enough CSS to get by
How to add tooltips to ggplot2
How to create hover events
We'll run through 2 examples together to see it all in action

ggiraph interactive geoms

Total of 50 interactive geoms! Consistent naming convention to match ggplot2 geoms

ggplot2 ggiraph
geom_point ➡️ geom_point_interactive
geom_text ➡️ geom_text_interactive
geom_line ➡️ geom_line_interactive
geom_tile ➡️ geom_tile_interactive

ggiraph geom parameters

Parameters for interactive geoms are similar to their ggplot2 counterparts, and include new interactive parameters such as:

  • data_id: mandatory, can be associated to one or more element. informs which elements interactive components are applied to

  • hover_css: how we style element on hover (CSS)

  • tooltip: tooltip text, can be passed in as string or formatted with HTML

  • tooltip_fill: color for tooltip background

ggiraph girafe 🦒

Once we’ve assembled our ggplot, we’ll need to create the htmlwidget by wrapping the plot in girafe(). In this step, we can also control hover stylings for our geoms by mapping options to a list of arguments such as:

  • opts_hover: default CSS style applied to all geom elements with the same data_id
  • opts_hover_inv: default CSS style applied to all other geoms (inverse)
  • opts_tooltip: default CSS for all tooltips

ggiraph in action

Ex. 1: Tooltips on Hover

#setting up tooltip to map to geom, used with glue
tooltip<-"<div>
<span style='font-weight:bold;'>Total Flights: </span>{format(flights, big.mark=',')}<br>
<span style='font-weight:bold;'>Delays: </span>{format(delays, big.mark=',')}<br>
<span style='font-weight:bold;'>Perc Flights Delayed: </span>{round(delay_perc*100,2)}%<br>
</div>"

scatter_plot<-ggplot(data=annual_by_carrier)+
  geom_hline(mapping=aes(yintercept=mean(delay_perc)),
             linetype="dashed", linewidth=0.7, color="grey30")+
   geom_point_interactive(
    mapping = aes(data_id = carrier_name,
                  x=flights/1000, 
                  y=delay_perc,
                  tooltip = glue(tooltip),
                  hover_css = paste0("fill:",color)),
    size=4,
    shape = 21,
    fill="#2CA8F0",
    color="white"
  )+
  geom_text_repel(
    mapping = aes(x=flights/1000, y=delay_perc, label=carrier_name),
    size=2, color="grey30"
  )+
  annotate(geom="text", 
           x=1300, y=mean(annual_by_carrier$delay_perc)-0.02, 
           hjust=1, size=3, 
           label=paste0("Average: ",round(mean(annual_by_carrier$delay_perc)*100,1),"%"),
           family="Roboto")+
  labs(title="U.S. Domestic Flight Delays by Carrier 2022",
       x = "Total Flights (thousands)", y="% of Flights Delayed",
       caption = "Source: Bureau of Transportation Statistics")+
  scale_y_continuous(labels=scales::label_percent(),
                     limits = c(0,.4))+
  scale_x_continuous(breaks=c(250, 500, 750, 1000, 1250))+
  theme(text = element_text(family="Roboto"),
        plot.title = element_text(face="bold"),
        plot.caption = element_text(hjust=0, color="grey50", size=6),
        panel.background = element_blank(),
        axis.line.x = element_line(),
        axis.ticks = element_blank(),
        axis.text = element_text(family="Roboto Mono"),
        axis.title = element_text(size=8),
        axis.title.y = element_text(margin=margin(r=10)),
        axis.title.x = element_text(margin=margin(t=10)),
        panel.grid = element_blank()
       )


girafe(ggobj = scatter_plot, 
       width_svg = 6, 
       height_svg = 3.5, 
       options = list(
         opts_toolbar(saveaspng = FALSE),
         opts_tooltip(css = 'font-family:Roboto;background-color:black;border-radius:5px;color:white;padding:10px;')
))

Ex. 1: Tooltips on Hover

Ex. 2: More Style Options on Hover

line_plot<-ggplot()+
  geom_segment(mapping=aes(x=1, xend=12, y=0, yend=0),
               linewidth=1)+
  geom_line_interactive(
    data=monthly_delays_carrier, 
    mapping=aes(
      data_id = carrier_name,
      x=month,
      y=delay_perc,
      group = carrier_name
  ),
    color = "grey", linewidth = 0.75)+
  geom_text_interactive(
    data = airline_labels,
    mapping=aes(
      data_id= carrier_name,
      x=month+.1, 
      y=label_y, 
      label=carrier_name),
    color = "grey",
    hjust=0, family="Roboto", size=3)+
  geomtextpath::geom_textline(
    data=monthly_delays_total, 
    mapping=aes(x=month, y=delay_perc, group=1, label="All Carriers"),
    vjust = -0.3, 
    hjust = 0.02,
    linewidth=1,
    size = 3,
    fontfamily="Roboto"
  )+
  labs(title = "Flight Delay Seasonality 2022",
       subtitle = "Perecentage of flight delays month over month by carrier.",
       caption = "Source: Bureau of Transportation Statistics")+
  scale_y_continuous(limits=c(0,.45), 
                     expand = c(0,0),
                     labels = scales::label_percent())+
  scale_x_continuous(limits=c(1,13.5),
                     breaks = 1:12, 
                     labels = month.abb[1:12])+
  theme(
    legend.position = "top",
    text = element_text(family="Roboto"),
    plot.title = element_text(face="bold"),
    plot.caption = element_text(hjust=0, color="grey40", size=6, margin=margin(t=10)),
    panel.background = element_blank(),
    axis.ticks = element_blank(),
    axis.title = element_blank(),
    axis.text = element_text(family="Roboto Mono", size=8))


ggiraph::girafe(ggobj = line_plot, 
                width_svg = 6, 
                height_svg = 3.5,
                #list of default styling options
                options = list(
                  opts_toolbar(saveaspng = FALSE),
                  opts_hover(
                    css = girafe_css(
                      text = "stroke:none!important;font-weight:bold;fill:#2CA8F0;",
                      css= "stroke:#2CA8F0;opacity:1;stroke-width:1.75"
                    )),
                  opts_hover_inv(
                    css = girafe_css(
                      css = "opacity:0.3;"
                    )
                  ))
)

Ex. 2: More Style Options on Hover

Thank You!

We will now open it up for Q&A

Tanya Shapiro | R-Ladies Cambridge