2016-02-18

Well, made easier, at least

Why interactive web graphics?

  • Why interactive graphics?
    • "Any high-dimensional dataviz has to be summarized in some way, but interactivity allows us to get details" - (Dr. Karl Broman; JSM 2015)
    • Aids exploration – discover structure that may otherwise go unnoticed (see Wickham, Cook, Hofmann; 2015)
    • Aids communication – everyone loves an interactive plot – Goosebumps, anyone?!?
  • Why interactive web graphics?
    • simple to share, portable (web browser)
    • encourages composability
    • guide your audience by providing links to interesting selections/states

ggplot2 -> web graphics with plotly

library(plotly)
p <- qplot(data = mtcars, x = wt, y = mpg, geom = c("point", "smooth"))
ggplotly(p)

Translating R graphics to the web

  • Pros:
    • Easy to use – extrapolates on existing knowledge/code
  • Cons:
    • Translation may depend on internals of other packages
    • Hard to extend, customize, and/or add (interactive) features
  • Although ggplotly() is pragmatic, a custom interface can give us more control.

plotly's R interface

library(plotly)
plot_ly(economics, x = date, y = unemploy / pop)

Visual mappings as data attributes

p <- plot_ly(economics, x = date, y = unemploy / pop)
str(p) 
#> Classes ‘plotly’ and 'data.frame':   478 obs. of  6 variables:
#>  $ date    : Date, format: "1967-06-30" "1967-07-31" ...
#>  $ pce     : num  508 511 517 513 518 ...
#>  $ pop     : int  198712 198911 199113 199311 199498 199657 199808 199920 200056 200208 ...
#>  $ psavert : num  9.8 9.8 9 9.8 9.7 9.4 9 9.5 8.9 9.6 ...
#>  $ uempmed : num  4.5 4.7 4.6 4.9 4.7 4.8 5.1 4.5 4.1 4.6 ...
#>  $ unemploy: int  2944 2945 2958 3143 3066 3018 2878 3001 2877 2709 ...
#>  - attr(*, "plotly_hash")= chr "f638d391dcf53809b8426325a842a091#8"

Data sent to plotly.js

str(plotly_build(p))
#> List of 2
#>  $ data  :List of 1
#>   ..$ :List of 5
#>   .. ..$ type   : chr "scatter"
#>   .. ..$ x      : Date[1:478], format: "1967-06-30" ...
#>   .. ..$ y      : num [1:478] 0.0148 0.0148 0.0149 0.0158 0.0154 ...
#>  $ layout:List of 2
#>   ..$ xaxis:List of 1
#>   .. ..$ title: chr "date"
#>   ..$ yaxis:List of 1
#>   .. ..$ title: chr "unemploy/pop"

Why represent plots as data?

Data-plot-pipeline: An Example

%>% is known as a "pipeline operator"

# f(x, y) becomes x %>% f(y)
economics %>%
  transform(rate = unemploy / pop) %>%
  plot_ly(x = date, y = rate)

Layering model fits

economics %>%
  transform(rate = unemploy / pop) %>%
  plot_ly(x = date, y = rate, name = "raw") %>%
  loess(rate ~ as.numeric(date), data = .) %>%
  broom::augment(economics) %>%
  add_trace(x = date, y = .fitted, name = "smooth")

Adding annotations

economics %>%
  transform(rate = unemploy / pop) %>%
  plot_ly(x = date, y = rate, name = "raw") %>%
  subset(rate == max(rate)) %>%
  layout(annotations = list(x = date, y = rate, text = "Peak", showarrow = T),
         title = "The U.S. Unemployment Rate")

What about linked views?

An Example: touring w/ linked brush

Linked views pipeline

  • Coordinated, linked views is an important feature of any interactive statistical graphics system (e.g., cranvas, ggobi, iplots, mondrian, MANET, etc).
  • In order to have linked views, we need a "data pipeline" (Buja et.al, 1988); (Wickham et. al., 2010).

Linked views pipeline

Where should the pipeline live?

Design considerations

Pipeline Pros Cons
Server Flexible Not (necessarily) fast
Client Fast Not (necessarily) flexible

What a widgetful world

  • The R package htmlwidgets makes your HTML widget "just work" from the R console, rmarkdown, and shiny.
  • R packages that use htmlwidgets, such as plotly, "just work" like any other shiny output:

What about capturing direct manipulation?

  • htmlwidgets does a lot for widget authors, but there is no standard for accessing widget interactions server-side.
  • Thankfully, shiny provides a way to send data from client to server, but it's on widget authors to provide an interface.

Accessing plotly events in shiny

Linked correlation matrix

Thank you!