Como criar gráficos interativos?

O que são gráficos interativos?

O utilizador pode escolher que parte dos dados pretende consultar e em que formato — normalmente, pode optar por gráficos de linhas, colunas, tabelas ou até por um mapa-mundo.

Por que razão vale a pena criar gráficos interativos?

De acordo com um relatório da MarketingLTB:

• 62% dos utilizadores preferem content interativo,
• 72% dos consumidores lembram-se melhor das marcas que utilizam conteúdos interativos,
• 91% dos compradores preferem content visual e dinâmico a um bloco de texto estático.

Existem também benefícios práticos:

1. Os gráficos interativos podem ser ligados a uma fonte de dados, atualizando-se automaticamente. O artigo mantém-se sempre atual e a empresa não precisa de gastar tempo nem orçamento a acompanhar a alteração dos conteúdos.
2. O autor do gráfico pode adaptar facilmente as cores ou o tipo de gráfico predefinido à sua empresa. Basta configurar estes elementos uma vez para gerar rapidamente gráficos consistentes e apelativos.
3. Nas soluções mais avançadas, o utilizador pode exportar dados, acompanhar alterações e até aceder a uma API. As possibilidades podem ser continuamente alargadas.

É importante salientar que estas vantagens não se aplicam apenas às visualizações: os conteúdos estáticos também podem ser ligados a uma fonte de dados, permitindo atualizar não só os elementos gráficos, mas também frases completas.

Como criar gráficos interativos?

Dependendo do nível de conhecimentos, existem três soluções disponíveis:

Ferramentas prontas a utilizar, como o Canva

O exemplo mais conhecido é o Canva, mas o funcionamento é semelhante na maioria das plataformas deste tipo.

Como funciona na prática?

1. Escolha do modelo de gráfico — depois de iniciar sessão, escolhemos o tipo de visualização (de linhas, barras, circular, etc.). A interatividade é predefinida e inclui normalmente o hover (informações apresentadas ao passar o cursor) ou a alternância entre diferentes versões dos dados.
2. Introdução dos dados — infelizmente, os dados têm de ser adicionados manualmente (colando uma tabela) ou importados de um ficheiro CSV. Esta solução funciona bem para conjuntos de dados simples, mas torna-se rapidamente problemática quando existem muitos dados ou atualizações frequentes.
3. Personalização do aspeto — podemos alterar as cores, os tipos de letra, as descrições dos eixos ou a legenda.
4. Incorporação do gráfico — exportamos o gráfico interativo como iframe ou como uma ligação para incorporação.

Esta solução é rápida, mas tem limitações claras: não permite atualizar automaticamente os dados através de uma API, não oferece lógica avançada (filtros ou dependências entre séries) e proporciona um controlo limitado sobre a acessibilidade e o desempenho. É adequada para conteúdos de marketing simples, mas menos indicada para content escalável, eficaz e autónomo.

Plataformas de dados, como a Monitly

Neste caso, basta escolher os dados que pretende incluir no artigo:

Depois de escolher o conjunto de dados, pode personalizar o aspeto e clicar em “Export”. Para o artigo, deve selecionar “Embed”, de modo a incorporar facilmente um gráfico interativo que se atualiza automaticamente.

Também pode exportar o gráfico para outros fins:

• PNG — como imagem estática para um documento ou apresentação,
• CSV — para uma análise mais aprofundada dos dados, por exemplo, através de IA,
• API — para utilizar os dados na sua aplicação,
• Animation — para gerar uma animação para o YouTube ou o TikTok.

A Monitly oferece uma solução pronta para visualizar gráficos e também atualiza os dados. No entanto, isto significa que só pode utilizar os dados disponíveis na plataforma. Existem vários milhões de estatísticas de fornecedores como o Eurostat, a OCDE, a OMS ou o dados.gov.pt.

Se, pelo contrário, quiser visualizar os seus próprios dados, terá de escolher ferramentas como o Canva ou avançar para a solução seguinte.

Programar gráficos interativos de raiz

Como funciona o processo do ponto de vista técnico?

1. Preparação dos dados — os dados têm de ser estruturados, normalmente em formato JSON ou CSV. Em conjuntos de dados grandes, é frequentemente necessário limpar, agregar e normalizar os dados (os chamados processos ETL). Os bons gráficos começam por uma base sólida: uma base de dados bem preparada, por exemplo, em PostgreSQL.
2. Escolha da biblioteca — o Chart.js é utilizado com frequência devido à sua simplicidade e rapidez de implementação. O D3.js é mais flexível, mas também mais exigente, enquanto o Recharts oferece um compromisso equilibrado (foi o que utilizámos para apresentar os gráficos interativos neste artigo). Todas estas opções exigem conhecimentos de JavaScript e fundamentos de frontend, embora atualmente a IA reduza significativamente a barreira de entrada.
3. Lógica da interação — consiste em definir o que acontece quando o utilizador clica ou passa o rato, como os dados mudam após a aplicação de filtros, que elementos pode modificar visualmente, entre outros aspetos.
4. Integração com dados em tempo real — para que o gráfico seja atualizado, é necessário ligá-lo diretamente à API da sua base de dados.

Este último elemento é particularmente importante: um gráfico é tão bom quanto a base de dados que utiliza. Por isso, ao obter dados de uma fonte externa, vale a pena configurar um script, por exemplo em Python, que seja executado diariamente (por exemplo, através do GitHub Actions gratuito) para recolher os dados mais recentes.

Os gráficos próprios oferecem o maior nível de autonomia, mas qualquer alteração — mesmo a mais pequena — exige intervenção no código. A isto juntam-se a manutenção da base de dados e o acompanhamento constante da atualização e da qualidade dos dados. Por isso, esta solução só deve ser escolhida quando o projeto atingir uma escala considerável.