Animations and interactivity

class: center middle main-title section-title-6

# Animations and interactivity

.class-info[
<figure>
 <img src="img/00/ggplot-logo.png" alt="ggplot" title="ggplot" width="15%">
</figure>
]

---

layout: true
class: title title-6

---

# Animations

.left-code[
.box-inv-6[Use [**gganimate**](https://gganimate.com/) to map variables to a time aesthetic]

```r
ggplot(gapminder, 
       aes(x = gdpPercap, y = lifeExp, 
           size = pop, color = country)) +
  geom_point(alpha = 0.7) +
  scale_size(range = c(2, 12)) +
  scale_x_log10(labels = dollar_format()) +
  guides(size = FALSE, color = FALSE) +
  facet_wrap(vars(continent)) +
  # Special gganimate stuff
  labs(title = 'Year: {frame_time}') +
  transition_time(year) +
  ease_aes('linear')
```
]

.right-plot[
![](img/03/gapminder.gif)
]

---

# Interactivity

.box-inv-6.medium[Single plots with **plotly**]

.box-6.small.sp-after[Easy!]

.box-inv-6.medium[Dashboards with **flexdashboard**]

.box-6.small.sp-after[Slightly more complicated]

.box-inv-6.medium[Complete interactive apps with **Shiny**]

.box-6.small[Super complicated!]

---

# Single plots with plotly

.box-inv-6[[Plotly](https://plotly.com/graphing-libraries/) is special software for creating interactive plots with JavaScript]

.box-inv-6.sp-after[No knowledge of JavaScript needed!]

.box-6[`ggplotly()` in the **plotly** R package translates between R and Javascript for you!]

---

# Plotly

.left-code[

```r
library(gapminder)
library(plotly)

gapminder_2007 <- filter(gapminder, 
 year == 2007)

my_plot <- ggplot(
 data = gapminder_2007,
 mapping = aes(x = gdpPercap, y = lifeExp, 
 color = continent)) +
 geom_point() +
 scale_x_log10() +
 theme_minimal()
```

```r
ggplotly(my_plot)
```
]

.pull-right.small-code[
<div id="htmlwidget-27d288508920f510bdd3" style="width:504px;height:504px;" class="plotly html-widget"></div>
<script type="application/json" data-for="htmlwidget-27d288508920f510bdd3">{"x":{"data":[{"x":[3.79402544509666,3.68099065562682,3.1587498285201,4.09933015629768,3.08530235219712,2.63353984732021,3.31007599301138,2.848814873635,3.23148583131337,2.99394204506796,2.44334414004637,3.56021253312911,3.18885823537455,3.31858116595608,3.74672610693845,4.08472243900371,2.80710831941093,2.83935583435696,4.12078722664154,2.87665060639063,3.1230701584329,2.9743524119827,2.76285235400399,3.16531831968284,3.19571467604724,2.61753222691212,4.08125724466051,3.01902074595738,2.88044194586588,3.0181100381011,3.25603221652431,4.03969130967891,3.58208328429303,2.91576148434958,3.68224081186337,2.79216530171644,3.30405457229069,3.88480230343241,2.93605531183875,3.20369500466057,3.23362351372365,2.93577962517273,2.96667714274902,3.96706370233863,3.41537321502711,3.65451158423759,3.04433674769752,2.94594592049266,3.85082524675123,3.02382022004224,3.10421784482941,2.67182915731664],"y":[72.301,42.731,56.728,50.728,52.295,49.58,50.43,44.741,50.651,65.152,46.462,55.322,48.328,54.791,71.338,51.579,58.04,52.947,56.735,59.448,60.022,56.007,46.388,54.11,42.592,45.678,73.952,59.443,48.303,54.467,64.164,72.801,71.164,42.082,52.906,56.867,46.859,76.442,46.242,65.528,63.062,42.568,48.159,49.339,58.556,39.613,52.517,58.42,73.923,51.542,42.384,43.487],"text":["gdpPercap: 6223.3675 lifeExp: 72.301 continent: Africa","gdpPercap: 4797.2313 lifeExp: 42.731 continent: Africa","gdpPercap: 1441.2849 lifeExp: 56.728 continent: Africa","gdpPercap: 12569.8518 lifeExp: 50.728 continent: Africa","gdpPercap: 1217.0330 lifeExp: 52.295 continent: Africa","gdpPercap: 430.0707 lifeExp: 49.580 continent: Africa","gdpPercap: 2042.0952 lifeExp: 50.430 continent: Africa","gdpPercap: 706.0165 lifeExp: 44.741 continent: Africa","gdpPercap: 1704.0637 lifeExp: 50.651 continent: Africa","gdpPercap: 986.1479 lifeExp: 65.152 continent: Africa","gdpPercap: 277.5519 lifeExp: 46.462 continent: Africa","gdpPercap: 3632.5578 lifeExp: 55.322 continent: Africa","gdpPercap: 1544.7501 lifeExp: 48.328 continent: Africa","gdpPercap: 2082.4816 lifeExp: 54.791 continent: Africa","gdpPercap: 5581.1810 lifeExp: 71.338 continent: Africa","gdpPercap: 12154.0897 lifeExp: 51.579 continent: Africa","gdpPercap: 641.3695 lifeExp: 58.040 continent: Africa","gdpPercap: 690.8056 lifeExp: 52.947 continent: Africa","gdpPercap: 13206.4845 lifeExp: 56.735 continent: Africa","gdpPercap: 752.7497 lifeExp: 59.448 continent: Africa","gdpPercap: 1327.6089 lifeExp: 60.022 continent: Africa","gdpPercap: 942.6542 lifeExp: 56.007 continent: Africa","gdpPercap: 579.2317 lifeExp: 46.388 continent: Africa","gdpPercap: 1463.2493 lifeExp: 54.110 continent: Africa","gdpPercap: 1569.3314 lifeExp: 42.592 continent: Africa","gdpPercap: 414.5073 lifeExp: 45.678 continent: Africa","gdpPercap: 12057.4993 lifeExp: 73.952 continent: Africa","gdpPercap: 1044.7701 lifeExp: 59.443 continent: Africa","gdpPercap: 759.3499 lifeExp: 48.303 continent: Africa","gdpPercap: 1042.5816 lifeExp: 54.467 continent: Africa","gdpPercap: 1803.1515 lifeExp: 64.164 continent: Africa","gdpPercap: 10956.9911 lifeExp: 72.801 continent: Africa","gdpPercap: 3820.1752 lifeExp: 71.164 continent: Africa","gdpPercap: 823.6856 lifeExp: 42.082 continent: Africa","gdpPercap: 4811.0604 lifeExp: 52.906 continent: Africa","gdpPercap: 619.6769 lifeExp: 56.867 continent: Africa","gdpPercap: 2013.9773 lifeExp: 46.859 continent: Africa","gdpPercap: 7670.1226 lifeExp: 76.442 continent: Africa","gdpPercap: 863.0885 lifeExp: 46.242 continent: Africa","gdpPercap: 1598.4351 lifeExp: 65.528 continent: Africa","gdpPercap: 1712.4721 lifeExp: 63.062 continent: Africa","gdpPercap: 862.5408 lifeExp: 42.568 continent: Africa","gdpPercap: 926.1411 lifeExp: 48.159 continent: Africa","gdpPercap: 9269.6578 lifeExp: 49.339 continent: Africa","gdpPercap: 2602.3950 lifeExp: 58.556 continent: Africa","gdpPercap: 4513.4806 lifeExp: 39.613 continent: Africa","gdpPercap: 1107.4822 lifeExp: 52.517 continent: Africa","gdpPercap: 882.9699 lifeExp: 58.420 continent: Africa","gdpPercap: 7092.9230 lifeExp: 73.923 continent: Africa","gdpPercap: 1056.3801 lifeExp: 51.542 continent: Africa","gdpPercap: 1271.2116 lifeExp: 42.384 continent: Africa","gdpPercap: 469.7093 lifeExp: 43.487 continent: Africa"],"type":"scatter","mode":"markers","marker":{"autocolorscale":false,"color":"rgba(248,118,109,1)","opacity":1,"size":5.66929133858268,"symbol":"circle","line":{"width":1.88976377952756,"color":"rgba(248,118,109,1)"}},"hoveron":"points","name":"Africa","legendgroup":"Africa","showlegend":true,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null},{"x":[4.10650977201769,3.58230625931688,3.95740617340857,4.56013669242519,4.11963981438709,3.84550611104731,3.98430499758718,3.95173097080165,3.77998406330737,3.83716291957619,3.75802981175127,3.71483669984604,3.0797733480287,3.55002410662006,3.86456330372846,4.07836889751077,3.43922544380543,3.99163295350919,3.6204315729333,3.86975405900188,4.28620284789525,4.25547776303394,4.632979883279,4.02577526370184,4.05750656798335],"y":[75.32,65.554,72.39,80.653,78.553,72.889,78.782,78.273,72.235,74.994,71.878,70.259,60.916,70.198,72.567,76.195,72.899,75.537,71.752,71.421,78.746,69.819,78.242,76.384,73.747],"text":["gdpPercap: 12779.3796 lifeExp: 75.320 continent: Americas","gdpPercap: 3822.1371 lifeExp: 65.554 continent: Americas","gdpPercap: 9065.8008 lifeExp: 72.390 continent: Americas","gdpPercap: 36319.2350 lifeExp: 80.653 continent: Americas","gdpPercap: 13171.6388 lifeExp: 78.553 continent: Americas","gdpPercap: 7006.5804 lifeExp: 72.889 continent: Americas","gdpPercap: 9645.0614 lifeExp: 78.782 continent: Americas","gdpPercap: 8948.1029 lifeExp: 78.273 continent: Americas","gdpPercap: 6025.3748 lifeExp: 72.235 continent: Americas","gdpPercap: 6873.2623 lifeExp: 74.994 continent: Americas","gdpPercap: 5728.3535 lifeExp: 71.878 continent: Americas","gdpPercap: 5186.0500 lifeExp: 70.259 continent: Americas","gdpPercap: 1201.6372 lifeExp: 60.916 continent: Americas","gdpPercap: 3548.3308 lifeExp: 70.198 continent: Americas","gdpPercap: 7320.8803 lifeExp: 72.567 continent: Americas","gdpPercap: 11977.5750 lifeExp: 76.195 continent: Americas","gdpPercap: 2749.3210 lifeExp: 72.899 continent: Americas","gdpPercap: 9809.1856 lifeExp: 75.537 continent: Americas","gdpPercap: 4172.8385 lifeExp: 71.752 continent: Americas","gdpPercap: 7408.9056 lifeExp: 71.421 continent: Americas","gdpPercap: 19328.7090 lifeExp: 78.746 continent: Americas","gdpPercap: 18008.5092 lifeExp: 69.819 continent: Americas","gdpPercap: 42951.6531 lifeExp: 78.242 continent: Americas","gdpPercap: 10611.4630 lifeExp: 76.384 continent: Americas","gdpPercap: 11415.8057 lifeExp: 73.747 continent: Americas"],"type":"scatter","mode":"markers","marker":{"autocolorscale":false,"color":"rgba(163,165,0,1)","opacity":1,"size":5.66929133858268,"symbol":"circle","line":{"width":1.88976377952756,"color":"rgba(163,165,0,1)"}},"hoveron":"points","name":"Americas","legendgroup":"Americas","showlegend":true,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null},{"x":[2.98881764549129,4.47415867018597,3.143406361057,3.23395473727517,3.6954041667466,4.59906367268864,3.38955773121288,3.54908318988216,4.06467188236304,3.65041068311967,4.40693643553008,4.50045697098462,3.65508665949928,3.20223362703668,4.3682522837381,4.67492531406996,4.01957563822304,4.09522710701315,3.49076900592376,2.97497199429807,3.03796794384465,4.34862010618943,3.41596567540354,3.50385616482709,4.33555481758265,4.67341887079622,3.59880094359832,3.62164856315343,4.45815837772449,3.87264545733796,3.38767031916547,3.4807755960326,3.35808147396803],"y":[43.828,75.635,64.062,59.723,72.961,82.208,64.698,70.65,70.964,59.545,80.745,82.603,72.535,67.297,78.623,77.588,71.993,74.241,66.803,62.069,63.785,75.64,65.483,71.688,72.777,79.972,72.396,74.143,78.4,70.616,74.249,73.422,62.698],"text":["gdpPercap: 974.5803 lifeExp: 43.828 continent: Asia","gdpPercap: 29796.0483 lifeExp: 75.635 continent: Asia","gdpPercap: 1391.2538 lifeExp: 64.062 continent: Asia","gdpPercap: 1713.7787 lifeExp: 59.723 continent: Asia","gdpPercap: 4959.1149 lifeExp: 72.961 continent: Asia","gdpPercap: 39724.9787 lifeExp: 82.208 continent: Asia","gdpPercap: 2452.2104 lifeExp: 64.698 continent: Asia","gdpPercap: 3540.6516 lifeExp: 70.650 continent: Asia","gdpPercap: 11605.7145 lifeExp: 70.964 continent: Asia","gdpPercap: 4471.0619 lifeExp: 59.545 continent: Asia","gdpPercap: 25523.2771 lifeExp: 80.745 continent: Asia","gdpPercap: 31656.0681 lifeExp: 82.603 continent: Asia","gdpPercap: 4519.4612 lifeExp: 72.535 continent: Asia","gdpPercap: 1593.0655 lifeExp: 67.297 continent: Asia","gdpPercap: 23348.1397 lifeExp: 78.623 continent: Asia","gdpPercap: 47306.9898 lifeExp: 77.588 continent: Asia","gdpPercap: 10461.0587 lifeExp: 71.993 continent: Asia","gdpPercap: 12451.6558 lifeExp: 74.241 continent: Asia","gdpPercap: 3095.7723 lifeExp: 66.803 continent: Asia","gdpPercap: 944.0000 lifeExp: 62.069 continent: Asia","gdpPercap: 1091.3598 lifeExp: 63.785 continent: Asia","gdpPercap: 22316.1929 lifeExp: 75.640 continent: Asia","gdpPercap: 2605.9476 lifeExp: 65.483 continent: Asia","gdpPercap: 3190.4810 lifeExp: 71.688 continent: Asia","gdpPercap: 21654.8319 lifeExp: 72.777 continent: Asia","gdpPercap: 47143.1796 lifeExp: 79.972 continent: Asia","gdpPercap: 3970.0954 lifeExp: 72.396 continent: Asia","gdpPercap: 4184.5481 lifeExp: 74.143 continent: Asia","gdpPercap: 28718.2768 lifeExp: 78.400 continent: Asia","gdpPercap: 7458.3963 lifeExp: 70.616 continent: Asia","gdpPercap: 2441.5764 lifeExp: 74.249 continent: Asia","gdpPercap: 3025.3498 lifeExp: 73.422 continent: Asia","gdpPercap: 2280.7699 lifeExp: 62.698 continent: Asia"],"type":"scatter","mode":"markers","marker":{"autocolorscale":false,"color":"rgba(0,191,125,1)","opacity":1,"size":5.66929133858268,"symbol":"circle","line":{"width":1.88976377952756,"color":"rgba(0,191,125,1)"}},"hoveron":"points","name":"Asia","legendgroup":"Asia","showlegend":true,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null},{"x":[3.77356920876217,4.55782580062218,4.52753459151331,3.87194045947979,4.02860349094832,4.16492428251317,4.35856884462783,4.54750911081685,4.52123074598147,4.48387269225076,4.50745611553652,4.43993889119905,4.25548825822109,4.55847803563392,4.60933819969144,4.45590597950278,3.96632461957789,4.56582342810493,4.69335042800253,4.18723649435127,4.31195820191596,4.03376444688129,3.990628940935,4.27133768016358,4.41108505321789,4.4597100052953,4.52968372605252,4.57410560181062,3.92728187211911,4.52118074293136],"y":[76.423,79.829,79.441,74.852,73.005,75.748,76.486,78.332,79.313,80.657,79.406,79.483,73.338,81.757,78.885,80.546,74.543,79.762,80.196,75.563,78.098,72.476,74.002,74.663,77.926,80.941,80.884,81.701,71.777,79.425],"text":["gdpPercap: 5937.0295 lifeExp: 76.423 continent: Europe","gdpPercap: 36126.4927 lifeExp: 79.829 continent: Europe","gdpPercap: 33692.6051 lifeExp: 79.441 continent: Europe","gdpPercap: 7446.2988 lifeExp: 74.852 continent: Europe","gdpPercap: 10680.7928 lifeExp: 73.005 continent: Europe","gdpPercap: 14619.2227 lifeExp: 75.748 continent: Europe","gdpPercap: 22833.3085 lifeExp: 76.486 continent: Europe","gdpPercap: 35278.4187 lifeExp: 78.332 continent: Europe","gdpPercap: 33207.0844 lifeExp: 79.313 continent: Europe","gdpPercap: 30470.0167 lifeExp: 80.657 continent: Europe","gdpPercap: 32170.3744 lifeExp: 79.406 continent: Europe","gdpPercap: 27538.4119 lifeExp: 79.483 continent: Europe","gdpPercap: 18008.9444 lifeExp: 73.338 continent: Europe","gdpPercap: 36180.7892 lifeExp: 81.757 continent: Europe","gdpPercap: 40675.9964 lifeExp: 78.885 continent: Europe","gdpPercap: 28569.7197 lifeExp: 80.546 continent: Europe","gdpPercap: 9253.8961 lifeExp: 74.543 continent: Europe","gdpPercap: 36797.9333 lifeExp: 79.762 continent: Europe","gdpPercap: 49357.1902 lifeExp: 80.196 continent: Europe","gdpPercap: 15389.9247 lifeExp: 75.563 continent: Europe","gdpPercap: 20509.6478 lifeExp: 78.098 continent: Europe","gdpPercap: 10808.4756 lifeExp: 72.476 continent: Europe","gdpPercap: 9786.5347 lifeExp: 74.002 continent: Europe","gdpPercap: 18678.3144 lifeExp: 74.663 continent: Europe","gdpPercap: 25768.2576 lifeExp: 77.926 continent: Europe","gdpPercap: 28821.0637 lifeExp: 80.941 continent: Europe","gdpPercap: 33859.7484 lifeExp: 80.884 continent: Europe","gdpPercap: 37506.4191 lifeExp: 81.701 continent: Europe","gdpPercap: 8458.2764 lifeExp: 71.777 continent: Europe","gdpPercap: 33203.2613 lifeExp: 79.425 continent: Europe"],"type":"scatter","mode":"markers","marker":{"autocolorscale":false,"color":"rgba(0,176,246,1)","opacity":1,"size":5.66929133858268,"symbol":"circle","line":{"width":1.88976377952756,"color":"rgba(0,176,246,1)"}},"hoveron":"points","name":"Europe","legendgroup":"Europe","showlegend":true,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null},{"x":[4.53700472145269,4.40114211228811],"y":[81.235,80.204],"text":["gdpPercap: 34435.3674 lifeExp: 81.235 continent: Oceania","gdpPercap: 25185.0091 lifeExp: 80.204 continent: Oceania"],"type":"scatter","mode":"markers","marker":{"autocolorscale":false,"color":"rgba(231,107,243,1)","opacity":1,"size":5.66929133858268,"symbol":"circle","line":{"width":1.88976377952756,"color":"rgba(231,107,243,1)"}},"hoveron":"points","name":"Oceania","legendgroup":"Oceania","showlegend":true,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null}],"layout":{"margin":{"t":23.3059360730594,"r":7.30593607305936,"b":37.2602739726027,"l":37.2602739726027},"font":{"color":"rgba(0,0,0,1)","family":"","size":14.6118721461187},"xaxis":{"domain":[0,1],"automargin":true,"type":"linear","autorange":false,"range":[2.33084382564856,4.80585074240034],"tickmode":"array","ticktext":["300","1000","3000","10000","30000"],"tickvals":[2.47712125471966,3,3.47712125471966,4,4.47712125471966],"categoryorder":"array","categoryarray":["300","1000","3000","10000","30000"],"nticks":null,"ticks":"","tickcolor":null,"ticklen":3.65296803652968,"tickwidth":0,"showticklabels":true,"tickfont":{"color":"rgba(77,77,77,1)","family":"","size":11.689497716895},"tickangle":-0,"showline":false,"linecolor":null,"linewidth":0,"showgrid":true,"gridcolor":"rgba(235,235,235,1)","gridwidth":0.66417600664176,"zeroline":false,"anchor":"y","title":{"text":"gdpPercap","font":{"color":"rgba(0,0,0,1)","family":"","size":14.6118721461187}},"hoverformat":".2f"},"yaxis":{"domain":[0,1],"automargin":true,"type":"linear","autorange":false,"range":[37.4635,84.7525],"tickmode":"array","ticktext":["40","50","60","70","80"],"tickvals":[40,50,60,70,80],"categoryorder":"array","categoryarray":["40","50","60","70","80"],"nticks":null,"ticks":"","tickcolor":null,"ticklen":3.65296803652968,"tickwidth":0,"showticklabels":true,"tickfont":{"color":"rgba(77,77,77,1)","family":"","size":11.689497716895},"tickangle":-0,"showline":false,"linecolor":null,"linewidth":0,"showgrid":true,"gridcolor":"rgba(235,235,235,1)","gridwidth":0.66417600664176,"zeroline":false,"anchor":"x","title":{"text":"lifeExp","font":{"color":"rgba(0,0,0,1)","family":"","size":14.6118721461187}},"hoverformat":".2f"},"shapes":[{"type":"rect","fillcolor":null,"line":{"color":null,"width":0,"linetype":[]},"yref":"paper","xref":"paper","x0":0,"x1":1,"y0":0,"y1":1}],"showlegend":true,"legend":{"bgcolor":null,"bordercolor":null,"borderwidth":0,"font":{"color":"rgba(0,0,0,1)","family":"","size":11.689497716895},"y":0.938132733408324},"annotations":[{"text":"continent","x":1.02,"y":1,"showarrow":false,"ax":0,"ay":0,"font":{"color":"rgba(0,0,0,1)","family":"","size":14.6118721461187},"xref":"paper","yref":"paper","textangle":-0,"xanchor":"left","yanchor":"bottom","legendTitle":true}],"hovermode":"closest","barmode":"relative"},"config":{"doubleClick":"reset","showSendToCloud":false},"source":"A","attrs":{"3ce2177847d7":{"x":{},"y":{},"colour":{},"type":"scatter"}},"cur_data":"3ce2177847d7","visdat":{"3ce2177847d7":["function (y) ","x"]},"highlight":{"on":"plotly_click","persistent":false,"dynamic":false,"selectize":false,"opacityDim":0.2,"selected":{"opacity":1},"debounce":0},"shinyEvents":["plotly_hover","plotly_click","plotly_selected","plotly_relayout","plotly_brushed","plotly_brushing","plotly_clickannotation","plotly_doubleclick","plotly_deselect","plotly_afterplot","plotly_sunburstclick"],"base_url":"https://plot.ly"},"evals":[],"jsHooks":[]}</script>
]

---

# Plotly tooltips

.left-code[

```r
my_plot <- ggplot(
 data = gapminder_2007,
 mapping = aes(x = gdpPercap, y = lifeExp, 
 color = continent)) +
* geom_point(aes(text = country)) +
 scale_x_log10() +
 theme_minimal()
```

```r
*interactive_plot <- ggplotly(
* my_plot, tooltip = "text"
*) 
*interactive_plot
```
]

.pull-right.small-code[
<div id="htmlwidget-33997b81ac4932f958bc" style="width:504px;height:504px;" class="plotly html-widget"></div>
<script type="application/json" data-for="htmlwidget-33997b81ac4932f958bc">{"x":{"data":[{"x":[3.79402544509666,3.68099065562682,3.1587498285201,4.09933015629768,3.08530235219712,2.63353984732021,3.31007599301138,2.848814873635,3.23148583131337,2.99394204506796,2.44334414004637,3.56021253312911,3.18885823537455,3.31858116595608,3.74672610693845,4.08472243900371,2.80710831941093,2.83935583435696,4.12078722664154,2.87665060639063,3.1230701584329,2.9743524119827,2.76285235400399,3.16531831968284,3.19571467604724,2.61753222691212,4.08125724466051,3.01902074595738,2.88044194586588,3.0181100381011,3.25603221652431,4.03969130967891,3.58208328429303,2.91576148434958,3.68224081186337,2.79216530171644,3.30405457229069,3.88480230343241,2.93605531183875,3.20369500466057,3.23362351372365,2.93577962517273,2.96667714274902,3.96706370233863,3.41537321502711,3.65451158423759,3.04433674769752,2.94594592049266,3.85082524675123,3.02382022004224,3.10421784482941,2.67182915731664],"y":[72.301,42.731,56.728,50.728,52.295,49.58,50.43,44.741,50.651,65.152,46.462,55.322,48.328,54.791,71.338,51.579,58.04,52.947,56.735,59.448,60.022,56.007,46.388,54.11,42.592,45.678,73.952,59.443,48.303,54.467,64.164,72.801,71.164,42.082,52.906,56.867,46.859,76.442,46.242,65.528,63.062,42.568,48.159,49.339,58.556,39.613,52.517,58.42,73.923,51.542,42.384,43.487],"text":["Algeria","Angola","Benin","Botswana","Burkina Faso","Burundi","Cameroon","Central African Republic","Chad","Comoros","Congo, Dem. Rep.","Congo, Rep.","Cote d'Ivoire","Djibouti","Egypt","Equatorial Guinea","Eritrea","Ethiopia","Gabon","Gambia","Ghana","Guinea","Guinea-Bissau","Kenya","Lesotho","Liberia","Libya","Madagascar","Malawi","Mali","Mauritania","Mauritius","Morocco","Mozambique","Namibia","Niger","Nigeria","Reunion","Rwanda","Sao Tome and Principe","Senegal","Sierra Leone","Somalia","South Africa","Sudan","Swaziland","Tanzania","Togo","Tunisia","Uganda","Zambia","Zimbabwe"],"type":"scatter","mode":"markers","marker":{"autocolorscale":false,"color":"rgba(248,118,109,1)","opacity":1,"size":5.66929133858268,"symbol":"circle","line":{"width":1.88976377952756,"color":"rgba(248,118,109,1)"}},"hoveron":"points","name":"Africa","legendgroup":"Africa","showlegend":true,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null},{"x":[4.10650977201769,3.58230625931688,3.95740617340857,4.56013669242519,4.11963981438709,3.84550611104731,3.98430499758718,3.95173097080165,3.77998406330737,3.83716291957619,3.75802981175127,3.71483669984604,3.0797733480287,3.55002410662006,3.86456330372846,4.07836889751077,3.43922544380543,3.99163295350919,3.6204315729333,3.86975405900188,4.28620284789525,4.25547776303394,4.632979883279,4.02577526370184,4.05750656798335],"y":[75.32,65.554,72.39,80.653,78.553,72.889,78.782,78.273,72.235,74.994,71.878,70.259,60.916,70.198,72.567,76.195,72.899,75.537,71.752,71.421,78.746,69.819,78.242,76.384,73.747],"text":["Argentina","Bolivia","Brazil","Canada","Chile","Colombia","Costa Rica","Cuba","Dominican Republic","Ecuador","El Salvador","Guatemala","Haiti","Honduras","Jamaica","Mexico","Nicaragua","Panama","Paraguay","Peru","Puerto Rico","Trinidad and Tobago","United States","Uruguay","Venezuela"],"type":"scatter","mode":"markers","marker":{"autocolorscale":false,"color":"rgba(163,165,0,1)","opacity":1,"size":5.66929133858268,"symbol":"circle","line":{"width":1.88976377952756,"color":"rgba(163,165,0,1)"}},"hoveron":"points","name":"Americas","legendgroup":"Americas","showlegend":true,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null},{"x":[2.98881764549129,4.47415867018597,3.143406361057,3.23395473727517,3.6954041667466,4.59906367268864,3.38955773121288,3.54908318988216,4.06467188236304,3.65041068311967,4.40693643553008,4.50045697098462,3.65508665949928,3.20223362703668,4.3682522837381,4.67492531406996,4.01957563822304,4.09522710701315,3.49076900592376,2.97497199429807,3.03796794384465,4.34862010618943,3.41596567540354,3.50385616482709,4.33555481758265,4.67341887079622,3.59880094359832,3.62164856315343,4.45815837772449,3.87264545733796,3.38767031916547,3.4807755960326,3.35808147396803],"y":[43.828,75.635,64.062,59.723,72.961,82.208,64.698,70.65,70.964,59.545,80.745,82.603,72.535,67.297,78.623,77.588,71.993,74.241,66.803,62.069,63.785,75.64,65.483,71.688,72.777,79.972,72.396,74.143,78.4,70.616,74.249,73.422,62.698],"text":["Afghanistan","Bahrain","Bangladesh","Cambodia","China","Hong Kong, China","India","Indonesia","Iran","Iraq","Israel","Japan","Jordan","Korea, Dem. Rep.","Korea, Rep.","Kuwait","Lebanon","Malaysia","Mongolia","Myanmar","Nepal","Oman","Pakistan","Philippines","Saudi Arabia","Singapore","Sri Lanka","Syria","Taiwan","Thailand","Vietnam","West Bank and Gaza","Yemen, Rep."],"type":"scatter","mode":"markers","marker":{"autocolorscale":false,"color":"rgba(0,191,125,1)","opacity":1,"size":5.66929133858268,"symbol":"circle","line":{"width":1.88976377952756,"color":"rgba(0,191,125,1)"}},"hoveron":"points","name":"Asia","legendgroup":"Asia","showlegend":true,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null},{"x":[3.77356920876217,4.55782580062218,4.52753459151331,3.87194045947979,4.02860349094832,4.16492428251317,4.35856884462783,4.54750911081685,4.52123074598147,4.48387269225076,4.50745611553652,4.43993889119905,4.25548825822109,4.55847803563392,4.60933819969144,4.45590597950278,3.96632461957789,4.56582342810493,4.69335042800253,4.18723649435127,4.31195820191596,4.03376444688129,3.990628940935,4.27133768016358,4.41108505321789,4.4597100052953,4.52968372605252,4.57410560181062,3.92728187211911,4.52118074293136],"y":[76.423,79.829,79.441,74.852,73.005,75.748,76.486,78.332,79.313,80.657,79.406,79.483,73.338,81.757,78.885,80.546,74.543,79.762,80.196,75.563,78.098,72.476,74.002,74.663,77.926,80.941,80.884,81.701,71.777,79.425],"text":["Albania","Austria","Belgium","Bosnia and Herzegovina","Bulgaria","Croatia","Czech Republic","Denmark","Finland","France","Germany","Greece","Hungary","Iceland","Ireland","Italy","Montenegro","Netherlands","Norway","Poland","Portugal","Romania","Serbia","Slovak Republic","Slovenia","Spain","Sweden","Switzerland","Turkey","United Kingdom"],"type":"scatter","mode":"markers","marker":{"autocolorscale":false,"color":"rgba(0,176,246,1)","opacity":1,"size":5.66929133858268,"symbol":"circle","line":{"width":1.88976377952756,"color":"rgba(0,176,246,1)"}},"hoveron":"points","name":"Europe","legendgroup":"Europe","showlegend":true,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null},{"x":[4.53700472145269,4.40114211228811],"y":[81.235,80.204],"text":["Australia","New Zealand"],"type":"scatter","mode":"markers","marker":{"autocolorscale":false,"color":"rgba(231,107,243,1)","opacity":1,"size":5.66929133858268,"symbol":"circle","line":{"width":1.88976377952756,"color":"rgba(231,107,243,1)"}},"hoveron":"points","name":"Oceania","legendgroup":"Oceania","showlegend":true,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null}],"layout":{"margin":{"t":23.3059360730594,"r":7.30593607305936,"b":37.2602739726027,"l":37.2602739726027},"font":{"color":"rgba(0,0,0,1)","family":"","size":14.6118721461187},"xaxis":{"domain":[0,1],"automargin":true,"type":"linear","autorange":false,"range":[2.33084382564856,4.80585074240034],"tickmode":"array","ticktext":["300","1000","3000","10000","30000"],"tickvals":[2.47712125471966,3,3.47712125471966,4,4.47712125471966],"categoryorder":"array","categoryarray":["300","1000","3000","10000","30000"],"nticks":null,"ticks":"","tickcolor":null,"ticklen":3.65296803652968,"tickwidth":0,"showticklabels":true,"tickfont":{"color":"rgba(77,77,77,1)","family":"","size":11.689497716895},"tickangle":-0,"showline":false,"linecolor":null,"linewidth":0,"showgrid":true,"gridcolor":"rgba(235,235,235,1)","gridwidth":0.66417600664176,"zeroline":false,"anchor":"y","title":{"text":"gdpPercap","font":{"color":"rgba(0,0,0,1)","family":"","size":14.6118721461187}},"hoverformat":".2f"},"yaxis":{"domain":[0,1],"automargin":true,"type":"linear","autorange":false,"range":[37.4635,84.7525],"tickmode":"array","ticktext":["40","50","60","70","80"],"tickvals":[40,50,60,70,80],"categoryorder":"array","categoryarray":["40","50","60","70","80"],"nticks":null,"ticks":"","tickcolor":null,"ticklen":3.65296803652968,"tickwidth":0,"showticklabels":true,"tickfont":{"color":"rgba(77,77,77,1)","family":"","size":11.689497716895},"tickangle":-0,"showline":false,"linecolor":null,"linewidth":0,"showgrid":true,"gridcolor":"rgba(235,235,235,1)","gridwidth":0.66417600664176,"zeroline":false,"anchor":"x","title":{"text":"lifeExp","font":{"color":"rgba(0,0,0,1)","family":"","size":14.6118721461187}},"hoverformat":".2f"},"shapes":[{"type":"rect","fillcolor":null,"line":{"color":null,"width":0,"linetype":[]},"yref":"paper","xref":"paper","x0":0,"x1":1,"y0":0,"y1":1}],"showlegend":true,"legend":{"bgcolor":null,"bordercolor":null,"borderwidth":0,"font":{"color":"rgba(0,0,0,1)","family":"","size":11.689497716895},"y":0.938132733408324},"annotations":[{"text":"continent","x":1.02,"y":1,"showarrow":false,"ax":0,"ay":0,"font":{"color":"rgba(0,0,0,1)","family":"","size":14.6118721461187},"xref":"paper","yref":"paper","textangle":-0,"xanchor":"left","yanchor":"bottom","legendTitle":true}],"hovermode":"closest","barmode":"relative"},"config":{"doubleClick":"reset","showSendToCloud":false},"source":"A","attrs":{"3ce27b52c76f":{"text":{},"x":{},"y":{},"colour":{},"type":"scatter"}},"cur_data":"3ce27b52c76f","visdat":{"3ce27b52c76f":["function (y) ","x"]},"highlight":{"on":"plotly_click","persistent":false,"dynamic":false,"selectize":false,"opacityDim":0.2,"selected":{"opacity":1},"debounce":0},"shinyEvents":["plotly_hover","plotly_click","plotly_selected","plotly_relayout","plotly_brushed","plotly_brushing","plotly_clickannotation","plotly_doubleclick","plotly_deselect","plotly_afterplot","plotly_sunburstclick"],"base_url":"https://plot.ly"},"evals":[],"jsHooks":[]}</script>
]

---

# Works with most geoms!

.left-code[

```r
car_hist <- ggplot(mpg, 
 aes(x = hwy)) +
 geom_histogram(binwdith = 2, 
 boundary = 0, 
 color = "white")
```

```r
ggplotly(car_hist)
```
]

.pull-right.small-code[
<div id="htmlwidget-7cd666f38989a7523a3c" style="width:504px;height:504px;" class="plotly html-widget"></div>
<script type="application/json" data-for="htmlwidget-7cd666f38989a7523a3c">{"x":{"data":[{"orientation":"v","width":[1.10344827586207,1.10344827586207,1.10344827586207,1.10344827586207,1.10344827586207,1.10344827586206,1.10344827586207,1.10344827586206,1.10344827586206,1.10344827586207,1.10344827586206,1.10344827586206,1.10344827586207,1.10344827586206,1.10344827586207,1.10344827586206,1.10344827586206,1.10344827586207,1.10344827586206,1.10344827586207,1.10344827586206,1.10344827586206,1.10344827586206,1.10344827586206,1.10344827586206,1.10344827586206,1.10344827586206,1.10344827586206,1.10344827586206,1.10344827586206],"base":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"x":[11.5862068965517,12.6896551724138,13.7931034482759,14.8965517241379,16,17.1034482758621,18.2068965517241,19.3103448275862,20.4137931034483,21.5172413793103,22.6206896551724,23.7241379310345,24.8275862068966,25.9310344827586,27.0344827586207,28.1379310344828,29.2413793103448,30.3448275862069,31.448275862069,32.551724137931,33.6551724137931,34.7586206896552,35.8620689655172,36.9655172413793,38.0689655172414,39.1724137931034,40.2758620689655,41.3793103448276,42.4827586206897,43.5862068965517],"y":[5,0,2,10,7,31,10,13,11,9,7,13,15,32,14,7,22,4,11,2,1,2,2,1,0,0,0,1,0,2],"text":["count: 5 hwy: 11.58621","count: 0 hwy: 12.68966","count: 2 hwy: 13.79310","count: 10 hwy: 14.89655","count: 7 hwy: 16.00000","count: 31 hwy: 17.10345","count: 10 hwy: 18.20690","count: 13 hwy: 19.31034","count: 11 hwy: 20.41379","count: 9 hwy: 21.51724","count: 7 hwy: 22.62069","count: 13 hwy: 23.72414","count: 15 hwy: 24.82759","count: 32 hwy: 25.93103","count: 14 hwy: 27.03448","count: 7 hwy: 28.13793","count: 22 hwy: 29.24138","count: 4 hwy: 30.34483","count: 11 hwy: 31.44828","count: 2 hwy: 32.55172","count: 1 hwy: 33.65517","count: 2 hwy: 34.75862","count: 2 hwy: 35.86207","count: 1 hwy: 36.96552","count: 0 hwy: 38.06897","count: 0 hwy: 39.17241","count: 0 hwy: 40.27586","count: 1 hwy: 41.37931","count: 0 hwy: 42.48276","count: 2 hwy: 43.58621"],"type":"bar","marker":{"autocolorscale":false,"color":"rgba(89,89,89,1)","line":{"width":1.88976377952756,"color":"rgba(255,255,255,1)"}},"showlegend":false,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null}],"layout":{"margin":{"t":23.3059360730594,"r":7.30593607305936,"b":37.2602739726027,"l":37.2602739726027},"plot_bgcolor":"rgba(235,235,235,1)","paper_bgcolor":"rgba(255,255,255,1)","font":{"color":"rgba(0,0,0,1)","family":"","size":14.6118721461187},"xaxis":{"domain":[0,1],"automargin":true,"type":"linear","autorange":false,"range":[9.37931034482759,45.7931034482759],"tickmode":"array","ticktext":["10","20","30","40"],"tickvals":[10,20,30,40],"categoryorder":"array","categoryarray":["10","20","30","40"],"nticks":null,"ticks":"outside","tickcolor":"rgba(51,51,51,1)","ticklen":3.65296803652968,"tickwidth":0.66417600664176,"showticklabels":true,"tickfont":{"color":"rgba(77,77,77,1)","family":"","size":11.689497716895},"tickangle":-0,"showline":false,"linecolor":null,"linewidth":0,"showgrid":true,"gridcolor":"rgba(255,255,255,1)","gridwidth":0.66417600664176,"zeroline":false,"anchor":"y","title":{"text":"hwy","font":{"color":"rgba(0,0,0,1)","family":"","size":14.6118721461187}},"hoverformat":".2f"},"yaxis":{"domain":[0,1],"automargin":true,"type":"linear","autorange":false,"range":[-1.6,33.6],"tickmode":"array","ticktext":["0","10","20","30"],"tickvals":[0,10,20,30],"categoryorder":"array","categoryarray":["0","10","20","30"],"nticks":null,"ticks":"outside","tickcolor":"rgba(51,51,51,1)","ticklen":3.65296803652968,"tickwidth":0.66417600664176,"showticklabels":true,"tickfont":{"color":"rgba(77,77,77,1)","family":"","size":11.689497716895},"tickangle":-0,"showline":false,"linecolor":null,"linewidth":0,"showgrid":true,"gridcolor":"rgba(255,255,255,1)","gridwidth":0.66417600664176,"zeroline":false,"anchor":"x","title":{"text":"count","font":{"color":"rgba(0,0,0,1)","family":"","size":14.6118721461187}},"hoverformat":".2f"},"shapes":[{"type":"rect","fillcolor":null,"line":{"color":null,"width":0,"linetype":[]},"yref":"paper","xref":"paper","x0":0,"x1":1,"y0":0,"y1":1}],"showlegend":false,"legend":{"bgcolor":"rgba(255,255,255,1)","bordercolor":"transparent","borderwidth":1.88976377952756,"font":{"color":"rgba(0,0,0,1)","family":"","size":11.689497716895}},"hovermode":"closest","barmode":"relative"},"config":{"doubleClick":"reset","showSendToCloud":false},"source":"A","attrs":{"3ce2421b0b03":{"x":{},"type":"bar"}},"cur_data":"3ce2421b0b03","visdat":{"3ce2421b0b03":["function (y) ","x"]},"highlight":{"on":"plotly_click","persistent":false,"dynamic":false,"selectize":false,"opacityDim":0.2,"selected":{"opacity":1},"debounce":0},"shinyEvents":["plotly_hover","plotly_click","plotly_selected","plotly_relayout","plotly_brushed","plotly_brushing","plotly_clickannotation","plotly_doubleclick","plotly_deselect","plotly_afterplot","plotly_sunburstclick"],"base_url":"https://plot.ly"},"evals":[],"jsHooks":[]}</script>
]

---

# Save as HTML

.box-inv-6[Save a self-contained HTML version of it with `saveWidget()` in the **htmlwidgets** R package]

```r
# This is like ggsave, but for interactive HTML plots
htmlwidgets::saveWidget(interactive_plot, "fancy_plot.html")
```

---

# Fully documented

.box-inv-6[The [documentation](https://plotly.com/ggplot2/) for ggplot2 + plotly is full of examples of how to customize everything]

.box-inv-6[Rely on that ↑ + Google to make really fancy (and easy!) interactive plots]

---

# Interactivity

.box-inv-6.medium[Single plots with **plotly**]

.box-6.small.sp-after[Easy!]

.box-inv-6.medium[Dashboards with **flexdashboard**]

.box-6.small.sp-after[Slightly more complicated]

---

# Dashboards with **flexdashboard**

.box-inv-6[Use basic R Markdown to build a dashboard!]

.center[
<figure>
 <img src="img/03/flexdashboard-simple.png" alt="flexdashboard simple layout" title="flexdashboard simple layout" width="80%">
</figure>
]

---

# Dashboards with **flexdashboard**

.box-inv-6[Make any kind of block arrangement]

.center[
<figure>
 <img src="img/03/flexdashboard-complex.png" alt="flexdashboard complex layout" title="flexdashboard complex layout" width="75%">
</figure>
]

---

# Dashboards with **flexdashboard**

.box-inv-6[Add other elements like text and gauges]

.center[
<figure>
 <img src="img/03/value-boxes.png" alt="flexdashboard value boxes" title="flexdashboard value boxes" width="80%">
</figure>

<figure>
 <img src="img/03/gauges.png" alt="flexdashboard gauges" title="flexdashboard gauges" width="80%">
</figure>
]

---

# Example dashboards

.center[
<figure>
 <img src="img/03/flexdashboard-example.png" alt="flexdashboard simple example" title="flexdashboard simple example" width="80%">
 <figcaption><a href="https://beta.rstudioconnect.com/jjallaire/htmlwidgets-ggplotly-geoms/" target="_blank">ggplot2 geoms</a></figcaption>
</figure>
]

---

# Example dashboards

.center[
<figure>
 <img src="img/03/flexdashboard-heatmap.png" alt="flexdashboard heatmap example" title="flexdashboard heatmap example" width="80%">
 <figcaption><a href="https://beta.rstudioconnect.com/jjallaire/htmlwidgets-d3heatmap/" target="_blank">NBA scoring</a></figcaption>
</figure>
]

---

# Example dashboards

.center[
<figure>
 <img src="img/03/utah-covid.png" alt="Utah's COVID-19 dashboard" title="Utah's COVID-19 dashboard" width="90%">
 <figcaption><a href="https://coronavirus-dashboard.utah.gov/" target="_blank">Utah's COVID-19 dashboard</a></figcaption>
</figure>
]

---

# Outstanding documentation

.box-inv-6[The [documentation](https://rmarkdown.rstudio.com/flexdashboard/index.html) for **flexdashboard** is full of examples and details of everything you can do]

.box-inv-6[Rely on that ↑ + Google to make really fancy (and easy!) dashboards!]

---

# Interactivity

.box-inv-6.medium[Single plots with **plotly**]

.box-6.small.sp-after[Easy!]

.box-inv-6.medium[Dashboards with **flexdashboard**]

.box-6.small.sp-after[Slightly more complicated]

.box-inv-6.medium[Complete interactive apps with **Shiny**]

.box-6.small[Super complicated!]

---

# Shiny

.box-inv-6.medium[Shiny is a complete web application framework for interactive statistics]

.box-inv-6.sp-after[It's super complex and hard for beginners]

.box-6.medium[I've never made a standalone Shiny app!]

.box-6.small[(And I don't plan on trying anytime soon)]

---

# Lots of resources to help start

.box-inv-6[RStudio has [a whole website for helping you get started](https://shiny.rstudio.com/tutorial/)]

.center[
<figure>
 <img src="img/03/shiny-getting-started.png" alt="Getting started with Shiny" title="Getting started with Shiny" width="50%">
 <figcaption><a href="https://shiny.rstudio.com/tutorial/" target="_blank">Getting started with Shiny</a></figcaption>
</figure>
]

---

# Really neat examples!

.center[
<figure>
 <img src="img/03/isee-shiny.png" alt="iSEE" title="iSEE" width="65%">
 <figcaption><a href="https://shiny.rstudio.com/gallery/isee.html" target="_blank">iSEE (interactive SummarizedExperiment Explorer)</a></figcaption>
</figure>
]

---

# Really neat examples!

.center[
<figure>
 <img src="img/03/covid-shiny.png" alt="COVID-19 tracker" title="COVID-19 tracker" width="65%">
 <figcaption><a href="https://shiny.rstudio.com/gallery/covid19-tracker.html" target="_blank">COVID-19 tracker</a></figcaption>
</figure>
]

---

# Really neat examples!

.center[
<figure>
 <img src="img/03/lego-shiny.png" alt="Living in the LEGO world" title="Living in the LEGO world" width="65%">
 <figcaption><a href="https://shiny.rstudio.com/gallery/lego-world.html" target="_blank">Living in the LEGO world</a></figcaption>
</figure>
]

---

# flexdashboard + Shiny

.box-inv-6[You can [use reactive Shiny things in flexdashboards](https://rmarkdown.rstudio.com/flexdashboard/shiny.html) without building a complete Shiny app!]

.box-6.small[I *have* done this]

.center[
<figure>
 <img src="img/03/why-donors-donate.png" alt="Why Donors Donate" title="Why Donors Donate" width="45%">
</figure>
]