Comunicando seus resultados: criando apresentações com R

# Comunicando seus resultados: criando apresentações com R
## Meetup R-Ladies SP - N. 3
### Beatriz Milz
### 21/11/2018

---

class: split-two with-border
.column.bg-main1[.content[
  # Sobre mim
<center>  <img src="imagens/foto-coda.jpg" height="500px"/></center>
]]
.column.bg-main2[.content[
  - Beatriz Milz, 25 anos, Diadema.<br><br>
- Bacharel em Gestão Ambiental (EACH/USP). <br><br>
- Mestre em Ciências no PPG-Análise Ambiental Integrada (UNIFESP/Diadema). <br><br>
- Atualmente candidata ao Doutorado em Ciência Ambiental no PROCAM/IEE/USP. <br><br>
- Aprendendo R desde agosto de 2018.<br><br>
- Participa da comunidade R-Ladies São Paulo desde agosto de 2018.<br><br>

- Email:<a href="mailto:beatriz.milz@hotmail.com"><i class="fas fa-envelope-square"></i>&nbsp; beatriz.milz@hotmail.com</a><br><br>

- Página: https://beatrizmilz.github.io/

- Github:<a href="http://github.com/beatrizmilz"><i class="fab fa-github"></i>&nbsp; @beatrizmilz</a> (repositório de código)<br><br>

- Twitter: @BeaMilz

]]

---
class: inverse, center, middle
# Comunicando seus resultados: criando apresentações com R

1) Introdução sobre a linguagem de marcação markdown e sobre arquivos do tipo RMarkdown.

2) Prática sobre como criar uma apresentação utilizando o pacote Xaringan.

3) Hospedagem da apresentação utilizando o Github Pages.

---
class: inverse, middle

# Por que apresentações são importantes? 
<br>
<br>

Fonte: http://r4ds.had.co.nz/

- Uma das formas de comunicar os resultados!

- Hoje iremos praticar como criar uma apresentação utilizando o R e o pacote Xaringan.

---
class: inverse, middle

# Pré-requisitos:
- [R](https://www.r-project.org/)
- [RStudio](https://www.rstudio.com/)
- Pacote [Rmarkdown](https://rmarkdown.rstudio.com/) * O R instala esse pacote automaticamente quando necessário.
- Pacote [Xaringan](https://github.com/yihui/xaringan) 
- Pacote [knitr](http://yihui.name/knitr/)

---
#Introdução sobre o Xaringan

- O xaringan é um pacote do R para criar apresentações usando o  [remark.js](http://remarkjs.com) através do Rmarkdown.

- Mais sobre o xaringan:

- [Apresentação da documentação](http://slides.yihui.name/xaringan/) 
    - [Livro R Markdown (Capítulo 7)](https://bookdown.org/yihui/rmarkdown/xaringan.html)
    - [Remark.js Wiki](https://github.com/gnab/remark/wiki)
    - [Xaringan Wiki](https://github.com/yihui/xaringan/wiki)
---
# Instalar o Xaringan
- Existem duas formas de instalar:

CRAN:

```r
install.packages("xaringan")
```

Github:

```r
devtools::install_github("yihui/xaringan")
```

---

# Outras formas de criar apresentações:

* output: **beamer_presentation** ->  beamer (pdf)

* output: **ioslides_presentation** -> ioslides (HTML)

* output: **slidy_presentation** ->  slidy (HTML)

Obs: para separar entre um slide e outro, usar três *

---

class: split-70 hide-slide-number
background-image: url("")
background-size: cover

.column.slide-in-left[
.sliderbox.vmiddle.shade_main.center[
.font5[RMarkdown]]]
.column[
]
---

## Rmarkdown
* É um tipo de arquivo que suporta códigos em R, texto, markdown e outros formatos.

* Apresenta os seus códigos, o resultado, e também os seus comentários.

* Arquivos **.Rmd** são reprodutíveis.

* São interessantes para trabalhar em equipe, para comunicar seus resultados, e para desenvolver seus códigos em R.

* O markdown é uma linguagem de marcação simples.

* [Rmarkdown Cheatsheet](http://www.rstudio.com/wp-content/uploads/2016/03/rmarkdown-cheatsheet-2.0.pdf)

---
## Rmarkdown
* Possibilita exportar diferentes tipos de arquivos.
<br>
<center><img src="imagens/markdown.png" style="width: 50%"></center>

---
class: inverse, center, middle

# Inicie o RSTUDIO:
<center>
<img src="imagens/0.PNG" style="width: 100%">
</center>
- Instale os pacotes:

```r
install.packages("rmarkdown")
install.packages("knitr")
install.packages("xaringan")
```

---
class: inverse, center, middle

# Crie um novo arquivo Rmarkdown:
<center>
<img src="imagens/1.PNG" style="width: 100%">
</center>

---
class: inverse, center, middle

# Selecione o template Ninja Presentation:
<center>
<img src="imagens/2.PNG" style="width: 100%">
</center>

* Dica: para facilitar posteriormente, crie a sua apresentação com o nome de `index.Rmd`.

---
class: inverse, center, middle

# Será criado um RMarkdown com o Ninja Presentation:
<center>
<img src="imagens/3.PNG" style="width: 100%">
</center>

---
class: inverse, middle

# yaml - metadados do documento:
- **y**et **a**nother **m**arkup **l**anguage 
- Controla muitas das configurações do documento.
<center>
<img src="imagens/4.PNG" style="width: 100%">
</center>
- title: título
- subtitle: subtítulo
- author: autor
- date: data
- output: formato (Ex: html_document, pdf_document, etc). No caso do Xaringan, o output é **xaringan::moon_reader**  
- Cuidado com a **identação**

Leia também: [Output Formats - R Markdown: The Definitive Guide](https://bookdown.org/yihui/rmarkdown/output-formats.html)

---
class: inverse, middle

# Quais são os temas disponíveis?

```r
names(xaringan:::list_css())
```

```
##  [1] "chocolate-fonts"  "chocolate"        "default-fonts"   
##  [4] "default"          "duke-blue"        "hygge-duke"      
##  [7] "hygge"            "kunoichi"         "lucy-fonts"      
## [10] "lucy"             "metropolis-fonts" "metropolis"      
## [13] "middlebury-fonts" "middlebury"       "ninjutsu"        
## [16] "rladies-fonts"    "rladies"          "robot-fonts"     
## [19] "robot"            "rutgers-fonts"    "rutgers"         
## [22] "shinobi"          "tamu-fonts"       "tamu"            
## [25] "uo-fonts"         "uo"
```

Alguns exemplos de disponíveis: [xaringan themes](https://github.com/yihui/xaringan/wiki/Themes)
---
class: inverse, middle
# Colocar o tema RLadies

```r
output:
  xaringan::moon_reader:
    css: ["rladies", "rladies-fonts"]
```
- Criado por/Made by: [ALison Presmanes Hill](https://alison.rbind.io/post/r-ladies-slides/)
* Se você entende de CSS, é possível adaptar os temas e também criá-los :)
---
class: inverse, center, middle

# Exemplo do yaml:
<center>
<img src="imagens/5.PNG" style="width: 100%">
</center>

- Aperte o Knit e...
---
class: inverse, center, middle

# Resultado:
<center>
<img src="imagens/6.PNG" style="width: 45%">
<img src="imagens/7.PNG" style="width: 45%">
</center>

- O knit exportará um arquivo do tipo html.
- Agora o tema da apresentação está configurado!
- Aperte H ou ? para conferir a lista de atalhos do sharingan. 
---
# DEU ERRO NO KNITR!

Calma! É bem comum dar erro ao compliar o arquivo pois **qualquer** código errado causa isso. Algumas coisas pra se observar:

- Yaml header - se algo estiver errado, vai dar erro ao compilar. Muito cuidado com a identação!

- Código nos chunks - teste o Run All Chunks e ver se dá erro em algum específico. Se descobrir, tente verificar o que há de errado no código (pode ser a falta de um parênteses, vírgula, entre outros).

<img src="https://media.giphy.com/media/j9GASQ5ocrIRicnmyq/giphy.gif" width="30%" style="display: block; margin: auto;" />
---

class: split-70 hide-slide-number
background-image: url("")
background-size: cover

.column.slide-in-left[
.sliderbox.vmiddle.shade_main.center[
.font5[Markdown]]]
.column[
]

# Markdown
* O markdown é uma linguagem de marcação simples. 
* [Rmarkdown Cheatsheet](http://www.rstudio.com/wp-content/uploads/2016/03/rmarkdown-cheatsheet-2.0.pdf)
* Elaborada para ser fácil de ler, fácil de escrever.

---
#Sintaxe Markdown
**Adicionar títulos**

```r
# Título 1
## Título 2
### Título 3
```
# Título 1
## Título 2
### Título 3

* [Rmarkdown Cheatsheet](http://www.rstudio.com/wp-content/uploads/2016/03/rmarkdown-cheatsheet-2.0.pdf)
---
- **Inserir imagens**

```r
#    ![Logo do R](imagens/Rlogo.png)
```
![](imagens/Rlogo.png)

* [Rmarkdown Cheatsheet](http://www.rstudio.com/wp-content/uploads/2016/03/rmarkdown-cheatsheet-2.0.pdf)
---
- **Formatar textos**

```r
Negrito: **colocar o texto entre dois asteriscos**.

Itálico: *colocar o texto entre astericos*.

Riscado: ~~colocar o texto entre dois tis ~~
```

Itálico: *colocar o texto entre astericos*.

Negrito: **colocar o texto entre dois asteriscos**.

Riscado: ~~colocar o texto entre dois tis~~

- **Criar links**

```r
[R](https://www.r-project.org/)
```

[R](https://www.r-project.org/)

* [Rmarkdown Cheatsheet](http://www.rstudio.com/wp-content/uploads/2016/03/rmarkdown-cheatsheet-2.0.pdf)
---
- **Adicionar campos de código**

```r
 `escreva um código aqui`
```

`escreva um código aqui`

- *Fórmulas**

```r
$A = \pi*r^{2}$
```

`$A = \pi*r^{2}$`

---
class: inverse, center, middle

#Elaborando a apresentação

## E explorando a cheatsheet
---
class: inverse, center, middle
# Quebra de slides

```r
---
```

---

#Adicionando campos de código - chunks
<center>
<img src="imagens/8.PNG" style="width: 100%">
</center>
- Aceita código em R, Python, SQL.

Dica: Atalho para criar chunk: `Ctrl + ALt + I`.
---
# Campos de código - chunks

- Crie um chunk para cada tarefa que for executar no R.

- O chunk tem várias opções interessantes referentes ao documento gerado:

- `eval = FALSE` - Apresenta o código mas não "roda" ele. É útil para quando queremos apenas mostrar o código.
    
    - `include = FALSE`- "roda" o código, porém não mostra o código e nem o resultado no documento final. Ex: `library(tidyverse)` em apresentações que não apresentam os códigos.
    
    - `echo = FALSE` - não apresenta o código, mas apresenta o resultado. 
    
    - `message = FALSE` e `warning = FALSE` - não mostra as mensagens de erro e warning no arquivo gerado.
    
    - `cache = TRUE` - mantém uma cópia do resultado do seu código no computador. É prático para usar quando o código

Consulta: [KnitR Options](https://yihui.name/knitr/options/)

---

#Adicionando campos de código - chunks
** Exemplo: Adicionar um gráfico**
<center>
<img src="imagens/9.PNG" style="width: 100%">
</center>

Dica de atalho: Ctrl-Shift-Enter - O Rstudio executa o código e disponibiliza os resultados abaixo do código.

---
# Adicionando um chunk de configuração geral

* O que for adicionado nessas configurações irá ser aplicado em todos os chunks do seu arquivo!

{r setup, include=FALSE}

knitr::opts_chunk$set(echo = TRUE, message = FALSE, warning = FALSE, fig.align = 'center')

- São exemplos, você pode consultar quais [KnitR Options](https://yihui.name/knitr/options/) são mais adequadas para seu projeto :)

---

#Adicionando código R fora do chunk

```r
`r `
```

Exemplo:

```r
# O banco de dados mtcars possui `r nrow(mtcars)` carros cadastrados. 
```

Exemplo: O banco de dados mtcars possui 32 carros cadastrados.

* Útil para relatórios!

---
# Exemplo: Adicionar um gráfico

```r
attach(mtcars)
plot(wt, mpg, main="Scatterplot Example",
xlab="Car Weight ", ylab="Miles Per Gallon ", pch=19)
```

---
# Exemplo: Adicionar uma tabela

```r
head(mtcars)
```

```
##                    mpg cyl disp  hp drat    wt  qsec vs am gear carb
## Mazda RX4         21.0   6  160 110 3.90 2.620 16.46  0  1    4    4
## Mazda RX4 Wag     21.0   6  160 110 3.90 2.875 17.02  0  1    4    4
## Datsun 710        22.8   4  108  93 3.85 2.320 18.61  1  1    4    1
## Hornet 4 Drive    21.4   6  258 110 3.08 3.215 19.44  1  0    3    1
## Hornet Sportabout 18.7   8  360 175 3.15 3.440 17.02  0  0    3    2
## Valiant           18.1   6  225 105 2.76 3.460 20.22  1  0    3    1
```

---
# Exemplo: Adicionar uma tabela

```r
DT::datatable(head(mtcars, 10),
  fillContainer = FALSE, options = list(pageLength = 5))
```

<div id="htmlwidget-6798a6974746163ee9f4" style="width:100%;height:auto;" class="datatables html-widget"></div>
<script type="application/json" data-for="htmlwidget-6798a6974746163ee9f4">{"x":{"filter":"none","fillContainer":false,"data":[["Mazda RX4","Mazda RX4 Wag","Datsun 710","Hornet 4 Drive","Hornet Sportabout","Valiant","Duster 360","Merc 240D","Merc 230","Merc 280"],[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2],[6,6,4,6,8,6,8,4,4,6],[160,160,108,258,360,225,360,146.7,140.8,167.6],[110,110,93,110,175,105,245,62,95,123],[3.9,3.9,3.85,3.08,3.15,2.76,3.21,3.69,3.92,3.92],[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44],[16.46,17.02,18.61,19.44,17.02,20.22,15.84,20,22.9,18.3],[0,0,1,1,0,1,0,1,1,1],[1,1,1,0,0,0,0,0,0,0],[4,4,4,3,3,3,3,4,4,4],[4,4,1,1,2,1,4,2,2,4]],"container":"<table class=\"display\">\n  <thead>\n    <tr>\n      <th> <\/th>\n      <th>mpg<\/th>\n      <th>cyl<\/th>\n      <th>disp<\/th>\n      <th>hp<\/th>\n      <th>drat<\/th>\n      <th>wt<\/th>\n      <th>qsec<\/th>\n      <th>vs<\/th>\n      <th>am<\/th>\n      <th>gear<\/th>\n      <th>carb<\/th>\n    <\/tr>\n  <\/thead>\n<\/table>","options":{"pageLength":5,"columnDefs":[{"className":"dt-right","targets":[1,2,3,4,5,6,7,8,9,10,11]},{"orderable":false,"targets":0}],"order":[],"autoWidth":false,"orderClasses":false,"lengthMenu":[5,10,25,50,100]}},"evals":[],"jsHooks":[]}</script>

---

# Adicionar imagens usando o knitR

Função: `knitr::include_graphics()`

Exemplo:

```r
knitr::include_graphics("https://rladies.org/wp-content/uploads/2016/12/R-LadiesGlobal.png")
```

<img src="https://rladies.org/wp-content/uploads/2016/12/R-LadiesGlobal.png" width="50%" style="display: block; margin: auto;" />
---

# Adicionar imagens usando o knitR: Opções do chunk

- `out.width = "50%"` - Porcentagem do tamanho da imagem
<img src="https://rladies.org/wp-content/uploads/2016/12/R-LadiesGlobal.png" width="50%" style="display: block; margin: auto;" />

[KnitR Options](https://yihui.name/knitr/options/#chunk-options)

---

# Adicionar figuras usando o knitR: Opções do chunk

- **Alinhamento da figuras**
- `fig.align = 'center', 'default', **'left'**,'right'`

- `fig.align = 'center', 'default', 'left', **'right' **`

<img src="https://rladies.org/wp-content/uploads/2016/12/R-LadiesGlobal.png" width="20%" style="display: block; margin: auto 0 auto auto;" />
---

# Adicionar figuras usando o knitR: Opções do chunk

- **Alinhamento da figuras**

- `fig.cap="plotting example"`

<div class="figure" style="text-align: center">
<img src="https://rladies.org/wp-content/uploads/2016/12/R-LadiesGlobal.png" alt="plotting example" width="20%" />
<p class="caption">plotting example</p>
</div>

---
# Adicionar Fórmulas

Para escrever fórmulas, utilizar LaTeX.
Existe duas formas:

* Centralizado - usar $$

```r
$$celsius = kelvin - 273.15$$
```

`$$celsius = kelvin - 273.15$$`
* "Inline" - usar $

```r
$$ fahrenheit = celsius \times \frac{9}{5} + 32 $$
```

$$ fahrenheit = celsius \times \frac{9}{5} + 32 $$

Para outros símbolos matemáticos, [consulte aqui](https://en.wikibooks.org/wiki/LaTeX/Mathematics). 
---
# Exercício

1. Crie um arquivo Rmarkdown do tipo *presentation ninja*;
1. Aplique o estilo R-ladies;
1. Altere dados de autor, dê um título para o slide.
1. Usando a cheatsheet, use sua imaginação: adicione títulos, textos, imagens, links, etc.
1. Usando os chunks (campos de código), teste como ele funciona, e use algum código nele (gráfico, tabela, função, etc).
1. Exporte a apresentação usando o Knitr.
1. Abra o arquivo da sua apresentação em um navegador.
1. Aprecie sua apresentação feita no R :D

- ** A melhor forma de aprender é ir testando!**

<img src="https://media.giphy.com/media/1OYz3MODIHWplkknl7/giphy.gif" width="30%" style="display: block; margin: auto;" />
---

# Compartilhando a apresentação

## Salvar em PDF 
Usando o navegador Chrome ou no Chromium, imprima para arquivo (Ctrl + P).

Não dá certo com o Mozilla Firefox :(.

Consulta: https://github.com/yihui/xaringan/wiki/Export-Slides-to-PDF

## Salvar em HTML
- O formato que utilizamos para exportar uma apresentação elaborada com o xaringan é **.html**. Para isso, é necessário apertar o botão Knit (mostrado anteriormente).
- É possível hospedar o seu arquivo de apresentação em sites como o [Github Pages](https://github.com/) e [Netlify](https://www.netlify.com/).
---
# Compartilhando a apresentação via Github Pages

1) Crie uma conta gratuita no github: https://github.com/

2) Na sua conta do github, crie um novo repositório (New repository)

* OBS: [Esse post do @w_oliveiras](https://medium.com/trainingcenter/plano-para-estudar-git-e-github-enquanto-aprende-programa%C3%A7%C3%A3o-f5d5f986f459) é sobre como usar git e github utilizando o terminal/linha de comando e pode ajudar!

---
# Compartilhando a apresentação via Github Pages
3) Coloque um nome e descrição no novo repositório. Deixe como público.

---
# Compartilhando a apresentação via Github Pages
4) Repositório criado!

---
# Compartilhando a apresentação via Github Pages
5) Githubpages e pasta DOCS.

- Para o github pages funcionar, você precisa adicionar o conteúdo em uma pasta chamada `docs`. Então, antes de fazer upload, no seu computador/workingdirectory/projeto, crie uma pasta com o nome `docs` e coloque todos os arquivos da sua apresentação nessa pasta.

- De preferência, a sua apresentação deve se chamar index.html (após compilado).

<center>
<img src="imagens/pastadocs.jpg" style="width: 90%">
</center>
---
# Compartilhando a apresentação via Github Pages
- Área de upload do seu repositório do github (essa não é a única forma de realizar upload, também é possível através do github desktop e pelo terminal de comando).

---
# Compartilhando a apresentação via Github Pages
6) Faça o upload da pasta docs INTEIRA no seu repositório do github.

---
# Compartilhando a apresentação via Github Pages
7) Coloque uma mensagem no commit, para deixar registrado que alteração foi feita.

<center>
<img src="imagens/github6.jpg" style="width: 90%">
</center>
---
# Compartilhando a apresentação via Github Pages
8) No seu repositório, clique em Settings...
<center>
<img src="imagens/github7.jpg" style="width: 90%">
</center>
---
# Compartilhando a apresentação via Github Pages
8) ... e na seção Github Pages, selecione **master branch /docs folder**:.
<center>
<img src="imagens/github8.jpg" style="width: 90%">
</center>

<center> <strong>Resultado</strong>: <a href="https://beatrizmilz.github.io/teste/">https://beatrizmilz.github.io/teste/</a> </center> 
---
class:  inverse, center, middle
#Agora é só enviar o link das suas apresentações lindas!
Dica: Criar um URL mais curto com o [Bitly](https://bitly.com/)

[bit.ly/RLadiesSP3](https://bit.ly/RLadiesSP3)

---
# Referências

* [R for Data Science - Hadley Wickham & Garret Grolemund](https://r4ds.had.co.nz/) - Gratuito, em inglês.
* **Xaringan**
    + [Xaringan no Github](https://github.com/yihui/xaringan)
    + [Documentação](https://slides.yihui.name/xaringan/)
* **Themes**:
* Rladies:
    + [ALison Presmanes Hill](https://alison.rbind.io/post/r-ladies-slides/)
* Kunoichi:
    + [Documentação Kunoichi](https://emitanaka.github.io/ninja-theme/themes/kunoichi/kunoichi-theme-example.html)
    + [Kunoichi no Github](https://github.com/emitanaka/ninja-theme)
    + [Emi Tanaka](https://twitter.com/statsgen)!

- Material de estudo:
    + [R Markdown: The Definitive Guide](https://bookdown.org/yihui/rmarkdown/)

---

# Obrigada!
Apresentação elaborada com [Xaringan](https://github.com/yihui/xaringan) e [Kunoichi](https://github.com/emitanaka/ninja-theme).

Agradecimentos especiais:

[Bruna Wundervald](http://brunaw.com/) pela revisão e sugestões.

[Julio Trecenti](https://github.com/jtrecenti), [Curso-R](https://www.curso-r.com/) e [13 aMostra de Estatística - IME  USP](https://www.ime.usp.br/~amostra/) pelo mini-curso de Rmarkdown.

[DataCamp](https://www.datacamp.com) - Reporting with R Markdown Course.

[Maria Marinho](https://github.com/MaryMS) pelas sugestões e ajuda com a versão em pdf.