Sharing Your Work with xaringan

class: title-slide, right, top
background-image: url(img/hex-xaringan.png), url(img/frame-art.png)
background-position: 90% 75%, 75% 75%
background-size: 8%, cover

.right-column[
# Sharing Your Work<br>with xaringan
### An Introduction to xaringan:<br>The Basics

**Silvia Canelón, Ph.D.**<br>
Nov. 3rd, 2020 &#8212; Day 1
]

.palegrey[.left[.footnote[Graphic by [Vernon Adams](https://www.rawpixel.com/image/575297/artistic-canvas-background-template)]]]

???

Welcome to the workshop on sharing your work with xaringan.

Where I'll show you how to create impressive presentation slides that can be deployed to the web for easy sharing.

---
name: about-me
layout: false
class: about-me-slide, inverse, middle, center

# About me

## Silvia Canelón

### Postdoctoral Research Scientist

.fade[University of Pennsylvania<br>Philadelphia, PA, USA]

[<svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg> silvia.rbind.io](https://silvia.rbind.io)
[<svg aria-label="Twitter" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><title>Twitter</title><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg> @spcanelon](https://twitter.com/spcanelon)
[<svg aria-label="GitHub" role="img" viewBox="0 0 496 512" style="height:1em;width:0.97em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><title>GitHub</title><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg> @spcanelon](https://github.com/spcanelon)

---
layout: true

<a class="footer-link" href="http://bit.ly/xaringan-nhsr">bit.ly/xaringan-nhsr &mdash; Silvia Canelón</a>

---
class: top

# Acknowledgments

.pull-left-narrow[.center[<img style="border-radius: 50%;" src="https://lauriebaker.rbind.io/author/dr.-laurie-baker/avatar_hu30116ce9545207e6cc07ea892252ff02_106302_270x270_fill_q90_lanczos_center.jpg" width="100px"/>]]

.pull-right-wide[
[Laurie Baker](https://lauriebaker.rbind.io), co-pilot for this workshop and Data Science Lecturer at the Data Science Campus, Office for National Statistics, UK.as
]

.pull-left-narrow[.center[
<img style="border-radius: 50%;" src="https://avatars0.githubusercontent.com/u/53170984?s=200&v=4" width="125px"/>]]

.pull-right-wide[
[NHS-R Community](https://nhsrcommunity.com/) for the opportunity to provide this workshop
- [NHSRtheme 📦](https://github.com/nhs-r-community/NHSRtheme) developed by Tom Jemmett
- [NHSRdatasets 📦](https://github.com/nhs-r-community/NHSRdatasets) developed by Chris Mainey
]

.pull-left-narrow[.center[
<br><svg aria-hidden="true" role="img" viewBox="0 0 496 512" style="height:3em;width:2.91em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;fill-opacity:0;stroke:#e5bf00;stroke-width:20px;position:relative;"><path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm80 168c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-160 0c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm194.8 170.2C334.3 380.4 292.5 400 248 400s-86.3-19.6-114.8-53.8c-13.6-16.3 11-36.7 24.6-20.5 22.4 26.9 55.2 42.2 90.2 42.2s67.8-15.4 90.2-42.2c13.4-16.2 38.1 4.2 24.6 20.5z"/></svg>
]]

.pull-right-wide[
- [xaringan 📦](https://github.com/yihui/xaringan#xaringan) developed by Yihui Xie
- [xaringanExtra 📦](https://github.com/gadenbuie/xaringanExtra/#xaringanExtra) developed by Garrick Aden-Buie
- Materials developed by [Alison Hill](https://twitter.com/apreshill) that have inspired and informed this workshop
]

---
class: left

# About you

.pull-left-narrow[
.center[<svg aria-hidden="true" role="img" viewBox="0 0 640 512" style="height:2em;width:2.5em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M593.8 59.1H46.2C20.7 59.1 0 79.8 0 105.2v301.5c0 25.5 20.7 46.2 46.2 46.2h547.7c25.5 0 46.2-20.7 46.1-46.1V105.2c0-25.4-20.7-46.1-46.2-46.1zM338.5 360.6H277v-120l-61.5 76.9-61.5-76.9v120H92.3V151.4h61.5l61.5 76.9 61.5-76.9h61.5v209.2zm135.3 3.1L381.5 256H443V151.4h61.5V256H566z"/></svg>]]
.pull-right-wide[### you know Markdown]

.pull-left-narrow[.center[
<img src="https://raw.githubusercontent.com/rstudio/hex-stickers/master/PNG/rmarkdown.png" width="25%"/>]]
.pull-right-wide[### you know R Markdown]

.pull-left-narrow[
.center[<svg aria-hidden="true" role="img" viewBox="0 0 384 512" style="height:2em;width:1.5em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M0 32l34.9 395.8L191.5 480l157.6-52.2L384 32H0zm308.2 127.9H124.4l4.1 49.4h175.6l-13.6 148.4-97.9 27v.3h-1.1l-98.7-27.3-6-75.8h47.7L138 320l53.5 14.5 53.7-14.5 6-62.2H84.3L71.5 112.2h241.1l-4.4 47.7z"/></svg>]]
.pull-right-wide[### .my-gold[**you want to know about cool HTML5 slides**]]

---

name: question
class: inverse, middle, center

---
template: question

---

## It takes a team

.panelset[
.panel[.panel-name[remark.js]
.pull-left[
.center[
<svg aria-hidden="true" role="img" viewBox="0 0 448 512" style="height:3em;width:2.62em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M0 32v448h448V32H0zm243.8 349.4c0 43.6-25.6 63.5-62.9 63.5-33.7 0-53.2-17.4-63.2-38.5l34.3-20.7c6.6 11.7 12.6 21.6 27.1 21.6 13.8 0 22.6-5.4 22.6-26.5V237.7h42.1v143.7zm99.6 63.5c-39.1 0-64.4-18.6-76.7-43l34.3-19.8c9 14.7 20.8 25.6 41.5 25.6 17.4 0 28.6-8.7 28.6-20.8 0-14.4-11.4-19.5-30.7-28l-10.5-4.5c-30.4-12.9-50.5-29.2-50.5-63.5 0-31.6 24.1-55.6 61.6-55.6 26.8 0 46 9.3 59.8 33.7L368 290c-7.2-12.9-15-18-27.1-18-12.3 0-20.1 7.8-20.1 18 0 12.6 7.8 17.7 25.9 25.6l10.5 4.5c35.8 15.3 55.9 31 55.9 66.2 0 37.8-29.8 58.6-69.7 58.6z"/></svg><br>
JavaScript

**and**

.panel[.panel-name[xaringan]
.pull-left[
.center[
![:scale 25%](img/hex-xaringan.png)

**xaringan** is a package that introduces `remark.js` to R Markdown

![:scale 15%](img/hex-rmarkdown.png)
]]
.pull-right[
<iframe src="https://slides.yihui.org/xaringan" width="100%" height="400px" data-external="1"></iframe>

]
]

.panel[.panel-name[CSS]
**CSS** stands for **C**ascading **S**tyle **S**heet, and turns
.pull-left[
functional, but dull HTML (content)...
![:scale 95%](img/title-slide-no-css.png)
]

.pull-right[
...into HTML (content) with style! 😎
![:scale 95%](img/title-slide.png)
]
] 
]

???
Remark helps us:
- create a new slide (Markdown syntax* and slide properties);
- format a slide (e.g. text alignment);
- configure the slideshow;
- and use the presentation (keyboard shortcuts).

---
# CSS for the <img src="https://nhsrcommunity.com/wp-content/uploads/2018/02/logo.png" width="13%"/>&nbsp;

.pull-left[
<iframe src="https://spcanelon.github.io/xaringan-basics-and-beyond/nhsr-theme/sample-4-3.html" width="100%" height="400px" data-external="1"></iframe>
]

.pull-right[
I designed a custom CSS theme for the NHS-R Community following the [NHS identity guidelines](https://www.england.nhs.uk/nhsidentity/identity-guidelines/) 🚀.

[Tom Jemmett](https://github.com/tomjemmett) helped me incorporate it into the [NHSRtheme 📦](https://github.com/nhs-r-community/NHSRtheme#nhs-r-theme-) in preparation for this workshop.
]

---

## Getting started

.panelset[
.panel[.panel-name[NHSRtheme]
**Step 1.** Install the `NHSRtheme` package from GitHub

```r
# install.packages("devtools")
devtools::install_github("nhs-r-community/NHSRtheme")
```

**Step 2.** Load the `NHSRtheme` package

```r
library(NHSRtheme)
```
]

.panel[.panel-name[New Rmd File]
.pull-left[
1. New File
2. New R Markdown
![:scale 90%](img/new-r-markdown.png)
]

.pull-right[
3\. From Template <svg aria-hidden="true" role="img" viewBox="0 0 448 512" style="height:1em;width:0.88em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"/></svg> NHS-R Presentation<br>4. Give your slide deck a name!
![:scale 85%](img/NHSRtheme-template.png)
]
]

.panel[.panel-name[Directory]
The new directory in the "Files" pane contains
.left[
+ <svg aria-hidden="true" role="img" viewBox="0 0 384 512" style="height:1em;width:0.75em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M384 121.941V128H256V0h6.059c6.365 0 12.47 2.529 16.971 7.029l97.941 97.941A24.005 24.005 0 0 1 384 121.941zM248 160c-13.2 0-24-10.8-24-24V0H24C10.745 0 0 10.745 0 24v464c0 13.255 10.745 24 24 24h336c13.255 0 24-10.745 24-24V160H248zM123.206 400.505a5.4 5.4 0 0 1-7.633.246l-64.866-60.812a5.4 5.4 0 0 1 0-7.879l64.866-60.812a5.4 5.4 0 0 1 7.633.246l19.579 20.885a5.4 5.4 0 0 1-.372 7.747L101.65 336l40.763 35.874a5.4 5.4 0 0 1 .372 7.747l-19.579 20.884zm51.295 50.479l-27.453-7.97a5.402 5.402 0 0 1-3.681-6.692l61.44-211.626a5.402 5.402 0 0 1 6.692-3.681l27.452 7.97a5.4 5.4 0 0 1 3.68 6.692l-61.44 211.626a5.397 5.397 0 0 1-6.69 3.681zm160.792-111.045l-64.866 60.812a5.4 5.4 0 0 1-7.633-.246l-19.58-20.885a5.4 5.4 0 0 1 .372-7.747L284.35 336l-40.763-35.874a5.4 5.4 0 0 1-.372-7.747l19.58-20.885a5.4 5.4 0 0 1 7.633-.246l64.866 60.812a5.4 5.4 0 0 1-.001 7.879z"/></svg> the new Rmd file (i.e. `my-slides.Rmd`)

+ <svg aria-hidden="true" role="img" viewBox="0 0 576 512" style="height:1em;width:1.12em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M572.694 292.093L500.27 416.248A63.997 63.997 0 0 1 444.989 448H45.025c-18.523 0-30.064-20.093-20.731-36.093l72.424-124.155A64 64 0 0 1 152 256h399.964c18.523 0 30.064 20.093 20.73 36.093zM152 224h328v-48c0-26.51-21.49-48-48-48H272l-64-64H48C21.49 64 0 85.49 0 112v278.046l69.077-118.418C86.214 242.25 117.989 224 152 224z"/></svg> the `img` folder containing logo files

.panel[.panel-name[YAML 1]

```r
title: "Presentation title"
subtitle: "Presentation subtitle"
author: "Author Name"
institute: "NHS Organisation"
date: "Presentation Date"
output:
  xaringan::moon_reader:               # new kind of output!
    css:                               
     -default                          # default xaringan theme CSS file
     -css/nhsr.css                     # custom primary CSS file
     -css/nhsr-fonts.css               # custom font CSS file
```
]

.panel[.panel-name[YAML 2]
More options for output `xaringan::moon_reader`

```r
    lib_dir: libs                        # creates directory for libraries
    seal: false                          # false: custom title slide
    nature:
      highlightStyle: googlecode         # highlighting syntax for code
      highlightLines: true               # true: enables code line highlighting 
      highlightLanguage: ["r"]           # languages to highlight
      countIncrementalSlides: false      # false: disables counting of incremental slides
      ratio: "16:9"                      # 4:3 for standard size
    includes:
      after_body: [css/insert-logo.html] # adds NHS logo to slides (you can ignore it)
```
]

.panel[.panel-name[Extra info]
- `seal: true` creates a title slide with inverse colors using metadata from your YAML

- Other [highlightStyle options](https://github.com/gnab/remark/wiki/Configuration#highlighting) from **remark.js** are:

+ `arta`, `ascetic`, `dark`, `default`, `far`, `github`, `googlecode`,   `idea`, `ir-black`, `magula`, `monokai`, `rainbow`, `solarized-dark`, `solarized-light`, `sunburst`, `tomorrow`, `tomorrow-night-blue`, `tomorrow-night-bright`, `tomorrow-night`, `tomorrow-night-eighties`, `vs`, `zenburn`.
]

]

---
name: live-coding
background-color: var(--my-yellow)
class: middle, center

---
## Our first few slides

.pull-left-narrow[
The .my-coral[NHSRtheme] xaringan template comes pre-loaded with a few things
]
.pull-right-wide[
- .my-coral[A `setup` chunk] with a few libraries and some chunk options set for the whole slide deck

- Some example slides separated by three dashes (`---`)
  1. .my-coral[Title slide with the `title-slide` class.]<br>Content is aligned with the `left` and the `bottom` of the slide
  1. .my-coral[Inverse slide with the `inverse` slide class.]<br>Content is aligned with `middle` and `center` of the slide
  1. .my-coral[Incremental slides with no specified slide class (default).]<br>Incremental steps are made using two dashes (`--`), and bullet points made using markdown (`*`)
]

---
.panelset[

.panel[.panel-name[Moon Reader]
To view the slides generated by your new Rmd file, you have two options:

**Option 1**. Run xaringan's infinite moon reader function in the console 🚀

```r
xaringan::inf_mr()
```

> .small[Note: you can also access this feature using the IDE toolbar: **Addins > XARINGAN Infinite Moon Reader**]

**Option 2**. Knit the document 🧶

]

.panel[.panel-name[Setup chunk]
.pull-left-narrow[
A `setup` chunk with a few libraries and some chunk options set for the whole slide deck
]
.pull-right-wide[
![](img/code-setup-chunk.png)
]
]

.panel[.panel-name[Title slide]

.pull-left[
### Code
![](img/code-title-slide.png)
This is the very first slide after the YAML so it doesn't need to begin with `---`]
.pull-right[
### Slide
<img src="img/sample-title-slide.png" width="100%" 
style="border:2px solid #E8EDEE"/> 
]
] 
.panel[.panel-name[Inverse slide]

.pull-left[
### Code
![](img/code-inverse-slide.png)]

.pull-right[
### Slide
<img src="img/sample-inverse-slide.png" width="100%" 
style="border:0px solid #E8EDEE"/> 
]
] 
.panel[.panel-name[Incremental slides]

.pull-left[
### Code
![](img/code-incremental-slides.png)]

.pull-right[
### Slide
<img src="img/sample-incremental-slides.png" width="100%" style="border:2px solid #E8EDEE"/> 
]
] 
]

---
# xaringan syntax

### What did you notice?

???
What about the syntax used in the R Markdown file looked familiar?
Please type your answers in the chat box.

.pull-left[

### Familiar from **markdown**

- Headings (#, ##, ###)
- **Bold** and _italic_ type
- Links and images with `[]()` and `![]()`
- Bullet points can be added<br>with `-`, `+`, or `*`
- Numbered lists can be created<br>with `1.`
]

???
What about the syntax looked new or different?
Please type your answers in the chat box.

.pull-right[
### Not so familiar, from **remark.js**
- First slide starts immediately after YAML, doesn't need to begin with three dashes(`---`)
- Slides are separated by<br>three dashes (`---`)
- Incremental slides are separated by<br>two dashes (`--`)
- Slide content is separated from presenter notes by three questions marks (`???`)
]

---
template: question

----

.left-col[.center[
<svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:2em;width:2em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M296 32h192c13.255 0 24 10.745 24 24v160c0 13.255-10.745 24-24 24H296c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24zm-80 0H24C10.745 32 0 42.745 0 56v160c0 13.255 10.745 24 24 24h192c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24zM0 296v160c0 13.255 10.745 24 24 24h192c13.255 0 24-10.745 24-24V296c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm296 184h192c13.255 0 24-10.745 24-24V296c0-13.255-10.745-24-24-24H296c-13.255 0-24 10.745-24 24v160c0 13.255 10.745 24 24 24z"/></svg>
### with placement
]]

.center-col[
.center[
<svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:2em;width:2em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M464 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48zM112 120c-30.928 0-56 25.072-56 56s25.072 56 56 56 56-25.072 56-56-25.072-56-56-56zM64 384h384V272l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L208 320l-55.515-55.515c-4.686-4.686-12.284-4.686-16.971 0L64 336v48z"/></svg>
### pretty pictures
]]

.right-col[.center[
<svg aria-hidden="true" role="img" viewBox="0 0 576 512" style="height:2em;width:2.25em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"/></svg>
### and icons
]]

---
name: placement

## Placement <i class="fas fa-th-large" style = "float: right"></i>

---
template: placement

### Align an entire slide

.left-column[

Horizontally

```r
left,
*center,
right
```

----

Vertically

```r
top, 
*middle, 
bottom 
```
]

.right-column[

```r
---

*class: center, middle

# Slide with centered content in the middle

This content is also centered and in the middle of the slide

---
```

.right[.my-coral[example on next slide <svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M256 8c137 0 248 111 248 248S393 504 256 504 8 393 8 256 119 8 256 8zm-28.9 143.6l75.5 72.4H120c-13.3 0-24 10.7-24 24v16c0 13.3 10.7 24 24 24h182.6l-75.5 72.4c-9.7 9.3-9.9 24.8-.4 34.3l11 10.9c9.4 9.4 24.6 9.4 33.9 0L404.3 273c9.4-9.4 9.4-24.6 0-33.9L271.6 106.3c-9.4-9.4-24.6-9.4-33.9 0l-11 10.9c-9.5 9.6-9.3 25.1.4 34.4z"/></svg> ]]
]

---
class: center, middle

# Slide with centered content and aligned with the middle

This content is also centered and aligned with the middle of the slide

---
template: placement

### Align only some text

.left-column[
Horizontal only

```r
*.left[words]
.center[words]
*.right[words]
```
]

.right-column[
```r
---

class: center, middle

# Slide with some text aligned

*.left[We can start writing a sentence on the left...]

*.right[...and finish it on the right.]

---
```

]

---
class: center, middle

# Slide with some text aligned

.left[We can start writing a sentence on the left...]

.right[...and finish it on the right.]

---
template: placement

### Pull content to either side of the slide

.pull-left[
**The `.pull-left[]` class pulls content to<br>the left 47%**

Like the text above and<br>the hex sticker below

![:scale 25%](img/hex-rmarkdown.png)
]

.pull-right[
**And `.pull-right[]` pulls content to<br>the right 47%**

You've already seen these content classes<br>in action today 😄
<br>

![:scale 30%](img/hex-xaringan.png)

]

They don't have to take up the entire slide. Like for this text, you can decide to continue creating content that isn't pulled to either side.

---
template: placement

### Arrange content into a two-column layout

.left-column[
**`.left-column[]` places content into a column 20% wide**

And text is a little lighter
]

.right-column[
**`.right-column[]` places content into a column 75% wide**
- It also has a _little_ bit of padding on the top

- And unlike the `.pull` content classes, these column classes are fixed for the entire slide
- They are meant to be used together

.center[
![:scale 15%](img/hex-xaringan.png)]
]

---
name: pictures
## Pictures <i class="fas fa-image" style = "float: right"></i>

---
template: pictures

There are a variety of ways to add images to your slides!

.panelset[
.panel[.panel-name[Markdown]
.pull-left[

```markdown
![](img/camera-green.jpg)
```

- simple
- not very flexible
- output size fully dependent on the size of the image, but scaling can be managed [using custom macros (JavaScript functions) ](https://slides.yihui.org/xaringan/#33)
 
.small[
Photo by [Annie Spratt](https://unsplash.com/@anniespratt)]
]

.pull-right[
![](img/camera-green.jpg)
]
]

.panel[.panel-name[knitr]

.pull-left[

```r
knitr::include_graphics("img/camera-green.jpg")
```
- pretty flexible
- a little bulky
- more options [here](https://www.rdocumentation.org/packages/knitr/versions/1.30/topics/include_graphics)
]

.pull-right[
<img src="img/camera-green.jpg" width="90%" />
]

]

.panel[.panel-name[HTML]
.pull-left[

```html
<img src="img/camera-green.jpg" width="90%"/>
```
- most flexible
- a bit unsightly
- takes time to [get used to syntax](https://www.w3schools.com/html/html_images.asp)

.small[**Tip:** To insert an avatar:

```html
<img src="https://insertweblink.here" width="170px" style="border-radius: 50%;"/>
```
]
]

.pull-right[
<img src="img/camera-green.jpg" width="90%"/>
]

]

---
.panel[.panel-name[Image sources]

Below you'll see a few places where you can find beautiful and free background images contributed by artists all over world.

**Tip:** You can use the `.footnote[]` class to credit the source of the image ([example here](https://spcanelon.github.io/xaringan-basics-and-beyond/slides/day-01-basics.html)) 🙂

.pull-left[
- [unsplash.com](unsplash.com)
- [rawpixel.com](rawpixel.com)
- [pexels.com](https://www.pexels.com/)
]

.pull-right[
> - In the public domain<br>
  (no attribution necessary)
> - Free with attribution<br>
  (e.g. Photo by [Annie Spratt](https://unsplash.com/@anniespratt))
]
]

.panel[.panel-name[Image paths]

.pull-left[
R Markdown and xaringan don't always agree on where images are located<br>(i.e. relative file paths).

You might find that `knitr::include_graphics()` produces an image from a code chunk in your Rmd, and that the same image may not show up when you render your xaringan slides. 🤷‍♀
]

.pull-right[
I recommend using this directory structure to help avoid confusion<br>(example file path: `img/camera-green.jpg`)

```r
.
├── css
*├── img
*   ├── camera-green.jpg
├── libs
├── my-slides.Rmd
└── my-slides.html
```
]

]
.panel[.panel-name[Background]

You can use the [background-image property](https://github.com/gnab/remark/wiki/Markdown#background-image) underneath the `---` slide separator

- `background-image:` 
  - `url(https://insertweblink.here)` --> image from the web
  - `url(img/camera-green.jpg)` --> local image, using relative file paths
- `background-size:`
    - `cover` --> rescales + crops with no empty space
    - `contain` --> rescales only
- `background-position:` play with [this](https://css-tricks.com/almanac/properties/b/background-position/)

.right[.my-coral[`background-size` examples in action! <svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M256 8c137 0 248 111 248 248S393 504 256 504 8 393 8 256 119 8 256 8zm-28.9 143.6l75.5 72.4H120c-13.3 0-24 10.7-24 24v16c0 13.3 10.7 24 24 24h182.6l-75.5 72.4c-9.7 9.3-9.9 24.8-.4 34.3l11 10.9c9.4 9.4 24.6 9.4 33.9 0L404.3 273c9.4-9.4 9.4-24.6 0-33.9L271.6 106.3c-9.4-9.4-24.6-9.4-33.9 0l-11 10.9c-9.5 9.6-9.3 25.1.4 34.4z"/></svg> ]]
]

]

---
background-image: url(img/camera-green.jpg)
class: inverse, middle, center

# **No background-size**
**Image size: 3999x3005**

---
background-image: url(img/camera-green.jpg)
background-size: cover
class: inverse, middle, center

# **Cover**

---
background-image: url(img/camera-green.jpg)
background-size: contain
background-color: white
class: inverse, middle, center

# **Contain**

---
class: left
name: icons
## Icons <i class="fas fa-star" style = "float: right"></i>

.pull-left-narrow[.center[
😄<br>
[Emojis](https://github.com/hadley/emo#emoji)
]]
.pull-right-wide[
Use the [emo(ji) 📦](https://github.com/hadley/emo#emoji):<br>
Icon on the left: ` r emo::ji("smile")` (surrounded by backticks ` `` `)
]

.pull-left-narrow[.center[
<svg aria-hidden="true" role="img" viewBox="0 0 576 512" style="height:1em;width:1.12em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M208 0c-29.9 0-54.7 20.5-61.8 48.2-.8 0-1.4-.2-2.2-.2-35.3 0-64 28.7-64 64 0 4.8.6 9.5 1.7 14C52.5 138 32 166.6 32 200c0 12.6 3.2 24.3 8.3 34.9C16.3 248.7 0 274.3 0 304c0 33.3 20.4 61.9 49.4 73.9-.9 4.6-1.4 9.3-1.4 14.1 0 39.8 32.2 72 72 72 4.1 0 8.1-.5 12-1.2 9.6 28.5 36.2 49.2 68 49.2 39.8 0 72-32.2 72-72V64c0-35.3-28.7-64-64-64zm368 304c0-29.7-16.3-55.3-40.3-69.1 5.2-10.6 8.3-22.3 8.3-34.9 0-33.4-20.5-62-49.7-74 1-4.5 1.7-9.2 1.7-14 0-35.3-28.7-64-64-64-.8 0-1.5.2-2.2.2C422.7 20.5 397.9 0 368 0c-35.3 0-64 28.6-64 64v376c0 39.8 32.2 72 72 72 31.8 0 58.4-20.7 68-49.2 3.9.7 7.9 1.2 12 1.2 39.8 0 72-32.2 72-72 0-4.8-.5-9.5-1.4-14.1 29-12 49.4-40.6 49.4-73.9z"/></svg>
<br>
[FontAwesome](https://fontawesome.com/icons?d=gallery&c=medical&m=free)
]]

.pull-right-wide[
Use the [fontawesome 📦](https://rstudio.github.io/fontawesome/index.html): ` r fontawesome::fa("brain")`
]

.pull-left-narrow[.center[
<svg viewBox="0 0 384 512" style="height:1em;position:relative;display:inline-block;top:.1em;" xmlns="http://www.w3.org/2000/svg">  <g label="icon" id="layer6" groupmode="layer">    <path id="path2" d="M 120.19265,177.73779 C 123.18778,77.35076 64.277527,63.999998 64.277527,63.999998 v 31.26245 C 40.834519,83.611374 18.32863,81.929634 18.32863,81.929634 V 337.10903 c 0,0 98.10414,-11.41744 98.10414,84.40952 0,0 36.58424,-153.37442 248.86103,26.48145 0,-61.59342 0.37757,-216.93925 0.37757,-268.28471 C 169.9561,37.131382 120.1931,177.73779 120.1931,177.73779 Z m 187.20631,173.82056 -12.37599,-97.65441 h -0.448 l -40.72819,97.65441 h -17.55994 l -38.9362,-97.65441 h -0.448 l -14.17589,97.65441 h -43.87514 l 28.8015,-169.61925 h 43.42716 l 34.43518,90.6496 36.46566,-90.6496 h 43.87513 l 25.6817,169.61925 h -44.13938 z" style="stroke-width:0.0675239"></path>  </g></svg><br>
[Academicons](https://jpswalsh.github.io/academicons/)
]]
.pull-right-wide[
The easiest way to access them is with the [icons 📦](https://pkg.mitchelloharawild.com/icons/):<br>` r icons::academicons("pubmed")`
]

.pull-left-narrow[.center[
<svg viewBox="0 0 512 512" style="height:1em;position:relative;display:inline-block;top:.1em;" xmlns="http://www.w3.org/2000/svg">  <title></title>  <path d="M452.32,365,327.4,167.12A48.07,48.07,0,0,1,320,141.48V64h15.56c8.61,0,16-6.62,16.43-15.23A16,16,0,0,0,336,32H176.45c-8.61,0-16,6.62-16.43,15.23A16,16,0,0,0,176,64h16v77.48a47.92,47.92,0,0,1-7.41,25.63L59.68,365a74,74,0,0,0-2.5,75.84C70.44,465.19,96.36,480,124.13,480H387.87c27.77,0,53.69-14.81,66.95-39.21A74,74,0,0,0,452.32,365ZM211.66,184.2A79.94,79.94,0,0,0,224,141.48V68a4,4,0,0,1,4-4h56a4,4,0,0,1,4,4v73.48a79.94,79.94,0,0,0,12.35,42.72l57.8,91.53A8,8,0,0,1,351.37,288H160.63a8,8,0,0,1-6.77-12.27Z"></path></svg><br>
[Ionicons](https://ionicons.com/)
]]
.pull-right-wide[
I haven't had as much luck with these, but you can use the icons 📦 here as well: ` r icons::ionicons("flask")`
]

---
name: your-turn
background-color: var(--my-red)
class: inverse

.left-column[
## Your turn<br><svg aria-hidden="true" role="img" viewBox="0 0 576 512" style="height:1em;width:1.12em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"/></svg><br>
### .my-pink[10:00 mins]
]

.right-column[
### Make an "about me" slide

----

Think about including details like your<br>name, affiliation, location, and/or contact information

Here are some options to consider
- practice [moving content around](#placement) the slide
- separate content with a horizontal bar `----`
- [add an image](#pictures) or photo
- link to sites and/or social media
- add some [icons](#icons)!
- see [my about me slide](#about-me) for ideas
]

---
template: question

----

.pull-left[.center[
<svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:2em;width:2em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M464 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM224 416H64v-96h160v96zm0-160H64v-96h160v96zm224 160H288v-96h160v96zm0-160H288v-96h160v96z"/></svg>
### tables
]]

.pull-right[
.center[
<svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:2em;width:2em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M332.8 320h38.4c6.4 0 12.8-6.4 12.8-12.8V172.8c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h38.4c6.4 0 12.8-6.4 12.8-12.8V76.8c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-288 0h38.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h38.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zM496 384H64V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16z"/></svg>
### plots
]]

---
name: tables
## Tables <i class="fas fa-table" style = "float: right"></i>

---
template: tables

### Direct output

----

```r
NHSRdatasets::LOS_model %>% head()
## # A tibble: 6 × 5
##      ID Organisation   Age   LOS Death
##   <int> <ord>        <int> <int> <int>
## 1     1 Trust1          55     2     0
## 2     2 Trust2          27     1     0
## 3     3 Trust3          93    12     0
## 4     4 Trust4          45     3     1
## 5     5 Trust5          70    11     0
## 6     6 Trust6          60     7     0
```

.footnote[We're using the [NHSRdatasets 📦](https://github.com/nhs-r-community/NHSRdatasets#nhs-r-community-datasets-) here! It was developed by Chris Mainey and contains a few datasets to use for practice.]

---
template: tables

### HTML table

----
.pull-left[

```r
NHSRdatasets::LOS_model %>% head() %>%
  knitr::kable(format = "html")
```
]

.pull-right[
<table>
 <thead>
  <tr>
   <th style="text-align:right;"> ID </th>
   <th style="text-align:left;"> Organisation </th>
   <th style="text-align:right;"> Age </th>
   <th style="text-align:right;"> LOS </th>
   <th style="text-align:right;"> Death </th>
  </tr>
 </thead>
<tbody>
  <tr>
   <td style="text-align:right;"> 1 </td>
   <td style="text-align:left;"> Trust1 </td>
   <td style="text-align:right;"> 55 </td>
   <td style="text-align:right;"> 2 </td>
   <td style="text-align:right;"> 0 </td>
  </tr>
  <tr>
   <td style="text-align:right;"> 2 </td>
   <td style="text-align:left;"> Trust2 </td>
   <td style="text-align:right;"> 27 </td>
   <td style="text-align:right;"> 1 </td>
   <td style="text-align:right;"> 0 </td>
  </tr>
  <tr>
   <td style="text-align:right;"> 3 </td>
   <td style="text-align:left;"> Trust3 </td>
   <td style="text-align:right;"> 93 </td>
   <td style="text-align:right;"> 12 </td>
   <td style="text-align:right;"> 0 </td>
  </tr>
  <tr>
   <td style="text-align:right;"> 4 </td>
   <td style="text-align:left;"> Trust4 </td>
   <td style="text-align:right;"> 45 </td>
   <td style="text-align:right;"> 3 </td>
   <td style="text-align:right;"> 1 </td>
  </tr>
  <tr>
   <td style="text-align:right;"> 5 </td>
   <td style="text-align:left;"> Trust5 </td>
   <td style="text-align:right;"> 70 </td>
   <td style="text-align:right;"> 11 </td>
   <td style="text-align:right;"> 0 </td>
  </tr>
  <tr>
   <td style="text-align:right;"> 6 </td>
   <td style="text-align:left;"> Trust6 </td>
   <td style="text-align:right;"> 60 </td>
   <td style="text-align:right;"> 7 </td>
   <td style="text-align:right;"> 0 </td>
  </tr>
</tbody>
</table>
]

---
template: tables

### DT table

----

```r
NHSRdatasets::LOS_model %>% head() %>%
  DT::datatable()
```

<div id="htmlwidget-0717c046b8ebaa0430fe" style="width:100%;height:auto;" class="datatables html-widget"></div>
<script type="application/json" data-for="htmlwidget-0717c046b8ebaa0430fe">{"x":{"filter":"none","data":[["1","2","3","4","5","6"],[1,2,3,4,5,6],["Trust1","Trust2","Trust3","Trust4","Trust5","Trust6"],[55,27,93,45,70,60],[2,1,12,3,11,7],[0,0,0,1,0,0]],"container":"<table class=\"display\">\n  <thead>\n    <tr>\n      <th> <\/th>\n      <th>ID<\/th>\n      <th>Organisation<\/th>\n      <th>Age<\/th>\n      <th>LOS<\/th>\n      <th>Death<\/th>\n    <\/tr>\n  <\/thead>\n<\/table>","options":{"columnDefs":[{"className":"dt-right","targets":[1,3,4,5]},{"orderable":false,"targets":0}],"order":[],"autoWidth":false,"orderClasses":false}},"evals":[],"jsHooks":[]}</script>

---
template: tables
exclude: true

### GT table

----

.pull-left[

```r
NHSRdatasets::LOS_model %>% head() %>%
  gt::gt()
```
]

.pull-right[
<div id="zrocxfnaqb" style="overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>html {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
}

#zrocxfnaqb .gt_table {
  display: table;
  border-collapse: collapse;
  margin-left: auto;
  margin-right: auto;
  color: #333333;
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  background-color: #FFFFFF;
  width: auto;
  border-top-style: solid;
  border-top-width: 2px;
  border-top-color: #A8A8A8;
  border-right-style: none;
  border-right-width: 2px;
  border-right-color: #D3D3D3;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #A8A8A8;
  border-left-style: none;
  border-left-width: 2px;
  border-left-color: #D3D3D3;
}

#zrocxfnaqb .gt_heading {
  background-color: #FFFFFF;
  text-align: center;
  border-bottom-color: #FFFFFF;
  border-left-style: none;
  border-left-width: 1px;
  border-left-color: #D3D3D3;
  border-right-style: none;
  border-right-width: 1px;
  border-right-color: #D3D3D3;
}

#zrocxfnaqb .gt_title {
  color: #333333;
  font-size: 125%;
  font-weight: initial;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 5px;
  padding-right: 5px;
  border-bottom-color: #FFFFFF;
  border-bottom-width: 0;
}

#zrocxfnaqb .gt_subtitle {
  color: #333333;
  font-size: 85%;
  font-weight: initial;
  padding-top: 0;
  padding-bottom: 6px;
  padding-left: 5px;
  padding-right: 5px;
  border-top-color: #FFFFFF;
  border-top-width: 0;
}

#zrocxfnaqb .gt_bottom_border {
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
}

#zrocxfnaqb .gt_col_headings {
  border-top-style: solid;
  border-top-width: 2px;
  border-top-color: #D3D3D3;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
  border-left-style: none;
  border-left-width: 1px;
  border-left-color: #D3D3D3;
  border-right-style: none;
  border-right-width: 1px;
  border-right-color: #D3D3D3;
}

#zrocxfnaqb .gt_col_heading {
  color: #333333;
  background-color: #FFFFFF;
  font-size: 100%;
  font-weight: normal;
  text-transform: inherit;
  border-left-style: none;
  border-left-width: 1px;
  border-left-color: #D3D3D3;
  border-right-style: none;
  border-right-width: 1px;
  border-right-color: #D3D3D3;
  vertical-align: bottom;
  padding-top: 5px;
  padding-bottom: 6px;
  padding-left: 5px;
  padding-right: 5px;
  overflow-x: hidden;
}

#zrocxfnaqb .gt_column_spanner_outer {
  color: #333333;
  background-color: #FFFFFF;
  font-size: 100%;
  font-weight: normal;
  text-transform: inherit;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 4px;
  padding-right: 4px;
}

#zrocxfnaqb .gt_column_spanner_outer:first-child {
  padding-left: 0;
}

#zrocxfnaqb .gt_column_spanner_outer:last-child {
  padding-right: 0;
}

#zrocxfnaqb .gt_column_spanner {
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
  vertical-align: bottom;
  padding-top: 5px;
  padding-bottom: 5px;
  overflow-x: hidden;
  display: inline-block;
  width: 100%;
}

#zrocxfnaqb .gt_group_heading {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
  color: #333333;
  background-color: #FFFFFF;
  font-size: 100%;
  font-weight: initial;
  text-transform: inherit;
  border-top-style: solid;
  border-top-width: 2px;
  border-top-color: #D3D3D3;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
  border-left-style: none;
  border-left-width: 1px;
  border-left-color: #D3D3D3;
  border-right-style: none;
  border-right-width: 1px;
  border-right-color: #D3D3D3;
  vertical-align: middle;
}

#zrocxfnaqb .gt_empty_group_heading {
  padding: 0.5px;
  color: #333333;
  background-color: #FFFFFF;
  font-size: 100%;
  font-weight: initial;
  border-top-style: solid;
  border-top-width: 2px;
  border-top-color: #D3D3D3;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
  vertical-align: middle;
}

#zrocxfnaqb .gt_from_md > :first-child {
  margin-top: 0;
}

#zrocxfnaqb .gt_from_md > :last-child {
  margin-bottom: 0;
}

#zrocxfnaqb .gt_row {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
  margin: 10px;
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: #D3D3D3;
  border-left-style: none;
  border-left-width: 1px;
  border-left-color: #D3D3D3;
  border-right-style: none;
  border-right-width: 1px;
  border-right-color: #D3D3D3;
  vertical-align: middle;
  overflow-x: hidden;
}

#zrocxfnaqb .gt_stub {
  color: #333333;
  background-color: #FFFFFF;
  font-size: 100%;
  font-weight: initial;
  text-transform: inherit;
  border-right-style: solid;
  border-right-width: 2px;
  border-right-color: #D3D3D3;
  padding-left: 5px;
  padding-right: 5px;
}

#zrocxfnaqb .gt_stub_row_group {
  color: #333333;
  background-color: #FFFFFF;
  font-size: 100%;
  font-weight: initial;
  text-transform: inherit;
  border-right-style: solid;
  border-right-width: 2px;
  border-right-color: #D3D3D3;
  padding-left: 5px;
  padding-right: 5px;
  vertical-align: top;
}

#zrocxfnaqb .gt_row_group_first td {
  border-top-width: 2px;
}

#zrocxfnaqb .gt_summary_row {
  color: #333333;
  background-color: #FFFFFF;
  text-transform: inherit;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
}

#zrocxfnaqb .gt_first_summary_row {
  border-top-style: solid;
  border-top-color: #D3D3D3;
}

#zrocxfnaqb .gt_first_summary_row.thick {
  border-top-width: 2px;
}

#zrocxfnaqb .gt_last_summary_row {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
}

#zrocxfnaqb .gt_grand_summary_row {
  color: #333333;
  background-color: #FFFFFF;
  text-transform: inherit;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
}

#zrocxfnaqb .gt_first_grand_summary_row {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
  border-top-style: double;
  border-top-width: 6px;
  border-top-color: #D3D3D3;
}

#zrocxfnaqb .gt_striped {
  background-color: rgba(128, 128, 128, 0.05);
}

#zrocxfnaqb .gt_table_body {
  border-top-style: solid;
  border-top-width: 2px;
  border-top-color: #D3D3D3;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
}

#zrocxfnaqb .gt_footnotes {
  color: #333333;
  background-color: #FFFFFF;
  border-bottom-style: none;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
  border-left-style: none;
  border-left-width: 2px;
  border-left-color: #D3D3D3;
  border-right-style: none;
  border-right-width: 2px;
  border-right-color: #D3D3D3;
}

#zrocxfnaqb .gt_footnote {
  margin: 0px;
  font-size: 90%;
  padding-left: 4px;
  padding-right: 4px;
  padding-left: 5px;
  padding-right: 5px;
}

#zrocxfnaqb .gt_sourcenotes {
  color: #333333;
  background-color: #FFFFFF;
  border-bottom-style: none;
  border-bottom-width: 2px;
  border-bottom-color: #D3D3D3;
  border-left-style: none;
  border-left-width: 2px;
  border-left-color: #D3D3D3;
  border-right-style: none;
  border-right-width: 2px;
  border-right-color: #D3D3D3;
}

#zrocxfnaqb .gt_sourcenote {
  font-size: 90%;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 5px;
  padding-right: 5px;
}

#zrocxfnaqb .gt_left {
  text-align: left;
}

#zrocxfnaqb .gt_center {
  text-align: center;
}

#zrocxfnaqb .gt_right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#zrocxfnaqb .gt_font_normal {
  font-weight: normal;
}

#zrocxfnaqb .gt_font_bold {
  font-weight: bold;
}

#zrocxfnaqb .gt_font_italic {
  font-style: italic;
}

#zrocxfnaqb .gt_super {
  font-size: 65%;
}

#zrocxfnaqb .gt_two_val_uncert {
  display: inline-block;
  line-height: 1em;
  text-align: right;
  font-size: 60%;
  vertical-align: -0.25em;
  margin-left: 0.1em;
}

#zrocxfnaqb .gt_footnote_marks {
  font-style: italic;
  font-weight: normal;
  font-size: 75%;
  vertical-align: 0.4em;
}

#zrocxfnaqb .gt_asterisk {
  font-size: 100%;
  vertical-align: 0;
}

#zrocxfnaqb .gt_slash_mark {
  font-size: 0.7em;
  line-height: 0.7em;
  vertical-align: 0.15em;
}

#zrocxfnaqb .gt_fraction_numerator {
  font-size: 0.6em;
  line-height: 0.6em;
  vertical-align: 0.45em;
}

#zrocxfnaqb .gt_fraction_denominator {
  font-size: 0.6em;
  line-height: 0.6em;
  vertical-align: -0.05em;
}
</style>
<table class="gt_table">
  
  <thead class="gt_col_headings">
    <tr>
      <th class="gt_col_heading gt_columns_bottom_border gt_right" rowspan="1" colspan="1">ID</th>
      <th class="gt_col_heading gt_columns_bottom_border gt_center" rowspan="1" colspan="1">Organisation</th>
      <th class="gt_col_heading gt_columns_bottom_border gt_right" rowspan="1" colspan="1">Age</th>
      <th class="gt_col_heading gt_columns_bottom_border gt_right" rowspan="1" colspan="1">LOS</th>
      <th class="gt_col_heading gt_columns_bottom_border gt_right" rowspan="1" colspan="1">Death</th>
    </tr>
  </thead>
  <tbody class="gt_table_body">
    <tr><td class="gt_row gt_right">1</td>
<td class="gt_row gt_center">Trust1</td>
<td class="gt_row gt_right">55</td>
<td class="gt_row gt_right">2</td>
<td class="gt_row gt_right">0</td></tr>
    <tr><td class="gt_row gt_right">2</td>
<td class="gt_row gt_center">Trust2</td>
<td class="gt_row gt_right">27</td>
<td class="gt_row gt_right">1</td>
<td class="gt_row gt_right">0</td></tr>
    <tr><td class="gt_row gt_right">3</td>
<td class="gt_row gt_center">Trust3</td>
<td class="gt_row gt_right">93</td>
<td class="gt_row gt_right">12</td>
<td class="gt_row gt_right">0</td></tr>
    <tr><td class="gt_row gt_right">4</td>
<td class="gt_row gt_center">Trust4</td>
<td class="gt_row gt_right">45</td>
<td class="gt_row gt_right">3</td>
<td class="gt_row gt_right">1</td></tr>
    <tr><td class="gt_row gt_right">5</td>
<td class="gt_row gt_center">Trust5</td>
<td class="gt_row gt_right">70</td>
<td class="gt_row gt_right">11</td>
<td class="gt_row gt_right">0</td></tr>
    <tr><td class="gt_row gt_right">6</td>
<td class="gt_row gt_center">Trust6</td>
<td class="gt_row gt_right">60</td>
<td class="gt_row gt_right">7</td>
<td class="gt_row gt_right">0</td></tr>
  </tbody>
  
  
</table>
</div>
]

.footnote[Make sure to check out the [GT package workshop](https://github.com/nhs-r-community/Conference_2020#workshop-sessions) tomorrow!]
---
name: plots
## Plots <i class="fas fa-chart-bar" style = "float: right"></i>

---
template: plots
name: plot-right

.pull-left[
### Code

----

```r
NHSRdatasets::LOS_model %>%
  ggplot(aes(x = Age, y = Organisation)) +
  geom_boxplot(aes(fill = Organisation)) +
  NHSRtheme::scale_fill_nhs("highlights")
```
]

.pull-right[

### Plot

----

![](day-01-basics_files/figure-html/unnamed-chunk-20-1.png)

]

.footnote[Note the use of the [NHSRtheme 📦](https://github.com/nhs-r-community/NHSRtheme#nhs-r-theme-) here! It was developed by Tom Jemmett and contains a few different colour palettes based on the NHS identity guidelines]
---
template: plots
name: alison-tips

### Creating side-by-side code + plot

----

Here's how to leverage code chunk options to avoid repeating your code<sup1/sup>:

1. Code on left, plot on right ([example](#plot-right))

- Chunk 1: `{r plot-right, fig.show = 'hide'}`
  - Chunk 2: `{r ref.label = 'plot-right', echo = FALSE}`

2. Plot on left, code on right
  - Chunk 1: `{r plot-left, echo = FALSE}`
  - Chunk 2: `{r ref.label = 'plot-left', fig.show = 'hide'}`

.small[
These and more great tips in Alison Hill's [Teaching in Production](https://rstudio-education.github.io/teaching-in-production/slides/index.html#46)
]

---
name: your-turn
background-color: var(--my-red)
class: inverse

.right-column[
### Make a new slide and practice<br>adding some R content

----

Here are some options to consider
- add a [table](#tables)
- add a [plot](#plots)
- try [arranging content](#alison-tips) to have code on one side and the output on the other
]

---
template: live-coding

### Let's try deploying slides to GitHub!

---
class: goodbye-slide, inverse, middle, left

.pull-left[
<img style="border-radius: 50%;" src="https://silvia.rbind.io/authors/silvia/avatar.png" width="170px"/>
# Thank you!

### Here's where you can find me...

.right[
[silvia.rbind.io <svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg>](https://silvia.rbind.io)<br/>
[@spcanelon <svg aria-label="Twitter" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><title>Twitter</title><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>](https://twitter.com/spcanelon)<br/>
[@spcanelon <svg aria-label="GitHub" role="img" viewBox="0 0 496 512" style="height:1em;width:0.97em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><title>GitHub</title><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>](https://github.com/spcanelon)<br/>
]]