Make ggplot2 interactive

library(plotly)
p <- ggplot(txhousing) + geom_line(aes(date, median, group = city))
ggplotly(p)

Customize tooltip

library(plotly)
p <- ggplot(txhousing) + geom_line(aes(date, median, group = city, text = city))
ggplotly(p, tooltip = "text")

Highlight a key (e.g. city) column

library(plotly)
tx <- highlight_key(txhousing, ~city)
p <- ggplot(tx) + geom_line(aes(date, median, group = city, text = city))
gg <- ggplotly(p, tooltip = "text")
highlight(gg, on = "plotly_click")

Direct/indirect manipulation & persistent highlighting!

gg <- ggplotly(p, tooltip = "text")
highlight(gg, on = "plotly_hover", selectize = TRUE, dynamic = TRUE)

Link aggregates to raw data

Texas housing prices

tx <- txhousing %>%
  select(city, year, month, median) %>%
  filter(city %in% c("Galveston", "Midland", "Odessa", "South Padre Island"))

#> # A tibble: 748 x 4
#>    city       year month median
#>    <chr>     <int> <int>  <dbl>
#>  1 Galveston  2000     1  95000
#>  2 Galveston  2000     2 100000
#>  3 Galveston  2000     3  98300
#>  4 Galveston  2000     4 111100
#>  5 Galveston  2000     5  89200
#>  6 Galveston  2000     6 108600
#>  7 Galveston  2000     7  99000
#>  8 Galveston  2000     8  96200
#>  9 Galveston  2000     9 104000
#> 10 Galveston  2000    10 118800
#> # ... with 738 more rows

How does price differ across cities?

Price versus month, by city & year

library(ggplot2)
ggplot(tx, aes(month, median, group = year)) +
  geom_line() +
  facet_wrap(~city, ncol = 2)

Query specific years

library(plotly)
TX <- highlight_key(tx, ~year)
p <- ggplot(TX, aes(month, median, group = year)) + geom_line() +
  facet_wrap(~city, ncol = 2)
ggplotly(p, tooltip = "year")

Set selection mode and default selections

highlight(.Last.value, on = "plotly_hover", defaultValues = 2006)

Make comparisons with dynamic brush

highlight(.Last.value, dynamic = TRUE, persistent = TRUE, selectize = TRUE)

Customize the appearance of selections

highlight(
  .Last.value, dynamic = TRUE, persistent = TRUE, 
   selected = attrs_selected(mode = "markers+lines", marker = list(symbol = "x"))
)

Automate queries via animation

p <- ggplot(tx, aes(month, median)) + 
  geom_line(aes(group = year), alpha = 0.2) +
   geom_line(aes(frame = year), color = "red") +
  facet_wrap(~city, ncol = 2)
ggplotly(p)

Inspect the underlying data

plotly_json() returns the underlying JSON of any plotly graph -- nice way to learn how ggplotly() maps to plotly.js!

Want to work with plotly.js directly?

schema() returns the official plotly.js figure reference tied to the R package

plotly is much more than ggplotly()!

Initiate a plotly graph (without ggplot2):

• plot_ly(): 'flexible' interface to plotly.js
• plot_mapbox(): plot_ly() wrapper/shortcut for scattermapbox
• plot_geo(): plot_ly() wrapper/shortcut for scattergeo

Add data (i.e., traces) to a graph

• add_markers(), add_bars(), etc (see help(add_trace) for full list)

Modify a graph (before printing)

• style() to modify traces of an existing plotly graph
• layout() to add/modify to a layout component

Tools for talking with plotly cloud

• Send data and/or graphs with api_create()
• Retrieve data and/or graphs with api_download_plot()/api_download_grid()
• Do anything the plotly's server API supports with api()

'Smart' trace type defaults

subplot(
  plot_ly(diamonds, x = ~cut, y = ~clarity),
  plot_ly(diamonds, x = ~cut, color = ~clarity),
  nrows = 2, shareX = TRUE
)

Aggregating selections

library(plotly)
d <- highlight_key(mpg)
dots <- plot_ly(d, color = ~class, x = ~displ, y = ~cyl)
boxs <- plot_ly(d, color = ~class, x = ~class, y = ~cty) %>% 
  add_boxplot()
bars <- plot_ly(d, colors = "Set1", x = ~class, color = ~class)
subplot(dots, boxs, titleX = TRUE, titleY = TRUE) %>%
  subplot(bars, nrows = 2, titleX = TRUE, titleY = TRUE) %>%
  layout(
    barmode = "overlay",
    showlegend = FALSE
  ) %>%
  highlight("plotly_selected")

Aggregating selections (continued)

library(plotly)
d <- highlight_key(mtcars)
sp <- plot_ly(d, x = ~mpg, y = ~disp) %>% 
  add_markers(color = I("black"))
# 'statistical trace types'
hist <- plot_ly(d, x = ~factor(cyl)) %>% add_histogram(color = I("black"))
box <- plot_ly(d, y = ~disp, color = I("black")) %>% add_boxplot(name = " ")
violin <- plot_ly(d, y = ~disp, color = I("black")) %>% add_trace(type = "violin", name = " ")
subplot(sp, box, violin, shareY = TRUE, titleX = TRUE, titleY = TRUE) %>%
  subplot(hist, widths = c(.75, .25), titleX = TRUE, titleY = TRUE) %>%
  layout(
    barmode = "overlay", 
    title = "Click and drag scatterplot",
    showlegend = FALSE
  ) %>%
  highlight("plotly_selected")

Aggregating selections (continued)

library(plotly)
tx <- highlight_key(txhousing, ~city)
p1 <- ggplot(tx, aes(date, median, group = city)) + geom_line()
gg1 <- ggplotly(p1, tooltip = c("city", "date", "median"))
p2 <- plot_ly(tx, x = ~median, color = I("black")) %>% 
  add_histogram(histnorm = "probability density")
subplot(gg1, p2, titleX = TRUE, titleY = TRUE) %>% 
  layout(barmode = "overlay") %>%
  highlight(dynamic = TRUE, selected = attrs_selected(opacity = 0.3))

Talk with other htmlwidgets

library(leaflet)
sd <- highlight_key(quakes)
p <- plot_ly(sd, x = ~depth, y = ~mag) %>% add_markers(alpha = 0.5) %>% highlight("plotly_selected")
map <- leaflet(sd) %>% addTiles() %>% addCircles()
crosstalk::bscols(p, map)

Linking plotly with DT

library(plotly)
data(trails, package = "mapview")
tsd <- highlight_key(trails)
crosstalk::bscols(
  plot_mapbox(tsd, text = ~FKN, hoverinfo = "text"),
  DT::datatable(tsd)
)

Crosstalk's filtering widgets

library(crosstalk)
tx <- highlight_key(txhousing)
widgets <- bscols(
  widths = c(12, 12, 12),
  filter_select("city", "Cities", tx, ~city),
  filter_slider("sales", "Sales", tx, ~sales),
  filter_checkbox("year", "Years", tx, ~year, inline = TRUE)
)
widgets

Filtering

bscols(
  widths = c(4, 8), widgets, 
  plot_ly(tx, x = ~date, y = ~median, showlegend = FALSE) %>% 
    add_lines(color = ~city, colors = "black")
)

Dropdown example

The implementation

styles <- schema()$layout$layoutAttributes$mapbox$style$values
style_buttons <- lapply(styles, function(s) {
  list(label = s, method = "relayout", args = list("mapbox.style", s))
})
storms <- sf::st_read(system.file("shape/storms_xyz.shp", package = "sf"), quiet = TRUE)
plot_mapbox(storms, color = I("red")) %>%
  layout(
    title = "Changing the base layer",
    updatemenus = list(list(y = 0.8, buttons = style_buttons))
  )

Google search on click

The customdata attribute provides a way to attach "meta-data" to visual attributes that you can access with JavaScript

plot_ly(mtcars, x = ~wt, y = ~mpg) %>%
  add_markers(customdata = ~paste0("http://google.com/#q=", rownames(mtcars))) %>%
  htmlwidgets::onRender("function(el, x) {
    el.on('plotly_click', function(d) {
      var url = d.points[0].customdata;
      window.open(url);
    });
  }")

Ask me anything!!