HTML Presentations

.title[
# <font size="7" color="skyblue">HTML Presentations </font>
]
.subtitle[
## <font size="6" color="gold">An Example </font>
]
.author[
### <font size="6" color="skyblue">Cheng Peng </font>
]
.institute[
### 
<br><font size="3" color="skyblue">West Chester University of Pennsylvania</font><br>
]
.date[
### <font color="skyblue" size="5"> 09/20/2022 <font> <br> <font color="skyblue" size="4"> Prepared for <br> </font> <br> <font color="gold" size="6"> STA 490: Capstone Statistics </font> <br> <br> <font color="white" size="5"> Slides available at: <a href="https://rpubs.com/cpeng/eCOTS2022" class="uri">https://rpubs.com/cpeng/eCOTS2022</a> AND <a href="https://pengdsci.github.io/STA490/w04-html-presentation.html" class="uri">https://pengdsci.github.io/STA490/w04-html-presentation.html</a></font>
]

---

class: inverse, middle

## <center><b>Agenda </b></center>

### Package Installation

### YAML

### Slides Designs

### Publishing Presentation: RPubs and GitHub

---

# Required Packages
---

## <center>Packages and Tools</center>

### Install the **xaringan** package from [Github](https://github.com/yihui/xaringan):

```{}
remotes::install_github("yihui/xaringan")
```

### You are recommended to use the [RStudio IDE](https://www.rstudio.com/products/rstudio/)

- Create a new R Markdown document from the menu `File -> New File -> R Markdown -> From Template -> Ninja Presentation`;

- Click the `Knit` button to compile it;

---

# YAML Stuff
---

## <center>YAML: HTML Tags </center>

- Except for the output, all other fields in YAML can be written in HTML.

- All HTML tags MUST be placed in a single line and MUST be placed in single quotes ''.
---

## <center>YAML: Output Controls</center>

- Slides can be automatically played if you set the `autoplay` option under `nature`, e.g. go to the next slide every 30 seconds in a lightning talk:

```yaml
    output:
      xaringan::moon_reader:
        nature:
          autoplay: 30000
    ```

- If you want to restart the play after it reaches the last slide, you may set the sub-option `loop` to TRUE, e.g.,

```yaml
    output:
      xaringan::moon_reader:
        nature:
          autoplay:
            interval: 30000
            loop: true
    ```
---

## <center>YAML: Output Control (cont'd)</center>

- A countdown timer can be added to every page of the slides using the `countdown` option under `nature`, e.g. if you want to spend one minute on every slide, you can set:

```yaml
    output:
      xaringan::moon_reader:
        nature:
          countdown: 60000
    ```

The timer will count down from `01:00`, to `00:59`, `00:58`, ... When the time is out, the timer will continue but turn red like <font color = "darkred"  face = "Verdana"> 00:00</font>, to <font color = "darkred"  face = "Verdana">00:01</font>, ...
    
    
- The title slide is set to `class: center, middle, inverse, title-slide` by default. You can change the classes applied to the title slide with the `titleSlideClass` option of `nature` (`title-slide` is always applied).

```yaml
    output:
      xaringan::moon_reader:
        nature:
          titleSlideClass: [top, left, inverse]
    ```
---

# Slide Design Components
---

# <center>Back-to-back Comparisons</center>

#### Highlighting Texts using `*` and `{{ }}`

- An example using a leading `*`:  You type the following commands

Output:

```r
if (TRUE) {
* message("Very important!")
}
```

This is invalid R code, so it is a plain fenced code block that is not executed.
]

Output:

```r
if (TRUE) {
* message("Very important!") 
}
```

```
## Very important!
```

It is valid R code so you can run it. Note that `{{}}` can wrap an R expression of multiple lines.
]
---

# Highlighting Output Table Rows

When you enable line-highlighting, you can also use the chunk option `highlight.output` to highlight specific lines of the text output from a code chunk. For example, `highlight.output = TRUE` means highlighting all lines, and `highlight.output = c(1, 3)` means highlighting the first and third line.

````
```{ highlight.output=c(1, 3), echo=FALSE}
head(iris)
```
````

```
*##   Sepal.Length Sepal.Width Petal.Length Petal.Width Species
## 1          5.1         3.5          1.4         0.2  setosa
*## 2          4.9         3.0          1.4         0.2  setosa
## 3          4.7         3.2          1.3         0.2  setosa
## 4          4.6         3.1          1.5         0.2  setosa
## 5          5.0         3.6          1.4         0.2  setosa
## 6          5.4         3.9          1.7         0.4  setosa
```
---

# <center> Mathematical Expressions</center>

You can write LaTeX math expressions inside a pair of dollar signs, e.g. `$\alpha+\beta$` renders `$\alpha+\beta$`. You can use the display style with double dollar signs:

```
$$\bar{X}=\frac{1}{n}\sum_{i=1}^nX_i$$
```

`$$\bar{X}=\frac{1}{n}\sum_{i=1}^nX_i$$`

Some Limitations:

- The source code of a LaTeX math expression must be in one line, unless it is inside a pair of double dollar signs, in which case the starting `$$` must appear in the very beginning of a line, followed immediately by a non-space character, and the ending `$$` must be at the end of a line, led by a non-space character;

- There should not be spaces after the opening `$` or before the closing `$`.

- Math does not work on the title slide.

---

# <center>R Outputs </center>

```r
# a boring regression
fit = lm(dist ~ 1 + speed, data = cars)
coef(summary(fit))
```

```
#               Estimate Std. Error   t value     Pr(>|t|)
# (Intercept) -17.579095  6.7584402 -2.601058 1.231882e-02
# speed         3.932409  0.4155128  9.463990 1.489836e-12
```

---

# <center>R Plots</center>

```r
par(mar = c(4, 4, 1, .1))
plot(cars, pch = 19, col = 'darkgray', las = 1)
abline(fit, lwd = 2)
```

---

# <center> Tables </center>

If you want to generate a table, make sure it is in the HTML format (instead of Markdown or other formats), e.g.,

```r
knitr::kable(head(iris), format = 'html')
```

<table>
 <thead>
  <tr>
   <th style="text-align:right;"> Sepal.Length </th>
   <th style="text-align:right;"> Sepal.Width </th>
   <th style="text-align:right;"> Petal.Length </th>
   <th style="text-align:right;"> Petal.Width </th>
   <th style="text-align:left;"> Species </th>
  </tr>
 </thead>
<tbody>
  <tr>
   <td style="text-align:right;"> 5.1 </td>
   <td style="text-align:right;"> 3.5 </td>
   <td style="text-align:right;"> 1.4 </td>
   <td style="text-align:right;"> 0.2 </td>
   <td style="text-align:left;"> setosa </td>
  </tr>
  <tr>
   <td style="text-align:right;"> 4.9 </td>
   <td style="text-align:right;"> 3.0 </td>
   <td style="text-align:right;"> 1.4 </td>
   <td style="text-align:right;"> 0.2 </td>
   <td style="text-align:left;"> setosa </td>
  </tr>
  <tr>
   <td style="text-align:right;"> 4.7 </td>
   <td style="text-align:right;"> 3.2 </td>
   <td style="text-align:right;"> 1.3 </td>
   <td style="text-align:right;"> 0.2 </td>
   <td style="text-align:left;"> setosa </td>
  </tr>
  <tr>
   <td style="text-align:right;"> 4.6 </td>
   <td style="text-align:right;"> 3.1 </td>
   <td style="text-align:right;"> 1.5 </td>
   <td style="text-align:right;"> 0.2 </td>
   <td style="text-align:left;"> setosa </td>
  </tr>
  <tr>
   <td style="text-align:right;"> 5.0 </td>
   <td style="text-align:right;"> 3.6 </td>
   <td style="text-align:right;"> 1.4 </td>
   <td style="text-align:right;"> 0.2 </td>
   <td style="text-align:left;"> setosa </td>
  </tr>
  <tr>
   <td style="text-align:right;"> 5.4 </td>
   <td style="text-align:right;"> 3.9 </td>
   <td style="text-align:right;"> 1.7 </td>
   <td style="text-align:right;"> 0.4 </td>
   <td style="text-align:left;"> setosa </td>
  </tr>
</tbody>
</table>

---

# <center>Include Images </center>

You can simply use HTML `img` tag to include an image into the slide.

---

# <center>Interactive Graphic Generated From R </center>

```r
leaflet() %>% addTiles() %>% setView(-75.6001, 39.95219, zoom = 17)
```

<div id="htmlwidget-ad7590438e90f75bb4d7" style="width:100%;height:432px;" class="leaflet html-widget"></div>
<script type="application/json" data-for="htmlwidget-ad7590438e90f75bb4d7">{"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":[[39.95219,-75.6001],17,[]]},"evals":[],"jsHooks":[]}</script>
---

# <center>Embedding YouTube Videos </center>

# Publish Your Presentation

---

#  <center>RPubs and GitHub</center>

- `RPubs` is **a free-to-use publishing platform built by Rstudio**. It allows you to publish both HTML reports and presentations directly from Rstudio to the web.

To use RPubs, you need to register an account with RPubs before you publish you presentation through on Rpubs through R Markdown.

- `GitHub` is also a really great platform for publishing HTML files for free.

---

# Thanks!