Minha Primeira Experiência com React.js + D3.js para Visualização de Dados

Sobre a Gráfico

Antes de tudo, clique aqui (este gráfico não foi feito para dispositivos com telas pequenas, por favor use desktop) e interaja com a visualização de gráfico de linhas das temperaturas de Florianópolis. Neste gráfico você poderá comparar as temperaturas entre dois anos distintos, depois de escolher umas das categorias: máximas, mínimas e médias. Passe o mouse em cima do ponto vermelho para ver o dia que teve a temperatura mais alta, ou no ponto azul pra ver o dia que teve a menor temperatura do ano em questão.

O repositório Github do projeto pode ser acessado aqui.

Os dados usados para gerar esta visualização podem ser obtidos no portal do Instituto Nacional de Meteorologia.

Os tratamentos que apliquei aos dados podem ser vistos aqui neste jupyter notebook.

A Trajetória

Já faz algum tempo que me interesso por visualizações de dados interativas pelo browser. No lugar onde trabalho consigo fazer isso pelo Kibana, mas lá eu fico limitado aos recursos dessa ferramenta.

Numa pesquisa rápida no google sobre “bibliotecas para visualização de dados na web” você provavelmente irá se deparar com D3.js. Com esta biblioteca o “céu é o limite”, você pode “desenhar” o gráfico que desejar, tendo total controle sobre os mínimos detalhes. 

Um projeto famoso (virou até livro) que mostra o poder do D3 é o Dear Data, onde as designers de informação Giogina Lupi e Stefanie Posavec compartilham as visualizações que elas criaram durante 1 ano. Elas começam esboçando a ideia usando papel e caneta e depois partem para o D3.

Mas esse total controle tem um custo, a curva de aprendizagem desta ferramenta é considerada “muito íngreme", o que acaba sendo desincentivador.  Obviamente se você precisa só criar um dash rápido com visualizações já bem conhecidas, D3 não é pra você, mas se você quer brincar desenhando gráficos mirabolantes, talvez ele seja uma boa opção.

Na época que me interessei por D3 (2016 mais ou menos), ainda não havia muito conteúdo gratuito para ajudar no aprendizado, mas alguns meses atrás me apareceu uma recomendação do vídeo Data Visualization with D3, JavaScript, React - Full Course [2021]. Neste curso, o cara combina D3.js e React.js. Mal comecei o vídeo e logo percebi que eu não tinha o background necessário (mesmo o cara falando que não precisava de background algum) que era: css, javascript e react.js.

Decidi comprar um curso na Udemy de React chamado Curso de React.Js + Next.Js completo do básico ao avançado e, depois de fazer a parte de HTML, CSS e React básico, voltei a me aventurar com o D3 nas minhas férias, mas dessa vez usando o livro Fullstack D3 and Data Visualization: Build beautiful data visualizations with D3 da Amélia Wattenberger.

É um livro bem handson e o primeiro capítulo a autora já começa com a construção de um gráfico de linhas das temperaturas de Nova York no ano de 2018 (veja figura abaixo). 

Ela convida para que nós mesmos usemos dados de temperaturas da nossa região, e foi o que fiz. Busquei por dados das temperaturas da cidade de Florianópolis e parei no portal Instituto Nacional de Meteorologia onde obtive o que eu precisava.

Mas aí vieram mais ideias:

• Por que não criar tooltips indicando os dias da maior e menor temperatura do ano?

• Por que não permitir ao usuário escolher dados de outros anos?

• Por que não ter a escolha de ver entre temperaturas médias, mínimas e máximas?

• Por que não ser capaz de comparar os dados entre dois anos distintos? 

E assim foi surgindo o gráfico que vocês viram (clique aqui caso ainda não tenha visto) lincado logo no início deste post.

Como D3 + React se complementam?

No livro Fullstack D3 and Data Visualization: Build beautiful data visualizations with D3, a Amélia Wattenberger não usa React (apenas uma sugestão do uso React + D3 é mencionado no parte final do livro).

Quando no livro pedia para se usar D3 para manipular o DOM do HTML e desenhar o gráfico usando SVG eu pensava: "tá, mais isso daqui dá pra fazer direto pelo react".

Com isso, eu fui construindo o gráfico usando React e esperando o momento em que o D3 seria indispensável. No final das contas, só usei uma função do D3 para escalonar os dados de data e temperaturas para pontos x e y em pixels no quadro SVG (que também não é indispensável).

Pesquisando um pouco mais sobre essa situação (no ecossistema React o D3 ser dispensável para muitas coisas) eu acabei parando num artigo intitulado Using React with D3, que está no blog da própria autora do livro que estou usando. Lá ela comenta sobre a "disputa" entre React e D3 para manipular o DOM. Ela diz:

"Essas duas tecnologias são notoriamente difíceis de combinar. O cerne da questão é que ambos desejam lidar com o DOM."

Ela continua dizendo quais as vantagens de usar React quando possível:

• Declarativo em vez de imperativo: O código descreve o que está sendo desenhado, em vez de como desenhar.
• Menos Código: Nosso segundo componente Círculo (exemplo que ela dá no artigo do blog dela) tem menos de dois terços do número de linhas de nossa primeira iteração.
• Menos hacky: React é, principalmente, uma biblioteca de renderização, e tem muitas otimizações para manter o desempenho de nossos aplicativos da web. Ao adicionar elementos usando d3, estamos hackeando o React e, essencialmente, temos que lutar contra essas otimizações. Hackear sua estrutura JS é uma receita para futuras frustrações, especialmente se a API da estrutura mudar.

Conclusão

E aí? Por que usar este D3 então?

Bem, como mencionei, eu ainda não lidei com nenhum visualização mais cabulosa onde o uso do D3 para manipular o DOM seja justificável. Espero que logo mais eu me depare com um caso assim e, é claro, compartilharei com vocês o aprendizado.

Até a próxima e boas festas a todos!