Visualização de dados

class: center, middle, inverse, title-slide

.title[
# Visualização de dados
]
.subtitle[
## Workshop de Ciência de Dados <br><br> Pedro de Brito Neto
]
.author[
### <img src=img/logo.png width = '30%'>
]

---

class: middle, center, inverse

# Sobre o curso

---
class: middle, center

# Introdução

---

.pull-left[

## Discussões iniciais

- Compreender o papel da visualização em um projeto de ciência de dados.

- Discutir alguns recursos que devem ser considerados em um gráfico.

- Entender o funcionamento básico do pacote `{ggplot2}`.

]

.pull-right[

## Prática no R

- Utilizar os principais gráficos do `{ggplot2}`.

- Otimização visual.

- Utilizar alguns recursos avançados do `{ggplot2}`

- Extensões e gráficos interativos.

]
---

.pull-left[

# O que é visualização de dados?

- É a representação de dados em gráficos, tabelas e diagramas que podem ser interpretados por pessoas.

- É uma área interdisciplinar, misturando estatística, arte e comunicação.

- É uma parte da área de *data storytelling*, que envolve organizar todos os resultados de uma análise de dados em uma ordem lógica para comunicar de forma efetiva com a audiência.

]

.pull-right[

# Por quê fazer visualizações de dados?

- Visualizações estão presentes na grande maioria dos projetos de ciência de dados.

- É a parte mais acessível da ciência de dados do ponto de vista de quem lê. Mostrar uma visualização costuma ser mais efetivo do que a saída de um modelo.

- É uma das partes mais difíceis de automatizar da ciência de dados. Uma carreira em *dataviz* dificilmente ficará obsoleta.

]

---

# Para quê servem as visualizações?

.pull-left[

- Uma base de dados contém toda a informação que precisamos.

- No entanto, não somos capazes de tirar conclusões apenas olhando essas bases.

- Por isso, é necessário resumir esses dados em estatísticas.

- Nem sempre as estatísticas (os números) são úteis para uma comunicação efetiva... Por isso, faz sentido mostrá-las usando formas, cores e outros elementos que facilitam a absorção da informação pelas pessoas.

]

.pull-right[

Ilustração de [Allison Horst](https://www.allisonhorst.com)

]

---

# Storytelling com dados

.pull-left[

- A importância do contexto.

- A escolha da visualização eficaz.

]

.pull-right[
<img src=img/livro.jpg>
]

---
.pull-left[

## Análise exploratória

- É um trabalho de __investigação__ de dados
- A ferramenta: precisa ser __rápida__ de programar
- O objetivo é **aprender**

]

.pull-right[

## Análise descritiva

- É um trabalho de __otimização visual__
- A ferramenta: precisa ser __customizável__
- O objetivo é **comunicar**

]

.center[
### O `{ggplot2}` permite fazer as duas coisas!
]

---
# Gráficos bons e ruins

.pull-left[

### Gráficos para evitar

- Barras que não começam no zero
- [Gráficos de pizza](https://www.ime.usp.br/inscricoes-abertas-cea-da-usp-recebe-projetos-para-analise-estatistica-de-dados-2/#:~:text=Inscri%C3%A7%C3%B5es%20Abertas%3A%20CEA%20da%20USP%20recebe%20projetos%20para%20an%C3%A1lise%20estat%C3%ADstica%20de%20dados,-NOT%C3%8DCIAS&text=O%20Centro%20de%20Estat%C3%ADstica%20Aplicada,a%2015%2F07%2F2022.) (discutível!)
- ...

]

.pull-right[

### Gráficos para tomar cuidado

- Gráficos com dois eixos
- [Gráficos pouco conhecidos](https://confe.org.br/)
- ...

]

---

# [Qual gráfico escolher?](https://www.data-to-viz.com)

---
class: middle,inverse,center

# Ferramental

---

# Gramática de gráficos *em camadas*

O pacote `{ggplot2}` segue duas filosofias que nos ajudam a entender o processo de construção dos gráficos:

1. Um gráfico estatístico é uma representação visual dos dados por meio de atributos estéticos (posição, cor, forma, tamanho, ...) de formas geométricas (pontos, linhas, barras, ...). [The Grammar of Graphics](https://www.springer.com/gp/book/9780387245447).

2. Um gráfico pode ser construído em camadas (um gráfico é a sobreposição de elementos visuais). [A layered grammar of graphics](https://vita.had.co.nz/papers/layered-grammar.html).

---

# Camadas

.panelset[

.panel[
.panel-name[Canvas]

]

.panel[
.panel-name[Canvas (R)]

```r
cars |> 
  ggplot()
```

]

.panel[
.panel-name[Eixos]

]

.panel[
.panel-name[Eixos (R)]

```r
cars |> 
  ggplot() +
  aes(x = speed, y = dist)
```

]

.panel[
.panel-name[Geometria]

]

.panel[
.panel-name[Geometria (R)]

```r
cars |> 
  ggplot() +
  aes(x = speed, y = dist) +
  geom_point()
```

]
]

---

# Camadas

Depois, podemos trabalhar a estética com temas e detalhamentos.

.panelset[
.panel[
.panel-name[Completo]

]
.panel[
.panel-name[Completo (R)]

```r
ggplot(cars) +
  aes(speed, dist) +
  geom_point(colour = "darkblue") +
  stat_smooth(
    se = FALSE, colour = "lightgray", 
    method = "loess", formula = "y ~ x"
  ) +
  theme_minimal(14) +
  labs(
    title = "A velocidade influencia na distância de parada?",
    subtitle = "Distância necessária para parar o carro",
    caption = paste(
      "Fonte: Ezekiel, M. (1930) Methods of",
      "Correlation Analysis. Wiley"),
    x = "Velocidade", y = "Distância para parar"
  )
```

]
]

---

# [Dúvidas? cheat sheet](https://www.rstudio.com/resources/cheatsheets/)

---
class: middle, center, inverse

# Otimização Visual

---

# O que é otimização visual?

- É o ato de trabalhar em uma visualização aprimorar a comunicação.

- Pode envolver alterações nas cores, fontes, elementos geométricos, entre outros, a partir de um gráfico exploratório.

- Não é uma ciência exata, mas recolhe elementos da ciência para aumentar a probabilidade de sucesso da visualização.

---

# Recursos pré-atentativos

- Uma propriedade visual pré-atentativa é processada pelo nosso [cérebro antes de uma ação consciente](https://www.interaction-design.org/literature/article/preattentive-visual-properties-and-how-to-use-them-in-information-visualization).

- Como isso esse processamento é muito rápido, trata-se de uma oportunidade para tornar visualizações mais amigáveis e diretamente interpretadas.

- Segundo [Colin Ware](https://en.wikipedia.org/wiki/Colin_Ware), existem 4 propriedades pré-atentativas que podemos explorar:
    - Cor
    - Forma
    - Movimento
    - Posicionamento
    
- O objetivo dos recursos pré-atentativos é __<span style="color:blue;">chamar a atenção</span>__.

---

# Recursos pré-atentativos

- Como isso esse processamento é muito rápido, trata-se de uma oportunidade para tornar visualizações mais amigáveis e diretamente interpretadas.

- Segundo [Colin Ware](https://en.wikipedia.org/wiki/Colin_Ware), existem 4 propriedades pré-atentativas que podemos explorar:
    - __Cor__
    - __Forma__
    - Movimento
    - Posicionamento
    
- O objetivo dos recursos pré-atentativos é __<span style="color:blue;">chamar a atenção</span>__.

---
class: middle, center

# Cor

---

# Cores do zero: HCL vs RGB

- HCL (hue, chroma, luminance) é vantajoso pois é mais intuitivo de criar do que RGB, já que o HCL tem apenas um eixo de cores (*hue*), enquanto RGB é uma composição de três (*red*, *green*, *blue*)

- O pacote {colorspace} permite usar HCL para definir uma cor/paleta. No R: colorspace::hcl_color_picker()

- [color picker](https://www.google.com/search?q=color+picker&rlz=1C1CHZN_pt-BRBR985BR985&oq=color+pick&aqs=chrome.1.69i57j0i131i433i512l5j0i512l4.5991j0j7&sourceid=chrome&ie=UTF-8), também é possível criar algumas paletas

---

# Paletas de cores prontas

- __Escalas qualitativas__: utilizado para variáveis nominais (sexo, cor/raça)

- __Escalas divergentes__: utilizado para variáveis que têm um centro neutro (favorável/neutro/desfavorável, correlação)

- __Escalas sequenciais__: utilizado para variáveis ordinais (faixa etária, renda)

- [__Viridis__](https://cran.r-project.org/web/packages/viridis/vignettes/intro-to-viridis.html): útil para comunicar com pessoas com daltonismo

---

# Paletas de cores no {ggplot2}

- `scale_*_brewer()`: utilizada para variáveis discretas. Possui três tipos: divergente, qualitativa e sequencial.

- `scale_*_distiller()`: utilizada para variáveis contínuas. Interpola as cores do *brewer* para lidar com todos os valores.

- `scale_*_fermenter()`: utilizada para variáveis contínuas, que são transformadas em discretas (binned).

- `scale_*_viridis_[cdb]`: Escala viridis para variáveis `c`ontínuas, `d`iscretas ou `b`inned.

- `scale_*_manual()`: inclui um conjunto de cores manualmente.

---

# Paletas de outros pacotes

- [`{ggthemr}`](https://github.com/Mikata-Project/ggthemr) tem um monte de paletas, mas está um pouco desatualizado.

- [`{hrbrthemes}`](https://github.com/hrbrmstr/hrbrthemes) contém uma lista de temas escolhidos pelo Bob Rudis.

- [`{ghibli}`](https://ewenme.github.io/ghibli/) tem paletas de cores relacionadas ao Studio Ghibli

- [`{paletteer}`](https://github.com/EmilHvitfeldt/paletteer) tem uma coleção de cores de vários outros pacotes de paletas.

---

# Qual visualização é melhor?

.pull-left[

]

.pull-right[

]

---
class: middle, center

# Forma

---

# Formas

- Geralmente queremos contrastar formas para chamar a atenção...

- Sem com isso fazer uma bagunça visual.

- A ideia é utilizar apenas um elemento, como tamanho, forma, largura, marcações, angulações, etc. para mostrar o contraste.

---

# Reflita

---
class: inverse, middle, center

# Extensões do ggplot2

---

# O que é uma extensão?

- O `{ggplot2}` é maravilhoso, mas não possui todos os gráficos possíveis.

- Por isso, pessoas do mundo todo desenvolvem extensões para a comunidade usar, que vão desde pacotes com novos temas/cores, geometrias eixos até a [possibilidade de desenhar gatinhos em barras](https://coolbutuseless.github.io/package/ggpattern/index.html)

- A equipe do tidyverse mantém uma [lista curada de extensões do `{ggplot2}`](https://exts.ggplot2.tidyverse.org/gallery/)

---

# Interatividade

---

## Gráficos interativos e estáticos

- Gráficos interativos têm o poder de engajar mais. Todo ser humano gosta de interagir com aquilo que está analisando.

- No entanto, isso vem com um custo: não são todos os documentos capazes de processar visualizações dinâmicas. Em particular, PDF, Word e PPT não rodam esses conteúdos.

- Difculdade da sintaxe.

---
## 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/)).

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/)

---
<br><br>

.pull-left[

```r
gg <- ggplot(mtcars) +
  aes(wt, mpg) +
  geom_point()
plotly::ggplotly(
  p = gg, 
  height = 400
)
```

]

.pull-right[

<div id="htmlwidget-eaec0d477870069c4c7e" style="width:504px;height:400px;" class="plotly html-widget"></div>
<script type="application/json" data-for="htmlwidget-eaec0d477870069c4c7e">{"x":{"data":[{"x":[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],"y":[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],"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.66929133858268,"symbol":"circle","line":{"width":1.88976377952756,"color":"rgba(0,0,0,1)"}},"hoveron":"points","showlegend":false,"xaxis":"x","yaxis":"y","hoverinfo":"text","frame":null}],"layout":{"margin":{"t":25.2054794520548,"r":7.30593607305936,"b":39.1598173515982,"l":37.2602739726027},"plot_bgcolor":"rgba(235,235,235,1)","paper_bgcolor":"rgba(255,255,255,1)","font":{"color":"rgba(0,0,0,1)","family":"","size":14.6118721461187},"xaxis":{"domain":[0,1],"automargin":true,"type":"linear","autorange":false,"range":[1.31745,5.61955],"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.65296803652968,"tickwidth":0.66417600664176,"showticklabels":true,"tickfont":{"color":"rgba(77,77,77,1)","family":"","size":11.689497716895},"tickangle":-0,"showline":false,"linecolor":null,"linewidth":0,"showgrid":true,"gridcolor":"rgba(255,255,255,1)","gridwidth":0.66417600664176,"zeroline":false,"anchor":"y","title":{"text":"wt","font":{"color":"rgba(0,0,0,1)","family":"","size":14.6118721461187}},"hoverformat":".2f"},"yaxis":{"domain":[0,1],"automargin":true,"type":"linear","autorange":false,"range":[9.225,35.075],"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.65296803652968,"tickwidth":0.66417600664176,"showticklabels":true,"tickfont":{"color":"rgba(77,77,77,1)","family":"","size":11.689497716895},"tickangle":-0,"showline":false,"linecolor":null,"linewidth":0,"showgrid":true,"gridcolor":"rgba(255,255,255,1)","gridwidth":0.66417600664176,"zeroline":false,"anchor":"x","title":{"text":"mpg","font":{"color":"rgba(0,0,0,1)","family":"","size":14.6118721461187}},"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.88976377952756,"font":{"color":"rgba(0,0,0,1)","family":"","size":11.689497716895}},"hovermode":"closest","height":400,"barmode":"relative"},"config":{"doubleClick":"reset","modeBarButtonsToAdd":["hoverclosest","hovercompare"],"showSendToCloud":false},"source":"A","attrs":{"184452197722":{"x":{},"y":{},"type":"scatter"}},"cur_data":"184452197722","visdat":{"184452197722":["function (y) ","x"]},"highlight":{"on":"plotly_click","persistent":false,"dynamic":false,"selectize":false,"opacityDim":0.2,"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>

]

---
## Pacotes alternativos

A seguir, uma lista de pacotes/funções alternativos que trazem soluções para visualização de gráficos.

- `highcharter::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. **[avançado]**

- 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/)

- [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 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.

---
<br><br>

```r
library(leaflet)
```

```
## Warning: package 'leaflet' was built under R version 4.2.1
```

```r
leaflet(height = 300) %>%
  addTiles() %>%  # Adiciona a camada gráfica do OpenStreetMap (padrão)
  addMarkers(
    lng = -40.3046969, lat = -20.2760684, 
    popup = "Estamos aqui!!!"
  )
```

<div id="htmlwidget-121de6787aad1f222d73" style="width:504px;height:300px;" class="leaflet html-widget"></div>
<script type="application/json" data-for="htmlwidget-121de6787aad1f222d73">{"x":{"options":{"crs":{"crsClass":"L.CRS.EPSG3857","code":null,"proj4def":null,"projectedBounds":null,"options":{}}},"calls":[{"method":"addTiles","args":["https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",null,null,{"minZoom":0,"maxZoom":18,"tileSize":256,"subdomains":"abc","errorTileUrl":"","tms":false,"noWrap":false,"zoomOffset":0,"zoomReverse":false,"opacity":1,"zIndex":1,"detectRetina":false,"attribution":"© <a href=\"https://openstreetmap.org\">OpenStreetMap<\/a> contributors, <a href=\"https://creativecommons.org/licenses/by-sa/2.0/\">CC-BY-SA<\/a>"}]},{"method":"addMarkers","args":[-20.2760684,-40.3046969,null,null,null,{"interactive":true,"draggable":false,"keyboard":true,"title":"","alt":"","zIndexOffset":0,"opacity":1,"riseOnHover":false,"riseOffset":250},"Estamos aqui!!!",null,null,null,null,{"interactive":false,"permanent":false,"direction":"auto","opacity":1,"offset":[0,0],"textsize":"10px","textOnly":false,"className":"","sticky":true},null]}],"limits":{"lat":[-20.2760684,-20.2760684],"lng":[-40.3046969,-40.3046969]}},"evals":[],"jsHooks":[]}</script>

--- 
<br><br>

```r
library(leaflet)
leaflet(height = 300) %>%
addProviderTiles(providers$Stamen.Toner) %>%  # Adiciona a camada gráfica do OpenStreetMap (padrão)
  addMarkers(
    lng = -40.3046969, lat = -20.2760684, 
    popup = "Estamos aqui!!!"
  )
```

<div id="htmlwidget-44f54e207d9d8e194e69" style="width:504px;height:300px;" class="leaflet html-widget"></div>
<script type="application/json" data-for="htmlwidget-44f54e207d9d8e194e69">{"x":{"options":{"crs":{"crsClass":"L.CRS.EPSG3857","code":null,"proj4def":null,"projectedBounds":null,"options":{}}},"calls":[{"method":"addProviderTiles","args":["Stamen.Toner",null,null,{"errorTileUrl":"","noWrap":false,"detectRetina":false}]},{"method":"addMarkers","args":[-20.2760684,-40.3046969,null,null,null,{"interactive":true,"draggable":false,"keyboard":true,"title":"","alt":"","zIndexOffset":0,"opacity":1,"riseOnHover":false,"riseOffset":250},"Estamos aqui!!!",null,null,null,null,{"interactive":false,"permanent":false,"direction":"auto","opacity":1,"offset":[0,0],"textsize":"10px","textOnly":false,"className":"","sticky":true},null]}],"limits":{"lat":[-20.2760684,-20.2760684],"lng":[-40.3046969,-40.3046969]}},"evals":[],"jsHooks":[]}</script>

---
## Pacotes alternativos

- `highcharter::hcmap()`: variação do `highcharter` para mapas, baseada na biblioteca JavaScript [Highcharts](https://www.highcharts.com/maps/demo). **[avançado]**

- [`{tmap}`](https://github.com/mtennekes/tmap): Pacote focado em mapas temáticos.

#### Tutoriais

- [Construindo mapas com o highcharter](http://jkunst.com/highcharter/highmaps.html)

- [Documentação Highmaps](https://api.highcharts.com/highmaps/)

- [Documentação do tmap](https://github.com/mtennekes/tmap)

---
class: middle, center, inverse

.center[
## <br>Obrigado!
]

.pull-left[
<div class="figure" style="text-align: center">
<img src="img/butantan.png" alt="Foto: OOBr no Instituto Butantan." width="1440" />
<p class="caption">Foto: OOBr no Instituto Butantan.</p>
</div>
]

.pull-right[
<br><br>OOBr na web: