Bringing Interactivity to Classic Clinical Plots with Highcharts and R

name: title
class: title-slide

background-image: url(pics/templ_title.png)
background-position: 50% 100%
background-size: 100% 35%

# Bringing Interactivity to Classic Clinical Plots with <span style='color:#5f976c'>Highcharts</span> and <span style='color:#1f65cc'>R</span>

## Iaroslav Domin

---
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/Hoffmann-La_Roche_logo.svg/1920px-Hoffmann-La_Roche_logo.svg.png)
background-size: 65px
background-position: 98% 3%
name: layout
layout: true

---
name: agenda
exclude: false

# Agenda

<div style='font-size:28px; line-height: 50px;'>
1. Interactive visualization in R: overview
2. Highcharts principles
3. Clinical graphs with Highcharts
4. Helpful resources
<div/>

---
name: clinical-graphs
class: center, middle

#Interactive Visualization in R

---
name: gg-shiny
exclude: false

# static plot + shiny

<div style="position: absolute; top:470px; left: 110px; font-size: 200%; line-height: 60px;">
&#x2611; convenient
<br/>
&#9746; limited
</div>

---

name: fortunately
exclude: true

# Interfaces

---
name: alter
exclude: false
name: plotly + bokeh

# Popular libraries available in R

.pull-left[
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/37/Plotly-logo-01-square.png/220px-Plotly-logo-01-square.png" height = 200>

```r
library(plotly)
```

* JavaScript
* free (paid support)
* official R package 
* can translate ggplot2 to plotly 
]

.pull-right[
<img src="http://pyviz.org/assets/bokeh.png" height = 200>

```r
library(rbokeh)
```

* Python
* open-source
* fast
* not so fancy
]

???

[others](http://www.rebeccabarter.com/blog/2017-04-20-interactive/)

---
name: hc-intro
exclude: false
# Highcharts

.pull-left[
<img src="https://cdn.freebiesupply.com/logos/large/2x/highcharts-logo-svg-vector.svg" height = 300>
]

.pull-right[

```r
library(highcharter)
```

<div style='line-height: 40px;'>
* <span style='color:#3d94d1; font-size:28px;'>**looks awesome!**</span>
* <span style='color:#d62d20; font-size:28px;'>**not free**</span>
* <span style='font-size:22px;'>JavaScript</span>
]
</div>

---
name: clinical-graphs
class: center, middle

#Highcharts vs Ggplot2

---
name: gg-philosophy-1
exclude: false

# ggplot2 philosophy

---
name: gg-philosophy-2
exclude: false

# ggplot2 philosophy

```r
ggplot(df, aes(x = s_length, y = s_width, color = species))
```

---
name: gg-philosophy-3
exclude: false

# ggplot2 philosophy

```r
ggplot(df, aes(x = s_length, y = s_width, color = species)) +
  geom_point()
```

---
name: gg-philosophy-4
exclude: false

# ggplot2 philosophy

```r
ggplot(df, aes(x = s_length, y = s_width, color = species)) +
  geom_point() + 
  geom_smooth()
```

---
name: hc-philosophy
exclude: false

# Highcharts philosophy

### Dataframes?

### No, lists!

```js
series: [{
    name: 'SUBJ-01',
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133]
}, {
    name: 'SUBJ-02',
    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121]
}, {
    name: 'SUBJ-03',
    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147]
}, {
    name: 'SUBJ-04',
    data: [null, null, 7988, 12169, 15112, 22452, 34400]
}],
...
```

???
historically - HC initially built for timeseries data
nested lists is very natural thing for js as far as i can judge (at least more than for R)

---
name: optional
exclude: false

# Options are Optional

.pull-left[

```r
highchart(
  list(
    series = list(
*     list(name = "A",
*          data = c(2, 3, 1)),
*     list(name = "B",
*          data = c(5, 0, 2))
      )
  )
)
```
]

.pull-right[
<div id="htmlwidget-a195b7e7be31367ef611" style="width:100%;height:400px;" class="highchart html-widget"></div>
<script type="application/json" data-for="htmlwidget-a195b7e7be31367ef611">{"x":{"hc_opts":{"series":[{"name":"A","data":[2,3,1]},{"name":"B","data":[5,0,2]}]},"theme":{"chart":{"backgroundColor":"transparent"}},"conf_opts":{"global":{"Date":null,"VMLRadialGradientURL":"http =//code.highcharts.com/list(version)/gfx/vml-radial-gradient.png","canvasToolsURL":"http =//code.highcharts.com/list(version)/modules/canvas-tools.js","getTimezoneOffset":null,"timezoneOffset":0,"useUTC":true},"lang":{"contextButtonTitle":"Chart context menu","decimalPoint":".","downloadJPEG":"Download JPEG image","downloadPDF":"Download PDF document","downloadPNG":"Download PNG image","downloadSVG":"Download SVG vector image","drillUpText":"Back to {series.name}","invalidDate":null,"loading":"Loading...","months":["January","February","March","April","May","June","July","August","September","October","November","December"],"noData":"No data to display","numericSymbols":["k","M","G","T","P","E"],"printChart":"Print chart","resetZoom":"Reset zoom","resetZoomTitle":"Reset zoom level 1:1","shortMonths":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],"thousandsSep":" ","weekdays":["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]}},"type":"chart","fonts":[],"debug":false},"evals":[],"jsHooks":[]}</script>
]

---
name: more-lists-1
exclude: false

# We need to go deeper

```r
highchart(
    list(
      series = list(
        list(name = "A",
          data = list(
            2,
*           list(y = 3,
*                marker = list(radius = 20),
*                color = "red",
*                name = "RED POINT"),
            1)),
        list(name = "B",
           data = c(5, 0, 2))
        )
    )
)
```

???
(?) alter label option + add something interactive
further I will show a more impressive example of what can be done with individual point options
we
---
name: more-lists-2
exclude: false

# We need to go deeper
<div id="htmlwidget-f5820708d7c46a57638b" style="width:100%;height:500px;" class="highchart html-widget"></div>
<script type="application/json" data-for="htmlwidget-f5820708d7c46a57638b">{"x":{"hc_opts":{"series":[{"name":"A","data":[2,{"y":3,"marker":{"radius":20},"color":"red","name":"RED POINT"},1]},{"name":"B","data":[5,0,2]}]},"theme":{"chart":{"backgroundColor":"transparent"}},"conf_opts":{"global":{"Date":null,"VMLRadialGradientURL":"http =//code.highcharts.com/list(version)/gfx/vml-radial-gradient.png","canvasToolsURL":"http =//code.highcharts.com/list(version)/modules/canvas-tools.js","getTimezoneOffset":null,"timezoneOffset":0,"useUTC":true},"lang":{"contextButtonTitle":"Chart context menu","decimalPoint":".","downloadJPEG":"Download JPEG image","downloadPDF":"Download PDF document","downloadPNG":"Download PNG image","downloadSVG":"Download SVG vector image","drillUpText":"Back to {series.name}","invalidDate":null,"loading":"Loading...","months":["January","February","March","April","May","June","July","August","September","October","November","December"],"noData":"No data to display","numericSymbols":["k","M","G","T","P","E"],"printChart":"Print chart","resetZoom":"Reset zoom","resetZoomTitle":"Reset zoom level 1:1","shortMonths":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],"thousandsSep":" ","weekdays":["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]}},"type":"chart","fonts":[],"debug":false},"evals":[],"jsHooks":[]}</script>
???
the idea is that you can pick arbitrary part of the plot
and set whatever options you want

---
name: hc-helpers-1
exclude: false

# It's not that bad actually

```r
highchart() %>%
  hc_add_series(data = c(2, 3, 1), name = "A") %>% 
  hc_add_series(data = c(5, 0, 2), name = "B") %>% 
  hc_chart(type = "column") %>%
  hc_title(text = "Super Meaningful Chart")
```

---
name: hc-helpers-2
exclude: false

# It's not that bad actually

```r
*highchart() %>%
  hc_add_series(data = c(2, 3, 1), name = "A") %>% 
  hc_add_series(data = c(5, 0, 2), name = "B") %>% 
  hc_chart(type = "column") %>%
  hc_title(text = "Super Meaningful Chart")
```

---
name: hc-helpers-3
exclude: false

# It's not that bad actually

```r
highchart() %>%
* hc_add_series(data = c(2, 3, 1), name = "A") %>%
* hc_add_series(data = c(5, 0, 2), name = "B") %>%
  hc_chart(type = "column") %>%
  hc_title(text = "Super Meaningful Chart")
```

---
name: hc-helpers-4
exclude: false

# It's not that bad actually

```r
highchart() %>%
  hc_add_series(data = c(2, 3, 1), name = "A") %>% 
  hc_add_series(data = c(5, 0, 2), name = "B") %>% 
* hc_chart(type = "column") %>%
  hc_title(text = "Super Meaningful Chart")
```

---
name: hc-helpers-5
exclude: false

# It's not that bad actually

```r
highchart() %>%
  hc_add_series(data = c(2, 3, 1), name = "A") %>% 
  hc_add_series(data = c(5, 0, 2), name = "B") %>% 
  hc_chart(type = "column") %>%
* hc_title(text = "Super Meaningful Chart")
```

---
name: hc-helpers-6
exclude: false

# It's not that bad actually

<div id="htmlwidget-ad3d1cf09d4868caaeb6" style="width:500px;height:350px;" class="highchart html-widget"></div>
<script type="application/json" data-for="htmlwidget-ad3d1cf09d4868caaeb6">{"x":{"hc_opts":{"title":{"text":"Super Meaningful Chart"},"yAxis":{"title":{"text":null}},"credits":{"enabled":false},"exporting":{"enabled":false},"plotOptions":{"series":{"label":{"enabled":false},"turboThreshold":0},"treemap":{"layoutAlgorithm":"squarified"}},"series":[{"data":[2,3,1],"name":"A"},{"data":[5,0,2],"name":"B"}],"chart":{"type":"column"}},"theme":{"chart":{"backgroundColor":"transparent"}},"conf_opts":{"global":{"Date":null,"VMLRadialGradientURL":"http =//code.highcharts.com/list(version)/gfx/vml-radial-gradient.png","canvasToolsURL":"http =//code.highcharts.com/list(version)/modules/canvas-tools.js","getTimezoneOffset":null,"timezoneOffset":0,"useUTC":true},"lang":{"contextButtonTitle":"Chart context menu","decimalPoint":".","downloadJPEG":"Download JPEG image","downloadPDF":"Download PDF document","downloadPNG":"Download PNG image","downloadSVG":"Download SVG vector image","drillUpText":"Back to {series.name}","invalidDate":null,"loading":"Loading...","months":["January","February","March","April","May","June","July","August","September","October","November","December"],"noData":"No data to display","numericSymbols":["k","M","G","T","P","E"],"printChart":"Print chart","resetZoom":"Reset zoom","resetZoomTitle":"Reset zoom level 1:1","shortMonths":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],"thousandsSep":" ","weekdays":["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]}},"type":"chart","fonts":[],"debug":false},"evals":[],"jsHooks":[]}</script>

???
the author couldnt have just left us with these scary lists.
Added some helper functions. Would’ve been too cruel
what's cool in letting people write js-like in R?

---
name: hchart-gg
exclude: false

# Hey, I can do some ggplot2!

```r
hchart(df, "line", hcaes(x = x, y = y, group = arm))
```

<div id="htmlwidget-5997134e0e1c456c5d43" style="width:100%;height:450px;" class="highchart html-widget"></div>
<script type="application/json" data-for="htmlwidget-5997134e0e1c456c5d43">{"x":{"hc_opts":{"title":{"text":null},"yAxis":{"title":{"text":"y"},"type":"linear"},"credits":{"enabled":false},"exporting":{"enabled":false},"plotOptions":{"series":{"label":{"enabled":false},"turboThreshold":0,"showInLegend":true},"treemap":{"layoutAlgorithm":"squarified"},"scatter":{"marker":{"symbol":"circle"}}},"series":[{"name":"A","data":[{"arm":"A","x":1,"y":0.335744891669096},{"arm":"A","x":2,"y":0.907778767763113},{"arm":"A","x":3,"y":1.55867110488006},{"arm":"A","x":4,"y":0.76807678681293},{"arm":"A","x":5,"y":2.53309454393727},{"arm":"A","x":6,"y":4.28958029664177},{"arm":"A","x":7,"y":2.42659526224004},{"arm":"A","x":8,"y":3.42782013339887},{"arm":"A","x":9,"y":3.21923375675199},{"arm":"A","x":10,"y":2.93597649112207},{"arm":"A","x":11,"y":3.39663859864896},{"arm":"A","x":12,"y":2.1842116575136},{"arm":"A","x":13,"y":2.47998433802227},{"arm":"A","x":14,"y":2.24533551868417},{"arm":"A","x":15,"y":2.72197401456257},{"arm":"A","x":16,"y":2.33567253028991},{"arm":"A","x":17,"y":0.893729607573088},{"arm":"A","x":18,"y":-0.688791719025952},{"arm":"A","x":19,"y":-1.29885798818393},{"arm":"A","x":20,"y":-1.64558296204154},{"arm":"A","x":21,"y":0.458016238807412},{"arm":"A","x":22,"y":-1.11093589056029},{"arm":"A","x":23,"y":-1.37778510135589},{"arm":"A","x":24,"y":0.0526384352092737},{"arm":"A","x":25,"y":1.30003671545573},{"arm":"A","x":26,"y":-0.540541096326836},{"arm":"A","x":27,"y":-0.911969211640923},{"arm":"A","x":28,"y":-1.04420961113736},{"arm":"A","x":29,"y":1.1656927986912},{"arm":"A","x":30,"y":-0.583835763688054},{"arm":"A","x":31,"y":-1.24853917482382},{"arm":"A","x":32,"y":-0.319176289503127},{"arm":"A","x":33,"y":-0.528737775378659},{"arm":"A","x":34,"y":-2.4764344572423},{"arm":"A","x":35,"y":-3.87328589989118},{"arm":"A","x":36,"y":-4.31967529824713},{"arm":"A","x":37,"y":-3.83511097945274},{"arm":"A","x":38,"y":-3.43639090369576},{"arm":"A","x":39,"y":-3.23918539848666},{"arm":"A","x":40,"y":-3.54373956980821},{"arm":"A","x":41,"y":-1.97849289624173},{"arm":"A","x":42,"y":-4.34219542893626},{"arm":"A","x":43,"y":-6.01237282859538},{"arm":"A","x":44,"y":-6.17462552593087},{"arm":"A","x":45,"y":-6.78353620269175},{"arm":"A","x":46,"y":-8.40332853583886},{"arm":"A","x":47,"y":-8.96963369293576},{"arm":"A","x":48,"y":-9.53469339875302},{"arm":"A","x":49,"y":-9.72256324642966},{"arm":"A","x":50,"y":-11.074879032826},{"arm":"A","x":51,"y":-10.2061714629183},{"arm":"A","x":52,"y":-9.32365267072153},{"arm":"A","x":53,"y":-8.35558463129327},{"arm":"A","x":54,"y":-7.92683526786254},{"arm":"A","x":55,"y":-8.73830006380441},{"arm":"A","x":56,"y":-8.49492800922475},{"arm":"A","x":57,"y":-9.14960053840015},{"arm":"A","x":58,"y":-10.0371188042031},{"arm":"A","x":59,"y":-11.8330201809407},{"arm":"A","x":60,"y":-12.1253641973289},{"arm":"A","x":61,"y":-12.580586054528},{"arm":"A","x":62,"y":-12.951907955586},{"arm":"A","x":63,"y":-14.5727084686836},{"arm":"A","x":64,"y":-15.3172288000699},{"arm":"A","x":65,"y":-15.0511903843867},{"arm":"A","x":66,"y":-14.5936012824496},{"arm":"A","x":67,"y":-14.3068183352545},{"arm":"A","x":68,"y":-13.9618659791034},{"arm":"A","x":69,"y":-13.4205758316306},{"arm":"A","x":70,"y":-14.0184267708805},{"arm":"A","x":71,"y":-14.2360476484135},{"arm":"A","x":72,"y":-12.5228302890726},{"arm":"A","x":73,"y":-11.8922392786218},{"arm":"A","x":74,"y":-10.1689880117975},{"arm":"A","x":75,"y":-8.52015578716447},{"arm":"A","x":76,"y":-7.35754929425543},{"arm":"A","x":77,"y":-5.77151182677866},{"arm":"A","x":78,"y":-4.68581601028882},{"arm":"A","x":79,"y":-4.47027448291624},{"arm":"A","x":80,"y":-5.61864061080541},{"arm":"A","x":81,"y":-6.21586894676534},{"arm":"A","x":82,"y":-6.90896905389021},{"arm":"A","x":83,"y":-5.53979631291294},{"arm":"A","x":84,"y":-4.73070357254414},{"arm":"A","x":85,"y":-2.91573079758198},{"arm":"A","x":86,"y":-1.49582491015367},{"arm":"A","x":87,"y":-0.0479919390079125},{"arm":"A","x":88,"y":0.283160475206699},{"arm":"A","x":89,"y":-0.0484558084277389},{"arm":"A","x":90,"y":-0.617072697144406},{"arm":"A","x":91,"y":-0.0337543728615926},{"arm":"A","x":92,"y":0.0348841790443768},{"arm":"A","x":93,"y":1.0802901120103},{"arm":"A","x":94,"y":-0.415123388310513},{"arm":"A","x":95,"y":-0.235118932355329},{"arm":"A","x":96,"y":0.388464938368171},{"arm":"A","x":97,"y":0.151328110307174},{"arm":"A","x":98,"y":-0.908462121886622},{"arm":"A","x":99,"y":-2.03551761574873},{"arm":"A","x":100,"y":-2.59811771142741}],"type":"line"},{"name":"B","data":[{"arm":"B","x":1,"y":0.621280556835029},{"arm":"B","x":2,"y":0.832269827174087},{"arm":"B","x":3,"y":0.33399905130188},{"arm":"B","x":4,"y":-0.540089622842879},{"arm":"B","x":5,"y":-0.578078913227975},{"arm":"B","x":6,"y":-0.423387556416058},{"arm":"B","x":7,"y":-0.160000387532222},{"arm":"B","x":8,"y":-1.11344380126654},{"arm":"B","x":9,"y":-0.875839335970487},{"arm":"B","x":10,"y":-2.15193117236146},{"arm":"B","x":11,"y":-0.779471402095041},{"arm":"B","x":12,"y":1.32844572909417},{"arm":"B","x":13,"y":1.45657617534249},{"arm":"B","x":14,"y":1.55409039926347},{"arm":"B","x":15,"y":0.802056129767905},{"arm":"B","x":16,"y":0.0207421010307499},{"arm":"B","x":17,"y":-0.638727456598203},{"arm":"B","x":18,"y":0.266502694303592},{"arm":"B","x":19,"y":1.22760505674037},{"arm":"B","x":20,"y":0.619563049589625},{"arm":"B","x":21,"y":1.7699819922431},{"arm":"B","x":22,"y":1.06590662181494},{"arm":"B","x":23,"y":0.827544083414867},{"arm":"B","x":24,"y":1.06390809999161},{"arm":"B","x":25,"y":0.612206027705475},{"arm":"B","x":26,"y":0.382849540203414},{"arm":"B","x":27,"y":1.44339032223738},{"arm":"B","x":28,"y":1.72220079778153},{"arm":"B","x":29,"y":2.53331236071519},{"arm":"B","x":30,"y":2.13764310346068},{"arm":"B","x":31,"y":2.25392176914098},{"arm":"B","x":32,"y":2.60860582218833},{"arm":"B","x":33,"y":2.98729872621774},{"arm":"B","x":34,"y":1.58162795130289},{"arm":"B","x":35,"y":2.82079123070517},{"arm":"B","x":36,"y":2.23733683703665},{"arm":"B","x":37,"y":1.80936994430932},{"arm":"B","x":38,"y":1.13612393305552},{"arm":"B","x":39,"y":0.493258701733787},{"arm":"B","x":40,"y":0.68750233499139},{"arm":"B","x":41,"y":0.307444442864693},{"arm":"B","x":42,"y":0.718019183179091},{"arm":"B","x":43,"y":-0.594453431958025},{"arm":"B","x":44,"y":-2.09913389885761},{"arm":"B","x":45,"y":-1.25272354926726},{"arm":"B","x":46,"y":-0.818802637356565},{"arm":"B","x":47,"y":0.29801318298182},{"arm":"B","x":48,"y":-1.41665701290138},{"arm":"B","x":49,"y":-1.84616342931059},{"arm":"B","x":50,"y":-3.18712275005477},{"arm":"B","x":51,"y":-2.79102732092565},{"arm":"B","x":52,"y":-4.31748307863825},{"arm":"B","x":53,"y":-3.60549503189299},{"arm":"B","x":54,"y":-3.81708578394783},{"arm":"B","x":55,"y":-3.24342719471549},{"arm":"B","x":56,"y":-3.55536062305235},{"arm":"B","x":57,"y":-3.76126385750782},{"arm":"B","x":58,"y":-4.0505178835296},{"arm":"B","x":59,"y":-1.97328479234427},{"arm":"B","x":60,"y":-2.71193096681986},{"arm":"B","x":61,"y":-1.76586342275145},{"arm":"B","x":62,"y":-1.53954083117656},{"arm":"B","x":63,"y":-1.66042200015584},{"arm":"B","x":64,"y":-1.45415010679683},{"arm":"B","x":65,"y":-1.56149694939785},{"arm":"B","x":66,"y":-2.3228648769651},{"arm":"B","x":67,"y":-2.60423823995573},{"arm":"B","x":68,"y":-2.34089170778739},{"arm":"B","x":69,"y":-3.48777816764275},{"arm":"B","x":70,"y":-2.86490918947687},{"arm":"B","x":71,"y":-3.0483332818835},{"arm":"B","x":72,"y":-1.09839223677854},{"arm":"B","x":73,"y":-0.444870995922529},{"arm":"B","x":74,"y":-2.69924247086558},{"arm":"B","x":75,"y":-4.69605516933068},{"arm":"B","x":76,"y":-4.90373758334999},{"arm":"B","x":77,"y":-4.7051851049575},{"arm":"B","x":78,"y":-6.68830532879989},{"arm":"B","x":79,"y":-4.98419116857955},{"arm":"B","x":80,"y":-3.78213249870344},{"arm":"B","x":81,"y":-3.36223415743282},{"arm":"B","x":82,"y":-3.17302196938933},{"arm":"B","x":83,"y":-1.94988318529185},{"arm":"B","x":84,"y":-1.89772238364083},{"arm":"B","x":85,"y":-3.19935470864184},{"arm":"B","x":86,"y":-3.349465352523},{"arm":"B","x":87,"y":-4.03297861375945},{"arm":"B","x":88,"y":-4.35875908754243},{"arm":"B","x":89,"y":-3.92660026933861},{"arm":"B","x":90,"y":-4.91785899287293},{"arm":"B","x":91,"y":-3.72932187408762},{"arm":"B","x":92,"y":-4.95421493424305},{"arm":"B","x":93,"y":-5.82773005138048},{"arm":"B","x":94,"y":-5.77823359116673},{"arm":"B","x":95,"y":-6.46858964367661},{"arm":"B","x":96,"y":-5.67896450333387},{"arm":"B","x":97,"y":-5.0655417257585},{"arm":"B","x":98,"y":-4.17470416912396},{"arm":"B","x":99,"y":-5.61230672335256},{"arm":"B","x":100,"y":-5.93789874480839}],"type":"line"}],"xAxis":{"type":"linear","title":{"text":"x"},"categories":null}},"theme":{"chart":{"backgroundColor":"transparent"}},"conf_opts":{"global":{"Date":null,"VMLRadialGradientURL":"http =//code.highcharts.com/list(version)/gfx/vml-radial-gradient.png","canvasToolsURL":"http =//code.highcharts.com/list(version)/modules/canvas-tools.js","getTimezoneOffset":null,"timezoneOffset":0,"useUTC":true},"lang":{"contextButtonTitle":"Chart context menu","decimalPoint":".","downloadJPEG":"Download JPEG image","downloadPDF":"Download PDF document","downloadPNG":"Download PNG image","downloadSVG":"Download SVG vector image","drillUpText":"Back to {series.name}","invalidDate":null,"loading":"Loading...","months":["January","February","March","April","May","June","July","August","September","October","November","December"],"noData":"No data to display","numericSymbols":["k","M","G","T","P","E"],"printChart":"Print chart","resetZoom":"Reset zoom","resetZoomTitle":"Reset zoom level 1:1","shortMonths":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],"thousandsSep":" ","weekdays":["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]}},"type":"chart","fonts":[],"debug":false},"evals":[],"jsHooks":[]}</script>

---
name: clinical-graphs
class: center, middle

#Clinical Graphs

---
name: surv-1
exclude: false

# Survival Curve

```r
library(survival)
library(dplyr)

lung <- survival::lung
lung <- mutate(lung, sex = ifelse(sex == 1, "Male", "Female"))
fit <- survfit(Surv(time, status) ~ sex, data = lung) 
fit
```

```
## Call: survfit(formula = Surv(time, status) ~ sex, data = lung)
## 
##              n events median 0.95LCL 0.95UCL
## sex=Female  90     53    426     348     550
## sex=Male   138    112    270     212     310
```

---
name: surv-2
exclude: false

# Survival

```r
hchart(fit, ranges = TRUE)
```

---
name: spider-gg
exclude: false

# Spiderplot (ggplot2)

![](index_files/figure-html/unnamed-chunk-26-1.png)

---
name: spider-hc
exclude: false

# Spiderplot (Highcharts)

<div id="htmlwidget-fb5c0e426505ec8ae42a" style="width:100%;height:500px;" class="highchart html-widget"></div>
<script type="application/json" data-for="htmlwidget-fb5c0e426505ec8ae42a">{"x":{"hc_opts":{"title":{"text":null},"yAxis":{"title":{"text":"change in target lesions [%]"},"plotBands":{"color":"#e5e5e5","from":-30,"to":20},"lineWidth":1,"tickWidth":1,"gridLineColor":"white"},"credits":{"enabled":false},"exporting":{"enabled":true},"plotOptions":{"series":{"label":{"enabled":false},"turboThreshold":0},"treemap":{"layoutAlgorithm":"squarified"},"line":{"marker":{"symbol":"circle","radius":3},"dataLabels":{"allowOverlap":true}}},"chart":{"zoomType":"xy"},"xAxis":{"title":{"text":"week"}},"tooltip":{"formatter":"function(){\n                                  return ('<b>' + this.point.SUBJN + '<b/>' + '<br> Change: ' + (+this.y.toFixed(1)) + ' % <br>' +\n                                  ' Day: ' + Math.round(7*this.x))}"},"legend":{"title":{"text":"BOR"},"layout":"vertical","align":"right","verticalAlign":"top","y":50},"series":[{"USUBJID":"P-01","COLOR_GROUP":"PD","name":"PD","color":"#d11141","data":[{"x":0,"y":0,"SUBJN":"P-01","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}},{"x":7.24806104786429,"y":25.4601556647842,"SUBJN":"P-01","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}},{"x":12.3672634753898,"y":25.0469375836303,"SUBJN":"P-01","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}}],"linkedTo":"","showInLegend":true},{"USUBJID":"P-04","COLOR_GROUP":"PD","name":"PD","color":"#d11141","data":[{"x":0,"y":0,"SUBJN":"P-04","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}},{"x":9.46974352515671,"y":43.3181869279841,"SUBJN":"P-04","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}},{"x":16.8443320827657,"y":63.4789453538999,"SUBJN":"P-04","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}}],"linkedTo":":previous","showInLegend":false},{"USUBJID":"P-06","COLOR_GROUP":"PD","name":"PD","color":"#d11141","data":[{"x":0,"y":0,"SUBJN":"P-06","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}},{"x":15.9489923587499,"y":30.6533388819517,"SUBJN":"P-06","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}}],"linkedTo":":previous","showInLegend":false},{"USUBJID":"P-07","COLOR_GROUP":"PD","name":"PD","color":"#d11141","data":[{"x":0,"y":0,"SUBJN":"P-07","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}},{"x":10.0774717616457,"y":120.798365416413,"SUBJN":"P-07","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}}],"linkedTo":":previous","showInLegend":false},{"USUBJID":"P-11","COLOR_GROUP":"PD","name":"PD","color":"#d11141","data":[{"x":0,"y":0,"SUBJN":"P-11","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}},{"x":6.24478656905679,"y":-4.66471801878019,"SUBJN":"P-11","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}}],"linkedTo":":previous","showInLegend":false},{"USUBJID":"P-15","COLOR_GROUP":"PD","name":"PD","color":"#d11141","data":[{"x":0,"y":0,"SUBJN":"P-15","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}},{"x":9.06184580991392,"y":50.5468435498701,"SUBJN":"P-15","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}}],"linkedTo":":previous","showInLegend":false},{"USUBJID":"P-16","COLOR_GROUP":"PD","name":"PD","color":"#d11141","data":[{"x":0,"y":0,"SUBJN":"P-16","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}},{"x":5.81068948083422,"y":15.5449931406684,"SUBJN":"P-16","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}}],"linkedTo":":previous","showInLegend":false},{"USUBJID":"P-17","COLOR_GROUP":"PD","name":"PD","color":"#d11141","data":[{"x":0,"y":0,"SUBJN":"P-17","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}},{"x":4.08748697665159,"y":25.5373261652282,"SUBJN":"P-17","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}},{"x":8.0497065373978,"y":32.5411754576016,"SUBJN":"P-17","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}}],"linkedTo":":previous","showInLegend":false},{"USUBJID":"P-03","COLOR_GROUP":"PR","name":"PR","color":"#00b159","data":[{"x":0,"y":0,"SUBJN":"P-03","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}},{"x":7.52058714068014,"y":-70.1612707368888,"SUBJN":"P-03","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}},{"x":11.6699138261984,"y":-55.0810321513374,"SUBJN":"P-03","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}},{"x":15.3598914121365,"y":-62.5403788281878,"SUBJN":"P-03","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}},{"x":23.5219581418641,"y":-71.983500166567,"SUBJN":"P-03","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}},{"x":31.6651649223771,"y":-76.001985034496,"SUBJN":"P-03","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}},{"x":39.3109639674762,"y":-90,"SUBJN":"P-03","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}},{"x":47.7158150344177,"y":-85.5155894762892,"SUBJN":"P-03","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}},{"x":55.0689854018933,"y":-90,"SUBJN":"P-03","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}}],"linkedTo":"","showInLegend":true},{"USUBJID":"P-05","COLOR_GROUP":"PR","name":"PR","color":"#00b159","data":[{"x":0,"y":0,"SUBJN":"P-05","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}},{"x":8.76714123015899,"y":-3.34762279574425,"SUBJN":"P-05","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}},{"x":13.6124634294478,"y":-32.4229054489364,"SUBJN":"P-05","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}},{"x":15.7745249579757,"y":-47.978890642914,"SUBJN":"P-05","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}},{"x":21.6514269226466,"y":-61.5884820068162,"SUBJN":"P-05","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}},{"x":31.3007151208231,"y":-37.2868219141966,"SUBJN":"P-05","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}},{"x":40.4571480318377,"y":-47.8443022030223,"SUBJN":"P-05","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}},{"x":47.0969058882051,"y":-74.1131207506082,"SUBJN":"P-05","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}},{"x":58.9191776107241,"y":-69.0308545055767,"SUBJN":"P-05","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}}],"linkedTo":":previous","showInLegend":false},{"USUBJID":"P-09","COLOR_GROUP":"PR","name":"PR","color":"#00b159","data":[{"x":0,"y":0,"SUBJN":"P-09","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}},{"x":7.97175166164669,"y":-53.6523111705213,"SUBJN":"P-09","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}},{"x":16.4959130049701,"y":-58.9847024268276,"SUBJN":"P-09","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}},{"x":23.4988585468241,"y":-67.4711094315291,"SUBJN":"P-09","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}}],"linkedTo":":previous","showInLegend":false},{"USUBJID":"P-02","COLOR_GROUP":"SD","name":"SD","color":"#ffc425","data":[{"x":0,"y":0,"SUBJN":"P-02","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}},{"x":8.27039283497007,"y":-11.2960867907992,"SUBJN":"P-02","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}}],"linkedTo":"","showInLegend":true},{"USUBJID":"P-08","COLOR_GROUP":"SD","name":"SD","color":"#ffc425","data":[{"x":0,"y":0,"SUBJN":"P-08","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}},{"x":8.54147457671499,"y":-1.60873974626918,"SUBJN":"P-08","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}},{"x":16.312896238592,"y":40.2604706647786,"SUBJN":"P-08","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}},{"x":20.3812532684081,"y":96.9811995728385,"SUBJN":"P-08","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}}],"linkedTo":":previous","showInLegend":false},{"USUBJID":"P-10","COLOR_GROUP":"SD","name":"SD","color":"#ffc425","data":[{"x":0,"y":0,"SUBJN":"P-10","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}},{"x":7.99601808015076,"y":-4.78396057823358,"SUBJN":"P-10","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}},{"x":16.6260196300687,"y":-8.88842048601055,"SUBJN":"P-10","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}},{"x":24.2458742640104,"y":33.7903521763082,"SUBJN":"P-10","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}}],"linkedTo":":previous","showInLegend":false},{"USUBJID":"P-12","COLOR_GROUP":"SD","name":"SD","color":"#ffc425","data":[{"x":0,"y":0,"SUBJN":"P-12","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}},{"x":7.82137112656123,"y":10.885965714799,"SUBJN":"P-12","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}},{"x":15.1403609378022,"y":17.7108262073373,"SUBJN":"P-12","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}}],"linkedTo":":previous","showInLegend":false},{"USUBJID":"P-13","COLOR_GROUP":"SD","name":"SD","color":"#ffc425","data":[{"x":0,"y":0,"SUBJN":"P-13","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}},{"x":9.74547270046142,"y":-11.1180627081355,"SUBJN":"P-13","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}},{"x":15.750440439611,"y":-7.42321215949101,"SUBJN":"P-13","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}}],"linkedTo":":previous","showInLegend":false},{"USUBJID":"P-14","COLOR_GROUP":"SD","name":"SD","color":"#ffc425","data":[{"x":0,"y":0,"SUBJN":"P-14","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}},{"x":8.57615291748939,"y":-38.8573511509394,"SUBJN":"P-14","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}},{"x":11.9772636149116,"y":0,"SUBJN":"P-14","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}},{"x":16.247289104042,"y":-4.84930493738937,"SUBJN":"P-14","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}}],"linkedTo":":previous","showInLegend":false},{"USUBJID":"P-18","COLOR_GROUP":"SD","name":"SD","color":"#ffc425","data":[{"x":0,"y":0,"SUBJN":"P-18","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}},{"x":7.93312879953356,"y":18.9072818575107,"SUBJN":"P-18","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}},{"x":15.5849288388229,"y":44.2552921629917,"SUBJN":"P-18","dataLabels":{"enabled":false,"format":"{point.SUBJN}","verticalAlign":"middle","align":"left","style":{"fontSize":"9px"}}}],"linkedTo":":previous","showInLegend":false}]},"theme":{"chart":{"backgroundColor":"transparent"}},"conf_opts":{"global":{"Date":null,"VMLRadialGradientURL":"http =//code.highcharts.com/list(version)/gfx/vml-radial-gradient.png","canvasToolsURL":"http =//code.highcharts.com/list(version)/modules/canvas-tools.js","getTimezoneOffset":null,"timezoneOffset":0,"useUTC":true},"lang":{"contextButtonTitle":"Chart context menu","decimalPoint":".","downloadJPEG":"Download JPEG image","downloadPDF":"Download PDF document","downloadPNG":"Download PNG image","downloadSVG":"Download SVG vector image","drillUpText":"Back to {series.name}","invalidDate":null,"loading":"Loading...","months":["January","February","March","April","May","June","July","August","September","October","November","December"],"noData":"No data to display","numericSymbols":["k","M","G","T","P","E"],"printChart":"Print chart","resetZoom":"Reset zoom","resetZoomTitle":"Reset zoom level 1:1","shortMonths":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],"thousandsSep":" ","weekdays":["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]}},"type":"chart","fonts":[],"debug":false},"evals":["hc_opts.tooltip.formatter"],"jsHooks":[]}</script>

???
(!) fix lower y limit to -100
zoomable - emphasize

---
name: waterfall
exclude: false

# Waterfall Plot

<div id="htmlwidget-08d45a3972c1fcc60a7e" style="width:100%;height:500px;" class="highchart html-widget"></div>
<script type="application/json" data-for="htmlwidget-08d45a3972c1fcc60a7e">{"x":{"hc_opts":{"title":{"text":null},"yAxis":{"title":{"text":"Change in target lesions from baseline [%]"},"type":"linear","plotBands":{"color":"#e5e5e5","from":-30,"to":20}},"credits":{"enabled":false},"exporting":{"enabled":false},"plotOptions":{"series":{"label":{"enabled":false},"turboThreshold":0,"showInLegend":false},"treemap":{"layoutAlgorithm":"squarified"},"scatter":{"marker":{"symbol":"circle"}}},"series":[{"group":"group","data":[{"SUBJN":"P-07","BOR":"PD","data":{"x":[0,10.0774717616457],"y":[0,120.798365416413]},"PCHG":120.798365416413,"ttdata":[{"x":0,"y":0},{"x":10.0774717616457,"y":120.798365416413}],"color":"#d11141","y":120.798365416413,"name":"P-07"},{"SUBJN":"P-15","BOR":"PD","data":{"x":[0,9.06184580991392],"y":[0,50.5468435498701]},"PCHG":50.5468435498701,"ttdata":[{"x":0,"y":0},{"x":9.06184580991392,"y":50.5468435498701}],"color":"#d11141","y":50.5468435498701,"name":"P-15"},{"SUBJN":"P-04","BOR":"PD","data":{"x":[0,9.46974352515671,16.8443320827657],"y":[0,43.3181869279841,63.4789453538999]},"PCHG":43.3181869279841,"ttdata":[{"x":0,"y":0},{"x":9.46974352515671,"y":43.3181869279841},{"x":16.8443320827657,"y":63.4789453538999}],"color":"#d11141","y":43.3181869279841,"name":"P-04"},{"SUBJN":"P-06","BOR":"PD","data":{"x":[0,15.9489923587499],"y":[0,30.6533388819517]},"PCHG":30.6533388819517,"ttdata":[{"x":0,"y":0},{"x":15.9489923587499,"y":30.6533388819517}],"color":"#d11141","y":30.6533388819517,"name":"P-06"},{"SUBJN":"P-17","BOR":"PD","data":{"x":[0,4.08748697665159,8.0497065373978],"y":[0,25.5373261652282,32.5411754576016]},"PCHG":25.5373261652282,"ttdata":[{"x":0,"y":0},{"x":4.08748697665159,"y":25.5373261652282},{"x":8.0497065373978,"y":32.5411754576016}],"color":"#d11141","y":25.5373261652282,"name":"P-17"},{"SUBJN":"P-01","BOR":"PD","data":{"x":[0,7.24806104786429,12.3672634753898],"y":[0,25.4601556647842,25.0469375836303]},"PCHG":25.0469375836303,"ttdata":[{"x":0,"y":0},{"x":7.24806104786429,"y":25.4601556647842},{"x":12.3672634753898,"y":25.0469375836303}],"color":"#d11141","y":25.0469375836303,"name":"P-01"},{"SUBJN":"P-18","BOR":"SD","data":{"x":[0,7.93312879953356,15.5849288388229],"y":[0,18.9072818575107,44.2552921629917]},"PCHG":18.9072818575107,"ttdata":[{"x":0,"y":0},{"x":7.93312879953356,"y":18.9072818575107},{"x":15.5849288388229,"y":44.2552921629917}],"color":"#ffc425","y":18.9072818575107,"name":"P-18"},{"SUBJN":"P-16","BOR":"PD","data":{"x":[0,5.81068948083422],"y":[0,15.5449931406684]},"PCHG":15.5449931406684,"ttdata":[{"x":0,"y":0},{"x":5.81068948083422,"y":15.5449931406684}],"color":"#d11141","y":15.5449931406684,"name":"P-16"},{"SUBJN":"P-12","BOR":"SD","data":{"x":[0,7.82137112656123,15.1403609378022],"y":[0,10.885965714799,17.7108262073373]},"PCHG":10.885965714799,"ttdata":[{"x":0,"y":0},{"x":7.82137112656123,"y":10.885965714799},{"x":15.1403609378022,"y":17.7108262073373}],"color":"#ffc425","y":10.885965714799,"name":"P-12"},{"SUBJN":"P-08","BOR":"SD","data":{"x":[0,8.54147457671499,16.312896238592,20.3812532684081],"y":[0,-1.60873974626918,40.2604706647786,96.9811995728385]},"PCHG":-1.60873974626918,"ttdata":[{"x":0,"y":0},{"x":8.54147457671499,"y":-1.60873974626918},{"x":16.312896238592,"y":40.2604706647786},{"x":20.3812532684081,"y":96.9811995728385}],"color":"#ffc425","y":-1.60873974626918,"name":"P-08"},{"SUBJN":"P-11","BOR":"PD","data":{"x":[0,6.24478656905679],"y":[0,-4.66471801878019]},"PCHG":-4.66471801878019,"ttdata":[{"x":0,"y":0},{"x":6.24478656905679,"y":-4.66471801878019}],"color":"#d11141","y":-4.66471801878019,"name":"P-11"},{"SUBJN":"P-10","BOR":"SD","data":{"x":[0,7.99601808015076,16.6260196300687,24.2458742640104],"y":[0,-4.78396057823358,-8.88842048601055,33.7903521763082]},"PCHG":-8.88842048601055,"ttdata":[{"x":0,"y":0},{"x":7.99601808015076,"y":-4.78396057823358},{"x":16.6260196300687,"y":-8.88842048601055},{"x":24.2458742640104,"y":33.7903521763082}],"color":"#ffc425","y":-8.88842048601055,"name":"P-10"},{"SUBJN":"P-13","BOR":"SD","data":{"x":[0,9.74547270046142,15.750440439611],"y":[0,-11.1180627081355,-7.42321215949101]},"PCHG":-11.1180627081355,"ttdata":[{"x":0,"y":0},{"x":9.74547270046142,"y":-11.1180627081355},{"x":15.750440439611,"y":-7.42321215949101}],"color":"#ffc425","y":-11.1180627081355,"name":"P-13"},{"SUBJN":"P-02","BOR":"SD","data":{"x":[0,8.27039283497007],"y":[0,-11.2960867907992]},"PCHG":-11.2960867907992,"ttdata":[{"x":0,"y":0},{"x":8.27039283497007,"y":-11.2960867907992}],"color":"#ffc425","y":-11.2960867907992,"name":"P-02"},{"SUBJN":"P-14","BOR":"SD","data":{"x":[0,8.57615291748939,11.9772636149116,16.247289104042],"y":[0,-38.8573511509394,0,-4.84930493738937]},"PCHG":-38.8573511509394,"ttdata":[{"x":0,"y":0},{"x":8.57615291748939,"y":-38.8573511509394},{"x":11.9772636149116,"y":0},{"x":16.247289104042,"y":-4.84930493738937}],"color":"#ffc425","y":-38.8573511509394,"name":"P-14"},{"SUBJN":"P-09","BOR":"PR","data":{"x":[0,7.97175166164669,16.4959130049701,23.4988585468241],"y":[0,-53.6523111705213,-58.9847024268276,-67.4711094315291]},"PCHG":-67.4711094315291,"ttdata":[{"x":0,"y":0},{"x":7.97175166164669,"y":-53.6523111705213},{"x":16.4959130049701,"y":-58.9847024268276},{"x":23.4988585468241,"y":-67.4711094315291}],"color":"#00b159","y":-67.4711094315291,"name":"P-09"},{"SUBJN":"P-05","BOR":"PR","data":{"x":[0,8.76714123015899,13.6124634294478,15.7745249579757,21.6514269226466,31.3007151208231,40.4571480318377,47.0969058882051,58.9191776107241],"y":[0,-3.34762279574425,-32.4229054489364,-47.978890642914,-61.5884820068162,-37.2868219141966,-47.8443022030223,-74.1131207506082,-69.0308545055767]},"PCHG":-74.1131207506082,"ttdata":[{"x":0,"y":0},{"x":8.76714123015899,"y":-3.34762279574425},{"x":13.6124634294478,"y":-32.4229054489364},{"x":15.7745249579757,"y":-47.978890642914},{"x":21.6514269226466,"y":-61.5884820068162},{"x":31.3007151208231,"y":-37.2868219141966},{"x":40.4571480318377,"y":-47.8443022030223},{"x":47.0969058882051,"y":-74.1131207506082},{"x":58.9191776107241,"y":-69.0308545055767}],"color":"#00b159","y":-74.1131207506082,"name":"P-05"},{"SUBJN":"P-03","BOR":"PR","data":{"x":[0,7.52058714068014,11.6699138261984,15.3598914121365,23.5219581418641,31.6651649223771,39.3109639674762,47.7158150344177,55.0689854018933],"y":[0,-70.1612707368888,-55.0810321513374,-62.5403788281878,-71.983500166567,-76.001985034496,-90,-85.5155894762892,-90]},"PCHG":-90,"ttdata":[{"x":0,"y":0},{"x":7.52058714068014,"y":-70.1612707368888},{"x":11.6699138261984,"y":-55.0810321513374},{"x":15.3598914121365,"y":-62.5403788281878},{"x":23.5219581418641,"y":-71.983500166567},{"x":31.6651649223771,"y":-76.001985034496},{"x":39.3109639674762,"y":-90},{"x":47.7158150344177,"y":-85.5155894762892},{"x":55.0689854018933,"y":-90}],"color":"#00b159","y":-90,"name":"P-03"}],"type":"column"}],"xAxis":{"type":"category","title":{"text":"Subject"}},"subtitle":{"text":"BOR: <span style='color: #00b159'> ► <\/span>PR        <span style='color: #ffc425'> ► <\/span>SD        <span style='color: #d11141'> ► <\/span>PD","floating":true,"align":"right","y":30,"style":{"font-size":"130%","fontWeight":"bold"}},"tooltip":{"useHTML":true,"pointFormatter":"function() {\n  var point = this;\n  console.log(point);\n  console.log(point.ttdata);\n  setTimeout(function() {\n\n  $(\"#tooltipchart-ksoujf4mko\").highcharts({\n  title: {\n    text: point.name\n  },\n  yAxis: {\n    title: {\n      text: null\n    }\n  },\n  credits: {\n    enabled: false\n  },\n  exporting: {\n    enabled: false\n  },\n  chart: {\n    backgroundColor: \"transparent\",\n    type: \"line\"\n  },\n  legend: {\n    enabled: false\n  },\n  plotOptions: {\n    series: {\n      animation: 2000,\n      name: point.name\n    }\n  },\n  subtitle: {\n    text: \"Change from BL (%)\"\n  },\n  series: [\n    {\n      data: point.ttdata,\n      color: point.color\n    }\n  ]\n});\n\n  }, 0);\n\n  return '<div id=\"tooltipchart-ksoujf4mko\" style=\"width: 250px; height: 150px;\"><\/div>';\n\n  }"}},"theme":{"chart":{"backgroundColor":"transparent"}},"conf_opts":{"global":{"Date":null,"VMLRadialGradientURL":"http =//code.highcharts.com/list(version)/gfx/vml-radial-gradient.png","canvasToolsURL":"http =//code.highcharts.com/list(version)/modules/canvas-tools.js","getTimezoneOffset":null,"timezoneOffset":0,"useUTC":true},"lang":{"contextButtonTitle":"Chart context menu","decimalPoint":".","downloadJPEG":"Download JPEG image","downloadPDF":"Download PDF document","downloadPNG":"Download PNG image","downloadSVG":"Download SVG vector image","drillUpText":"Back to {series.name}","invalidDate":null,"loading":"Loading...","months":["January","February","March","April","May","June","July","August","September","October","November","December"],"noData":"No data to display","numericSymbols":["k","M","G","T","P","E"],"printChart":"Print chart","resetZoom":"Reset zoom","resetZoomTitle":"Reset zoom level 1:1","shortMonths":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],"thousandsSep":" ","weekdays":["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]}},"type":"chart","fonts":[],"debug":false},"evals":["hc_opts.tooltip.pointFormatter"],"jsHooks":[]}</script>

---
name: help
class: center, middle

#Where to Get Help

---
name: highcharter-lp
exclude: false

# jkunst.com/highcharter

---
name: help-purrr
exclude: false

# purrr package

---
name: help-doc
exclude: false

# documentation + jsfiddle/codepen

???
some javascript knowledge will help but it isn't necessary

---
name: summary
exclude: false

# Try it Out!

```r
install.packages("highcharter")
```

Find the slides at: [idmn.me](https://idmn.me)

---
name: questions

---
name: doing

<h1><span style='color:#3d94d1; position: fixed; top: 40%; left: 15%'>Doing now what patients need next </span></h1>