Visualização de dados com d3.js

Andre

Jun 5, 2021 3 minutos de leitura

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.