class: center, middle, inverse, title-slide .title[ # Dashboards em Shiny I ] .subtitle[ ## htmlwidgets ] .author[ ### <img src = 'https://d33wubrfki0l68.cloudfront.net/9b0699f18268059bdd2e5c21538a29eade7cbd2b/67e5c/img/logo/cursor1-5.png' width = '30%'> ] .date[ ### Setembro de 2023 ] --- ## htmlwidgets `htmlwidgets` são bibliotecas de visualização JavaScript encapsuladas em pacotes de R. Elas nos permitem usar diversas ferramentas JavaScript diretamente do R, adicionando algumas poucas linhas de código em nosso script. Usando `htmlwidgets`, conseguimos construir tabelas, gráficos, mapas e muito outras visualizações interativas e naturalmente bonitas. Vamos falar aqui dos seguintes pacotes: - `{reactable}`, para tabelas - `{plotly}`, para gráficos - `{leaflet}`, para mapas [Clique aqui](https://www.htmlwidgets.org/index.html) para acessar uma lista completa de todos os `htmlwidgets` disponíveis. --- ## Tabelas com reactable O pacote `reactable` nos permite criar tabelas interativas baseadas na biblioteca [React Table](https://github.com/tannerlinsley/react-table). Para criar uma reactable no nosso app, precisaremos das funções `reactable()`, `reactableOutput()` e `renderReactable()`. [Clique aqui](https://glin.github.io/reactable/) para acessar o tutorial completo do pacote `{reactable}`. Exemplo de construção: ```r # ui reactable::reactableOutput("tabela") # server ouput$tabela <- reactable::renderReactable({ reactable::reactable(imdb) }) ``` --- ## Tabelas com reactable A interatividade dos `htmlwidgets` não depende de uma sessão R rodando por trás. Você pode utilizá-los em qualquer documento `.html`. ```r reactable::reactable( mtcars, compact = TRUE, defaultPageSize = 4, striped = TRUE ) ``` <div id="htmlwidget-2f2f494fdf30d3a0e250" class="reactable html-widget" style="width:auto;height:auto;"></div> <script type="application/json" data-for="htmlwidget-2f2f494fdf30d3a0e250">{"x":{"tag":{"name":"Reactable","attribs":{"data":{".rownames":["Mazda RX4","Mazda RX4 Wag","Datsun 710","Hornet 4 Drive","Hornet Sportabout","Valiant","Duster 360","Merc 240D","Merc 230","Merc 280","Merc 280C","Merc 450SE","Merc 450SL","Merc 450SLC","Cadillac Fleetwood","Lincoln Continental","Chrysler Imperial","Fiat 128","Honda Civic","Toyota Corolla","Toyota Corona","Dodge Challenger","AMC Javelin","Camaro Z28","Pontiac Firebird","Fiat X1-9","Porsche 914-2","Lotus Europa","Ford Pantera L","Ferrari Dino","Maserati Bora","Volvo 142E"],"mpg":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"cyl":[6,6,4,6,8,6,8,4,4,6,6,8,8,8,8,8,8,4,4,4,4,8,8,8,8,4,4,4,8,6,8,4],"disp":[160,160,108,258,360,225,360,146.7,140.8,167.6,167.6,275.8,275.8,275.8,472,460,440,78.7,75.7,71.1,120.1,318,304,350,400,79,120.3,95.1,351,145,301,121],"hp":[110,110,93,110,175,105,245,62,95,123,123,180,180,180,205,215,230,66,52,65,97,150,150,245,175,66,91,113,264,175,335,109],"drat":[3.9,3.9,3.85,3.08,3.15,2.76,3.21,3.69,3.92,3.92,3.92,3.07,3.07,3.07,2.93,3,3.23,4.08,4.93,4.22,3.7,2.76,3.15,3.73,3.08,4.08,4.43,3.77,4.22,3.62,3.54,4.11],"wt":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"qsec":[16.46,17.02,18.61,19.44,17.02,20.22,15.84,20,22.9,18.3,18.9,17.4,17.6,18,17.98,17.82,17.42,19.47,18.52,19.9,20.01,16.87,17.3,15.41,17.05,18.9,16.7,16.9,14.5,15.5,14.6,18.6],"vs":[0,0,1,1,0,1,0,1,1,1,1,0,0,0,0,0,0,1,1,1,1,0,0,0,0,1,0,1,0,0,0,1],"am":[1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,1,1,1,1,1,1,1],"gear":[4,4,4,3,3,3,3,4,4,4,4,3,3,3,3,3,3,4,4,4,3,3,3,3,3,4,5,5,5,5,5,4],"carb":[4,4,1,1,2,1,4,2,2,4,4,3,3,3,4,4,4,1,2,1,1,2,2,4,2,1,2,2,4,6,8,2]},"columns":[{"id":".rownames","name":"","type":"character","sortable":false,"filterable":false,"rowHeader":true},{"id":"mpg","name":"mpg","type":"numeric"},{"id":"cyl","name":"cyl","type":"numeric"},{"id":"disp","name":"disp","type":"numeric"},{"id":"hp","name":"hp","type":"numeric"},{"id":"drat","name":"drat","type":"numeric"},{"id":"wt","name":"wt","type":"numeric"},{"id":"qsec","name":"qsec","type":"numeric"},{"id":"vs","name":"vs","type":"numeric"},{"id":"am","name":"am","type":"numeric"},{"id":"gear","name":"gear","type":"numeric"},{"id":"carb","name":"carb","type":"numeric"}],"defaultPageSize":4,"striped":true,"compact":true,"dataKey":"5b3b1b9433e88dd26cbc4c3644e92607"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script> --- ## Pacotes alternativos para tabelas A seguir, uma lista de pacotes/funções alternativos que trazem soluções para visualização de tabelas. - `knitr::kable()`: não é um htmlwidget (não possui interatividade), mas é uma solução para formatar tabelas quando não precisamos que elas sejam interativas. Funciona em conjunto com o pacote `{kableExtra}`. - O pacote `DT` embruha a biblioteca JavaScript [DataTables](http://datatables.net/) e é uma alternativa ao `reactable` para a criação de tabelas interativas. Embora seja mais burocrático na customização, essa biblioteca possui um recurso muito útil para a aplicativos Shiny: a edição de tabelas. #### Tutoriais - [Tutorial kable e kableExtra](https://cran.r-project.org/web/packages/kableExtra/vignettes/awesome_table_in_html.html) - [Tutorial DT](https://rstudio.github.io/DT/) --- ## Gráficos com plotly O pacote `plotly` nos permite criar gráficos interativos baseados na biblioteca [Plotly](https://plotly.com/) (construída em [D3](https://d3js.org/)). Para criar um plotly no nosso app, precisaremos criar um plotly e das funções `plotlyOutput()` e `renderPlotly()`. Embora seja possível criar um plotly do zero usando a função `plot_ly()`, um jeito muito eficiente de utilizar essa biblioteca é criar um ggplot e então utilizar a função `ggplotly()`. Veja o exemplo a seguir. #### Tutoriais - [Tutorial plotly](https://plotly.com/r/) - [Interactive web-based data visualization with R, plotly, and shiny](https://plotly-r.com/) --- ## Gráficos com plotly ```r library(ggplot2) p <- ggplot(mtcars) + geom_point(aes(x = wt, y = mpg)) plotly::ggplotly(p, height = 400) ``` <div id="htmlwidget-cfe673e1b259cbc2e819" style="width:504px;height:400px;" class="plotly html-widget"></div> <script type="application/json" data-for="htmlwidget-cfe673e1b259cbc2e819">{"x":{"data":[{"x":[2.6200000000000001,2.875,2.3199999999999998,3.2149999999999999,3.4399999999999999,3.46,3.5699999999999998,3.1899999999999999,3.1499999999999999,3.4399999999999999,3.4399999999999999,4.0700000000000003,3.73,3.7799999999999998,5.25,5.4240000000000004,5.3449999999999998,2.2000000000000002,1.615,1.835,2.4649999999999999,3.52,3.4350000000000001,3.8399999999999999,3.8450000000000002,1.9350000000000001,2.1400000000000001,1.5129999999999999,3.1699999999999999,2.77,3.5699999999999998,2.7799999999999998],"y":[21,21,22.800000000000001,21.399999999999999,18.699999999999999,18.100000000000001,14.300000000000001,24.399999999999999,22.800000000000001,19.199999999999999,17.800000000000001,16.399999999999999,17.300000000000001,15.199999999999999,10.4,10.4,14.699999999999999,32.399999999999999,30.399999999999999,33.899999999999999,21.5,15.5,15.199999999999999,13.300000000000001,19.199999999999999,27.300000000000001,26,30.399999999999999,15.800000000000001,19.699999999999999,15,21.399999999999999],"text":["wt: 2.620<br />mpg: 21.0","wt: 2.875<br />mpg: 21.0","wt: 2.320<br />mpg: 22.8","wt: 3.215<br />mpg: 21.4","wt: 3.440<br />mpg: 18.7","wt: 3.460<br />mpg: 18.1","wt: 3.570<br />mpg: 14.3","wt: 3.190<br />mpg: 24.4","wt: 3.150<br />mpg: 22.8","wt: 3.440<br />mpg: 19.2","wt: 3.440<br />mpg: 17.8","wt: 4.070<br />mpg: 16.4","wt: 3.730<br />mpg: 17.3","wt: 3.780<br />mpg: 15.2","wt: 5.250<br />mpg: 10.4","wt: 5.424<br />mpg: 10.4","wt: 5.345<br />mpg: 14.7","wt: 2.200<br />mpg: 32.4","wt: 1.615<br />mpg: 30.4","wt: 1.835<br />mpg: 33.9","wt: 2.465<br />mpg: 21.5","wt: 3.520<br />mpg: 15.5","wt: 3.435<br />mpg: 15.2","wt: 3.840<br />mpg: 13.3","wt: 3.845<br />mpg: 19.2","wt: 1.935<br />mpg: 27.3","wt: 2.140<br />mpg: 26.0","wt: 1.513<br />mpg: 30.4","wt: 3.170<br />mpg: 15.8","wt: 2.770<br />mpg: 19.7","wt: 3.570<br />mpg: 15.0","wt: 2.780<br />mpg: 21.4"],"type":"scatter","mode":"markers","marker":{"autocolorscale":false,"color":"rgba(0,0,0,1)","opacity":1,"size":5.6692913385826778,"symbol":"circle","line":{"width":1.8897637795275593,"color":"rgba(0,0,0,1)"}},"hoveron":"points","showlegend":false,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null}],"layout":{"margin":{"t":25.205479452054796,"r":7.3059360730593621,"b":39.159817351598178,"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},"xaxis":{"domain":[0,1],"automargin":true,"type":"linear","autorange":false,"range":[1.3174499999999998,5.6195500000000003],"tickmode":"array","ticktext":["2","3","4","5"],"tickvals":[2,3,4,5],"categoryorder":"array","categoryarray":["2","3","4","5"],"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":"wt","font":{"color":"rgba(0,0,0,1)","family":"","size":14.611872146118724}},"hoverformat":".2f"},"yaxis":{"domain":[0,1],"automargin":true,"type":"linear","autorange":false,"range":[9.2249999999999996,35.074999999999996],"tickmode":"array","ticktext":["10","15","20","25","30","35"],"tickvals":[10,15,20,25,30,35],"categoryorder":"array","categoryarray":["10","15","20","25","30","35"],"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":"mpg","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":false,"legend":{"bgcolor":"rgba(255,255,255,1)","bordercolor":"transparent","borderwidth":1.8897637795275593,"font":{"color":"rgba(0,0,0,1)","family":"","size":11.68949771689498}},"hovermode":"closest","height":400,"barmode":"relative"},"config":{"doubleClick":"reset","modeBarButtonsToAdd":["hoverclosest","hovercompare"],"showSendToCloud":false},"source":"A","attrs":{"80c431db98d":{"x":{},"y":{},"type":"scatter"}},"cur_data":"80c431db98d","visdat":{"80c431db98d":["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> --- ## Gráficos com plotly Para colocar um plotly no nosso app, basta utilizar as funções `plotlyOutput()` e `renderPlotly()`. ```r # ui plotly::plotlyOutput("grafico") # server ouput$grafico <- plotly::renderPlotly({ p <- ggplot(mtcars) + geom_point(aes(x = wt, y = mpg)) plotly::ggplotly(p, height = 400) }) ``` --- ## Pacotes alternativos A seguir, uma lista de pacotes/funções alternativos que trazem soluções para visualização de gráficos. - `highcharter`: pacote gráfico baseado na biblioteca JavaScript [Highcharts](https://www.highcharts.com/). A biblioteca Highcharts é gratuita apenas para fins educacionais e não lucrativos (exceto órgãos governamentais). Para outros usos, você pode precisar de uma licença. - `echarts4r`: pacote gráfico baseado na biblioteca JavaScript `echarts`. Essa biblioteca é código aberto, podendo ser utilizada gratuitamente para qualquer propósito. - Procure por pacotes para tipos específicos de gráficos na [galeria de htmlwidgets](http://gallery.htmlwidgets.org/). #### Tutoriais - [Tutorial highcharter](http://jkunst.com/highcharter/) - [Tutorial echarts4r](https://echarts4r.john-coene.com/) - [Documentação Highcharts](https://api.highcharts.com/highcharts/) --- ## Mapas com leaflet O pacote `{leaflet}` nos permite criar mapas interativos baseados na biblioteca JavaScript open-source [Leaflet](https://leafletjs.com/). Para colocar um mapa leaflet no nosso app, precisaremos criar um leaflet e das funções `leafletOutput()` e `renderLeaflet()`. Para criar um mapa leaflet, utilizamos a função `leaflet::leaflet()` e diversas funções auxiliares para caracterizar nosso mapa. Um tutorial de como utilizar o `leaflet` se encontra [aqui](http://rstudio.github.io/leaflet/). A seguir, mostramos um exemplo simples de como criar um mapa leaflet. --- ## Mapas com leaflet ```r library(leaflet) leaflet(height = 300) %>% addTiles() %>% addMarkers( lng = -46.6623969, lat = -23.5581664, popup = "A Curso-R morava aqui. Agora ela mora na internet e nos nossos corações ❤️" ) ``` --- ## Mapas com leaflet Para colocarmos um leaflet no nosso app, basta utilizarmos as funções `leafletOutput()` e `renderLeaflet()`. ```r # ui leaflet::leafletOutput("mapa") # server ouput$mapa <- leaflet::renderLeaflet({ leaflet(height = 300) %>% addTiles() %>% # Adiciona a camada gráfica do OpenStreetMap (padrão) addMarkers( lng = -46.6623969, lat = -23.5581664, popup = "A Curso-R mora aqui :)" ) }) ``` --- ## Pacotes alternativos - `ggplot2::geom_sf`: não é um htmlwidget (não possui interatividade), mas é uma boa solução para construção de mapas utilizando o framework do pacote `ggplot2()` em conjunto do pacote `sf`. - `highcharter::hcmap()`: variação do `highcharter` para mapas, baseada na biblioteca JavaScript [Highcharts](https://www.highcharts.com/maps/demo). - `{tmap}`: Pacote focado em mapas temáticos: [Thematic Maps](https://r-tmap.github.io/tmap/). --- ### Exercícios Faça os exercícios do [Capítulo 8 do livro Programando em Shiny](https://programando-em-shiny.curso-r.com/htmlwidgets.html#exerc%C3%ADcios). --- #### Tutoriais - [Documentação geom_sf()](https://ggplot2.tidyverse.org/reference/ggsf.html) - [Construindo mapas com o highcharter](http://jkunst.com/highcharter/highmaps.html) - [Documentação Highmaps](https://api.highcharts.com/highmaps/) --- ## Atividade Vamos construir htmlwidgets no nosso Shinydashboard. <br> <center> <img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" width = "300" height = "300"> <br> <br> <span style="color:#6495ed; font-weight: bold;">Ao RStudio: 22-htmlwidgets.R</span> <center> --- ## Referências e material extra #### htmlwidgets - [Galeria htmlwidgets](http://gallery.htmlwidgets.org/) #### reactable - [A biblioteca React Table](https://github.com/tannerlinsley/react-table) - [Tutorial reactable](https://glin.github.io/reactable/) #### DT - [Tutorial DT](https://rstudio.github.io/DT/) #### plotly - [Tutorial plotly](https://plotly.com/r/) - [Interactive web-based data visualization with R, plotly, and shiny](https://plotly-r.com/) --- ## Referências e material extra #### highcharter/highcharts - [Tutorial highcharter](http://jkunst.com/highcharter/) - [Biblioteca Highcharts](https://www.highcharts.com/) - [Galeria Highcharts](https://www.highcharts.com/demo) - [Documentação Highcharts](https://api.highcharts.com/highcharts/) #### leaflet - [Biblioteca Leaflet](https://leafletjs.com/) - [Tutorial Leaflet](http://rstudio.github.io/leaflet/) #### highmaps - [Galeria Highmaps](https://www.highcharts.com/maps/demo) - [Documentação Highmaps](https://api.highcharts.com/highmaps/) --- ## Referências e material extra #### tmap - [Thematic Maps](https://r-tmap.github.io/tmap/) #### Miscelânea - [Documentação geom_sf()](https://ggplot2.tidyverse.org/reference/ggsf.html) - [Tutorial kable e kableExtra](https://cran.r-project.org/web/packages/kableExtra/vignettes/awesome_table_in_html.html) - [Biblioteca D3](https://d3js.org/)