Interactive plots

Claus O. Wilke

2025-04-16

Interactivity can make a plot more informative

Hover over the data points

You probably want to highlight the selected points …

Hover over the data points

… and/or de-emphasize all others

Hover over the data points

You can combine interactivity with explicit labels

Hover over the data points

Also consider linking to further info

Click on one of the states

Highlight across two plots for added context

Interactive plots in R

We can make plots interactive with the ggiraph package

#

iris_scatter <- ggplot(iris) + 
  aes(
    Sepal.Length, Sepal.Width,
    color = Species
  ) +
  geom_point()

iris_scatter

 

Regular ggplot2 plot:
hovering does nothing

We can make plots interactive with the ggiraph package

library(ggiraph)

iris_scatter <- ggplot(iris) + 
  aes(
    Sepal.Length, Sepal.Width,
    color = Species
  ) +
  geom_point_interactive(
    aes(tooltip = Species)
  )

girafe(
  ggobj = iris_scatter,
  width_svg = 6,
  height_svg = 6*0.618
)

ggiraph version:
hovering displays species names

Styling happens via Cascading Style Sheets (CSS)

library(ggiraph)

iris_scatter <- ggplot(iris) + 
  aes(
    Sepal.Length, Sepal.Width,
    color = Species
  ) +
  geom_point_interactive(
    aes(tooltip = Species)
  )

girafe(
  ggobj = iris_scatter,
  width_svg = 6,
  height_svg = 6*0.618,
  options = list(
    opts_tooltip(
      css = "background: #F5F5F5;
             color: #191970;
             font-family: sans-serif;"
    )
  )
)

Select multiple points at once with data_id aesthetic

library(ggiraph)

iris_scatter <- ggplot(iris) + 
  aes(
    Sepal.Length, Sepal.Width,
    color = Species
  ) +
  geom_point_interactive(
    aes(data_id = Species),
    size = 2
  )

girafe(
  ggobj = iris_scatter,
  width_svg = 6,
  height_svg = 6*0.618
)

Select multiple points at once with data_id aesthetic

library(ggiraph)

iris_scatter <- ggplot(iris) + 
  aes(
    Sepal.Length, Sepal.Width,
    color = Species
  ) +
  geom_point_interactive(
    aes(data_id = Species),
    size = 2
  )

girafe(
  ggobj = iris_scatter,
  width_svg = 6,
  height_svg = 6*0.618,
  options = list(
    opts_hover(css = "fill: #202020;"),
    opts_hover_inv(css = "opacity: 0.2;")
  )
)

Again, styling via CSS

Interactive map example

# load data
US_states <- readRDS(url("https://wilkelab.org/SDS366/datasets/US_states.rds"))

US_states
Simple feature collection with 51 features and 3 fields
Geometry type: MULTIPOLYGON
Dimension:     XY
Bounding box:  xmin: -3683715 ymin: -2839538 xmax: 2258154 ymax: 1558935
CRS:           NA
First 10 features:
   GEOID                 name state_code                       geometry
1     01              Alabama         AL MULTIPOLYGON (((1032679 -63...
2     04              Arizona         AZ MULTIPOLYGON (((-1216674 -4...
3     05             Arkansas         AR MULTIPOLYGON (((462619.4 -3...
4     06           California         CA MULTIPOLYGON (((-2077630 -2...
5     08             Colorado         CO MULTIPOLYGON (((-527710.6 3...
6     09          Connecticut         CT MULTIPOLYGON (((1841099 622...
7     10             Delaware         DE MULTIPOLYGON (((1762798 354...
8     11 District of Columbia         DC MULTIPOLYGON (((1610777 321...
9     12              Florida         FL MULTIPOLYGON (((1431218 -13...
10    13              Georgia         GA MULTIPOLYGON (((1339965 -64...

Interactive map example

US_map <- US_states |>
  ggplot() +
  geom_sf_interactive(
    aes(data_id = name, tooltip = name)
  ) +
  theme_void()

girafe(
  ggobj = US_map,
  width_svg = 6,
  height_svg = 6*0.618
)

Hover over the states

Interactive map example

US_map <- US_states |>
  mutate( # JavaScript call to open website 
    onclick = glue::glue(
'window.open(
"https://en.wikipedia.org/wiki/{name}")')
  ) |>
  ggplot() +
  geom_sf_interactive(
    aes(
      data_id = name, tooltip = name,
      onclick = onclick
    )
  ) +
  theme_void()

girafe(
  ggobj = US_map,
  width_svg = 6,
  height_svg = 6*0.618
)

Click to open a state’s wikipedia page

A (very) brief intro to CSS

A (very) brief intro to CSS

CSS is the language used to style web pages

Many online tutorials, e.g.: https://www.w3schools.com/css/default.asp

Interactive websites for practicing, e.g.: https://jsfiddle.net/

Further reading