Visualização de dados com d3.js

Neste post, apresento algumas figuras confeccionadas por meio do pacote d3.js.

De acordo com o d3js.org, “esse pacote é uma biblioteca de Javascript para manipular documentos baseados em dados. O D3 ajuda a dar vida aos dados usando HTML, SVG e CSS.”

Gráfico de linha

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.

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

Scatter plot

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

Gráfico de barra

Figura 4: gráfico de corrida de barras.

Média móvel

Figura 5: 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).

Gráfico de área

Figura 6: stream chart plot.

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] Scott, A. Interactive Data Visualization for the Web (O’Reilly Media, 2013)

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

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

comments powered by Disqus
Anterior

Relacionados