class: center, middle, inverse, title-slide # Comunicando seus resultados em R: ## Aprenda a criar apresentações reprodutíveis
LatinR 2020 ### Beatriz Milz e Haydee Svab ### Outubro/2020 --- class: center
## Workshop oferecido por: .pull-left[ <img src="img/hex-logo-latinr.png" width="80%" style="display: block; margin: auto;" /> [LatinR](https://latin-r.com/pt) ] .pull-right[ <img src="https://beatrizmilz.github.io/slidesR/introR/img/rainbow-inclusive.png" width="80%" style="display: block; margin: auto;" /> [R-Ladies Goiânia](https://www.meetup.com/rladies-goiania/) + <br> [R-Ladies São Paulo](https://www.meetup.com/rladies-sao-paulo/) ] --- .pull-left[ ### Beatriz Milz <a href='https://beatrizmilz.com'><i class="fas fa-house-user"></i></a> <a href='mailto:beatriz.milz@usp.br'><i class="far fa-envelope"></i></a> <a href='https://twitter.com/BeaMilz' target="_blank"><i class="fab fa-twitter"></i></a> <a href='https://github.com/beatrizmilz' target="_blank"><i class="fab fa-github"></i></a> <a href='https://orcid.org/0000-0002-3064-4486' target="_blank"><i class="fab fa-orcid"></i></a> <a href='http://lattes.cnpq.br/5150665880581477' target="_blank"><i class="ai ai-lattes"></i></a> <a href='https://beatrizmilz.github.io/resume/index.html' target="_blank"><i class="ai ai-cv"></i></a> <a href='https://discourse.curso-r.com/u/beatrizmilz/summary' target="_blank"><i class="fab fa-discourse"></i></a> <a href='https://www.instagram.com/beatrizmilz/' target="_blank"><i class="fab fa-instagram"></i></a> - [Instrutora de `tidyverse` certificada pela RStudio](https://education.rstudio.com/trainers/people/milz+beatriz/) - Co-organizadora: [R-Ladies São Paulo](https://www.meetup.com/R-Ladies-Sao-Paulo/), [satRday São Paulo](https://saopaulo2019.satrdays.org/), [LatinR](https://latin-r.com/pt), [useR! 2021 global](https://user2021.r-project.org/) - Doutoranda em Ciência Ambiental (IEE/USP) - Mestre em Ciências (UNIFESP) - Bacharela em Gestão Ambiental (EACH/USP) - [Embaixadora de Inovação Cívica da Open Knowledge Brasil](https://embaixadoras.ok.org.br/). ] .pull-right[ ### Haydee Svab <a href='https://www.linkedin.com/in/hsvab/'><i class="fab fa-linkedin"></i></a> <a href='mailto:hsvab@hsvab.eng.br'><i class="far fa-envelope"></i></a> <a href='https://twitter.com/hsvab' target="_blank"><i class="fab fa-twitter"></i></a> <a href='https://www.instagram.com/haydeesvab/' target="_blank"><i class="fab fa-instagram"></i></a> <a href='https://github.com/hsvab' target="_blank"><i class="fab fa-github"></i></a> <a href='http://lattes.cnpq.br/9186914175329359' target="_blank"><i class="ai ai-lattes"></i></a> - Co-fundadora e cientista de dados da ASK-AR - Trabalhou para: BID, Banco Mundial e Metrô-SP - Co-fundadora dos grupos **RLadies-São Paulo**, PoliGNU e PoliGen (USP) - Mestra em Eng. e Planej. de Transportes (Poli-USP) - Especialista em Democracia Participativa (UFMG) - Engenheira Civil/Arquiteta (Programa Poli-FAU/USP) ] --- class: middle ## Combinados: - Todas as pessoas devem seguir o [código de conduta da conferência LatinR](https://latin-r.com/cdc-pt/). - Espaço acolhedor e amigável 🤗 - O evento será gravado. Caso não queira aparecer na gravação, pedimos que desligue sua câmera. - Escreva suas dúvidas no chat. - Mantenha seu microfone desligado. <img src="img/barra_zoom.png" width="100%" style="display: block; margin: auto;" /> --- class: # Pré-requisitos ## No seu computador - R: faça o download da versão mais recente [neste link](https://cran.r-project.org/). - RStudio: faça o download da versão mais recente [neste link](https://www.rstudio.com/products/rstudio/download/). - Instale os seguintes pacotes: ```r install.packages("xaringan") install.packages("xaringanthemer") install.packages("pagedown") ``` --- class: inverse, center, middle # Relatórios Reprodutíveis em R --- class: ## O ciclo da ciência de dados <div class="figure" style="text-align: center"> <img src="img/data-analysis.jpg" alt="<center><b>Ilustração por Allison Horst - Twitter: <a href='https://twitter.com/allison_horst/'> @allison_horst</a> - Adaptado de Wickham e Grolemund, 2017</b></center>" width="90%" /> <p class="caption"><center><b>Ilustração por Allison Horst - Twitter: <a href='https://twitter.com/allison_horst/'> @allison_horst</a> - Adaptado de Wickham e Grolemund, 2017</b></center></p> </div> --- class: ## Pacote R Markdown .pull-left[ - Mantido pela [RStudio](https://rstudio.com/) - Arquivos com extensão `.Rmd` - Possibilita a utilização de códigos: - `R` - `Markdown` - `HTML` - e outros ] .pull-right[ <div class="figure" style="text-align: center"> <img src="img/hex-rmarkdown.png" alt="<center><b>Logo: <a href='https://rmarkdown.rstudio.com'>Pacote `rmarkdown`</a></b></center>" width="75%" /> <p class="caption"><center><b>Logo: <a href='https://rmarkdown.rstudio.com'>Pacote `rmarkdown`</a></b></center></p> </div> ] --- class: center, middle ## Pergunta! https://app.sli.do/event/i5vnxvoa Respostas recebidas durante o evento: <img src="img/respostas-slido.PNG" width="70%" style="display: block; margin: auto;" /> --- class: ## R Markdown <div class="figure" style="text-align: center"> <img src="img/markdown.png" alt="<center><b>Fonte: <a href='https://rmarkdown.rstudio.com'>Pacote `rmarkdown`</a></b></center>" width="45%" /> <p class="caption"><center><b>Fonte: <a href='https://rmarkdown.rstudio.com'>Pacote `rmarkdown`</a></b></center></p> </div> --- ## Exemplos .pull-left[ - Blogs: - [Alison Hill](https://alison.rbind.io/) - [Florencia D'Andrea](https://florencia.netlify.app/) - [RStudio AI Blog](https://blogs.rstudio.com/ai/) - Livros: - [Tidy models with R](https://www.tmwr.org/) - [Ciência de Dados em R](https://livro.curso-r.com/) - da [Curso-R](https://curso-r.com/) - Currículo: - [Beatriz Milz](https://beatrizmilz.github.io/resume/index.html) ] .pull-right[ - Tutoriais: - [Exploring missing values in naniar](https://allisonhorst.shinyapps.io/missingexplorer/) - [Tutorial sobre Markdown](https://beatriz-milz.shinyapps.io/tutorial_markdown/) - [Newsleters automatizadas](https://sciencepulse.org/news/) - Apresentações: - [Garrick Aden-Buie](https://www.garrickadenbuie.com/talk/build-your-own-universe/) - [Alison Hill e Desirée De Leon](https://rstudio-education.github.io/sharing-short-notice/#1) ] --- class: inverse, center, middle # Apresentações com R Markdown --- class: ## Pacote xaringan .pull-left[ - Possibilita criar apresentações **ninjas** com `R Markdown` - Utiliza a biblioteca `remark.js` - Gera resultado em HTML - HTML pode ser convertido para PDF (estático) ] .pull-right[ <div class="figure" style="text-align: center"> <img src="img/hex-xaringan.png" alt="<center><b>Logo: <a href='https://github.com/yihui/xaringan'>Pacote xaringan</a></b></center>" width="75%" /> <p class="caption"><center><b>Logo: <a href='https://github.com/yihui/xaringan'>Pacote xaringan</a></b></center></p> </div> ] --- ## Vantagens 👍 É reprodutível. 👍 Podemos inserir equações em LaTeX. 👍 Inserir códigos R e seus resultados. 👍 É possível utilizar o versionamento de código utilizando Git e GitHub. 👍 Possibilita o desenvolvimento do material em equipe (através do GitHub). 👍 Disponibilizando online e enviando o link, é possível atualizar o conteúdo em qualquer momento. --- class: ## Estrutura da apresentação - No `xaringan`, utilizamos o arquivo `.Rmd` para escrever o código da apresentação que é compilado para um arquivo `.html` - Esse arquivo `.html` é interpretado pelo navegador (ex. Chrome), utilizando também os arquivos `.css` e `.js` <img src="img/html-css-javascript.jpg" width="50%" style="display: block; margin: auto;" /> --- class: ## Estrutura da apresentação <img src="img/html-css-javascript.jpg" width="40%" style="display: block; margin: auto;" /> - **HTML** (HyperText Markup Language - Linguagem de Marcação de Hipertexto): é uma linguagem de marcação, é usado para estruturar a página. - **CSS** (Cascading Style Sheets - Folha de Estilo em Cascata): é usado para estilizar os elementos escritos no HTML. - **Javascript**: é uma linguagem de programação, permite que as páginas sejam dinâmicas. --- class: ## O que precisa saber? - **HTML**: É gerado automaticamente ao compilar o `.Rmd` - **CSS**: É usado para personalizar a parte visual da apresentação. Para saber mais sobre temas: [xaringan wiki](https://github.com/yihui/xaringan/wiki/Themes) - **JS**: utiliza o `Remark.JS`, mas aceita outros códigos caso seja necessário. <img src="https://media1.giphy.com/media/VbnUQpnihPSIgIXuZv/giphy-downsized.gif" width="20%" style="display: block; margin: auto;" /> --- class: ## Recomendações #1 - Desenvolva a apresentação em um projeto no RStudio: <br> facilita muito para organizar os arquivos e posteriormente sincronizar com o GitHub. - `File > New Project > New Directory > New Project` - Dê um nome para seu projeto (será o nome da pasta) - Escolha a pasta no seu computador - Clique em `Create Project` --- class: ## Recomendações #2 - Organize o seu diretório. <br> Por exemplo: - `img/` - imagens, figuras, etc. - `libs/` - bibliotecas. - `css/` - para arquivos `.css` (opcional) - 🔔 **Importante**: Compile (knit) o arquivo com frequência! --- class: ## Criar um arquivo R Markdown ### Com template Ninja Presentation - `File > New File > R Markdown...` - Na janela New R Markdown: <br> `From Template > Ninja Presentation` <img src="img/criar-xaringan.JPG" width="50%" style="display: block; margin: auto;" /> --- class: ## Estrutura arquivo R Markdown <img src="img/rmd-estrutura-xaringan.png" width="90%" style="display: block; margin: auto;" /> --- class: ## Como delimitar slides? - No xaringan, os slides são delimitados por `---` no início da linha. - Para fazer slides que aparecem aos poucos ( _incremental slides_ ), utilize `--` no início da linha. <br> <br> Por exemplo: -- O conteúdo -- aparece -- aos poucos! --- class: inverse, center, middle # Apresentações com R Markdown Demonstração de código 👩💻 ??? - Live coding: - Mostrar criando um projeto - Criar um arquivo com template ninja presentation - Apagar o conteúdo da documentação (falar que aquele código todo é a documentação do pacote) - apertar knit e mostrar o resultado - colocar conteúdo em dois novos slides (escrever só uma frase para mostrar que é com --- que delimitamos os slides) - knit novamente :) --- class: ## 👩💻 Exercícios 1. Crie um projeto `.Rproj` 2. Crie um arquivo R Markdown com o template `Ninja presentation`, e com o nome `index.html` 3. Apague o conteúdo após o `YAML` (linha 15 em diante) 4. Aperte `Knit` e veja o resultado 5. No tempo restante: <br> Dica: [Relembre como fazer no tutorial enviado](https://beatriz-milz.shinyapps.io/tutorial_markdown/) - Adicione um slide com a seguinte frase (com as formatações e links como aparecem aqui!): > [R-Ladies](https://rladies.org/) é uma organização que promove a __diversidade de gênero__ na comunidade da linguagem `R`. ??? Depois do tempo do exercício, mostrar como adicionar a frase do exercício. --- # Chunk de código Para inserir um chunk, ou campo de código - O chunk deve ***iniciar e terminar*** por uma série de 3 crases ` ``` ` - O chunk deve iniciar fornecendo os parâmetro entre `{}` <br> Se quiser ver o código e o resultado use echo = TRUE, <br> se quiser ver apenas o resultado use echo = FALSE. <img src="img/chunk-options.png" width="100%" style="display: block; margin: auto;" /> --- class: inverse, center, middle ## Chunks de código Demonstração de código 👩💻 ??? - Live coding: - Mostrar como adicionar o chunk (botão insert + atalho com CTRL + ALT + I) - clicar na engrenagem e falar de algumas opções - escrever um código R no chunk e apertar knit para ver código e resultado - Mostrar um chunk e setup! --- class: ## 👩💻 Exercícios 6. Adicione uma tabela a partir de um `data frame` <br> (Você pode usar `mtcars`, por exemplo). 7. Adicione uma imagem na sua apresentação <br> (Dica: crie uma pasta `img`, salve a imagem nesta pasta) 8. Inclua um chunk de código em que a variável x recebe o valor 4, a variável y recebe o valor 6 e calcula a soma de x e y. Dica: Se precisar, [consulte o tutorial enviado](https://beatriz-milz.shinyapps.io/tutorial_markdown/) -- ```r x <-4 y <- 6 x + y ``` ``` ## [1] 10 ``` ??? Depois do tempo do exercício, mostrar um exemplo de resolução. --- class: inverse, center, middle # Metadados da apresentação: `YAML` --- class: ## Alterar `YAML` - O `YAML` possui informações importantes para a <br> apresentação como: - título; - subtítulo; - autor; - instituição; - data; - etc. - __output:__ indica o formato, por exemplo html_document, pdf_document, etc. No caso do `xaringan`, o output é `xaringan::moon_reader` - __libs_dir:__ pasta onde colocará bibliotecas necessárias. <br> Por exemplo: `lib_dir: libs` indica que a biblioteca que usamos remark-latest.min.js será salva na pasta libs. --- ## Alterar `YAML` - Cuidado com a identação! <img src="https://media0.giphy.com/media/xT9IgIc0lryrxvqVGM/giphy-downsized.gif" style="display: block; margin: auto;" /> --- class: ## Exemplo do código `YAML`: ```r --- *title: "Título da apresentação" *subtitle: "Subtítulo da apresentação" *author: "Autor" *institute: "Instituição" *date: "07/09/2019" output: xaringan::moon_reader: lib_dir: libs nature: highlightStyle: github highlightLines: true countIncrementalSlides: false --- ``` - Aperte H ou ? para conferir a lista de atalhos do `xaringan` --- class: ## Encoding - Adicionar no `YAML`: ```r encoding: "UTF-8" ``` > "Uma **codificação de caracteres** é um padrão de relacionamento entre um conjunto de caracteres(...) com um conjunto de outra coisa, como por exemplo números ou pulsos elétricos com o objetivo de **facilitar o armazenamento de texto em computadores e sua transmissão** através de redes de telecomunicação." <br> [Wikipedia](https://pt.wikipedia.org/wiki/Codificação_de_caracteres) <!--"There Ain’t No Such Thing As Plain Text." <br> [Joel Spolsky, 2003](https://www.joelonsoftware.com/2003/10/08/the-absolute-minimum-every-software-developer-absolutely-positively-must-know-about-unicode-and-character-sets-no-excuses/) If you have a string, in memory, in a file, or in an email message, you have to know what encoding it is in or you cannot interpret it or display it to users correctly." --> --- class: ## Biblioteca `remark.js` - Seu uso é opcional, mas recomendado! <br> Possibilita que sua apresentação seja **visualizada offline**! - Duas opções para fazer download da biblioteca `remark.js`: <br><br> - A função `xaringan::summon_remark()` faz o download da versão mais atual do `remark.js` e salva na pasta `/libs` <br><br> - Usando a função `download.file` indicando como primeiro parâmetro a url de origem, bem como o destino como parâmetro do *destfile* --- name: chakra class: ## Biblioteca `remark.js` ```r xaringan::summon_remark() # Ou: download.file("https://remarkjs.com/downloads/remark-latest.min.js", destfile = "libs/remark-latest.min.js") ``` -- - Adicionar no `YAML`: ```r output: xaringan::moon_reader: * chakra: libs/remark-latest.min.js lib_dir: libs ``` --- class: ## Adicionando conteúdo na apresentação - Atualiza a apresentação enquanto é editada: ```r xaringan::inf_mr() ``` --- class: ## 👩💻 Exercícios 1. Altere o YAML: 1. Adicione um título 2. Adicione um subtítulo 3. Adicione seu nome no campo de autoria 4. Adicione a data 5. Extra: possibilite que a sua apresentação seja visualizada offline, salvando a biblioteca `remark.js` e [alterando o chakra no YAML](#chakra). ??? Depois do tempo do exercício, mostrar a resolução. --- class: inverse, center, middle # Estilo (`.css`) ??? Mostrar cada uma das possibilidades com live coding! --- class: ## Estilo (`.css`) - Possibilidades: - Temas do xaringan - Temas com [`{xaringanthemer}`](https://pkg.garrickadenbuie.com/xaringanthemer/) - Alterando o `.css`: arquivo `custom.css` --- <!-- class: tiny --> ### Tema - Depende da versão do `xaringan` que está usando. - Para consultar os temas disponíveis: .tiny[ ```r names(xaringan:::list_css()) ``` ``` ## [1] "chocolate-fonts" "chocolate" "default-fonts" "default" ## [5] "duke-blue" "fc-fonts" "fc" "hygge-duke" ## [9] "hygge" "ki-fonts" "ki" "kunoichi" ## [13] "lucy-fonts" "lucy" "metropolis-fonts" "metropolis" ## [17] "middlebury-fonts" "middlebury" "ninjutsu" "rladies-fonts" ## [21] "rladies" "robot-fonts" "robot" "rutgers-fonts" ## [25] "rutgers" "shinobi" "tamu-fonts" "tamu" ## [29] "uo-fonts" "uo" "uol-fonts" "uol" ## [33] "useR-fonts" "useR" ``` ] --- class: ### Tema - 🔔 Dica: <br> Usar em dupla: `nomedotema` e `nomedotema-fonts` - Adicionar no `YAML`: ```r output: xaringan::moon_reader: * css: ["rladies", "rladies-fonts"] ``` --- class: ### Exemplo do código `YAML`: ```r --- title: "Título da apresentação" subtitle: "Subtítulo da apresentação" author: "Autor" institute: "Instituição" date: "07/09/2019" encoding: "UTF-8" output: xaringan::moon_reader: * chakra: libs/remark-latest.min.js * css: ["rladies", "rladies-fonts"] lib_dir: libs nature: highlightStyle: github highlightLines: true countIncrementalSlides: false --- ``` --- class: ### xaringanthemer - Cria o arquivo `.css`! - Duas possibilidades para usar: - Criar um arquivo com template: > Ninja **themed** presentation - Usar em uma apresentação que já existe: [veja aqui](https://pkg.garrickadenbuie.com/xaringanthemer/#quick-intro) - No YAML: ```r output: xaringan::moon_reader: lib_dir: libs chakra: libs/remark-latest.min.js * css: [xaringan-themer.css] ``` ! --- class: ## Customizando o CSS - Podemos alterar coisas específicas no CSS. - Dica: usar o inspetor do navegador para descobrir o que mudar. Firefox é `CTRL + SHIFT + C` - Crie um arquivo CSS no projeto (Ex: `custom.css`), e adicione no YAML. -- - Dica 1: usar `{xariganthemer}`, e arquivos CSS customizados. ```r output: xaringan::moon_reader: * css: [xaringan-themer.css, custom.css] ``` - Dica 2: usar temas do xaringan e arquivos CSS customizados. ```r output: xaringan::moon_reader: * css: ["rladies", "rladies-fonts", custom.css] ``` --- ## 👩💻 Exercícios 1. Mude o estilo da sua apresentação! (sua escolha como quer mudar) --- class: inverse, center, middle # Compartilhando a apresentação --- Class: ## PDF - Para compartilhar em PDF, é possível converter o HTML em PDF com a função `pagedown::chrome_print()`: ```r remotes::install_github('rstudio/pagedown') pagedown::chrome_print("index.html") ``` ??? Mostrar isso com live coding! --- Class: ## Página web - HTML - Pode disponibilizar online :) - Em seu site; - A partir de um repositório do GitHub: - [GitHub Pages](https://pages.github.com/) - [Netlify](https://www.netlify.com/) - Faça login com a sua conta no GitHub! - Arrastando para enviar: - [Netlify Drop](https://app.netlify.com/drop) <img src="img/rmd-html.png" width="60%" style="display: block; margin: auto;" /> - Dica: você pode encurtar o link com o [bit.ly](https://bitly.com) ??? Mostrar isso com live coding! --- ## 👩💻 Exercícios 1. Gere um arquivo PDF da sua apresentação usando a função `pagedown::chrome_print("index.html")` 2. Deixe sua apresentação online e envie o link no chat! Ex. com o [Netlify Drop](https://app.netlify.com/drop) --- ## Outros pacotes ### Aumentando as possibilidades! - [pagedown](https://github.com/rstudio/pagedown) - ✔️ CRAN, ✔️ GitHub - [xaringanthemer](https://pkg.garrickadenbuie.com/xaringanthemer/) - ✔️ CRAN, ✔️ GitHub - [giphyr](https://github.com/haozhu233/giphyr) - ✔️ CRAN, ✔️ GitHub - [metathis](https://pkg.garrickadenbuie.com/metathis/) - ✔️ CRAN, ✔️ GitHub - [xaringanExtra](https://pkg.garrickadenbuie.com/xaringanExtra/) - ❌ CRAN, ✔️ GitHub - [countdown](https://pkg.garrickadenbuie.com/countdown/#1) - ❌ CRAN, ✔️ GitHub - [emo](https://github.com/hadley/emo) + [ermoji](https://www.garrickadenbuie.com/project/ermoji/) - ❌ CRAN, ✔️ GitHub ??? Se sobrar tempo podemos comentar sobre esses pacotes! --- class: middle, center <div class="figure" style="text-align: center"> <img src="img/community1.jpg" alt="<center><b>Ilustração por Allison Horst - Twitter: <a href='https://twitter.com/allison_horst/'> @allison_horst</a> </b></center>" width="50%" /> <p class="caption"><center><b>Ilustração por Allison Horst - Twitter: <a href='https://twitter.com/allison_horst/'> @allison_horst</a> </b></center></p> </div> --- class: # Referências ## **R Markdown**: - [R Markdown Cheatsheet](https://www.rstudio.com/wp-content/uploads/2015/02/rmarkdown-cheatsheet.pdf) - [R Markdown from RStudio](https://rmarkdown.rstudio.com/lesson-1.html) - [R Markdown: The Definitive Guide](https://bookdown.org/yihui/rmarkdown/) - [R for Data Science - Cap 27: R Markdown](https://r4ds.had.co.nz/r-markdown.html) - [Software Carpentry - Producing Reports With knitr ](https://swcarpentry.github.io/r-novice-gapminder/15-knitr-markdown/) - [Advanced R Markdown](https://slides.yihui.name/2017-rstudio-conf-rmarkdown-Yihui-Xie.html) --- class: # Referências ## **xaringan**: - [Introdução ao pacote xaringan, Criando apresentações com R](https://beatrizmilz.github.io/IME-27-08-2019/) - [Apresentação da documentação](http://slides.yihui.name/xaringan/) - [xaringan Wiki](https://github.com/yihui/xaringan/wiki) - [Livro R Markdown (Capítulo 7)](https://bookdown.org/yihui/rmarkdown/xaringan.html) - [Remark.js Wiki](https://github.com/gnab/remark/wiki) --- ## Outros: - [Material sobre como configurar o Git e GitHub no RStudio](https://beatrizmilz.github.io/slidesR/git_rstudio.html) - O pacote [dados](https://cienciadedatos.github.io/dados/) disponibiliza bases de dados traduzidas para o Português. <!-- inicio font awesome --> <script src="https://kit.fontawesome.com/1f72d6921a.js" crossorigin="anonymous"></script> <!-- final font awesome --> <!-- inicio github buttons --> <script async defer src="https://buttons.github.io/buttons.js"></script> <!-- final github buttons -->