Communicating with Data via R markdown

background-image: url(images/bg3.jpg)
background-size: cover
class: hide-slide-number

:::::::::: { .grid grid: 50% 50% / 1fr;} 
::: item center

# <span style="text-shadow: 2px 2px 30px white;">Communicating with Data <br> via R Markdown</span>

<br><br>
## <span style="color:#FC427B;text-shadow: 2px 2px 30px black;">✨ Pretty Presentations ✨</span>

:::

::: item center shade_black animated bounceInUp slower

Presented by Emi Tanaka

School of Mathematics and Statistics

<img src="assets/USydLogo-white.svg" style="width:200px"><br>
<span><i class="fas  fa-envelope faa-float animated "></i></span>  dr.emi.tanaka@gmail.com
<span><i class="fab  fa-twitter faa-float animated faa-fast "></i></span>  @statsgen

4th October 2019 | COMBINE | Sydney, Australia

:::

::::::::::

::: { .shade_black .pos .font_small width:20%;right:10px;bottom:20%;padding:5px;border: solid 5px white;}

<i class="fas fa-exclamation-circle"></i> These slides are viewed best by Chrome and occasionally need to be refreshed if elements did not load properly. See here for <a href=link style="color:white!important"/>PDF <i class="fas fa-file-pdf"></i></a>.

:::

[Background photo by Adam H. Sparks]{.pos .font_small top:5px;left:5px;}

---

# HTML Slides from Rmd

::: grid

::: item

* There are a number of ways to make html slides in Rmd including `ioslides` and `slidy`. 
* My favorite one is `xaringan` 📦!
* It's highly customisable.
* These slides are made by `xaringan`!
* Note that it uses `remark.js` to render the final html instead of `pandoc`!

::::

::: item

https://slides.yihui.name/xaringan

:::

---

class: font_smaller

# `xaringan` easy slide separator `---`

::: grid

::: item

```markdown
---
title: "My first xaringan slide"
subtitle: "Not!"
author: "Emi Tanaka"
date: "4th October 2019"
output: 
  xaringan::moon_reader
---

# Slide after title slide

*---

# Next slide

Can use **markdown**!

```
:::

::: item

:::

::: { .bubble1 .pos width:300px;left:31%;top:35%;}

YAML information used for title slide

:::

::: { .bubble1 .pos width:300px;left:31%;bottom:11%;}

No spaces after <br>`---`!

:::

---

# HTML/CSS

But you want to customise more?

You do need to be a ninja to do that.

Or know a bit about HTML/CSS.

::: grid

::: item

HTML
```html
<div class="bg-red">
This creates a box <br>
with red background.
</div>
```

:::

::: item

CSS
```css
.bg-red {
  background-color: red;
}

```

:::

::: {.pos top:1%;left:50%; }
OUTPUT
<div class="bg-red">
This creates a box <br>
with red background.
</div>

:::

---

# HTML/CSS II

But the box and text look too squished.

I increase the padding here.

::: grid

::: item

HTML
```html
<div class="bg-red">
This creates a box <br>
with red background.
</div>
```

:::

::: item

CSS
```css
.bg-red {
   background-color: red;
*  padding: 20px;
}

```

:::

::: {.pos top:1%;left:55%; }
OUTPUT
<div class="bg-red" style="padding: 20px;">
This creates a box <br>
with red background.
</div>

:::

---

# HTML/CSS III

But a white text suits better.

::: grid

::: item

HTML
```html
<div class="bg-red">
This creates a box <br>
with red background.
</div>
```

:::

::: item

CSS
```css
.bg-red {
   background-color: red;
   padding: 20px;
*  color: white;
}

```

:::

::: {.pos top:1%;left:55%; }
OUTPUT
<div class="bg-red" style="padding:20px;color:white;">
This creates a box <br>
with red background.
</div>

:::

---

# HTML/CSS IV

In contrast, `span` is "inline".

::: grid

::: item

HTML
```html
*<span class="bg-red">
This creates a box <br>
with red background.
*</span>
```

:::

::: item

CSS
```css
.bg-red {
   background-color: red;
   padding: 20px;
   color: white;
}

```

:::

::: {.pos top:1%;left:55%; }
OUTPUT

<span class="bg-red" style="padding:20px;color:white;">
This creates a box <br>
with red background.
</span>

:::

---

# `remark.js`: div and span classes

`remark.js` makes it easier to write `div` and `span` elements.

::: grid

::: item bg-indigo white

Text in new line

```markdown
.bg-red[
Some text
]
```

is converted to

```markdown
<div class="bg-red">
Some text
</div>
```

:::

::: item bg-green white

Placing `[` `]` in the same line

```markdown
.bg-red[Some text]
```

results in

```markdown
<span class="bg-red">
Some text
</span>
```

:::

---

# `remark.js`: specify class to a whole slide

::: grid

::: item

:::

::: item

:::

---

background-image: url(images/bg3.jpg)
background-size: cover
class: hide-slide-number

::: grid

::: {.item .shade_black .animated .slideInLeft border-right-style:solid; border-right-color:white; }

# That's it!

These slides are made using `xaringan` R-package.

The workshop materials are licensed under [<img src="images/cc.svg" style="height:1em"/><img src="images/by.svg" style="height:1em"/><img src="images/sa.svg" style="height:1em"/>](https://creativecommons.org/licenses/by-sa/3.0/au/).

Emi Tanaka

<i class="fas fa-envelope faa-float animated"></i> dr.emi.tanaka@gmail.com<br>
<i class="fab fa-twitter faa-float animated faa-fast"></i>  @statsgen

:::

::: {.item .shade_black .checklist .animated .slideInRight border-left-style: solid; border-right-color: white;}

# Check that you can:

<ul>
<li>Be able to make slides from Rmd</li><li>Change the background color of a slide</li>
</ul>

:::