How to make Xaringan presentations

class: center, middle, inverse, title-slide

# How to make Xaringan presentations
### David Sands
### 2020-05-15

---

#  Xaringan Topics

In this talk I will show:

1. What xaringan is
 2. Why it is useful
 3. Useful prerequisites (R and Markdown)

--
 4. How to make a slide
 5. How to make incremental reveals
 6. How to add pictures
 7. How to present data

--
 8. Data Tables
 9. ggplots
 10. Maps
 11. Themes
 12. Conclusion
 
---
 
# What is Xaringan?

Xari-what? [xaringan](https://github.com/yihui/xaringan) is

> An R package for creating HTML5 presentations with remark.js through R Markdown.

It offers all the capabilities of an R Markdown document in a power-point format. You can present analysed data, present said results, create charts, and show maps in a xaringan presentation. Or, a nice way to show data in a [RAP](https://ukgovdatascience.github.io/rap_companion/) format.

### How is this different from an R presentation?

In R Studio, you can create an `R Presentation` file to present your analysis in a presentation. The difference between this and xaringan is that _xari_ is an order of magnitude more prettier. If these were cars, R Presentation would be a [Reliant Robin](https://www.youtube.com/watch?v=DRGuMKVqNzA), whilst xaringan would be a classic Mini. They do the same job, but one does it with more style and _elan_ than the other.

This session will then focus on how you can build a xaringan presentation to show your work off.

---

# What is remark.js?

> A simple, in-browser, markdown-driven slideshow tool targeted at people who know their way around HTML and CSS

Savvy programmers use it to write presentations. Like __you__ at the end of this one!

---

# Why should I learn this?

1. You keep your workflow in R. Instead of juggling RStudio and PowerPoint, you can bring your entire workflow into RStudio. 
 
 2. You can version control it via Git. This allows easy and auditable sharing via Github for external audiences, or Azure DevOps for internal contacts
 
 3. It looks good. Phrased differently, it's _fashionable._
 
> Fashion is not something that exists in dresses only. Fashion is in the sky, in the street, fashion has to do with ideas, the way we live, what is happening.[1]

.footnote[
[1] Coco Chanel
]

???

You keep your workflow in R, stopping you from juggling multiple software to analyse and present a piece of work

I talked previously about how Git makes your work more auditable and reproducible. By VCing your presentation as well, you can extend that oversight and control to it as well. 
---

# Previous work

I have previously used xaringan to talk about:

.pull-left[
**The Psychology of Performance**

.pull-right[
and the **Boons of R and Git**

]

The source code of which can be found [here](https://github.com/PsySandsy/psysandsy.github.io).

---

# Prerequisites

Before we venture further however, it's crucial to point out that operating this package requires intermediate knowledge of both R and RMarkdown.

Now, if you don't know R that well but want to, go through this online [DfE R training book](https://dfe-analytical-services.github.io/r-training-course/).

---

Whilst for RMarkdowns, [Dr Dray](https://github.com/matt-dray)'s [Knitting Club](https://www.rostrum.blog/2018/09/24/knitting-club/) will stitch your knowledge up to a _whool_ new level.

---

# Analytics Academy

If you can't be bothered reading, then that's no bother . The [Winklevoss](mailto:Jack.TATTERSALL@education.gov.uk) [twins](mailto:James.LOWE@education.gov.uk) have recorded _a lot_ of videos to learn R on their [Analytics Academy](https://educationgovuk.sharepoint.com/sites/DAN/Data Science/The Analytics Academy - An R training course.aspx) page. Pay it visit, and maybe you'll figure out who I'm talking about!

---

# How to make a slide

It's time to make our own xaringan file.

First, create a new R Markdown file. Then go to the YAML header at the top of the document and change:

```r
---
output: html_document
---
```

```r
---
*output: xaringan::moon_reader
---
```

---

# How to make a slide

Now let's start making slides. Type 3 dashes in a row to make a new slide: ---

```
---
# How to make a slide
```

Then start spreading dat information.

---

# How to make incremental reveals

If you want incremental reveals to break up the presentation of your text - or to add a 'lil bit of suspense - type 2 dashes in a row: --

.pull-left[

```
Hello

is it me you're looking for?

I can see it in your eyes

```

]

.pull-right[

Hello  
{{content}}

]

is it me you're looking for?
{{content}}

I can see it in your eyes
{{content}}

---
# How to add pictures

.pull-left[

To add pictures for visual __oomph__, change the src to the url of the picture you want to add. Or if you want to add pictures on your machine, save them in a `images/` folder, and then reference them in the src. E.g. `"images/01.png"`

```r
<img src = 
"https://user-images.
githubusercontent.com/
163582/ 
45438104-ea200600-b67b-11e8- 
80fa-d9f2a99a03b0.png"
>
```

]

.pull-right[
<img src = "https://user-images.githubusercontent.com/163582/45438104-ea200600-b67b-11e8-80fa-d9f2a99a03b0.png">
]

---

# How to present data

Now that you can write content, let's start presenting some data.

We could - for example - use a static kable for small or summary data:

```r
knitr::kable(lvl_and_age, format = "html")
```

<table>
 <thead>
  <tr>
   <th style="text-align:left;"> Level </th>
   <th style="text-align:left;"> Age </th>
   <th style="text-align:right;"> sum_of_starts </th>
  </tr>
 </thead>
<tbody>
  <tr>
   <td style="text-align:left;"> Advanced Apprenticeship </td>
   <td style="text-align:left;"> 19-24 </td>
   <td style="text-align:right;"> 56146 </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Advanced Apprenticeship </td>
   <td style="text-align:left;"> 25+ </td>
   <td style="text-align:right;"> 79429 </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Advanced Apprenticeship </td>
   <td style="text-align:left;"> Under 19 </td>
   <td style="text-align:right;"> 39152 </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Higher Apprenticeship </td>
   <td style="text-align:left;"> 19-24 </td>
   <td style="text-align:right;"> 20367 </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Higher Apprenticeship </td>
   <td style="text-align:left;"> 25+ </td>
   <td style="text-align:right;"> 50698 </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Higher Apprenticeship </td>
   <td style="text-align:left;"> Under 19 </td>
   <td style="text-align:right;"> 3993 </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Intermediate Apprenticeship </td>
   <td style="text-align:left;"> 19-24 </td>
   <td style="text-align:right;"> 39491 </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Intermediate Apprenticeship </td>
   <td style="text-align:left;"> 25+ </td>
   <td style="text-align:right;"> 49547 </td>
  </tr>
  <tr>
   <td style="text-align:left;"> Intermediate Apprenticeship </td>
   <td style="text-align:left;"> Under 19 </td>
   <td style="text-align:right;"> 54552 </td>
  </tr>
</tbody>
</table>

---

# Data Tables

Alternatively, if you want your users to interact with a table of your data, use a `Data Table`:

```
{r}
library(DT)
datatable(data)
```
---

<div id="htmlwidget-24222ef093ea479130b6" style="width:100%;height:auto;" class="datatables html-widget"></div>
<script type="application/json" data-for="htmlwidget-24222ef093ea479130b6">{"x":{"filter":"none","data":[["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31","32","33"],["Agriculture, Horticulture and Animal Care","Agriculture, Horticulture and Animal Care","Agriculture, Horticulture and Animal Care","Arts, Media and Publishing","Arts, Media and Publishing","Arts, Media and Publishing","Business, Administration and Law","Business, Administration and Law","Business, Administration and Law","Construction, Planning and the Built Environment","Construction, Planning and the Built Environment","Construction, Planning and the Built Environment","Education and Training","Education and Training","Education and Training","Engineering and Manufacturing Technologies","Engineering and Manufacturing Technologies","Engineering and Manufacturing Technologies","Health, Public Services and Care","Health, Public Services and Care","Health, Public Services and Care","Information and Communication Technology","Information and Communication Technology","Information and Communication Technology","Leisure, Travel and Tourism","Leisure, Travel and Tourism","Leisure, Travel and Tourism","Retail and Commercial Enterprise","Retail and Commercial Enterprise","Retail and Commercial Enterprise","Science and Mathematics","Science and Mathematics","Science and Mathematics"],["19-24","25+","Under 19","19-24","25+","Under 19","19-24","25+","Under 19","19-24","25+","Under 19","19-24","25+","Under 19","19-24","25+","Under 19","19-24","25+","Under 19","19-24","25+","Under 19","19-24","25+","Under 19","19-24","25+","Under 19","19-24","25+","Under 19"],[2080,1658,2911,455,220,321,33511,65030,20105,7629,3875,11029,1868,4020,1221,20564,15302,24102,24618,58414,14683,9011,7433,4667,2415,1569,3232,13808,22091,15404,45,62,22]],"container":"<table class=\"display\">\n  <thead>\n    <tr>\n      <th> <\/th>\n      <th>SSA.T1<\/th>\n      <th>Age<\/th>\n      <th>sum_of_starts<\/th>\n    <\/tr>\n  <\/thead>\n<\/table>","options":{"columnDefs":[{"className":"dt-right","targets":3},{"orderable":false,"targets":0}],"order":[],"autoWidth":false,"orderClasses":false}},"evals":[],"jsHooks":[]}</script>

---
# ggplots

.pull-left[

```r
library(ggplot2)
lvl_and_age %>% 
  ggplot2::ggplot(mapping = 
  aes(Level, sum_of_starts)) + 
  geom_col()
```

]

.pull-right[
<img src="xaringan-teach_files/figure-html/unnamed-chunk-10-1.png" width="504" />
]

---
![](xaringan-teach_files/figure-html/ggplot-colour-1.png)

And once we have beautiful charts nestled in, we can directly reference the data in our text. For instance, this data (taken from the [November FE and Skills release](https://www.gov.uk/government/statistics/further-education-and-skills-november-2019)) shows that the largest group of people starting apprenticeships are 25 or over with 179674 starts. Conversely, the smallest group are people aged 18 or less with 97697 starts

---
##  Maps - xaringan also allows the integration of maps.

<div id="htmlwidget-671a72e094e0f24efe8e" style="width:504px;height:504px;" class="leaflet html-widget"></div>
<script type="application/json" data-for="htmlwidget-671a72e094e0f24efe8e">{"x":{"options":{"crs":{"crsClass":"L.CRS.EPSG3857","code":null,"proj4def":null,"projectedBounds":null,"options":{}}},"calls":[{"method":"addTiles","args":["//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",null,null,{"minZoom":0,"maxZoom":18,"tileSize":256,"subdomains":"abc","errorTileUrl":"","tms":false,"noWrap":false,"zoomOffset":0,"zoomReverse":false,"opacity":1,"zIndex":1,"detectRetina":false,"attribution":"© <a href=\"http://openstreetmap.org\">OpenStreetMap<\/a> contributors, <a href=\"http://creativecommons.org/licenses/by-sa/2.0/\">CC-BY-SA<\/a>"}]}],"setView":[[51.4975684,-0.1306512],20,[]]},"evals":[],"jsHooks":[]}</script>

---
# Making maps

Not only are maps pretty, but can be integrated with shape maps and coordinates to present geographical data. You can present values per regions, results of schools within cities, or the capacity of FE providers in opportunity areas.

Here's the code to create a map set on the Department for Education you saw in the last slide:

```
{r}
library(leaflet)
leaflet() %>% addTiles() 
%>% setView(lat = 51.4975684, 
lng = -0.1306512, zoom = 20) 
```

---
# Themes

When you knit your xaringan document, you create an HTML file. Any HTML content can be styled using [Cascading Style Sheets (CSS)](9https://en.wikipedia.org/wiki/Cascading_Style_Sheets) - the styling language used to make websites _funky._

'tis the same with xaringan. Once you get good at CSS, you can create your own style of xaringan presentations. A few ones of note are:

* [R Ladies comin' thru with a theme Prince would dig](https://alison.rbind.io/post/2017-12-18-r-ladies-presentation-ninja/)
 
 * [Prolific analyst Matt Dray made a GDS theme](https://github.com/matt-dray/gdstheme)

Plus, I saw CAU used a lovely design for one of their presentations I saw (may have been a Data Science one). If anyone there is inspired by this talk, you can create a xaringan theme using your power point style!

---

# Conclusion

The benefits of xaringan are almost like the benefits of Data Science itself: it looks dazzling and makes analysis easier. In our case, you can craft a presentation to look good and use styling your organisation uses. And as the whole presentation is written in R, you can incorporate all the analysis you did in R into here -  making the write-up of your analysis easier and inducing a RAP into the presentation stage of your work.

---

# Other resources

* [Xaringan introduction in `R Markdown: The Definitive Guide`](https://bookdown.org/yihui/rmarkdown/xaringan.html)
 
 * [Remark JS website](https://remarkjs.com/)
 
 * [A more exhaustive presentation explaining how to create a xaringan](https://yongfu.name/slides/xaringan/xaringan.pdf)