Interactive Charts in Shiny

# Interactive Charts in Shiny
## with billboard.js, highcharts.js and more!
### <br><br>Bethany Yollin
### <br><br><br><br><br>Seattle R Users Group Meetup<br>December 12, 2019

---

.column.bg-main1[.content[
  # What is an interactive chart?
]]

.column[.content[
# 
  * Tooltips and labels triggered by clicking on or hovering over chart elements
  * Controls that enable or disable variables or fundamentally change how data is displayed
  * Controls that expand or highlight certain data elements of a visualization

???

- TODO

---

.column.bg-main1[.content[
  # highcharter
]]

.column[.content[
# 
  * The R package `highcharter` is a wrapper for highcharts.js
  * Supports many chart types
  * Supports easy-to-read piping notation
  * highchart.js is free for non-commercial use
  * Excellent API reference: [.light-blue[api.highcharts.com/highcharts/]](https://api.highcharts.com/highcharts/)

```r
# install from CRAN
install.packages('highcharter')

# install development version from GitHub
devtools::install_github('jbkunst/highcharter')
```

???

- TODO

---

.column.bg-main1[.content[
  # billboarder
]]

.column[.content[
# 
  * The R package `billboarder` is a wrapper for billboard.js
  * Supports many chart types
  * Supports easy-to-read piping notation
  * billboard.js is free and licensed under the MIT license
  * Excellent API reference: [.light-blue[naver.github.io/billboard.js/release/latest/doc/]](https://naver.github.io/billboard.js/release/latest/doc/)

```r
# install from CRAN
install.packages('billboarder')

# install development version from GitHub
devtools::install_github('dreamRs/billboarder')
```

???

- TODO

---

.column.bg-main1[.content[
  # Data
]]

```r
src = 'https://opendata.arcgis.com/datasets/5b5c745e0f1f48e7a53acec63a0022ab_0.csv'
x = readr::read_csv(src) %>%
  filter(INCDATE >= '2004-01-01', INCDATE <= '2019-10-31')
x
```

```
## # A tibble: 214,822 x 40
##        X     Y OBJECTID INCKEY COLDETKEY REPORTNO STATUS ADDRTYPE INTKEY
##    <dbl> <dbl>    <dbl>  <dbl>     <dbl> <chr>    <chr>  <chr>     <dbl>
##  1 -122.  47.7     1001   1313      1313 3501630  Match… Block        NA
##  2 -122.  47.6     1002   1312      1312 3476309  Match… Interse…  30138
##  3 -122.  47.6     1003   1311      1311 2606572  Match… Block        NA
##  4 -122.  47.6     1004  20500     20500 1788144  Match… Block        NA
##  5 -122.  47.7     1005   1310      1310 3507863  Match… Interse…  37116
##  6 -122.  47.7     1006  20400     20400 1220377  Match… Block        NA
##  7 -122.  47.6     1007  20300     20300 1069351  Match… Interse…  29121
##  8 -122.  47.6     1008  20200     20200 1214098  Match… Block        NA
##  9 -122.  47.7     1009   1309      1309 3507768  Match… Block        NA
## 10 -122.  47.6     1010   1246      1246 3643905  Match… Block        NA
## # … with 214,812 more rows, and 31 more variables: LOCATION <chr>,
## #   EXCEPTRSNCODE <chr>, EXCEPTRSNDESC <chr>, SEVERITYCODE <chr>,
## #   SEVERITYDESC <chr>, COLLISIONTYPE <chr>, PERSONCOUNT <dbl>,
## #   PEDCOUNT <dbl>, PEDCYLCOUNT <dbl>, VEHCOUNT <dbl>, INJURIES <dbl>,
## #   SERIOUSINJURIES <dbl>, FATALITIES <dbl>, INCDATE <dttm>,
## #   INCDTTM <chr>, JUNCTIONTYPE <chr>, SDOT_COLCODE <chr>,
## #   SDOT_COLDESC <chr>, INATTENTIONIND <chr>, UNDERINFL <chr>,
## #   WEATHER <chr>, ROADCOND <chr>, LIGHTCOND <chr>, PEDROWNOTGRNT <chr>,
## #   SDOTCOLNUM <chr>, SPEEDING <chr>, ST_COLCODE <dbl>, ST_COLDESC <chr>,
## #   SEGLANEKEY <dbl>, CROSSWALKKEY <dbl>, HITPARKEDCAR <chr>
```
]]

???

- We'll get some data from the City of Seattle's open data web portal. This link is a data set of
  collisions since 2004.
- We have information like latitude and longitude, the closest intersection, the collision severity 
  (i.e., injuries or fatalities), weather, road and lighting conditions, number of vehicles, 
  cyclist or pedestrians involved, etc.

---

class: split-70 hide-slide-number
background-image: url('images/leaves.jpg')
background-size: cover

.column.slide-in-left[
.sliderbox.vmiddle.shade_main.center.content[
  # Common charts]]
.column[
]

---

.column.bg-main1[.content[
  # Time series
]]

.column[.content[
# 
  * Time series charts are good for understanding trends for one or more variables over time
  * There are several libraries that plot time-series data well including: `highcharter` and `billboarder`
  * Use `highcharter::hchart()` similar to `ggplot2::qplot()`
  * Use `highcharter::hcaes()` much like `ggplot2::aes()`

```r
y = x %>%
  group_by(INCMONTH = floor_date(ymd(INCDATE), unit = 'month')) %>%
  summarise(CNT = n())
hchart(y, type = 'line', hcaes(x = INCMONTH, y = CNT), name = 'Collisions',
       color = '#669900')
```

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

???

- TODO

---

.column.bg-main1[.content[
  # Time series
]]

.column[.content[
# 
  * Build a highchart layer by layer with `highcharter::highchart()` and `highcharter::hc_add_series()`

```r
z = y %>% mutate(MA = zoo::rollmean(CNT, k = 2, fill = NA, align = 'right'))
highchart() %>% hc_xAxis(type = 'datetime') %>% 
  hc_add_series(type = 'line', data = z, hcaes(x = INCMONTH, y = CNT), name = 'Collisions',
                color = '#669900') %>% 
  hc_add_series(type = 'spline', data = z, hcaes(x = INCMONTH, y = MA),
                name = 'Moving Average', color = '#333333')
```

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

???

- TODO

---

.column.bg-main1[.content[
  # Time series
]]

```r
billboarder() %>% bb_linechart(data = y) %>% 
  bb_x_axis(tick = list(format = '%b %Y', fit = TRUE)) %>% 
  bb_subchart(show = T, size = list(height = 30), axis = list(x = list(show = F))) %>% 
  bb_legend(show = FALSE)
```

<div id="htmlwidget-b8119682516ddced5a9f" style="width:100%;height:200px;" class="billboarder html-widget"></div>
<script type="application/json" data-for="htmlwidget-b8119682516ddced5a9f">{"x":{"bb_opts":{"interaction":{"inputType":{"touch":false}},"axis":{"x":{"type":"timeseries","tick":{"format":"%b %Y","fit":true}}},"data":{"x":"INCMONTH","json":{"INCMONTH":["2004-01-01","2004-02-01","2004-03-01","2004-04-01","2004-05-01","2004-06-01","2004-07-01","2004-08-01","2004-09-01","2004-10-01","2004-11-01","2004-12-01","2005-01-01","2005-02-01","2005-03-01","2005-04-01","2005-05-01","2005-06-01","2005-07-01","2005-08-01","2005-09-01","2005-10-01","2005-11-01","2005-12-01","2006-01-01","2006-02-01","2006-03-01","2006-04-01","2006-05-01","2006-06-01","2006-07-01","2006-08-01","2006-09-01","2006-10-01","2006-11-01","2006-12-01","2007-01-01","2007-02-01","2007-03-01","2007-04-01","2007-05-01","2007-06-01","2007-07-01","2007-08-01","2007-09-01","2007-10-01","2007-11-01","2007-12-01","2008-01-01","2008-02-01","2008-03-01","2008-04-01","2008-05-01","2008-06-01","2008-07-01","2008-08-01","2008-09-01","2008-10-01","2008-11-01","2008-12-01","2009-01-01","2009-02-01","2009-03-01","2009-04-01","2009-05-01","2009-06-01","2009-07-01","2009-08-01","2009-09-01","2009-10-01","2009-11-01","2009-12-01","2010-01-01","2010-02-01","2010-03-01","2010-04-01","2010-05-01","2010-06-01","2010-07-01","2010-08-01","2010-09-01","2010-10-01","2010-11-01","2010-12-01","2011-01-01","2011-02-01","2011-03-01","2011-04-01","2011-05-01","2011-06-01","2011-07-01","2011-08-01","2011-09-01","2011-10-01","2011-11-01","2011-12-01","2012-01-01","2012-02-01","2012-03-01","2012-04-01","2012-05-01","2012-06-01","2012-07-01","2012-08-01","2012-09-01","2012-10-01","2012-11-01","2012-12-01","2013-01-01","2013-02-01","2013-03-01","2013-04-01","2013-05-01","2013-06-01","2013-07-01","2013-08-01","2013-09-01","2013-10-01","2013-11-01","2013-12-01","2014-01-01","2014-02-01","2014-03-01","2014-04-01","2014-05-01","2014-06-01","2014-07-01","2014-08-01","2014-09-01","2014-10-01","2014-11-01","2014-12-01","2015-01-01","2015-02-01","2015-03-01","2015-04-01","2015-05-01","2015-06-01","2015-07-01","2015-08-01","2015-09-01","2015-10-01","2015-11-01","2015-12-01","2016-01-01","2016-02-01","2016-03-01","2016-04-01","2016-05-01","2016-06-01","2016-07-01","2016-08-01","2016-09-01","2016-10-01","2016-11-01","2016-12-01","2017-01-01","2017-02-01","2017-03-01","2017-04-01","2017-05-01","2017-06-01","2017-07-01","2017-08-01","2017-09-01","2017-10-01","2017-11-01","2017-12-01","2018-01-01","2018-02-01","2018-03-01","2018-04-01","2018-05-01","2018-06-01","2018-07-01","2018-08-01","2018-09-01","2018-10-01","2018-11-01","2018-12-01","2019-01-01","2019-02-01","2019-03-01","2019-04-01","2019-05-01","2019-06-01","2019-07-01","2019-08-01","2019-09-01","2019-10-01"],"CNT":[1167,1060,1218,1254,1320,1287,1275,1361,1262,1443,1336,1444,1192,1080,1333,1349,1395,1372,1396,1346,1304,1447,1417,1385,1434,1232,1229,1307,1276,1327,1281,1318,1285,1356,1519,1230,1325,1036,1275,1140,1297,1331,1304,1266,1244,1398,1270,1196,1207,1024,1182,1193,1187,1153,1134,1259,1153,1302,1203,1142,984,882,1059,1067,1283,1192,1205,1092,1082,1299,1128,1002,998,950,944,902,977,1003,1026,1055,966,1176,1037,924,1022,860,1075,1030,1051,1127,1029,1007,1060,1070,1059,1026,936,880,1061,1042,1107,1033,1035,1137,1038,1258,1088,1117,1031,880,985,1123,1130,1113,1129,1131,1079,1076,1108,972,987,942,1051,1074,1160,1066,1155,1152,1108,1283,1123,1111,1107,1004,1133,1164,1154,1258,1251,1243,1228,1285,1226,1207,1162,1089,1169,1076,1113,1213,1126,1219,1141,1355,1080,1158,985,886,1028,962,1117,1028,1047,991,1088,1141,1102,1101,1125,912,998,919,1048,1008,1064,987,957,1091,1025,1062,930,764,870,931,1029,1007,999,908,807,936]},"types":{"CNT":"line"}},"point":{"show":false},"subchart":{"show":true,"size":{"height":30},"axis":{"x":{"show":false}}},"legend":{"show":false}},"bb_empty":{"data":{"json":[]},"axis":{"x":{"show":false},"y":{"show":false}},"grid":{"y":{"lines":[{"value":0.5,"text":"No data","position":"middle","class":"empty"}]}},"customstyle":{"custom_style":".bb-ygrid-line.empty line{stroke: transparent;} .bb-ygrid-line.empty text{font-size: 200%;}"}},"data":null},"evals":[],"jsHooks":[]}</script>

```r
y = xts::xts(x = y$CNT, order.by = y$INCMONTH)
hchart(y, name = 'Collisions')
```

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

???

- TODO

---

.column.bg-main1[.content[
  # Scatter
]]

.column[.content[
# 
  * Data from the CDC 500 Cities project
  * We can use `highcharter::hchart(type = 'scatter', ...)` to create a scatter chart

```r
load('data/cdc500cities.Rdata')
cdc = cdc %>% mutate(Location = paste0(PlaceName, ', ', StateAbbr))
hchart(cdc, type = 'scatter',
       hcaes(x = DIABETES_AdjPrev, y = OBESITY_AdjPrev, group = Location)) %>%
  hc_legend(enabled = FALSE)
```

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

???

- The collisions dataset I downloaded was not really great for showing a scatter chart in action, 
  so I happened to have this CDC 500 Cities project data on hand. CDC 500 Cities project is a 
  study of health outcomes in 500 U.S. cities.
- Along with x-axis I have the prevalence of diabetes, and along the y-axis I have the prevalence of
  obesity. Each dot in this chart is a city. It's no surprise there is a strong relationship beween 
  diabetes and obesity.
- We can pick out some extreme values in our scatter chart. For example, in the far upper-right we 
  have Gary, IN and in the lower-left we see Boulder, CO.

---

.column.bg-main1[.content[
  # Bar
]]

.column[.content[
# 
  * Bar charts are great at showing the relationship between categories and numbers
  * Use `highcharter::hchart(type = 'column', ...)` to create a bar chart
  * Use the `group` parameter in `highcharter::hcaes()` to add a grouping

```r
y = x %>% filter(COLLISIONTYPE %in% c('Pedestrian', 'Cycles')) %>% 
  group_by(INCYEAR = year(INCDATE), COLLISIONTYPE) %>%
  summarise(CNT = n())
hchart(y, type = 'column', hcaes(x = INCYEAR, y = CNT, group = COLLISIONTYPE))
```

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

???

- TODO

---

.column.bg-main1[.content[
  # Bar
]]

.column[.content[
# 
  * With `billboarder::bb_barchart()` it's easy to create a stacked bar chart
  * Use `reshape2::dcast()` to pivot the data
  * Use `billboarder::bb_color()` or `billboarder::bb_color_manual()` to control colors

```r
y = x %>%
  group_by(INCYEAR = year(INCDATE), SEVERITYDESC) %>%
  summarise(CNT = n()) %>% reshape2::dcast(INCYEAR~SEVERITYDESC)
billboarder() %>% bb_barchart(data = y, stacked = T) %>% 
  bb_color(palette = c('#E58606','#5D69B1','#52BCA3','#99C945','#CC61B0'))
```

<div id="htmlwidget-a0632db6a0c775240883" style="width:100%;height:250px;" class="billboarder html-widget"></div>
<script type="application/json" data-for="htmlwidget-a0632db6a0c775240883">{"x":{"bb_opts":{"interaction":{"inputType":{"touch":false}},"data":{"x":"bb-x","json":{"bb-x":[2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017,2018,2019],"Fatality Collision":[30,28,34,14,20,24,18,10,20,23,17,17,24,21,14,21],"Injury Collision":[3637,4450,4350,4017,3767,3378,3245,3099,3467,3290,3490,3752,3714,3419,3358,2453],"Property Damage Only Collision":[8203,10665,10838,10439,9893,8356,7563,7820,7440,7287,8351,9243,7945,7452,7060,5122],"Serious Injury Collision":[221,206,293,245,193,200,179,142,175,166,172,143,167,167,173,146],"Unknown":[3336,667,279,367,266,1317,953,1345,1630,1991,1182,1105,2051,1417,1591,1439]},"type":"bar","groups":[["Fatality Collision","Injury Collision","Property Damage Only Collision","Serious Injury Collision","Unknown"]]},"bar":[],"axis":{"x":{"type":"category"},"rotated":false},"color":{"pattern":["#E58606","#5D69B1","#52BCA3","#99C945","#CC61B0"]}},"bb_empty":{"data":{"json":[]},"axis":{"x":{"show":false},"y":{"show":false}},"grid":{"y":{"lines":[{"value":0.5,"text":"No data","position":"middle","class":"empty"}]}},"customstyle":{"custom_style":".bb-ygrid-line.empty line{stroke: transparent;} .bb-ygrid-line.empty text{font-size: 200%;}"}},"data":null},"evals":[],"jsHooks":[]}</script>
]]

???

- TODO

---

.column.bg-main1[.content[
  # Pie or donut
]]

.column[.content[
# 
  * Pie or donut charts are not as bad as some people would have you believe
  * Use `billboarder::bb_piechart()` to create a pie chart
  * Change legend position with `billboarder::bb_legend()`

```r
y = x %>% filter(COLLISIONTYPE %in% c('Pedestrian', 'Cycles')) %>% 
  group_by(SEVERITYDESC) %>% 
  summarise(CNT = n())
billboarder() %>% bb_piechart(y) %>% bb_legend(position = 'right')
```

<div id="htmlwidget-dd7dc0e2a767f96d4260" style="width:95%;height:300px;" class="billboarder html-widget"></div>
<script type="application/json" data-for="htmlwidget-dd7dc0e2a767f96d4260">{"x":{"bb_opts":{"interaction":{"inputType":{"touch":false}},"data":{"json":{"Fatality Collision":[148],"Injury Collision":[10392],"Property Damage Only Collision":[1307],"Serious Injury Collision":[1235]},"type":"pie"},"pie":[],"legend":{"position":"right"}},"bb_empty":{"data":{"json":[]},"axis":{"x":{"show":false},"y":{"show":false}},"grid":{"y":{"lines":[{"value":0.5,"text":"No data","position":"middle","class":"empty"}]}},"customstyle":{"custom_style":".bb-ygrid-line.empty line{stroke: transparent;} .bb-ygrid-line.empty text{font-size: 200%;}"}},"data":null},"evals":[],"jsHooks":[]}</script>
]]

???

- TODO

---

.column.bg-main1[.content[
  # Pie or donut
]]

.column[.content[
# 
  * If you or your audience has an aversion to pie charts, consider using a donut chart
  * Use `billboarder::bb_donutchart()` to create a donut chart

```r
billboarder() %>% bb_donutchart(y) %>% bb_legend(position = 'right')
```

<div id="htmlwidget-6c13a2c4cd2c1f8b3d5b" style="width:95%;height:350px;" class="billboarder html-widget"></div>
<script type="application/json" data-for="htmlwidget-6c13a2c4cd2c1f8b3d5b">{"x":{"bb_opts":{"interaction":{"inputType":{"touch":false}},"data":{"json":{"Fatality Collision":[148],"Injury Collision":[10392],"Property Damage Only Collision":[1307],"Serious Injury Collision":[1235]},"type":"donut"},"donut":[],"legend":{"position":"right"}},"bb_empty":{"data":{"json":[]},"axis":{"x":{"show":false},"y":{"show":false}},"grid":{"y":{"lines":[{"value":0.5,"text":"No data","position":"middle","class":"empty"}]}},"customstyle":{"custom_style":".bb-ygrid-line.empty line{stroke: transparent;} .bb-ygrid-line.empty text{font-size: 200%;}"}},"data":null},"evals":[],"jsHooks":[]}</script>
]]

???

- TODO

---

class: split-70 hide-slide-number
background-image: url('images/leaves.jpg')
background-size: cover

.column.slide-in-left[
.sliderbox.vmiddle.shade_main.center.content[
  # Advanced charts]]
.column[
]

---

.column.bg-main1[.content[
  # Histograms and density
]]

.column[.content[
# 
  * A histogram can be used to understand the distribution of data
  * Use `highcharter::hchart(type = 'histogram', ...)` to make a histogram

```r
y = x %>% group_by(INCDATE) %>% summarise(CNT = n())
hchart(y$CNT, type = 'histogram', name = 'Daily Collisions', color = '#669900')
```

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

```r
hchart(hist(y$CNT, breaks = 30, plot = F), type = 'histogram', name = 'Daily Collisions',
       color = '#669900')
```

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

???

- TODO

---

.column.bg-main1[.content[
  # Histograms and density
]]

.column[.content[
# 
  * To create a density plot, apply `stats::density()` to the data and use `type = 'area'` in the `billboarder::hchart()` function

```r
hchart(density(y$CNT), type = 'area', name = 'Daily Collisions', color = '#669900')
```

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

???

- TODO

---

.column.bg-main1[.content[
  # Boxplots
]]

.column[.content[
# 
  * Boxplots are useful for understanding distributions in data
  * The shortcut `highcharter::hcboxplot` automatically provides a tooltip displaying distribution characteristics

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

???

- A boxplot is not as common of a visualization and can be confusing for audiences that are not 
  familiar with statistics.

---

.column.bg-main1[.content[
  # Boxplots
]]

```r
y = x %>% mutate(INCMONTH = month(INCDATE, label = T), INCYEAR = year(INCDATE)) %>% 
  group_by(INCYEAR, INCMONTH) %>% summarise(CNT = n())
hcboxplot(x = y$CNT, var = y$INCMONTH, outliers = F, name = 'Boxplot', color = '#669900') %>% 
    hc_add_series(y, 'scatter', color = '#66990060',
                  hcaes(x = INCMONTH, y = CNT, group = INCYEAR),
                  tooltip = list(pointFormat = '<b>{point.y}</b><br/>'),
                  marker = list(radius = 3))
```

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

???

- Assuming our data doesn't have too many points, we can add a scatter plot to our boxplot to get a 
  more detailed view of the data.

---

.column.bg-main1[.content[
  # Heatmaps
]]

.column[.content[
# 
  * A heatmap displays values in a matrix represented as colors
  * We can use `highcharter::hchart(type = 'heatmap', ...)` to create a heatmap

```r
y = x %>% 
  mutate(INCDTTM = parse_date_time(INCDTTM, orders = c('%m/%d/%Y %H:%M:%S %p'),
                                   tz = 'America/Los_Angeles')) %>% 
  filter(!is.na(INCDTTM)) %>%
  mutate(INCHOUR = hour(INCDTTM), INCMONTH = month(INCDTTM, label = TRUE)) %>%
  group_by(INCHOUR, INCMONTH) %>% 
  summarize(CNT = n())
hchart(y, 'heatmap', hcaes(x = INCHOUR, y = INCMONTH, value = CNT))
```

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

???

- In this visualization, I've created a matrix. Along the y-axis I have the month and along the 
  x-axis I have the time of day. Each cell shows the number of collisions that have occured during 
  each hour of the month.
- I think this visualization is okay. Let's see what we can do to spice up this heatmap.

---

.column.bg-main1[.content[
  # Heatmaps
]]

.column[.content[
# 
  * Use a short Javascript snippet to format the tooltip
  * Using `hc_colorAxis` we can modify the color pallete

```r
tooltip_formatter = JS("function() {
    return this.point.x + ':00 ' +  this.series.yAxis.categories[this.point.y] + '<br>' +
    this.point.value.toLocaleString();
}")

hchart(y, 'heatmap', hcaes(x = INCHOUR, y = INCMONTH, value = CNT)) %>% 
  hc_colorAxis(stops = color_stops(10, rev(viridis::magma(10)))) %>% 
  hc_xAxis(categories = paste0(0:23, ':00')) %>% 
  hc_yAxis(reversed = TRUE) %>% 
  hc_tooltip(formatter = tooltip_formatter) %>% 
  hc_legend(layout = 'vertical', verticalAlign = 'top', align = 'right')
```

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

???

- With a few extra lines of code, our heatmap became a much more engaging visualization. Here we 
  are leveraging the viridis package to create a really nice gradient palette.
- We cleaned up some of the formatting on the x-axis for time of day. I moved to legend to the 
  right of the graphic and I've copied a Javascript snippet from a blogpost to make a more legible 
  tooltip.

---

.column.bg-main1[.content[
  # Tables
]]

.column[.content[
# 
  * Tables can be interesting with the `DT` package, a wrapper for the DataTables jQuery plug-in
  * Use `DT::datatable()`

```r
y = x %>% mutate(Year = year(INCDATE)) %>% 
  group_by(Year) %>%
  summarize(Injuries = sum(SEVERITYDESC == 'Injury Collision'),
            `Serious Injuries` = sum(SEVERITYDESC == 'Serious Injury Collision'),
            Fatalities = sum(SEVERITYDESC == 'Fatality Collision'))
datatable(y, rownames = FALSE, options = list(pageLength = 5, scrollY = '200px'))
```

<div id="htmlwidget-c1d4a8ad42cb291fca8e" style="width:100%;height:auto;" class="datatables html-widget"></div>
<script type="application/json" data-for="htmlwidget-c1d4a8ad42cb291fca8e">{"x":{"filter":"none","data":[[2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017,2018,2019],[3637,4450,4350,4017,3767,3378,3245,3099,3467,3290,3490,3752,3714,3419,3358,2453],[221,206,293,245,193,200,179,142,175,166,172,143,167,167,173,146],[30,28,34,14,20,24,18,10,20,23,17,17,24,21,14,21]],"container":"<table class=\"display\">\n  <thead>\n    <tr>\n      <th>Year<\/th>\n      <th>Injuries<\/th>\n      <th>Serious Injuries<\/th>\n      <th>Fatalities<\/th>\n    <\/tr>\n  <\/thead>\n<\/table>","options":{"pageLength":5,"scrollY":"200px","columnDefs":[{"className":"dt-right","targets":[0,1,2,3]}],"order":[],"autoWidth":false,"orderClasses":false,"lengthMenu":[5,10,25,50,100]}},"evals":[],"jsHooks":[]}</script>
]]

???

- Tables don't have to be boring!

---

.column.bg-main1[.content[
  # Tables
]]

```r
breaks = quantile(y$Fatalities, probs = seq(.05, .95, .05), na.rm = TRUE)
cols = viridis::magma(length(breaks) + 1, begin = 0.5, direction = -1)
datatable(y, rownames = FALSE, class = 'compact stripe',
          options = list(pageLength = 10)) %>%
  formatStyle('Fatalities', backgroundColor = styleInterval(breaks, cols))
```

<div id="htmlwidget-6ff509a4cbd803be03a9" style="width:100%;height:auto;" class="datatables html-widget"></div>
<script type="application/json" data-for="htmlwidget-6ff509a4cbd803be03a9">{"x":{"filter":"none","data":[[2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017,2018,2019],[3637,4450,4350,4017,3767,3378,3245,3099,3467,3290,3490,3752,3714,3419,3358,2453],[221,206,293,245,193,200,179,142,175,166,172,143,167,167,173,146],[30,28,34,14,20,24,18,10,20,23,17,17,24,21,14,21]],"container":"<table class=\"compact stripe\">\n  <thead>\n    <tr>\n      <th>Year<\/th>\n      <th>Injuries<\/th>\n      <th>Serious Injuries<\/th>\n      <th>Fatalities<\/th>\n    <\/tr>\n  <\/thead>\n<\/table>","options":{"pageLength":10,"columnDefs":[{"className":"dt-right","targets":[0,1,2,3]}],"order":[],"autoWidth":false,"orderClasses":false,"rowCallback":"function(row, data) {\nvar value=data[3]; $(this.api().cell(row, 3).node()).css({'background-color':isNaN(parseFloat(value)) ? '' : value <= 13 ? \"#FCFDBFFF\" : value <= 14 ? \"#FCF1B3FF\" : value <= 14.75 ? \"#FDE4A6FF\" : value <= 17 ? \"#FED89AFF\" : value <= 17 ? \"#FECC8FFF\" : value <= 17.5 ? \"#FEC084FF\" : value <= 18.5 ? \"#FEB37BFF\" : value <= 20 ? \"#FEA772FF\" : value <= 20 ? \"#FD9A6AFF\" : value <= 20.5 ? \"#FC8D64FF\" : value <= 21 ? \"#FA815FFF\" : value <= 21 ? \"#F8745CFF\" : value <= 22.5 ? \"#F4685CFF\" : value <= 23.5 ? \"#EF5C5EFF\" : value <= 24 ? \"#E85362FF\" : value <= 24 ? \"#DF4B68FF\" : value <= 27 ? \"#D6456CFF\" : value <= 29 ? \"#CC3F71FF\" : value <= 31 ? \"#C03A76FF\" : \"#B63679FF\"});\n}"}},"evals":["options.rowCallback"],"jsHooks":[]}</script>
]]

???

- Here we are applying some conditional formatting on the "Fatalities" column. Once again, I make 
  use of the viridis package for a nice gradient color palette.

---

class: split-70 hide-slide-number
background-image: url('images/leaves.jpg')
background-size: cover

.column.slide-in-left[
.sliderbox.vmiddle.shade_main.center.content[
  # Other charts]]
.column[
]

---

.column.bg-main1[.content[
  # Streamgraph
]]

.column[.content[
# 
  * A streamgraph is, roughly speaking, a stacked area chart
  * While a streamgraph is not the most accurate way to represent data, it can make for a compelling visulization

```r
# install from GitHub
devtools::install_github('hrbrmstr/streamgraph')
```

```r
cols = c('#40004b', '#762a83', '#9970ab', '#c2a5cf', '#e7d4e8',
         '#d9f0d3', '#a6dba0', '#5aae61', '#1b7837', '#00441b')
streamgraph(data = y, key = LOCATION, value = CNT, date = INCDATE) %>%
  sg_axis_x(tick_units = 'year', tick_format = '%Y') %>%
  sg_fill_manual(values = cols)
```

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

???

- A streamgraph is, roughly speaking, a stacked area chart with a varying central axis instead of 
  a fixed central axis.
- For this visualization, we have identified the 10 "most dangerous" intersections, which here I've 
  defined as intersections with the most injuries and fatalities. I have then summed the total 
  number of collisions for each year by intersection. The code I used to do this will be available 
  on Github.
- As we can see, the graph is kind of "wavy" and difficult to make a very quantitative assessment 
  of the data, but generally speaking, we can see an overall downward trend which is evident by the 
  gradual "narrowing" of the streamgraph.
- A streamgraph can be a neat visualization when we value aesthetics over legibility.

---

.column.bg-main1[.content[
  # Gauges
]]

.column[.content[
# 
  * Gauges are useful for visualizing trends toward a target
  * The `billboarder` package has good support for creating and customizing gauges with `billboarder::bb_gaugechart()`

```r
billboarder() %>% bb_gaugechart(value = 95)
```

<div id="htmlwidget-8dff2e9985b89240c4f4" style="width:100%;height:150px;" class="billboarder html-widget"></div>
<script type="application/json" data-for="htmlwidget-8dff2e9985b89240c4f4">{"x":{"bb_opts":{"interaction":{"inputType":{"touch":false}},"data":{"json":{"Value":[95]},"type":"gauge"},"gauge":[],"color":{"pattern":["#FF0000","#F97600","#F6C600","#60B044"],"threshold":{"values":[30,60,90,100]}}},"bb_empty":{"data":{"json":[]},"axis":{"x":{"show":false},"y":{"show":false}},"grid":{"y":{"lines":[{"value":0.5,"text":"No data","position":"middle","class":"empty"}]}},"customstyle":{"custom_style":".bb-ygrid-line.empty line{stroke: transparent;} .bb-ygrid-line.empty text{font-size: 200%;}"}},"data":null},"evals":[],"jsHooks":[]}</script>

```r
billboarder() %>% bb_gaugechart(value = 25)
```

<div id="htmlwidget-b974751026d5a596c59f" style="width:100%;height:150px;" class="billboarder html-widget"></div>
<script type="application/json" data-for="htmlwidget-b974751026d5a596c59f">{"x":{"bb_opts":{"interaction":{"inputType":{"touch":false}},"data":{"json":{"Value":[25]},"type":"gauge"},"gauge":[],"color":{"pattern":["#FF0000","#F97600","#F6C600","#60B044"],"threshold":{"values":[30,60,90,100]}}},"bb_empty":{"data":{"json":[]},"axis":{"x":{"show":false},"y":{"show":false}},"grid":{"y":{"lines":[{"value":0.5,"text":"No data","position":"middle","class":"empty"}]}},"customstyle":{"custom_style":".bb-ygrid-line.empty line{stroke: transparent;} .bb-ygrid-line.empty text{font-size: 200%;}"}},"data":null},"evals":[],"jsHooks":[]}</script>
]]

???

- TODO

---

.column.bg-main1[.content[
  # Map
]]

.column[.content[
# 
  * A map is the coolest way you can visualize your data
  * Check out the `leaflet` package
  * For more details about using leaflet see: [.light-blue[byollin.github.io/ShinyLeaflet/]](https://byollin.github.io/ShinyLeaflet/)

```r
y = sf::st_as_sf(filter(x, !is.na(X), !is.na(Y), INCDATE >= '2019-01-01'),
                 coords = c('X', 'Y'), crs = 4326)
leaflet() %>%
  addProviderTiles(providers$CartoDB.Positron) %>% 
  setView(lng = -122.330412, lat = 47.609056, zoom = 14) %>% 
  addCircleMarkers(data = y, fillColor = '#ff5c33', color = '#661400',
                   fillOpacity = 1, opacity = 1, radius = 3, weight = 2,
                   label = y$INCDATE, clusterOptions = markerClusterOptions())
```

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

???

- In my humble opinion, a map is the absolute coolest way you can visualize your data.
- I could make a whole presentation on building leaflet maps with R, in fact, I have, so I won't 
  dwell too much here.
- In this example, we are looking at collisions that have occured in 2019. We have added marker 
  clusters to get a sense of where the majority of collisions are concentrated.

---

.column.bg-main1[.content[
  # Other
]]

.column[.content[
# 
  * Pass a `princomp` object to `highcharter::hchart()` to visualizes the results of PCA

```r
load('data/cdc500cities.Rdata')
cdc = cdc %>% mutate(Location = paste0(PlaceName, ', ', StateAbbr)) %>% as_tibble() %>% 
  select(Location, ends_with('AdjPrev')) %>% select(-PAPTEST_AdjPrev)
cdc = data.frame(cdc[, 2:ncol(cdc)], row.names = cdc$Location)
pr = princomp(cdc, cor = TRUE)
hchart(pr)
```
  * See next slide!
]]

---

.column.bg-main1[.content[
  # Other
]]

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

---

class: split-70 hide-slide-number
background-image: url('images/leaves.jpg')
background-size: cover

.column.slide-in-left[
.sliderbox.vmiddle.shade_main.center.content[
  # Interactive charts in Shiny]]
.column[
]

---

.column.bg-main1[.content[
  # Shiny integration
]]

.column[.content[
# 
  * In the UI code, include an output function (e.g., `billboarderOutput`, `highchartOutput`, etc.)
  * In the server code, build the visualization with a render function (e.g., `renderBillboarder`, `renderHighchart`, etc.)

```r
ui = fluidPage(
    titlePanel('Interactive Chart'),
    sidebarLayout(
        sidebarPanel(
            sliderInput('bins', label = 'Number of bins:',
                        min = 1, max = 100, value = 30)
        ),
        mainPanel(
            billboarderOutput('histogram')
        )
    )
)

server = function(input, output) {
    x = rnorm(1000)
    output$histogram = renderBillboarder({
        billboarder() %>% bb_histogram(data = data, bins = input$bins)
    })
}
  
shinyApp(ui, server)
```
]]

???

- This code is a very simple Shiny application that will adjust the number of bins in a histogram

---

class: split-70 hide-slide-number
background-image: url('images/leaves.jpg')
background-size: cover

.column.slide-in-left[
.sliderbox.vmiddle.shade_main.center.content[
  # Live demo]]
.column[
]

---

.column.bg-main1[.content[
  # Vision Zero Dashboard
]]

.column[
# 
  * Vision Zero is an ambitious plan to end traffic related deaths and serious injuries by 2030
  * The Vision Zero Dashboard [.light-blue[byollin.shinyapps.io/VisionZero]](https://byollin.shinyapps.io/VisionZero/) is an interactive tool to track progress towards this goal
  
.img-fill[![](images/seattle_vision_zero_dashboard.png)]
]

---

# Resources
  * Higcharter package documentation and demos: [.yellow[jkunst.com/highcharter/index.html]](http://jkunst.com/highcharter/index.html)
  * highcharts.js API reference: [.yellow[api.highcharts.com/highcharts/]](https://api.highcharts.com/highcharts/)
  * Billboarder package documentation and demos: [.yellow[dreamrs.github.io/billboarder/articles/billboarder.html]](https://dreamrs.github.io/billboarder/articles/billboarder.html)
  * billboard.js API reference: [.yellow[naver.github.io/billboard.js/release/latest/doc/]](https://naver.github.io/billboard.js/release/latest/doc/)
  * Dygraphs package documentation and demos: [.yellow[rstudio.github.io/dygraphs/]](https://rstudio.github.io/dygraphs/)
  * DT package documentation and demos: [.yellow[rstudio.github.io/DT/]](https://rstudio.github.io/DT/)
  * Leaflet package documentation and demos: [.yellow[rstudio.github.io/leaflet/]](https://rstudio.github.io/leaflet/)

---

# Thank you!
  * Find the source code for this presentation here: <span><i class="fab  fa-github faa-shake animated-hover "></i></span> [.yellow[github.com/byollin/RInteractiveCharts]](https://github.com/byollin/RInteractiveCharts)
  * The slides can be accessed here: <span><i class="fab  fa-github faa-shake animated-hover "></i></span> [.yellow[byollin.github.io/RInteractiveCharts/]](http://byollin.github.io/RInteractiveCharts/)
  * The source code for the Vision Zero dashboard here: <span><i class="fab  fa-github faa-shake animated-hover "></i></span> [.yellow[github.com/byollin/RInteractiveCharts/tree/master/collisions_dashboard]](https://github.com/byollin/RInteractiveCharts/tree/master/collisions_dashboard)
  * Please feel free to reach out or connect on LinkedIn!
  
--

.content.center[
  <span><i class="fas  fa-question fa-10x faa-pulse animated " style=" color:white;"></i></span>
]