+ - 0:00:00
Notes for current slide
Notes for next slide

Figure redrawn from Claus O. Wilke. Fundamentals of Data Visualization. O'Reilly, 2019.

Interactive plots

Claus O. Wilke

last updated: 2021-09-23

Interactivity can make a plot more informative

2.0 2.5 3.0 3.5 4.0 4.5 4.0 5.0 6.0 7.0 8.0 Sepal length Sepal width Iris setosa Iris virginica Iris versicolor

hover over the data points

Figure redrawn from Claus O. Wilke. Fundamentals of Data Visualization. O'Reilly, 2019.

You probably want to highlight the selected points ...

2.0 2.5 3.0 3.5 4.0 4.5 4.0 5.0 6.0 7.0 8.0 Sepal length Sepal width Iris setosa Iris virginica Iris versicolor

hover over the data points

Figure redrawn from Claus O. Wilke. Fundamentals of Data Visualization. O'Reilly, 2019.

... and/or de-emphasize all others

2.0 2.5 3.0 3.5 4.0 4.5 4.0 5.0 6.0 7.0 8.0 Sepal length Sepal width Iris setosa Iris virginica Iris versicolor

hover over the data points

Figure redrawn from Claus O. Wilke. Fundamentals of Data Visualization. O'Reilly, 2019.

You can combine interactivity with explicit labels

Harris Dallas Tarrant Galveston Lubbock Comal Bowie Waller San Jacinto Mitchell Goliad Real Lipscomb Kenedy King Loving 10 − 2 10 − 1 10 0 10 1 10 2 Texas counties, from most to least populous population number / median

hover over the data points

Figure redrawn from Claus O. Wilke. Fundamentals of Data Visualization. O'Reilly, 2019.

Also consider linking to further info

click on one of the states

Highlight across two plots for added context

$40,000 $60,000 $80,000 10 3 10 4 10 5 10 6 Number of inhabitants Median income (USD)

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
)
2.0 2.5 3.0 3.5 4.0 4.5 5 6 7 8 Sepal.Length Sepal.Width Species setosa versicolor virginica

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;"
    )
  )
)
2.0 2.5 3.0 3.5 4.0 4.5 5 6 7 8 Sepal.Length Sepal.Width Species setosa versicolor virginica

ggiraph version:
hovering displays species names

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
)
2.0 2.5 3.0 3.5 4.0 4.5 5 6 7 8 Sepal.Length Sepal.Width Species setosa versicolor virginica

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;")
  )
)
2.0 2.5 3.0 3.5 4.0 4.5 5 6 7 8 Sepal.Length Sepal.Width Species setosa versicolor virginica

Again, styling via CSS

Interactive map example

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

Interactive map example

# load data
US_states <- readRDS(url("https://wilkelab.org/SDS375/datasets/US_states.rds"))
# print
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:           +proj=aea +lat_1=29.5 +lat_2=45.5 +lat_0=37.5 +lon_0=-96 +x_0=0 +y_0=0 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs
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
)

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

A (very) brief intro to CSS

CSS is the language used to style web pages

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

Further reading

Interactivity can make a plot more informative

hover over the data points

Figure redrawn from Claus O. Wilke. Fundamentals of Data Visualization. O'Reilly, 2019.

Paused

Help

Keyboard shortcuts

↑, ←, Pg Up, k Go to previous slide
↓, →, Pg Dn, Space, j Go to next slide
Home Go to first slide
End Go to last slide
Number + Return Go to specific slide
b / m / f Toggle blackout / mirrored / fullscreen mode
c Clone slideshow
p Toggle presenter mode
t Restart the presentation timer
?, h Toggle this help
Esc Back to slideshow