class: center, middle, inverse, title-slide # News and updates surrounding plotly for R ### Carson Sievert ### April 12th, 2017
Slides:
http://bit.ly/plotcon17-webinar
Slides released under
Creative Commons
--- background-image: url(plotly.svg) background-size: 100px background-position: 90% 8% # plotly 4.6.0 * New features: * [Animations](https://cpsievert.github.io/plotly_book/key-frame-animations.html) * A [linked views paradigm](https://cpsievert.github.io/plotly_book/linking-views-without-shiny.html) (built on top of __crosstalk__) * [Linked animations](https://cpsievert.github.io/plotly_book/linking-animated-views.html) * Support for 8 more ggplot2 geoms * Documentation: * The [NEWS.md](https://github.com/ropensci/plotly/blob/master/NEWS.md) file * Package documentation (e.g., `help(animation)` & `help(highlight)`) * Package demos (e.g, `demo(package = "plotly")`) * The plotly for R [book](https://cpsievert.github.io/plotly_book/) and [website](https://plot.ly/r/) * Blog post coming soon * Workshops & training * My upcoming 2-day [workshop at plotcon](https://plotcon.plot.ly/workshops) * My upcoming [O'Reilly Oriole](http://www.oreilly.com/oriole/): _Interactive data visualization on the web with R_ * [Book me](mailto:cpsievert1@gmail.com) for personalized training --- background-image: url(plotly.svg) background-size: 100px background-position: 90% 8% ## Official 4.6.0 release coming soon * Until then, install dev version with: ```r if (!require(devtools)) install.packages("devtools") devtools::install_github("ropensci/plotly") ``` * Additionally, install dependencies for today's examples: ```r install.packages("crosstalk") install.packages("leaflet") ``` * I also recommend using dev version of ggplot2: ```r devtools::install_github("hadley/ggplot2") ``` --- background-image: url(plotly.svg) background-size: 100px background-position: 90% 8% ## Monthly housing sales ```r library(plotly) txhousing #> # A tibble: 8,602 × 9 #> city year month sales volume median listings inventory date #> <chr> <int> <int> <dbl> <dbl> <dbl> <dbl> <dbl> <dbl> #> 1 Abilene 2000 1 72 5380000 71400 701 6.3 2000.000 #> 2 Abilene 2000 2 98 6505000 58700 746 6.6 2000.083 #> 3 Abilene 2000 3 130 9285000 58100 784 6.8 2000.167 #> 4 Abilene 2000 4 98 9730000 68600 785 6.9 2000.250 #> 5 Abilene 2000 5 141 10590000 67300 794 6.8 2000.333 #> 6 Abilene 2000 6 156 13910000 66900 780 6.6 2000.417 #> 7 Abilene 2000 7 152 12635000 73500 742 6.2 2000.500 #> 8 Abilene 2000 8 131 10710000 75000 765 6.4 2000.583 #> 9 Abilene 2000 9 104 7615000 64500 771 6.5 2000.667 #> 10 Abilene 2000 10 101 7040000 59300 764 6.6 2000.750 #> # ... with 8,592 more rows ``` --- background-image: url(plotly.svg) background-size: 100px background-position: 90% 8% ## Abilene monthly sales ```r Abilene <- subset(txhousing, city == "Abilene") p <- ggplot(Abilene, aes(month, sales, group = year)) + geom_line() ggplotly(p, dynamicTicks = TRUE) ```
--- background-image: url(plotly.svg) background-size: 100px background-position: 90% 8% ## Abilene monthly sales, animated by year ```r p <- ggplot(Abilene, aes(month, sales, frame = year)) + geom_line() ggplotly(p) ```
--- background-image: url(plotly.svg) background-size: 100px background-position: 90% 8% ## Works in `plot_ly()` as well ```r p <- plot_ly(Abilene, x = ~month, y = ~sales, frame = ~year, showlegend = F) add_lines(p) ```
--- background-image: url(plotly.svg) background-size: 100px background-position: 90% 8% ## Animations are layer specific ```r p <- ggplot(Abilene, aes(month, sales)) + geom_line(aes(group = year), alpha = 0.2) + geom_line(aes(frame = year), color = "red") ggplotly(p) ```
--- background-image: url(plotly.svg) background-size: 100px background-position: 90% 8% ## Easily change animation options ```r animation_opts( ggplotly(p), frame = 1000, easing = "elastic" ) ```
--- background-image: url(plotly.svg) background-size: 100px background-position: 90% 8% ## Easily change button appearance ```r animation_button( ggplotly(p), x = 1, xanchor = "right", y = 1, yanchor = "middle" ) ```
--- background-image: url(plotly.svg) background-size: 100px background-position: 90% 8% ## Easily change slider appearance ```r animation_slider( ggplotly(p), currentvalue = list(prefix = "YEAR ", font = list(color = "red")) ) ```
--- class: middle, center, inverse # Highlighting (i.e., brushing) in multiple linked views --- background-image: url(plotly.svg) background-size: 100px background-position: 90% 8% ## Highlighting via crosstalk ```r library(crosstalk) d <- SharedData$new(Abilene, ~year) p <- ggplot(d, aes(month, sales)) + geom_line(aes(group = year)) gg <- ggplotly(p, tooltip = "year") highlight(gg, on = "plotly_click", off = "plotly_doubleclick") ```
--- background-image: url(plotly.svg) background-size: 100px background-position: 90% 8% ## Highlighting in small multiples ```r d <- subset(txhousing, city %in% c("Galveston", "Midland", "Odessa", "South Padre Island")) sd <- SharedData$new(d, ~year) p <- ggplot(sd, aes(month, median, group = year)) + geom_line() + facet_wrap(~city, ncol = 2) gg <- ggplotly(p, tooltip = "year") highlight(gg, on = "plotly_click") ```
--- background-image: url(plotly.svg) background-size: 100px background-position: 90% 8% ## Making comparisons with dynamic brush ```r highlight( gg, on = "plotly_click", dynamic = TRUE, persistent = TRUE, selectize = TRUE ) ``` <!-- for some reason, that won't print without creating the SharedData instance again ^^^ also, how do we prevent redundant control panel? --> <iframe src="selectize.html" width="100%" height="420" scrolling="no" seamless="seamless" frameBorder="0"> </iframe> --- background-image: url(plotly.svg) background-size: 100px background-position: 90% 8% ## Customize the appearance of selections ```r highlight( gg, on = "plotly_click", dynamic = TRUE, persistent = TRUE, selected = attrs_selected(mode = "markers+lines", marker = list(symbol = "x")) ) ``` <!-- same --> <iframe src="selected.html" width="100%" height="420" scrolling="no" seamless="seamless" frameBorder="0"> </iframe> --- background-image: url(plotly.svg) background-size: 100px background-position: 90% 8% ## Brush events only work with markers The default "on" event is "brush", but that requires markers. ```r # Use `style()` to modify attributes (i.e., add markers to the mode) style(gg, mode = "markers+lines", traces = 1:4) ``` <iframe src="brush.html" width="100%" height="420" scrolling="no" seamless="seamless" frameBorder="0"> </iframe> --- background-image: url(plotly.svg) background-size: 100px background-position: 90% 8% ## Animating selections See [here](https://cpsievert.github.io/plotly_book/linking-animated-views.html) for more interesting examples. ```r a <- SharedData$new(Abilene, ~month) p <- ggplot(a, aes(month, sales, frame = year)) + geom_line() + geom_point() layout(ggplotly(p), dragmode = "select") ```
--- background-image: url(plotly.svg) background-size: 100px background-position: 90% 8% ## Talk to other crosstalk-enabled widgets ```r library(leaflet) sd <- SharedData$new(quakes) p <- plot_ly(sd, x = ~depth, y = ~mag) %>% add_markers(alpha = 0.5) map <- leaflet(sd) %>% addTiles() %>% addCircles() bscols(p, map) ``` <!-- leaflet overrides css? :( --> <iframe src="leaflet/index.html" width="100%" height="420" scrolling="no" seamless="seamless" frameBorder="0"> </iframe> --- class: center, middle, inverse ## Expectations vs reality .pull-left[ <img src="thin-ice.gif" height = "500" width = "350" /> ] .pull-right[ <br /> <br /> <br /> <br /> **plotly** has a fairly general [linked-views paradigm](https://cpsievert.github.io/plotly_book/linking-views-without-shiny.html) Other [**crosstalk**-enabled htmlwidgets](https://rstudio.github.io/crosstalk/) may or may not support these additional semantics The goal is to produce standalone HTML, but you can always [link views with shiny](https://cpsievert.github.io/plotly_book/linking-views-with-shiny.html) ] --- class: center, middle, inverse <img src="help.gif" /> [Post an issue](https://github.com/ropensci/plotly/issues/new) on GitHub [Sponsor](https://plot.ly/products/consulting-and-oem/) plotly or plotly.js features --- background-image: url(plotly.svg) background-size: 100px background-position: 90% 8% class: center, middle # Thanks! **Summary**: easily animation/link multiple views with **plotly**. For details, see [here](https://cpsievert.github.io/plotly_book/linking-views-without-shiny.html) and [here](https://cpsievert.github.io/plotly_book/key-frame-animations.html). Hope to see you at my 2-day [workshop](https://plotcon.plot.ly/workshops) in Oakland (May 4-5th)! <p></p> Twitter: [@cpsievert](https://twitter.com/cpsievert) <br /> GitHub: [@cpsievert](https://github.com/cpsievert) <br /> Email: <cpsievert1@gmail.com> <br /> Web: <http://cpsievert.github.io/>