class: center, middle, inverse, title-slide # Predict-ICMC ## Criação de Dashboards Interativos com o Shiny ### Apresentação baseada no curso ‘Shiny: Zero a Hero’ ### junho de 2021 --- class: middle, center # Sobre <img src = 'https://github.com/predict-icmc/covid19/raw/master/shiny/site_final/covid-19/www/logo-predict.jpg' width = '30%'> --- # O que é o PREDICT? O PREDICT-ICMC é um grupo de extensão que visa a **análise de dados** da pandemia de COVID-19 por meio de: -- - técnicas de visualização de dados, e - modelos preditivos para o dimensionamento e prevenção dos impactos do COVID-19 e outras síndromes respiratórias agudas graves, utilizando estatística e ciência de dados. -- ## Como o projeto surgiu? O projeto teve suas atividades iniciadas em Maio de 2020 a partir de uma iniciativa da Profa Cibele e dos alunos do curso de Estatística e Ciência de Dados em criar modelos de previsão para o covid-19. --- ## Sobre a apresentação - Primeira hora: introdução ao Shiny para quem nem sabe o que é Shiny. > **Objetivo**: aprendermos a construir um aplicativo simples e colocá-lo na internet. <br> - Segunda hora: apresentação de diversos recursos legais do Shiny. > **Objetivo**: sairmos pessoas motivadas a aprender mais. --- class: middle, center # Introdução ao Shiny --- ## Shiny: programando em HTML sem saber HTML Com o Shiny, podemos produzir aplicativos web em HTML, CSS e JavaScript sem saber programar nessas linguagens. E melhor: sem sair do R! <br><br> <img src="img/hex-shiny.png" style="position: fixed; top: 235px; left: 430px; z-index: 1;" width="6%"> <center> <img src="img/shiny.png" width = "50%"> <img src="img/shiny2.png" width = "50%"> <br> Fonte: <a href = http://www.rstudio.com/shiny/>rstudio.com/shiny/</a> </center> --- ## Dashboards dinâmicos <center> <img src="img/como-funciona.png", width = "80%"> <br> Fonte: <a href = http://www.rstudio.com/shiny/>rstudio.com/shiny/</a> </center> --- class: center, middle ## [Exemplo de Shiny app em produção](https://predict-icmc.shinyapps.io/covid-19/) --- ## Exemplo mínimo O código de qualquer aplicativo em Shiny terá a estrutura abaixo: - Um objeto chamado `ui`. - Uma função chamada `server`. - Uma chamada da função `shinyApp()`. ```r library(shiny) ui <- fluidPage("Olá, mundo!") server <- function(input, output, session) { } shinyApp(ui, server) ``` No RStudio, para rodar um aplicativo shiny localmente (o seu computador é o servidor), clique no botão **Run app** logo acima do script. --- ## Exemplo Vamos criar e rodar o exemplo minimal do slide anterior. <center> <img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" width = "300" height = "300"> <br> <br>
Ao RStudio: 01-ola-mundo.R
<center> --- ## Inputs e Outputs Fazer um shiny app tem duas grandes tarefas: a construção do layout (veremos mais a frente) e a construção dos inputs e outputs. <center> <img src="img/inputs_outputs.png" width = "100%"> </center> --- ## Outputs: tabelas, gráficos e muito mais! Outputs representam as *saídas* do nosso aplicativo, isto é, tudo que queremos que nosso código R retorne para o usuário. Essas saídas podem ser tabelas, gráficos, mapas, texto, imagens ou qualquer outro elemento em HTML. Os outputs são definidos no UI e criados no server. Cada tipo de output é definido por uma função do tipo `_Output()`. Veja as principais: <table> <thead> <tr> <th style="text-align:left;"> Função </th> <th style="text-align:left;"> Output </th> </tr> </thead> <tbody> <tr> <td style="text-align:left;"> imageOutput() </td> <td style="text-align:left;"> imagens </td> </tr> <tr> <td style="text-align:left;"> plotOutput() </td> <td style="text-align:left;"> gráficos </td> </tr> <tr> <td style="text-align:left;"> tableOutput() </td> <td style="text-align:left;"> tabelas </td> </tr> <tr> <td style="text-align:left;"> textOutput() </td> <td style="text-align:left;"> textos </td> </tr> </tbody> </table> --- ## Funções render Para criar um output, precisamos das funções do tipo `render_()`. Essas funções são responsáveis por conectar as nossas visualizações criadas pelo R com o código HTML do UI. Na grande maioria dos casos, teremos o par `visualizacaoOutput()` `renderVisualizacao()`. Veja a seguir as principais funções `render_()` e como elas se comunicam com as funções `_Output()`. <table> <thead> <tr> <th style="text-align:left;"> _Output() </th> <th style="text-align:left;"> render_() </th> </tr> </thead> <tbody> <tr> <td style="text-align:left;"> imageOutput() </td> <td style="text-align:left;"> renderImage() </td> </tr> <tr> <td style="text-align:left;"> plotOutput() </td> <td style="text-align:left;"> renderPlot() </td> </tr> <tr> <td style="text-align:left;"> tableOutput() </td> <td style="text-align:left;"> renderTable() </td> </tr> <tr> <td style="text-align:left;"> textOutput() </td> <td style="text-align:left;"> renderText() </td> </tr> </tbody> </table> --- ## Atividade Vamos criar e rodar um shiny app com um gráfico como output. <br> <center> <img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" width = "300" height = "300"> <br> <br>
Ao RStudio: 02-output.R
<center> --- ## Inputs: dê controle ao usuário Inputs permitem que o usuário interaja com o seu aplicativo. Eles são criados no UI com funções (geralmente) do tipo `_Input()` e são utilizados dentro do server para alterar as visualizações. Veja alguns exemplos abaixo e acesse [este link](https://shiny.rstudio.com/gallery/widget-gallery.html) para testar como eles funcionam no navegador. <center> <img src="img/inputs.png", width = "85%"> <br> Fonte: <a href = http://www.rstudio.com/shiny/>rstudio.com/shiny/</a> </center> --- ## Atividade Vamos colocar um seletor de variáveis no exemplo anterior para permitir que o usuário escolha qual variável será exibida no histograma. <br> <center> <img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" width = "300" height = "300"> <br> <br>
Ao RStudio: 03-output-input.R
</center> --- ## Gráficos interativos com o plot_ly https://plotly.com/r/ <center> <img src="https://plotly-r.com/crc-cover.png" width = "300"> <br> https://plotly-r.com/index.html --- ## Atividade Vamos criar gráficos interativos no shiny com o plotly. <br> <center> <img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" width = "300" height = "300"> <br> <br>
Ao RStudio: shinyapps/04-plotly.R
</center> --- ## Dados geolocalizados com o leaflet <center> <img src="https://rstudio.github.io/leaflet/images/shiny3.png" width = "600"> <br> https://rstudio.github.io/leaflet/shiny.html --- ### Markers Use *markers* para plotar pontos em um mapa. As localizações de um *marker* são sua respectiva longitude e latitude. É necessário também criarmos uma palheta de cores se desejamos representar alguma variável (consulte https://www.datanovia.com/en/blog/top-r-color-palettes-to-know-for-great-data-visualization/) `library(RColorBrewer)` `display.brewer.all()` Exemplo de utilização `leaflet(df) %>% addTiles() %>% addCircles(~longitude, ~latitude)` `leaflet(df) %>% addTiles() %>% addCircleMarkers(~longitude, ~latitude)` fonte: https://rstudio.github.io/leaflet/markers.html --- ## Atividade Vamos criar e rodar um shiny app com um mapa do leaflet <br> <center> <img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" width = "300" height = "300"> <br> <br>
Ao RStudio: 05-leaflet.R
<center> --- ### Shapes Utilizamos uma biblioteca auxiliar, como `brazilmaps` ou `geobr`, para carregar os shapes de cada objeto espacial e adicioná-los ao nosso mapa. É necessário realizarmos uma operação de join para integrar as geometrias de cada local ao nosso conjunto de dados. `leaflet(df) %>% addTiles() %>% addPolygons()` Fonte: https://rstudio.github.io/leaflet/shapes.html --- ## Atividade Vamos integrar o plotly com o leaflet <br> <center> <img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" width = "300" height = "300"> <br> <br>
Ao RStudio: 06-covid-19.R
<center> --- ## Shinyapps.io O [shinyapps.io](https://www.shinyapps.io/) é um serviço do RStudio para hospedagem de Shiny apps. A conta gratuita permite você ter até 5 aplicações e 25 horas mensais de uso (um aplicativo utilizado por 1 hora consome 1 hora do seu plano, 2 aplicativos utilizados simultaneamente por 1 hora consomem 2 horas do seu plano). Criada uma conta, você poderá subir o seu app para o shinyapps.io diretamente do RStudio. Para isso, você precisará apenas conectar a sua conta com o RStudio. [Neste vídeo](https://www.youtube.com/watch?v=jRXubw0kOrg&ab_channel=Curso-R), mostramos como conectar o shinyapps.io com o RStudio. --- ## Referências e material extra Esta apresentação foi fortemente baseada no curso "Shiny: Zero a Hero", disponível em <https://github.com/curso-r/latinr-shiny> ### Tutoriais - [Tutorial de Shiny do Garrett Grolemund](https://shiny.rstudio.com/tutorial/) - [Mastering Shiny](https://mastering-shiny.org/) #### Galeria de Exemplos - [Galeria do Shiny](https://shiny.rstudio.com/gallery/) - [Site Show me Shiny](https://www.showmeshiny.com/)