Visualização de dados com d3.js

De acordo com Crameri et al., “a representação precisa dos dados é essencial na comunicação científica” [1]. De fato, a escolha do tipo mais adequado de visualização de acordo com as características dos dados é imprescindível para comunicar os resultados de uma pesquisa científica. Por exemplo, o gráfico abaixo mostra a evolução temporal do número de reprodução efetivo $R(t)$ referente ao espalhamento da COVID-19 em Maringá. Ao representar valores acima de um, que indicam o aceleramento da propagação do vírus, em vermelho, e valores abaixo de um, que indicam o desaceleramento da propagação, em verde, podemos comunicar visualmente o ritmo de transmissão do vírus.

Figura 1: gráfico de linha com intervalo de confiança e cores diferentes definidas por um limite. Valores acima do limite são coloridos de vermelho, enquanto valores abaixo desse mesmo limite são coloridos de verde. Visualização inspirada no site rt.live.

O tamanho dos elementos também faz diferença quando representamos dados. A figura abaixo mostra o valor das minhas sequências ouvindo as mesmas faixas de determinado artista ou faixas únicas durante o ano de 2022. O tamanho dos marcadores varia com o tamanho da sequência, comunicando visualmente o tamanho da sequência.

Figura 2: scatter plot com tamanho do marker variável de acordo com valor da variável (com botão para troca de categoria).

Em outro exemplo, a figura abaixo mostra o volume de faixas dos dez artistas mais ouvidos por mim durante 2022. Nesse contexto, faz sentido utilizar um gráfico de fluxo (stream chart) uma vez que, pela sua utilização, é possível transmitir a ideia de volume.

Figura 3: stream chart plot.

A seguir, apresento mais algumas figuras confeccionadas por meio do pacote d3.js e os respectivos tutoriais, além de alguns recursos que podem auxiliar no aprendizado de visualização de dados em geral. O código fonte para os gráficos podem ser acessados nesta página.

Gráfico de linha

Figura 4: figura com vários paineis (com botão para troca de categoria). Cada painel contém um gráfico de linha preenchido.

Gráfico de barra

Figura 5: gráfico de corrida de barras.

Média móvel

Figura 6: gráfico de barras com média móvel e linha do tempo adjacente (com botão para desativação da média móvel).

Mapa

Figura 7: mapa com escala de cor dependente da amplitude da variável (com botão para troca de categoria).

Rede

Figura 8: force-directed graph.

Recursos

- colorbrewer2

- d3-time-format

- SVG Attribute reference

- D3 6.0 migration guide

- How to Resize an SVG When the Window is Resized in d3.js

- Scatterplot with tooltips

- Multiline chart

- Multiline chart with mouseover

- Barplot

- Barplot with button to change input

- Barplot with clickable legend

- Grouped barplot

- Circular barplot

- Bar chart race

- Streamplot

- Streamplot with transitions

- Map

- Force-directed graph

- rt.live

Referências

[1] F. Crameri, G. E. Shephard, P. J. Heron, The misuse of colour in science communication. Nature Communications 11, 5444 (2020).

[2] Scott, A. Interactive Data Visualization for the Web (O’Reilly Media, 2013)

[3] Wilke, C. O. Fundamentals of Data Visualization (O’Reilly Media, 2019)

comments powered by Disqus