htmlwidgets: a standard for implementing R interfaces to JS

htmlwidgets.org

gallery.htmlwidgets.org

plotly: an advanced htmlwidget

Make static {ggplot2} plots interactive with plotly::ggplotly()!

library(plotly)
p <- ggplot(diamonds, aes(x = log(price), color = clarity)) + 
    geom_freqpoly(stat = "density") + 
    facet_wrap(~cut)
ggplotly(p)

plotly: an advanced htmlwidget

Or, use the underlying plotly.js graphing library more directly:

library(plotly)
plot_ly(diamonds, x = ~cut, color = ~clarity)

shiny: create a web UI to re-execute R code

library(shiny)
library(plotly)
ui <- fluidPage(
  selectInput(
    "y", "Choose a variable", 
    choices = names(diamonds)
  ),
  plotlyOutput("p")
)
server <- function(input, output) {
  output$p <- renderPlotly({
    plot_ly(
      y = diamonds[[input$y]]
    )
  })
}
shinyApp(ui, server)

Use {plotly} like an input control

library(shiny)
library(plotly)
ui <- fluidPage(
  selectInput(
    "y", "Choose a variable", 
    choices = names(diamonds)
  ),
  plotlyOutput("p"),
  verbatimTextOutput("hover")
)
server <- function(input, output) {
  output$p <- renderPlotly({
    plot_ly(y = diamonds[[input$y]])
  })
  output$hover <- renderPrint({
    #Think of this like an input value
    event_data("plotly_hover")
  })
}
shinyApp(ui, server)

Linking htmlwidgets with shiny

Many {htmlwidgets} provide {shiny} 'hooks' into user events.

Linking htmlwidgets with shiny

Lots of different user events available (e.g., {leaflet} zoom)!

Linking htmlwidgets with shiny

{shiny} provides tools for managing state, -- useful for making multiple comparisons:

Linking htmlwidgets with shiny

Managing state is also useful for 'drill-down' apps:

Link plotly with DT via crosstalk

library(plotly)
library(crosstalk)
sd <- SharedData$new(mpg)
p <- plot_ly(sd, x = ~displ, y = ~hwy) %>%
  add_markers() %>%
  highlight("plotly_selected")
bscols(p, DT::datatable(sd))

Link plotly with DT via crosstalk

library(plotly)
library(crosstalk)
sd <- SharedData$new(mpg)
p <- plot_ly(sd, x = ~displ, y = ~hwy) %>%
  add_markers() %>%
  highlight("plotly_selected")
bscols(p, DT::datatable(sd))

• Most {crosstalk}-compatible widgets only support this sort of "simple transient selection".
• However, when linking multiple {plotly} widgets via {crosstalk}, you can do a lot more!

Generalized selection in plotly

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

Persistent selection and search

highlight(gg, on = "plotly_hover", persistent = T, selectize = T, dynamic = T)

Works with facetting

TX <- SharedData$new(tx, ~year)
p <- ggplot(TX, aes(month, median, group = year)) + geom_line() +
   facet_wrap(~city, ncol = 2)
highlight(ggplotly(p), persistent = T, selectize = T, dynamic = T)

Query missing values by city

demo("crosstalk-highlight-pipeline", package = "plotly")

Works with 'aggregated' traces

See relationships evolve over time (made via ggplot2)

Summary

• Interactive (web) graphics can enhance the sense-making process for data analysts (as well as for their audience).

• In particular, multiple linked views is a powerful paradigm for exploring data.

• {htmlwidgets} such as {plotly} make it easy to leverage web graphics from R.

• {shiny} provides a reactive programming framework, which we can leverage to link multiple {htmlwidgets}.

• {crosstalk} and {plotly} make it possible to link views without {shiny}.