Making a Presentation in R Using c4ed theme: Xaringan

.title[
# Making a Presentation in R Using c4ed theme: Xaringan
]
.subtitle[
## Center for Evaluation and Devlopment(C4ED) Using c4ed theme
]
.author[
### <div class="line-block">Yebelay Berehan, (Survey Manager)</div>
]
.date[
### October 21, 2023
]

---

# Outlines

- General introduction to R markdown🐣

- Making presentation slide using xaringan template📝

- Create presentation using C4ED template 🤹

---

# General introduction to R markdown🐣

## Packages for making presentation in R

1. **`rmarkdown`:** Creates dynamic reports and documents by blending code and text.
2. **`knitr`:** Embeds and executes R code within R Markdown, generating tables and plots.
3. **`tinytex`:** Simplifies LaTeX package management for high-quality documents.
4. **`xaringan`:** Builds interactive web-based presentations using R Markdown.
5. **`xaringanthemer`:** Customizes themes and styles for Xaringan presentations.
6. **`xaringanExtra`:** Enhances Xaringan presentations with features like slide notes and transitions.

```r
packs <- c(rmarkdown, knitr, tinytex, xaringan, xaringanExtra,
 xaringanthemer)
install.packages("packs")
```

---

# Creating an R project 🐣

- Create a new R Project from within R Studio

![](img/openRProj.png)

---

- Save in new directory 
.pull-left[
<img src="img/newdir.png" width="300px" height="200px" >
]
.pull-right[
<img src="img/newprojinnewdir.png" width="500px" height="200px" >
]
 
- Choose the folder where you want to store your R Markdown file

---

- In that new folder, create an R Markdown file
.pull-left[
<img src="img/creatermark.png" width="400px" height="120px" >
]
.pull-right[
- File ➡️ New File ➡️ R Markdown ➡️ Click OK
]
- When you knit, the following happens:

- knit executes the code if there is any, converts the resulting document from `.Rmd (R Markdown)` into `.md (Markdown)`
- pandoc transforms the `.md document` into your preferred output format(s) (e.g., word, pdf, html)
 
---

# The YAML header

YAML includes the metadata variables
- e.g., title, output format    
- written between a pair of three hyphens .blue-h[-]

```r
*---
title: 
output:
*---
```

- Typical **YAML variables** for any output format:

```r
---
title: 
author: 
date: 
output: 
---
```

---

# YAML &mdash; Variables

- Variables can be provided as strings, options, sub-options, and code

```r
---
title: "My very funny first slide"
output: 
    pdf_document:
        keep_tex: true
*date: "`r Sys.Date()`"
---
```

- Documents as output formats include

```r
---
*output: html_document
*output: latex_document
*output: pdf_document
*output: word_document
---
```
]
.pull-right[
- HTML
- LaTeX
- PDF
- Word
]

---
 
# Headers

- The number sign # introduces headers; lower levels are created with additional # &mdash; up to total four levels

```
]

# Introduction
## Introduction
### Introduction
#### Introduction
##### Introduction
]

### Emphases

- A pair of single asterisk .blue-h[&#42;] or underscores .blue-h[&#95;] introduces italics
- &#42;italics&#42; or &#95;italics&#95; becomes .out-t[*italics*] 
- A pair of double asterisk or underscores introduces bold 
- &#42;&#42;bold&#42;&#42; or &#95;&#95;bold&#95;&#95;becomes .out-t[**bold**]

---
 
# Equations

Inline equations go between a pair of single dollar signs "$" with no space between the signs and the equation itself

Block equations go in between a pair of double dollar signs

]

---
 
# Lists

Lines starting with asterisk .yellow-h[&#42;] as well as plus .yellow-h[&#43;] or minus .yellow-h[&#8722;] signs introduce lists
.pull-left[

```r
- books
- articles
- reports
```
]
.pull-right[

- books
- articles
- reports
]

- Lists can be numbered, nested within each other, with indentation

```r
1. books
2. articles
    - published
    - under review
        + revised and resubmitted
    - work in progress
```
]
.pull-right[
1. books
2. articles
   - published
   - under review
      + revised and resubmitted
   - work in progress
]

---
 
.pull-left[### .fancy[Dashes]

- Two hyphens grouped together introduce small dash
 - .inline-c[&#8208;&#8208;] becomes .out-t[&ndash;]

- Three hyphens grouped together introduce bbiger dash
 - .inline-c[&#8208;&#8208;&#8208;] becomes .out-t[&mdash;]
]

- underscore (`_`) introduces subscript
  - $ CO_2 $ becomes `$CO_2$`
- `^` introduces superscript
  - R^2  becomes `$R^2$`
]

--------------------------------------------------------------------------

---

#  Making presentation slide using xaringan template📝

* Xaringan = shar-in-gen or [ʃæ.ˈriŋ.gæn], which is created by [Yihui Xie](https://yihui.org/) 
* Install the package from GitHub

```r
remotes::install_github("yihui/xaringan")
```
* In RStudio: Make a new project
* File ➡️ New File ➡️ R Markdown ➡️ From Template ➡️ Ninja Presentation

- Delete everything but YAML
- Save. (save, save, save!)

---

# Then the YAML page 
.pull-left[
<img src="img/Ninja1.PNG" width="400px" height="400px">
]
.pull-right[

```r
---
title: "Presentation Ninja"
subtitle: "⚔ with xaringan"
author: "Yihui Xie"
institute: "RStudio, PBC"
date: "2016/12/12(updated:`r Sys.Date()`)"
output:
 xaringan::moon_reader: # output format
nature:
 highlightStyle: # how the code displays
 highlightLines: true 
countIncrementalSlides: false
#ratio "16:9" # or 4:3
---
```
]
---

- 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()
```

**Option 2**. Knit the document 🧶

---

# xaringan syntax

### Familiar from **markdown**

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

.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 three dashes (`---`)
- Incremental slides are separated by two dashes (`--`)
]

---

# How can we make our slides look more interesting?

by adjusting 
- Placement of texts 
- pretty pictures
- and icons

---

# Make slides look more interesting: Align an entire slide

```r
---
*class: center, middle
This content is also centered and in the middle of the slide 
---
```
- Slide with some text aligned
```r
.right[...and finish it on the right.]
```
.right[...and finish it on the right.]

---

# Make slides look more interesting: Placement

- Pull content to either side of the slide

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

```{
.pull-left[
<img src="img/fig1.png" width="25%"/>
]
```
<img src="img/hex-rmarkdown.png" width="25%"/>
]

- And `.pull-right[]` pulls content to the right 47%
```{r
.pull-right[
<img src="img/fig.png" width="25%"/>
]
```
<img src="img/hex-xaringan.png" width="25%" />
]

- 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.

---

# Make slides look more interesting: 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.small-image[
<img src="img/hex-xaringan.png" width="22%"/>
]
]

---
class: inverse left middle

# How to add images to your slides pictures

- Insert image from local or external sources

- Integrate R plots to the slide

---
class: inverse left top

# insert image from local or external sources

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

```r
![](img/fig.png)
```

- simple
- not very flexible
- output size fully dependent on the size of the image, but scaling can be manage
]

]

```r
knitr::include_graphics("img/fig.png")
```
- pretty flexible
- a little bulky
]

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

]

---
background-image: url("img/fullimage.png")
background-size: 100%

# Full background image

- For example I use the this code for this background image.

```
background-image: url("img/fullimage.png")
background-size: cover
```

- `background-size: cover` --> will cover the slide so that there is no white space.
- `background-position:` play with [this](https://www.w3schools.com/cssref/pr_background-position.asp)

---

# visualize our data using r code

]

```r
library(ggplot2)
library(palmerpenguins)
   ggplot(penguins, aes(x = flipper_length_mm, y = body_mass_g, color = sex)) +  
   geom_point() + theme_bw()+
  scale_color_manual(values = c("darkorange", "cyan4"), na.translate = FALSE) +
  labs(title = "Penguin flipper and body mass") +
  labs(x = "Flipper length (mm)",  y = "Body mass (g)",
       color = "Penguin sex")  #  facet_wrap(~ species) 
```

]
.panel[.panel-name[Chunk Code]
![](img\code-setup-chunk.png)
]
.panel[.panel-name[Map]

```r
library(leaflet)
leaflet() %>% addTiles() %>% setView(lng = 40.489673, lat = 9.1450, zoom = 3)
```

<div class="leaflet html-widget html-fill-item-overflow-hidden html-fill-item" id="htmlwidget-815c9ea6ca259957c1c5" style="width:504px;height:504px;"></div>
<script type="application/json" data-for="htmlwidget-815c9ea6ca259957c1c5">{"x":{"options":{"crs":{"crsClass":"L.CRS.EPSG3857","code":null,"proj4def":null,"projectedBounds":null,"options":{}}},"calls":[{"method":"addTiles","args":["https://{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=\"https://openstreetmap.org/copyright/\">OpenStreetMap<\/a>, <a href=\"https://opendatacommons.org/licenses/odbl/\">ODbL<\/a>"}]}],"setView":[[9.145,40.489673],3,[]]},"evals":[],"jsHooks":[]}</script>
]

<div class="plotly html-widget html-fill-item-overflow-hidden html-fill-item" id="htmlwidget-654acb848be0fc4af01e" style="width:720px;height:432px;"></div>
<script type="application/json" data-for="htmlwidget-654acb848be0fc4af01e">{"x":{"data":[{"x":[186,195,193,181,182,185,195,184,174,189,187,187,172,178,188,195,180,181,182,186,185,190,186,190,187,186,181,185,185,184,195,190,190,196,190,191,187,189,187,191,189,190,202,185,187,190,178,192,183,193,199,181,198,193,191,188,189,187,176,186,191,191,190,193,187,191,185,193,188,192,184,195,187,211,210,210,211,209,214,214,210,210,209,215,213,215,210,209,207,220,213,208,208,210,217,210,213,210,210,217,208,208,208,214,219,220,216,217,216,209,215,212,212,212,218,212,218,212,214,222,203,219,215,210,208,216,213,217,214,215,212,192,188,198,178,195,193,185,190,181,190,181,187,195,200,191,187,187,199,195,192,187,196,196,190,198,199,193,187,191,194,189,195,202,198],"y":[3800,3250,3450,3625,3200,3700,3450,3325,3400,3800,3800,3200,3150,3250,3300,3325,3550,3300,3150,3100,3000,3450,3500,3450,2900,3550,2850,3150,3600,2850,3350,3050,3600,3550,3700,3700,3550,3200,3800,3350,3500,3600,3550,3400,3300,3700,2900,3725,3075,2925,3750,3175,3825,3200,3900,2900,3350,3150,3450,3050,3275,3050,3325,3500,3425,3175,3400,3400,3050,3000,3475,3450,3700,4500,4450,4550,4800,4400,4650,4650,4200,4150,4800,5000,4400,5000,4600,4700,5050,5150,4950,4350,3950,4300,4900,4200,5100,4850,4400,4900,4300,4450,4200,4400,4700,4700,4750,5200,4700,4600,4750,4625,4725,4750,4600,4875,4950,4750,4850,4875,4625,4850,4975,4700,4575,5000,4650,4375,4925,4850,5200,3500,3525,3950,3250,4150,3800,3700,3575,3700,3450,3600,2900,3300,3400,3700,3200,3350,3900,3850,2700,3650,3500,3675,3400,3675,3325,3600,3350,3250,3525,3650,3650,3400,3775],"text":["flipper_length_mm: 186 body_mass_g: 3800 sex: female","flipper_length_mm: 195 body_mass_g: 3250 sex: female","flipper_length_mm: 193 body_mass_g: 3450 sex: female","flipper_length_mm: 181 body_mass_g: 3625 sex: female","flipper_length_mm: 182 body_mass_g: 3200 sex: female","flipper_length_mm: 185 body_mass_g: 3700 sex: female","flipper_length_mm: 195 body_mass_g: 3450 sex: female","flipper_length_mm: 184 body_mass_g: 3325 sex: female","flipper_length_mm: 174 body_mass_g: 3400 sex: female","flipper_length_mm: 189 body_mass_g: 3800 sex: female","flipper_length_mm: 187 body_mass_g: 3800 sex: female","flipper_length_mm: 187 body_mass_g: 3200 sex: female","flipper_length_mm: 172 body_mass_g: 3150 sex: female","flipper_length_mm: 178 body_mass_g: 3250 sex: female","flipper_length_mm: 188 body_mass_g: 3300 sex: female","flipper_length_mm: 195 body_mass_g: 3325 sex: female","flipper_length_mm: 180 body_mass_g: 3550 sex: female","flipper_length_mm: 181 body_mass_g: 3300 sex: female","flipper_length_mm: 182 body_mass_g: 3150 sex: female","flipper_length_mm: 186 body_mass_g: 3100 sex: female","flipper_length_mm: 185 body_mass_g: 3000 sex: female","flipper_length_mm: 190 body_mass_g: 3450 sex: female","flipper_length_mm: 186 body_mass_g: 3500 sex: female","flipper_length_mm: 190 body_mass_g: 3450 sex: female","flipper_length_mm: 187 body_mass_g: 2900 sex: female","flipper_length_mm: 186 body_mass_g: 3550 sex: female","flipper_length_mm: 181 body_mass_g: 2850 sex: female","flipper_length_mm: 185 body_mass_g: 3150 sex: female","flipper_length_mm: 185 body_mass_g: 3600 sex: female","flipper_length_mm: 184 body_mass_g: 2850 sex: female","flipper_length_mm: 195 body_mass_g: 3350 sex: female","flipper_length_mm: 190 body_mass_g: 3050 sex: female","flipper_length_mm: 190 body_mass_g: 3600 sex: female","flipper_length_mm: 196 body_mass_g: 3550 sex: female","flipper_length_mm: 190 body_mass_g: 3700 sex: female","flipper_length_mm: 191 body_mass_g: 3700 sex: female","flipper_length_mm: 187 body_mass_g: 3550 sex: female","flipper_length_mm: 189 body_mass_g: 3200 sex: female","flipper_length_mm: 187 body_mass_g: 3800 sex: female","flipper_length_mm: 191 body_mass_g: 3350 sex: female","flipper_length_mm: 189 body_mass_g: 3500 sex: female","flipper_length_mm: 190 body_mass_g: 3600 sex: female","flipper_length_mm: 202 body_mass_g: 3550 sex: female","flipper_length_mm: 185 body_mass_g: 3400 sex: female","flipper_length_mm: 187 body_mass_g: 3300 sex: female","flipper_length_mm: 190 body_mass_g: 3700 sex: female","flipper_length_mm: 178 body_mass_g: 2900 sex: female","flipper_length_mm: 192 body_mass_g: 3725 sex: female","flipper_length_mm: 183 body_mass_g: 3075 sex: female","flipper_length_mm: 193 body_mass_g: 2925 sex: female","flipper_length_mm: 199 body_mass_g: 3750 sex: female","flipper_length_mm: 181 body_mass_g: 3175 sex: female","flipper_length_mm: 198 body_mass_g: 3825 sex: female","flipper_length_mm: 193 body_mass_g: 3200 sex: female","flipper_length_mm: 191 body_mass_g: 3900 sex: female","flipper_length_mm: 188 body_mass_g: 2900 sex: female","flipper_length_mm: 189 body_mass_g: 3350 sex: female","flipper_length_mm: 187 body_mass_g: 3150 sex: female","flipper_length_mm: 176 body_mass_g: 3450 sex: female","flipper_length_mm: 186 body_mass_g: 3050 sex: female","flipper_length_mm: 191 body_mass_g: 3275 sex: female","flipper_length_mm: 191 body_mass_g: 3050 sex: female","flipper_length_mm: 190 body_mass_g: 3325 sex: female","flipper_length_mm: 193 body_mass_g: 3500 sex: female","flipper_length_mm: 187 body_mass_g: 3425 sex: female","flipper_length_mm: 191 body_mass_g: 3175 sex: female","flipper_length_mm: 185 body_mass_g: 3400 sex: female","flipper_length_mm: 193 body_mass_g: 3400 sex: female","flipper_length_mm: 188 body_mass_g: 3050 sex: female","flipper_length_mm: 192 body_mass_g: 3000 sex: female","flipper_length_mm: 184 body_mass_g: 3475 sex: female","flipper_length_mm: 195 body_mass_g: 3450 sex: female","flipper_length_mm: 187 body_mass_g: 3700 sex: female","flipper_length_mm: 211 body_mass_g: 4500 sex: female","flipper_length_mm: 210 body_mass_g: 4450 sex: female","flipper_length_mm: 210 body_mass_g: 4550 sex: female","flipper_length_mm: 211 body_mass_g: 4800 sex: female","flipper_length_mm: 209 body_mass_g: 4400 sex: female","flipper_length_mm: 214 body_mass_g: 4650 sex: female","flipper_length_mm: 214 body_mass_g: 4650 sex: female","flipper_length_mm: 210 body_mass_g: 4200 sex: female","flipper_length_mm: 210 body_mass_g: 4150 sex: female","flipper_length_mm: 209 body_mass_g: 4800 sex: female","flipper_length_mm: 215 body_mass_g: 5000 sex: female","flipper_length_mm: 213 body_mass_g: 4400 sex: female","flipper_length_mm: 215 body_mass_g: 5000 sex: female","flipper_length_mm: 210 body_mass_g: 4600 sex: female","flipper_length_mm: 209 body_mass_g: 4700 sex: female","flipper_length_mm: 207 body_mass_g: 5050 sex: female","flipper_length_mm: 220 body_mass_g: 5150 sex: female","flipper_length_mm: 213 body_mass_g: 4950 sex: female","flipper_length_mm: 208 body_mass_g: 4350 sex: female","flipper_length_mm: 208 body_mass_g: 3950 sex: female","flipper_length_mm: 210 body_mass_g: 4300 sex: female","flipper_length_mm: 217 body_mass_g: 4900 sex: female","flipper_length_mm: 210 body_mass_g: 4200 sex: female","flipper_length_mm: 213 body_mass_g: 5100 sex: female","flipper_length_mm: 210 body_mass_g: 4850 sex: female","flipper_length_mm: 210 body_mass_g: 4400 sex: female","flipper_length_mm: 217 body_mass_g: 4900 sex: female","flipper_length_mm: 208 body_mass_g: 4300 sex: female","flipper_length_mm: 208 body_mass_g: 4450 sex: female","flipper_length_mm: 208 body_mass_g: 4200 sex: female","flipper_length_mm: 214 body_mass_g: 4400 sex: female","flipper_length_mm: 219 body_mass_g: 4700 sex: female","flipper_length_mm: 220 body_mass_g: 4700 sex: female","flipper_length_mm: 216 body_mass_g: 4750 sex: female","flipper_length_mm: 217 body_mass_g: 5200 sex: female","flipper_length_mm: 216 body_mass_g: 4700 sex: female","flipper_length_mm: 209 body_mass_g: 4600 sex: female","flipper_length_mm: 215 body_mass_g: 4750 sex: female","flipper_length_mm: 212 body_mass_g: 4625 sex: female","flipper_length_mm: 212 body_mass_g: 4725 sex: female","flipper_length_mm: 212 body_mass_g: 4750 sex: female","flipper_length_mm: 218 body_mass_g: 4600 sex: female","flipper_length_mm: 212 body_mass_g: 4875 sex: female","flipper_length_mm: 218 body_mass_g: 4950 sex: female","flipper_length_mm: 212 body_mass_g: 4750 sex: female","flipper_length_mm: 214 body_mass_g: 4850 sex: female","flipper_length_mm: 222 body_mass_g: 4875 sex: female","flipper_length_mm: 203 body_mass_g: 4625 sex: female","flipper_length_mm: 219 body_mass_g: 4850 sex: female","flipper_length_mm: 215 body_mass_g: 4975 sex: female","flipper_length_mm: 210 body_mass_g: 4700 sex: female","flipper_length_mm: 208 body_mass_g: 4575 sex: female","flipper_length_mm: 216 body_mass_g: 5000 sex: female","flipper_length_mm: 213 body_mass_g: 4650 sex: female","flipper_length_mm: 217 body_mass_g: 4375 sex: female","flipper_length_mm: 214 body_mass_g: 4925 sex: female","flipper_length_mm: 215 body_mass_g: 4850 sex: female","flipper_length_mm: 212 body_mass_g: 5200 sex: female","flipper_length_mm: 192 body_mass_g: 3500 sex: female","flipper_length_mm: 188 body_mass_g: 3525 sex: female","flipper_length_mm: 198 body_mass_g: 3950 sex: female","flipper_length_mm: 178 body_mass_g: 3250 sex: female","flipper_length_mm: 195 body_mass_g: 4150 sex: female","flipper_length_mm: 193 body_mass_g: 3800 sex: female","flipper_length_mm: 185 body_mass_g: 3700 sex: female","flipper_length_mm: 190 body_mass_g: 3575 sex: female","flipper_length_mm: 181 body_mass_g: 3700 sex: female","flipper_length_mm: 190 body_mass_g: 3450 sex: female","flipper_length_mm: 181 body_mass_g: 3600 sex: female","flipper_length_mm: 187 body_mass_g: 2900 sex: female","flipper_length_mm: 195 body_mass_g: 3300 sex: female","flipper_length_mm: 200 body_mass_g: 3400 sex: female","flipper_length_mm: 191 body_mass_g: 3700 sex: female","flipper_length_mm: 187 body_mass_g: 3200 sex: female","flipper_length_mm: 187 body_mass_g: 3350 sex: female","flipper_length_mm: 199 body_mass_g: 3900 sex: female","flipper_length_mm: 195 body_mass_g: 3850 sex: female","flipper_length_mm: 192 body_mass_g: 2700 sex: female","flipper_length_mm: 187 body_mass_g: 3650 sex: female","flipper_length_mm: 196 body_mass_g: 3500 sex: female","flipper_length_mm: 196 body_mass_g: 3675 sex: female","flipper_length_mm: 190 body_mass_g: 3400 sex: female","flipper_length_mm: 198 body_mass_g: 3675 sex: female","flipper_length_mm: 199 body_mass_g: 3325 sex: female","flipper_length_mm: 193 body_mass_g: 3600 sex: female","flipper_length_mm: 187 body_mass_g: 3350 sex: female","flipper_length_mm: 191 body_mass_g: 3250 sex: female","flipper_length_mm: 194 body_mass_g: 3525 sex: female","flipper_length_mm: 189 body_mass_g: 3650 sex: female","flipper_length_mm: 195 body_mass_g: 3650 sex: female","flipper_length_mm: 202 body_mass_g: 3400 sex: female","flipper_length_mm: 198 body_mass_g: 3775 sex: female"],"type":"scatter","mode":"markers","marker":{"autocolorscale":false,"color":"rgba(255,140,0,1)","opacity":1,"size":5.6692913385826778,"symbol":"circle","line":{"width":1.8897637795275593,"color":"rgba(255,140,0,1)"}},"hoveron":"points","name":"female","legendgroup":"female","showlegend":true,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null},{"x":[181,190,195,191,198,197,194,180,185,180,183,180,178,184,196,190,184,195,196,190,182,191,188,200,191,193,194,195,192,192,188,198,190,197,195,184,195,196,193,194,190,189,205,186,208,196,192,203,190,184,190,197,191,197,196,199,189,198,202,199,195,210,197,199,190,200,193,187,190,185,190,193,201,230,218,215,219,215,216,213,217,221,222,218,215,215,215,220,222,230,220,219,208,225,216,222,225,215,220,225,220,220,224,221,231,230,229,223,221,221,230,220,223,221,224,228,218,230,228,224,226,216,225,228,228,215,219,209,229,230,230,222,222,213,196,193,197,197,198,194,201,201,197,195,191,193,197,200,205,201,203,195,210,205,210,196,201,212,187,201,203,197,203,202,206,207,193,210],"y":[3750,3650,4675,3800,4400,4500,4200,3600,3950,3800,3550,3950,3900,3900,4150,3950,4650,3900,4400,4600,3425,4150,4300,4050,3700,3800,3750,4400,4050,3950,4100,4450,3900,4150,4250,3900,4000,4700,4200,3550,3800,3950,4300,4450,4300,4350,4100,4725,4250,3550,3900,4775,4600,4275,4075,3775,3325,3500,3875,4000,4300,4000,3500,4475,3900,3975,4250,3475,3725,3650,4250,3750,4000,5700,5700,5400,5200,5150,5550,5850,5850,6300,5350,5700,5050,5100,5650,5550,5250,6050,5400,5250,5350,5700,4750,5550,5400,5300,5300,5000,5050,5000,5550,5300,5650,5700,5800,5550,5000,5100,5800,6000,5950,5450,5350,5600,5300,5550,5400,5650,5200,4925,5250,5600,5500,5500,5500,5500,5950,5500,5850,6000,5750,5400,3900,3650,3725,3750,3700,3775,4050,4050,3300,4400,3400,3800,4150,3800,4550,4300,4100,3600,4800,4500,3950,3550,4450,4300,3250,3950,4050,3450,4050,3800,3950,4000,3775,4100],"text":["flipper_length_mm: 181 body_mass_g: 3750 sex: male","flipper_length_mm: 190 body_mass_g: 3650 sex: male","flipper_length_mm: 195 body_mass_g: 4675 sex: male","flipper_length_mm: 191 body_mass_g: 3800 sex: male","flipper_length_mm: 198 body_mass_g: 4400 sex: male","flipper_length_mm: 197 body_mass_g: 4500 sex: male","flipper_length_mm: 194 body_mass_g: 4200 sex: male","flipper_length_mm: 180 body_mass_g: 3600 sex: male","flipper_length_mm: 185 body_mass_g: 3950 sex: male","flipper_length_mm: 180 body_mass_g: 3800 sex: male","flipper_length_mm: 183 body_mass_g: 3550 sex: male","flipper_length_mm: 180 body_mass_g: 3950 sex: male","flipper_length_mm: 178 body_mass_g: 3900 sex: male","flipper_length_mm: 184 body_mass_g: 3900 sex: male","flipper_length_mm: 196 body_mass_g: 4150 sex: male","flipper_length_mm: 190 body_mass_g: 3950 sex: male","flipper_length_mm: 184 body_mass_g: 4650 sex: male","flipper_length_mm: 195 body_mass_g: 3900 sex: male","flipper_length_mm: 196 body_mass_g: 4400 sex: male","flipper_length_mm: 190 body_mass_g: 4600 sex: male","flipper_length_mm: 182 body_mass_g: 3425 sex: male","flipper_length_mm: 191 body_mass_g: 4150 sex: male","flipper_length_mm: 188 body_mass_g: 4300 sex: male","flipper_length_mm: 200 body_mass_g: 4050 sex: male","flipper_length_mm: 191 body_mass_g: 3700 sex: male","flipper_length_mm: 193 body_mass_g: 3800 sex: male","flipper_length_mm: 194 body_mass_g: 3750 sex: male","flipper_length_mm: 195 body_mass_g: 4400 sex: male","flipper_length_mm: 192 body_mass_g: 4050 sex: male","flipper_length_mm: 192 body_mass_g: 3950 sex: male","flipper_length_mm: 188 body_mass_g: 4100 sex: male","flipper_length_mm: 198 body_mass_g: 4450 sex: male","flipper_length_mm: 190 body_mass_g: 3900 sex: male","flipper_length_mm: 197 body_mass_g: 4150 sex: male","flipper_length_mm: 195 body_mass_g: 4250 sex: male","flipper_length_mm: 184 body_mass_g: 3900 sex: male","flipper_length_mm: 195 body_mass_g: 4000 sex: male","flipper_length_mm: 196 body_mass_g: 4700 sex: male","flipper_length_mm: 193 body_mass_g: 4200 sex: male","flipper_length_mm: 194 body_mass_g: 3550 sex: male","flipper_length_mm: 190 body_mass_g: 3800 sex: male","flipper_length_mm: 189 body_mass_g: 3950 sex: male","flipper_length_mm: 205 body_mass_g: 4300 sex: male","flipper_length_mm: 186 body_mass_g: 4450 sex: male","flipper_length_mm: 208 body_mass_g: 4300 sex: male","flipper_length_mm: 196 body_mass_g: 4350 sex: male","flipper_length_mm: 192 body_mass_g: 4100 sex: male","flipper_length_mm: 203 body_mass_g: 4725 sex: male","flipper_length_mm: 190 body_mass_g: 4250 sex: male","flipper_length_mm: 184 body_mass_g: 3550 sex: male","flipper_length_mm: 190 body_mass_g: 3900 sex: male","flipper_length_mm: 197 body_mass_g: 4775 sex: male","flipper_length_mm: 191 body_mass_g: 4600 sex: male","flipper_length_mm: 197 body_mass_g: 4275 sex: male","flipper_length_mm: 196 body_mass_g: 4075 sex: male","flipper_length_mm: 199 body_mass_g: 3775 sex: male","flipper_length_mm: 189 body_mass_g: 3325 sex: male","flipper_length_mm: 198 body_mass_g: 3500 sex: male","flipper_length_mm: 202 body_mass_g: 3875 sex: male","flipper_length_mm: 199 body_mass_g: 4000 sex: male","flipper_length_mm: 195 body_mass_g: 4300 sex: male","flipper_length_mm: 210 body_mass_g: 4000 sex: male","flipper_length_mm: 197 body_mass_g: 3500 sex: male","flipper_length_mm: 199 body_mass_g: 4475 sex: male","flipper_length_mm: 190 body_mass_g: 3900 sex: male","flipper_length_mm: 200 body_mass_g: 3975 sex: male","flipper_length_mm: 193 body_mass_g: 4250 sex: male","flipper_length_mm: 187 body_mass_g: 3475 sex: male","flipper_length_mm: 190 body_mass_g: 3725 sex: male","flipper_length_mm: 185 body_mass_g: 3650 sex: male","flipper_length_mm: 190 body_mass_g: 4250 sex: male","flipper_length_mm: 193 body_mass_g: 3750 sex: male","flipper_length_mm: 201 body_mass_g: 4000 sex: male","flipper_length_mm: 230 body_mass_g: 5700 sex: male","flipper_length_mm: 218 body_mass_g: 5700 sex: male","flipper_length_mm: 215 body_mass_g: 5400 sex: male","flipper_length_mm: 219 body_mass_g: 5200 sex: male","flipper_length_mm: 215 body_mass_g: 5150 sex: male","flipper_length_mm: 216 body_mass_g: 5550 sex: male","flipper_length_mm: 213 body_mass_g: 5850 sex: male","flipper_length_mm: 217 body_mass_g: 5850 sex: male","flipper_length_mm: 221 body_mass_g: 6300 sex: male","flipper_length_mm: 222 body_mass_g: 5350 sex: male","flipper_length_mm: 218 body_mass_g: 5700 sex: male","flipper_length_mm: 215 body_mass_g: 5050 sex: male","flipper_length_mm: 215 body_mass_g: 5100 sex: male","flipper_length_mm: 215 body_mass_g: 5650 sex: male","flipper_length_mm: 220 body_mass_g: 5550 sex: male","flipper_length_mm: 222 body_mass_g: 5250 sex: male","flipper_length_mm: 230 body_mass_g: 6050 sex: male","flipper_length_mm: 220 body_mass_g: 5400 sex: male","flipper_length_mm: 219 body_mass_g: 5250 sex: male","flipper_length_mm: 208 body_mass_g: 5350 sex: male","flipper_length_mm: 225 body_mass_g: 5700 sex: male","flipper_length_mm: 216 body_mass_g: 4750 sex: male","flipper_length_mm: 222 body_mass_g: 5550 sex: male","flipper_length_mm: 225 body_mass_g: 5400 sex: male","flipper_length_mm: 215 body_mass_g: 5300 sex: male","flipper_length_mm: 220 body_mass_g: 5300 sex: male","flipper_length_mm: 225 body_mass_g: 5000 sex: male","flipper_length_mm: 220 body_mass_g: 5050 sex: male","flipper_length_mm: 220 body_mass_g: 5000 sex: male","flipper_length_mm: 224 body_mass_g: 5550 sex: male","flipper_length_mm: 221 body_mass_g: 5300 sex: male","flipper_length_mm: 231 body_mass_g: 5650 sex: male","flipper_length_mm: 230 body_mass_g: 5700 sex: male","flipper_length_mm: 229 body_mass_g: 5800 sex: male","flipper_length_mm: 223 body_mass_g: 5550 sex: male","flipper_length_mm: 221 body_mass_g: 5000 sex: male","flipper_length_mm: 221 body_mass_g: 5100 sex: male","flipper_length_mm: 230 body_mass_g: 5800 sex: male","flipper_length_mm: 220 body_mass_g: 6000 sex: male","flipper_length_mm: 223 body_mass_g: 5950 sex: male","flipper_length_mm: 221 body_mass_g: 5450 sex: male","flipper_length_mm: 224 body_mass_g: 5350 sex: male","flipper_length_mm: 228 body_mass_g: 5600 sex: male","flipper_length_mm: 218 body_mass_g: 5300 sex: male","flipper_length_mm: 230 body_mass_g: 5550 sex: male","flipper_length_mm: 228 body_mass_g: 5400 sex: male","flipper_length_mm: 224 body_mass_g: 5650 sex: male","flipper_length_mm: 226 body_mass_g: 5200 sex: male","flipper_length_mm: 216 body_mass_g: 4925 sex: male","flipper_length_mm: 225 body_mass_g: 5250 sex: male","flipper_length_mm: 228 body_mass_g: 5600 sex: male","flipper_length_mm: 228 body_mass_g: 5500 sex: male","flipper_length_mm: 215 body_mass_g: 5500 sex: male","flipper_length_mm: 219 body_mass_g: 5500 sex: male","flipper_length_mm: 209 body_mass_g: 5500 sex: male","flipper_length_mm: 229 body_mass_g: 5950 sex: male","flipper_length_mm: 230 body_mass_g: 5500 sex: male","flipper_length_mm: 230 body_mass_g: 5850 sex: male","flipper_length_mm: 222 body_mass_g: 6000 sex: male","flipper_length_mm: 222 body_mass_g: 5750 sex: male","flipper_length_mm: 213 body_mass_g: 5400 sex: male","flipper_length_mm: 196 body_mass_g: 3900 sex: male","flipper_length_mm: 193 body_mass_g: 3650 sex: male","flipper_length_mm: 197 body_mass_g: 3725 sex: male","flipper_length_mm: 197 body_mass_g: 3750 sex: male","flipper_length_mm: 198 body_mass_g: 3700 sex: male","flipper_length_mm: 194 body_mass_g: 3775 sex: male","flipper_length_mm: 201 body_mass_g: 4050 sex: male","flipper_length_mm: 201 body_mass_g: 4050 sex: male","flipper_length_mm: 197 body_mass_g: 3300 sex: male","flipper_length_mm: 195 body_mass_g: 4400 sex: male","flipper_length_mm: 191 body_mass_g: 3400 sex: male","flipper_length_mm: 193 body_mass_g: 3800 sex: male","flipper_length_mm: 197 body_mass_g: 4150 sex: male","flipper_length_mm: 200 body_mass_g: 3800 sex: male","flipper_length_mm: 205 body_mass_g: 4550 sex: male","flipper_length_mm: 201 body_mass_g: 4300 sex: male","flipper_length_mm: 203 body_mass_g: 4100 sex: male","flipper_length_mm: 195 body_mass_g: 3600 sex: male","flipper_length_mm: 210 body_mass_g: 4800 sex: male","flipper_length_mm: 205 body_mass_g: 4500 sex: male","flipper_length_mm: 210 body_mass_g: 3950 sex: male","flipper_length_mm: 196 body_mass_g: 3550 sex: male","flipper_length_mm: 201 body_mass_g: 4450 sex: male","flipper_length_mm: 212 body_mass_g: 4300 sex: male","flipper_length_mm: 187 body_mass_g: 3250 sex: male","flipper_length_mm: 201 body_mass_g: 3950 sex: male","flipper_length_mm: 203 body_mass_g: 4050 sex: male","flipper_length_mm: 197 body_mass_g: 3450 sex: male","flipper_length_mm: 203 body_mass_g: 4050 sex: male","flipper_length_mm: 202 body_mass_g: 3800 sex: male","flipper_length_mm: 206 body_mass_g: 3950 sex: male","flipper_length_mm: 207 body_mass_g: 4000 sex: male","flipper_length_mm: 193 body_mass_g: 3775 sex: male","flipper_length_mm: 210 body_mass_g: 4100 sex: male"],"type":"scatter","mode":"markers","marker":{"autocolorscale":false,"color":"rgba(0,139,139,1)","opacity":1,"size":5.6692913385826778,"symbol":"circle","line":{"width":1.8897637795275593,"color":"rgba(0,139,139,1)"}},"hoveron":"points","name":"male","legendgroup":"male","showlegend":true,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null},{"x":[null,193,190,186,180,179,216,214,216,217,null],"y":[null,3475,4250,3300,3700,2975,4100,4650,4725,4875,null],"text":["flipper_length_mm: NA body_mass_g: NA sex: NA","flipper_length_mm: 193 body_mass_g: 3475 sex: NA","flipper_length_mm: 190 body_mass_g: 4250 sex: NA","flipper_length_mm: 186 body_mass_g: 3300 sex: NA","flipper_length_mm: 180 body_mass_g: 3700 sex: NA","flipper_length_mm: 179 body_mass_g: 2975 sex: NA","flipper_length_mm: 216 body_mass_g: 4100 sex: NA","flipper_length_mm: 214 body_mass_g: 4650 sex: NA","flipper_length_mm: 216 body_mass_g: 4725 sex: NA","flipper_length_mm: 217 body_mass_g: 4875 sex: NA","flipper_length_mm: NA body_mass_g: NA sex: NA"],"type":"scatter","mode":"markers","marker":{"autocolorscale":false,"color":["transparent","transparent","transparent","transparent","transparent","transparent","transparent","transparent","transparent","transparent","transparent"],"opacity":1,"size":5.6692913385826778,"symbol":"circle","line":{"width":1.8897637795275593,"color":["transparent","transparent","transparent","transparent","transparent","transparent","transparent","transparent","transparent","transparent","transparent"]}},"hoveron":"points","name":"NA","legendgroup":"NA","showlegend":true,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null}],"layout":{"margin":{"t":45.710806697108069,"r":7.3059360730593621,"b":42.130898021308987,"l":48.949771689497723},"plot_bgcolor":"rgba(255,255,255,1)","paper_bgcolor":"rgba(255,255,255,1)","font":{"color":"rgba(0,0,0,1)","family":"","size":14.611872146118724},"title":{"text":"Penguin flipper and body mass","font":{"color":"rgba(0,0,0,1)","family":"","size":17.534246575342465},"x":0,"xref":"paper"},"xaxis":{"domain":[0,1],"automargin":true,"type":"linear","autorange":false,"range":[169.05000000000001,233.94999999999999],"tickmode":"array","ticktext":["170","180","190","200","210","220","230"],"tickvals":[170,180,190,200,210,220,230],"categoryorder":"array","categoryarray":["170","180","190","200","210","220","230"],"nticks":null,"ticks":"outside","tickcolor":"rgba(51,51,51,1)","ticklen":3.6529680365296811,"tickwidth":0.66417600664176002,"showticklabels":true,"tickfont":{"color":"rgba(77,77,77,1)","family":"","size":11.68949771689498},"tickangle":-0,"showline":false,"linecolor":null,"linewidth":0,"showgrid":true,"gridcolor":"rgba(235,235,235,1)","gridwidth":0.66417600664176002,"zeroline":false,"anchor":"y","title":{"text":"Flipper length (mm)","font":{"color":"rgba(0,0,0,1)","family":"","size":14.611872146118724}},"hoverformat":".2f"},"yaxis":{"domain":[0,1],"automargin":true,"type":"linear","autorange":false,"range":[2520,6480],"tickmode":"array","ticktext":["3000","4000","5000","6000"],"tickvals":[3000,4000,5000,6000],"categoryorder":"array","categoryarray":["3000","4000","5000","6000"],"nticks":null,"ticks":"outside","tickcolor":"rgba(51,51,51,1)","ticklen":3.6529680365296811,"tickwidth":0.66417600664176002,"showticklabels":true,"tickfont":{"color":"rgba(77,77,77,1)","family":"","size":11.68949771689498},"tickangle":-0,"showline":false,"linecolor":null,"linewidth":0,"showgrid":true,"gridcolor":"rgba(235,235,235,1)","gridwidth":0.66417600664176002,"zeroline":false,"anchor":"x","title":{"text":"Body mass (g)","font":{"color":"rgba(0,0,0,1)","family":"","size":14.611872146118724}},"hoverformat":".2f"},"shapes":[{"type":"rect","fillcolor":"transparent","line":{"color":"rgba(51,51,51,1)","width":0.66417600664176002,"linetype":"solid"},"yref":"paper","xref":"paper","x0":0,"x1":1,"y0":0,"y1":1}],"showlegend":true,"legend":{"bgcolor":"rgba(255,255,255,1)","bordercolor":"transparent","borderwidth":1.8897637795275593,"font":{"color":"rgba(0,0,0,1)","family":"","size":11.68949771689498},"title":{"text":"Penguin sex","font":{"color":"rgba(0,0,0,1)","family":"","size":14.611872146118724}}},"hovermode":"closest","barmode":"relative"},"config":{"doubleClick":"reset","modeBarButtonsToAdd":["hoverclosest","hovercompare"],"showSendToCloud":false},"source":"A","attrs":{"564c3ab379e3":{"x":{},"y":{},"colour":{},"type":"scatter"}},"cur_data":"564c3ab379e3","visdat":{"564c3ab379e3":["function (y) ","x"]},"highlight":{"on":"plotly_click","persistent":false,"dynamic":false,"selectize":false,"opacityDim":0.20000000000000001,"selected":{"opacity":1},"debounce":0},"shinyEvents":["plotly_hover","plotly_click","plotly_selected","plotly_relayout","plotly_brushed","plotly_brushing","plotly_clickannotation","plotly_doubleclick","plotly_deselect","plotly_afterplot","plotly_sunburstclick"],"base_url":"https://plot.ly"},"evals":[],"jsHooks":[]}</script>

]
.panel[.panel-name[Interactive plot2]

<div class="plotly html-widget html-fill-item-overflow-hidden html-fill-item" id="htmlwidget-d1907357a4e9d558eaf1" style="width:720px;height:360px;"></div>
<script type="application/json" data-for="htmlwidget-d1907357a4e9d558eaf1">{"x":{"data":[{"orientation":"v","width":0.89999999999999991,"base":0,"x":[1],"y":[58.931034482758619],"text":"cut: Fair Mean: 58.93103 Min: 0 Max: 58.93103 cut: Fair","type":"bar","textposition":"none","marker":{"autocolorscale":false,"color":"rgba(68,1,84,1)","line":{"width":1.8897637795275593,"color":"transparent"}},"name":"Fair","legendgroup":"Fair","showlegend":true,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null},{"orientation":"v","width":0.90000000000000013,"base":0,"x":[2],"y":[58.67722772277228],"text":"cut: Good Mean: 58.67723 Min: 0 Max: 58.67723 cut: Good","type":"bar","textposition":"none","marker":{"autocolorscale":false,"color":"rgba(59,82,139,1)","line":{"width":1.8897637795275593,"color":"transparent"}},"name":"Good","legendgroup":"Good","showlegend":true,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null},{"orientation":"v","width":0.90000000000000036,"base":0,"x":[3],"y":[57.96784140969163],"text":"cut: Very Good Mean: 57.96784 Min: 0 Max: 57.96784 cut: Very Good","type":"bar","textposition":"none","marker":{"autocolorscale":false,"color":"rgba(33,144,140,1)","line":{"width":1.8897637795275593,"color":"transparent"}},"name":"Very Good","legendgroup":"Very Good","showlegend":true,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null},{"orientation":"v","width":0.90000000000000036,"base":0,"x":[4],"y":[58.588000000000001],"text":"cut: Premium Mean: 58.58800 Min: 0 Max: 58.58800 cut: Premium","type":"bar","textposition":"none","marker":{"autocolorscale":false,"color":"rgba(93,200,99,1)","line":{"width":1.8897637795275593,"color":"transparent"}},"name":"Premium","legendgroup":"Premium","showlegend":true,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null},{"orientation":"v","width":0.90000000000000036,"base":0,"x":[5],"y":[55.910178117048346],"text":"cut: Ideal Mean: 55.91018 Min: 0 Max: 55.91018 cut: Ideal","type":"bar","textposition":"none","marker":{"autocolorscale":false,"color":"rgba(253,231,37,1)","line":{"width":1.8897637795275593,"color":"transparent"}},"name":"Ideal","legendgroup":"Ideal","showlegend":true,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null},{"x":[1],"y":[58.931034482758619],"text":"cut: Fair Mean: 58.93103 Min: 55 Max: 66 cut: Fair","type":"scatter","mode":"lines","opacity":1,"line":{"color":"transparent"},"error_y":{"array":[7.0689655172413808],"arrayminus":[3.9310344827586192],"type":"data","width":41.538461538461533,"symmetric":false,"color":"rgba(0,0,0,1)"},"name":"Fair","legendgroup":"Fair","showlegend":false,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null},{"x":[2],"y":[58.67722772277228],"text":"cut: Good Mean: 58.67723 Min: 53 Max: 66 cut: Good","type":"scatter","mode":"lines","opacity":1,"line":{"color":"transparent"},"error_y":{"array":[7.3227722772277204],"arrayminus":[5.6772277227722796],"type":"data","width":41.538461538461561,"symmetric":false,"color":"rgba(0,0,0,1)"},"name":"Good","legendgroup":"Good","showlegend":false,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null},{"x":[3],"y":[57.96784140969163],"text":"cut: Very Good Mean: 57.96784 Min: 53 Max: 63 cut: Very Good","type":"scatter","mode":"lines","opacity":1,"line":{"color":"transparent"},"error_y":{"array":[5.0321585903083701],"arrayminus":[4.9678414096916299],"type":"data","width":41.538461538461561,"symmetric":false,"color":"rgba(0,0,0,1)"},"name":"Very Good","legendgroup":"Very Good","showlegend":false,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null},{"x":[4],"y":[58.588000000000001],"text":"cut: Premium Mean: 58.58800 Min: 52 Max: 62 cut: Premium","type":"scatter","mode":"lines","opacity":1,"line":{"color":"transparent"},"error_y":{"array":[3.411999999999999],"arrayminus":[6.588000000000001],"type":"data","width":41.538461538461561,"symmetric":false,"color":"rgba(0,0,0,1)"},"name":"Premium","legendgroup":"Premium","showlegend":false,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null},{"x":[5],"y":[55.910178117048346],"text":"cut: Ideal Mean: 55.91018 Min: 53 Max: 61 cut: Ideal","type":"scatter","mode":"lines","opacity":1,"line":{"color":"transparent"},"error_y":{"array":[5.0898218829516537],"arrayminus":[2.9101781170483463],"type":"data","width":41.538461538461561,"symmetric":false,"color":"rgba(0,0,0,1)"},"name":"Ideal","legendgroup":"Ideal","showlegend":false,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null}],"layout":{"margin":{"t":48.146118721461193,"r":7.3059360730593621,"b":44.56621004566211,"l":37.260273972602747},"plot_bgcolor":"rgba(235,235,235,1)","paper_bgcolor":"rgba(255,255,255,1)","font":{"color":"rgba(0,0,0,1)","family":"","size":14.611872146118724},"title":{"text":"Bar chart with Error Bars","font":{"color":"rgba(0,0,0,1)","family":"","size":17.534246575342465},"x":0,"xref":"paper"},"xaxis":{"domain":[0,1],"automargin":true,"type":"linear","autorange":false,"range":[0.40000000000000002,5.5999999999999996],"tickmode":"array","ticktext":["Fair","Good","Very Good","Premium","Ideal"],"tickvals":[1,2,3,4,5],"categoryorder":"array","categoryarray":["Fair","Good","Very Good","Premium","Ideal"],"nticks":null,"ticks":"outside","tickcolor":"rgba(51,51,51,1)","ticklen":3.6529680365296811,"tickwidth":0.66417600664176002,"showticklabels":true,"tickfont":{"color":"rgba(77,77,77,1)","family":"","size":11.68949771689498},"tickangle":-0,"showline":false,"linecolor":null,"linewidth":0,"showgrid":true,"gridcolor":"rgba(255,255,255,1)","gridwidth":0.66417600664176002,"zeroline":false,"anchor":"y","title":{"text":"cut","font":{"color":"rgba(0,0,0,1)","family":"","size":14.611872146118724}},"hoverformat":".2f"},"yaxis":{"domain":[0,1],"automargin":true,"type":"linear","autorange":false,"range":[-3.3000000000000003,69.299999999999997],"tickmode":"array","ticktext":["0","20","40","60"],"tickvals":[0,20,40,60],"categoryorder":"array","categoryarray":["0","20","40","60"],"nticks":null,"ticks":"outside","tickcolor":"rgba(51,51,51,1)","ticklen":3.6529680365296811,"tickwidth":0.66417600664176002,"showticklabels":true,"tickfont":{"color":"rgba(77,77,77,1)","family":"","size":11.68949771689498},"tickangle":-0,"showline":false,"linecolor":null,"linewidth":0,"showgrid":true,"gridcolor":"rgba(255,255,255,1)","gridwidth":0.66417600664176002,"zeroline":false,"anchor":"x","title":{"text":"Mean","font":{"color":"rgba(0,0,0,1)","family":"","size":14.611872146118724}},"hoverformat":".2f"},"shapes":[{"type":"rect","fillcolor":null,"line":{"color":null,"width":0,"linetype":[]},"yref":"paper","xref":"paper","x0":0,"x1":1,"y0":0,"y1":1}],"showlegend":true,"legend":{"bgcolor":"rgba(255,255,255,1)","bordercolor":"transparent","borderwidth":1.8897637795275593,"font":{"color":"rgba(0,0,0,1)","family":"","size":11.68949771689498},"title":{"text":"cut","font":{"color":"rgba(0,0,0,1)","family":"","size":14.611872146118724}}},"hovermode":"closest","barmode":"relative"},"config":{"doubleClick":"reset","modeBarButtonsToAdd":["hoverclosest","hovercompare"],"showSendToCloud":false},"source":"A","attrs":{"564c34953cfc":{"x":{},"y":{},"ymin":{},"ymax":{},"fill":{},"type":"bar"},"564c73b91a9c":{"x":{},"y":{},"ymin":{},"ymax":{},"fill":{}}},"cur_data":"564c34953cfc","visdat":{"564c34953cfc":["function (y) ","x"],"564c73b91a9c":["function (y) ","x"]},"highlight":{"on":"plotly_click","persistent":false,"dynamic":false,"selectize":false,"opacityDim":0.20000000000000001,"selected":{"opacity":1},"debounce":0},"shinyEvents":["plotly_hover","plotly_click","plotly_selected","plotly_relayout","plotly_brushed","plotly_brushing","plotly_clickannotation","plotly_doubleclick","plotly_deselect","plotly_afterplot","plotly_sunburstclick"],"base_url":"https://plot.ly"},"evals":[],"jsHooks":[]}</script>
]
]

---

# Create presentation using C4ED template 🤹

.panel[.panel-name[New Rmd File]
.pull-left[
1. New File
2. New R Markdown
![](img/creatermark.png)
]

]
]

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="M64 464c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16H224v80c0 17.7 14.3 32 32 32h80V448c0 8.8-7.2 16-16 16H64zM64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V154.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0H64zm97 289c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0L79 303c-9.4 9.4-9.4 24.6 0 33.9l48 48c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-31-31 31-31zM257 255c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l31 31-31 31c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l48-48c9.4-9.4 9.4-24.6 0-33.9l-48-48z"/></svg> the new Rmd file (i.e. `Xaringan Slide.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="M384 480h48c11.4 0 21.9-6 27.6-15.9l112-192c5.8-9.9 5.8-22.1 .1-32.1S555.5 224 544 224H144c-11.4 0-21.9 6-27.6 15.9L48 357.1V96c0-8.8 7.2-16 16-16H181.5c4.2 0 8.3 1.7 11.3 4.7l26.5 26.5c21 21 49.5 32.8 79.2 32.8H416c8.8 0 16 7.2 16 16v32h48V160c0-35.3-28.7-64-64-64H298.5c-17 0-33.3-6.7-45.3-18.7L226.7 50.7c-12-12-28.3-18.7-45.3-18.7H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H87.7 384z"/></svg> the `img` folder containing logo files

```r
---
title: "Making a Presentation in R Using c4ed theme: Xaringan"
subtitle: "Center for Evaluation and Devlopment(C4ED) Using c4ed theme" 
#institution: " " 
author: "Yebelay Berehan"
date: "`r stringr::str_replace(format(Sys.time(), '%B %d, %Y'), '^0','')`"
output: 
  xaringan::moon_reader:
    css:
      - default
      - c4ed_theme.css
      - css/fonts_c4ed.css
```
]

```r
 nature: 
 highlightStyle: github # highlighting syntax for code
 highlightLines: true # true: enables code line highlighting
 countIncrementalSlides: false # incremet not counted as page
 highlightLanguage: ["r"] # languages to highlight
 countdown: 60000 # add time count for each slide
 ratio: "16:10" # or 16:9 # size of slide
 includes:
 after_body: [css/insert-logo.html] # include logos to each page
---
```
]

.panel[.panel-name[c4ed1]
.pull-left[
```{}
.remark-slide-content {
  background-color: #FFFFFF;
  border-top: 70px solid #006D6B;
  font-size: 24px;
  font-weight: 200;
  line-height: 1.5;
  padding: 1em 2em 1em 2em;
}
.title-slide {
  background-image: url(img/logo-title-slide.png), 
  url(img/fig.png);
  background-size: 200px auto, 100% 200px;
  background-position: 90% 5%, bottom;
  background-repeat: no-repeat;
}

```

]
.pull-right[
```{}
/* colored to white for slides that have both
   the .title-slide and .inverse classes.*/
.title-slide .inverse .remark-slide-content {

background-color: #ffffff;
  color: #ffffff; /* Set the text color to white */
}
/*--Make color the inverse slide -- */
.inverse {
  background-color: #006D6B;
  text-shadow: none;
}

```
]
]

- The customized CSS to c4ed theme is found in the following link
[c4ed_theme.css](https://github.com/Yebelay/Making-Slide-in-R/blob/main/c4ed_theme.css)

] 
]

---

# Table

```r
library(DT) # Create an interactive data table

datatable(iris, options = list(pageLength = 10))
```

<div class="datatables html-widget html-fill-item-overflow-hidden html-fill-item" id="htmlwidget-7bd0b4aa2814350a9b1c" style="width:100%;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-7bd0b4aa2814350a9b1c">{"x":{"filter":"none","vertical":false,"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","34","35","36","37","38","39","40","41","42","43","44","45","46","47","48","49","50","51","52","53","54","55","56","57","58","59","60","61","62","63","64","65","66","67","68","69","70","71","72","73","74","75","76","77","78","79","80","81","82","83","84","85","86","87","88","89","90","91","92","93","94","95","96","97","98","99","100","101","102","103","104","105","106","107","108","109","110","111","112","113","114","115","116","117","118","119","120","121","122","123","124","125","126","127","128","129","130","131","132","133","134","135","136","137","138","139","140","141","142","143","144","145","146","147","148","149","150"],[5.1,4.9,4.7,4.6,5,5.4,4.6,5,4.4,4.9,5.4,4.8,4.8,4.3,5.8,5.7,5.4,5.1,5.7,5.1,5.4,5.1,4.6,5.1,4.8,5,5,5.2,5.2,4.7,4.8,5.4,5.2,5.5,4.9,5,5.5,4.9,4.4,5.1,5,4.5,4.4,5,5.1,4.8,5.1,4.6,5.3,5,7,6.4,6.9,5.5,6.5,5.7,6.3,4.9,6.6,5.2,5,5.9,6,6.1,5.6,6.7,5.6,5.8,6.2,5.6,5.9,6.1,6.3,6.1,6.4,6.6,6.8,6.7,6,5.7,5.5,5.5,5.8,6,5.4,6,6.7,6.3,5.6,5.5,5.5,6.1,5.8,5,5.6,5.7,5.7,6.2,5.1,5.7,6.3,5.8,7.1,6.3,6.5,7.6,4.9,7.3,6.7,7.2,6.5,6.4,6.8,5.7,5.8,6.4,6.5,7.7,7.7,6,6.9,5.6,7.7,6.3,6.7,7.2,6.2,6.1,6.4,7.2,7.4,7.9,6.4,6.3,6.1,7.7,6.3,6.4,6,6.9,6.7,6.9,5.8,6.8,6.7,6.7,6.3,6.5,6.2,5.9],[3.5,3,3.2,3.1,3.6,3.9,3.4,3.4,2.9,3.1,3.7,3.4,3,3,4,4.4,3.9,3.5,3.8,3.8,3.4,3.7,3.6,3.3,3.4,3,3.4,3.5,3.4,3.2,3.1,3.4,4.1,4.2,3.1,3.2,3.5,3.6,3,3.4,3.5,2.3,3.2,3.5,3.8,3,3.8,3.2,3.7,3.3,3.2,3.2,3.1,2.3,2.8,2.8,3.3,2.4,2.9,2.7,2,3,2.2,2.9,2.9,3.1,3,2.7,2.2,2.5,3.2,2.8,2.5,2.8,2.9,3,2.8,3,2.9,2.6,2.4,2.4,2.7,2.7,3,3.4,3.1,2.3,3,2.5,2.6,3,2.6,2.3,2.7,3,2.9,2.9,2.5,2.8,3.3,2.7,3,2.9,3,3,2.5,2.9,2.5,3.6,3.2,2.7,3,2.5,2.8,3.2,3,3.8,2.6,2.2,3.2,2.8,2.8,2.7,3.3,3.2,2.8,3,2.8,3,2.8,3.8,2.8,2.8,2.6,3,3.4,3.1,3,3.1,3.1,3.1,2.7,3.2,3.3,3,2.5,3,3.4,3],[1.4,1.4,1.3,1.5,1.4,1.7,1.4,1.5,1.4,1.5,1.5,1.6,1.4,1.1,1.2,1.5,1.3,1.4,1.7,1.5,1.7,1.5,1,1.7,1.9,1.6,1.6,1.5,1.4,1.6,1.6,1.5,1.5,1.4,1.5,1.2,1.3,1.4,1.3,1.5,1.3,1.3,1.3,1.6,1.9,1.4,1.6,1.4,1.5,1.4,4.7,4.5,4.9,4,4.6,4.5,4.7,3.3,4.6,3.9,3.5,4.2,4,4.7,3.6,4.4,4.5,4.1,4.5,3.9,4.8,4,4.9,4.7,4.3,4.4,4.8,5,4.5,3.5,3.8,3.7,3.9,5.1,4.5,4.5,4.7,4.4,4.1,4,4.4,4.6,4,3.3,4.2,4.2,4.2,4.3,3,4.1,6,5.1,5.9,5.6,5.8,6.6,4.5,6.3,5.8,6.1,5.1,5.3,5.5,5,5.1,5.3,5.5,6.7,6.9,5,5.7,4.9,6.7,4.9,5.7,6,4.8,4.9,5.6,5.8,6.1,6.4,5.6,5.1,5.6,6.1,5.6,5.5,4.8,5.4,5.6,5.1,5.1,5.9,5.7,5.2,5,5.2,5.4,5.1],[0.2,0.2,0.2,0.2,0.2,0.4,0.3,0.2,0.2,0.1,0.2,0.2,0.1,0.1,0.2,0.4,0.4,0.3,0.3,0.3,0.2,0.4,0.2,0.5,0.2,0.2,0.4,0.2,0.2,0.2,0.2,0.4,0.1,0.2,0.2,0.2,0.2,0.1,0.2,0.2,0.3,0.3,0.2,0.6,0.4,0.3,0.2,0.2,0.2,0.2,1.4,1.5,1.5,1.3,1.5,1.3,1.6,1,1.3,1.4,1,1.5,1,1.4,1.3,1.4,1.5,1,1.5,1.1,1.8,1.3,1.5,1.2,1.3,1.4,1.4,1.7,1.5,1,1.1,1,1.2,1.6,1.5,1.6,1.5,1.3,1.3,1.3,1.2,1.4,1.2,1,1.3,1.2,1.3,1.3,1.1,1.3,2.5,1.9,2.1,1.8,2.2,2.1,1.7,1.8,1.8,2.5,2,1.9,2.1,2,2.4,2.3,1.8,2.2,2.3,1.5,2.3,2,2,1.8,2.1,1.8,1.8,1.8,2.1,1.6,1.9,2,2.2,1.5,1.4,2.3,2.4,1.8,1.8,2.1,2.4,2.3,1.9,2.3,2.5,2.3,1.9,2,2.3,1.8],["setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica"]],"container":"<table class=\"display\">\n <thead>\n <tr>\n <th> <\/th>\n <th>Sepal.Length<\/th>\n <th>Sepal.Width<\/th>\n <th>Petal.Length<\/th>\n <th>Petal.Width<\/th>\n <th>Species<\/th>\n <\/tr>\n <\/thead>\n<\/table>","options":{"pageLength":10,"columnDefs":[{"className":"dt-right","targets":[1,2,3,4]},{"orderable":false,"targets":0}],"order":[],"autoWidth":false,"orderClasses":false}},"evals":[],"jsHooks":[]}</script>

---

# Keyboard shortcuts

- **j**	**Go to next slide**

- **b** **Toggle blackout**

- **m** **Toggle mirrored **

- **f**	**Toggle fullscreen mode**

- **c**	**Clone slideshow**
]

- **t**	**Restart the presentation timer**

- **?, h**	**Toggle this help**

- **o**	**Tile View: Overview of Slides**

- **f**	**Fit Slides to Screen**

- **s**	**Toggle scribble toolbox**

- **w** **open webcam **
]

---