Interactive visualization of multiple time series with plotly

class: center, middle, inverse, title-slide

# Interactive visualization of multiple time series with plotly
### Carson Sievert
### Slides: <a href="https://bit.ly/r-finance" class="uri">https://bit.ly/r-finance</a> <br /> <br /> Twitter: <a href='https://twitter.com/cpsievert'><span class="citation">@cpsievert</span></a> <br /> GitHub: <a href='https://github.com/cpsievert'><span class="citation">@cpsievert</span></a> <br /> Email: <a href="mailto:cpsievert1@gmail.com">cpsievert1@gmail.com</a> <br /> Web: <a href="http://cpsievert.github.io/" class="uri">http://cpsievert.github.io/</a>

---

### plotly ❤️'s time series

```r
library(quantmod)
getSymbols("AAPL", src = 'yahoo')
d <- data.frame(date = index(AAPL), coredata(AAPL))
p1 <- plot_ly(x = d$date, y = d$AAPL.Volume, mode = "lines", name = "volume")
p2 <- plot_ly(x = d$date, y = d$AAPL.Adjusted, mode = "lines", name = "adjusted")
subplot(p1, p2, nrows = 2, shareX = TRUE)
```

<div id="htmlwidget-0c139e34cde6a809950f" style="width:100%;height:350px;" class="widgetframe html-widget"></div>
<script type="application/json" data-for="htmlwidget-0c139e34cde6a809950f">{"x":{"url":"index_files/widgets/widget_unnamed-chunk-1.html","options":{"xdomain":"*","allowfullscreen":false}},"evals":[],"jsHooks":[]}</script>

---

```r
rangeslider(
  subplot(p1, p2, nrows = 2, shareX = TRUE)
)
```

<div id="htmlwidget-7de6bc23e402f9a855c6" style="width:100%;height:500px;" class="widgetframe html-widget"></div>
<script type="application/json" data-for="htmlwidget-7de6bc23e402f9a855c6">{"x":{"url":"index_files/widgets/widget_unnamed-chunk-2.html","options":{"xdomain":"*","allowfullscreen":false}},"evals":[],"jsHooks":[]}</script>

---
### Have lots of data? Use WebGL!

```r
toWebGL(
  subplot(p1, p2, nrows = 2, shareX = TRUE)
)
```

<div id="htmlwidget-ef10bab139db60d1df6f" style="width:100%;height:400px;" class="widgetframe html-widget"></div>
<script type="application/json" data-for="htmlwidget-ef10bab139db60d1df6f">{"x":{"url":"index_files/widgets/widget_unnamed-chunk-3.html","options":{"xdomain":"*","allowfullscreen":false}},"evals":[],"jsHooks":[]}</script>

---
### Candlestick charts!

```r
plot_ly(
  d, x = ~date, open = ~AAPL.Open, close = ~AAPL.Close, high = ~AAPL.High, low = ~AAPL.Low, type = "candlestick"
) 
```

<div id="htmlwidget-13b658930cfed61a3392" style="width:100%;height:400px;" class="widgetframe html-widget"></div>
<script type="application/json" data-for="htmlwidget-13b658930cfed61a3392">{"x":{"url":"index_files/widgets/widget_unnamed-chunk-4.html","options":{"xdomain":"*","allowfullscreen":false}},"evals":[],"jsHooks":[]}</script>

---
### Small multiples via ggplot2

```r
tx <- subset(txhousing, city %in% c("Galveston", "Midland", "Odessa", "South Padre Island"))
p <- ggplot(tx, aes(month, median)) + 
*  geom_line(aes(group = year)) +
  facet_wrap(~city, ncol = 2)
ggplotly(p, tooltip = "year")
```

<div id="htmlwidget-123da6601ed8bb9b15d7" style="width:100%;height:380px;" class="widgetframe html-widget"></div>
<script type="application/json" data-for="htmlwidget-123da6601ed8bb9b15d7">{"x":{"url":"index_files/widgets/widget_unnamed-chunk-5.html","options":{"xdomain":"*","allowfullscreen":false}},"evals":[],"jsHooks":[]}</script>

---
### Animate via frame aesthetic

```r
tx <- subset(txhousing, city %in% c("Galveston", "Midland", "Odessa", "South Padre Island"))
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, tooltip = "year")
```

<div id="htmlwidget-c5af28f6c75ad4174d43" style="width:100%;height:380px;" class="widgetframe html-widget"></div>
<script type="application/json" data-for="htmlwidget-c5af28f6c75ad4174d43">{"x":{"url":"index_files/widgets/widget_unnamed-chunk-6.html","options":{"xdomain":"*","allowfullscreen":false}},"evals":[],"jsHooks":[]}</script>

---
### Linked 'brushing' in small multiples

```r
sd <- crosstalk::SharedData$new(tx, ~year)
p <- ggplot(sd, aes(month, median)) + geom_line(aes(group = year)) + facet_wrap(~city, ncol = 2)
highlight(ggplotly(p), persistent = TRUE, dynamic = TRUE, selectize = TRUE)
```

<div id="htmlwidget-9fd279a2af7554f7b429" style="width:100%;height:380px;" class="widgetframe html-widget"></div>
<script type="application/json" data-for="htmlwidget-9fd279a2af7554f7b429">{"x":{"url":"index_files/widgets/widget_unnamed-chunk-7.html","options":{"xdomain":"*","allowfullscreen":false}},"evals":[],"jsHooks":[]}</script>

---
class: bottom
background-image: url(bcviz.gif)
background-size: contain

#### https://github.com/cpsievert/bcviz

---
background-image: url(plotly.svg)
background-size: 100px
background-position: 90% 8%
class: center, middle, inverse

# Thanks!

#### Want to sponsor/consult plotly?

https://plot.ly/products/consulting-and-oem/

#### Contact me directly

Twitter: [@cpsievert](https://twitter.com/cpsievert) <br />
GitHub: [@cpsievert](https://github.com/cpsievert) <br />
Email: <cpsievert1@gmail.com> <br />
Web: <http://cpsievert.github.io/>

#### Learn more

https://plot.ly/r/ <br />
https://github.com/ropensci/plotly <br />
https://cpsievert.github.io/plotly_book/ <br />
https://cpsievert.github.io/talks/