Mostrando postagens com marcador Datawrapper. Mostrar todas as postagens
Mostrando postagens com marcador Datawrapper. Mostrar todas as postagens

26 de maio de 2020

Gráficos online que atualizam automaticamente

Como fazer gráficos que atualizam dinamicamente quando seus dados mudam? Ou seja, criar um gráfico que se modifique sozinho quando os dados atualizarem. Quem trabalha com dados no jornalismo precisa em algum momento criar um monitor para acompanhar determinado assunto, mantendo as informações atualizadas com certa frequência, puxando direto da fonte oficial ou de uma planilha intermediária. Aí surge a necessidade de criar uma visualização que se alimente desses dados e se atualize sozinha sem que você tenha que toda vez abrir para atualizar os gráficos.

Com os dados sobre o Coronavírus, muita gente precisou criar mais gráficos para acompanhar a evolução da epidemia, e manter os gráficos atualizados se tornou uma dificuldade à parte. Testei muitas fontes e programas para criar um monte de gráficos automatizados neste período até chegar em soluções sustentáveis, e posso indicar 3 ferramentas online gratuitas para criar gráficos que se alimentam de dados dinâmicos: Google Sheets, Datawrapper e Tableau Public. Em todas elas você pode usar o Google Docs como fonte dos dados ou um CSV externo.

1. Google Docs (sheets)

https://docs.google.com/spreadsheets/u/0/

Mapas e gráficos do Google Docs com atualização automática, usando os dados inseridos na mesma planilha


Prós:

  • Atualização rápida (em torno de 5 min, se não for imediata)
  • Gráficos no mesmo lugar onde estão os dados (pode ser uma vantagem para manuntenção)
  • Leves (carregamento rápido quando embedado)

Contras:

  • Gráficos são mais simples
  • Gráficos não são responsivos (se você quiser atender diferentes tamanhos de tela, tem que duplicar e ajustar o tamanho do gráfico)
  • Mapas muito básicos (não dá pra usar só o Brasil, por exemplo, só a América do Sul inteira) e um pouco lentos para carregar
  • A fonte tem que ser o próprio google Sheets (você pode até usar uma fonte externa, mas importando para o Google Docs, com funções como IMPORTXML, IMPORTCSV ou mesmo IMPORTHTML, para elementos table)

Frequência de Atualização:

Imediata (ou geralmente em até 5 minutos)

Como fazer um gráfico dinâmico no Google Sheets

  1. Insira seus dados em uma tabela do Sheets
  2. Selecione os dados
  3. Vá no menu "Inserir gráfico"
  4. O gráfico já aparece na tela, com sugestão de formato de acordo com seus dados. Faça todos os ajustes no editor de gráfico, na barra lateral.
  5. Publique. No botão de opções (três pontinhos) no canto do gráfico, há uma opção Publicar. No popup, escolha Incorporar, e copie o código de embed

2. Datawrapper

https://www.datawrapper.de/

Método de conexão de dados do Datawrapper com o Google Sheets ou um CSV externo, para manter os dados atualizados no gráfico publicado


Prós:

  • Aceita tabelas do Google Docs (existe o modo importação, que deixa os dados estáticos, e o modo "Link external dataset", o mesmo caminho para CSVs externos, que é a opção que mantém seus dados atualizados)
  • Aceita CSVs externos, salvos em algum servidor web
  • Gráficos muito versáteis, de diversos tipos
  • Bonito, visual interessante
  • Responsivo (adapta muito bem em tamanhos diferentes, tem até ajustes específicos mobile/desktop)

Contras:

  • Não é totalmente personalizável.
  • A interatividade é simples (tooltips). Mas não dá para fazer filtros ou seleções
  • O crédito precisa aparecer na versão grátis

Frequência de Atualização:

A cada minuto no primeiro dia após a publicação. Depois de 24h, é atualizado de hora em hora (para resetar a contagem, basta abrir o gráfico para republicar).
Para forçar a atualização, precisa abrir o gráfico, e ir na aba "Check & Describe" para puxar os dados novos (não precisa republicar o gráfico)

Como fazer um gráfico dinâmico no Datawrapper

  1. Crie um novo gráfico (New Chart, New Map ou New table)
  2. Na tela de Upload Data, escolha "Link external dataset" (a opção "Import Google Spreadsheet" não vai manter seu gráfico atualizado, ela só importa os dados uma vez)
  3. Cole o link de um CSV externo. No caso de uma tabela do Google, ative o compartilhamento da planilha antes (Compartilhar > Copiar link > Mudar para qualquer pessoa com link. Depois disso, pode copiar até o link pela barra de endereços)
  4. Siga as etapas para criar o gráfico
  5. Finalize em "Publish & Embed" para copiar o código

Exemplo de gráfico automático com Datawrapper:

3. Tableau

https://public.tableau.com/

Método de conexão de dados do Tableau Public com o Google Sheets, para manter os dados atualizados no gráfico publicado


Prós:

  • Gráficos mais complexos e dashboards
  • Possível criar filtros e permitir maior interatividade com os gráficos
  • Possível criar cálculos, agrupamentos e transformações com os dados

Contras:

  • Pesado (carregamento mais lento)
  • Curva de aprendizado maior
  • Não é online (tem para windows e mac)

Frequência de Atualização:

1 vez por dia. Para forçar a atualização, precisa estar logado na conta do Tableau Public e clicar em "Solicitar atualização", no rodapé do gráfico, que fica no seu perfil.

Como fazer um gráfico dinâmico no Tableau Public

  1. Connect to Data > Google Sheets
  2. Dê as permissões no navegador
  3. Escolha a planilha da sua conta
  4. Crie a visualização
  5. Save to Tableau Public...
  6. Deixe marcada a opção "Manter meus dados sincronizados..." ("Keep my data in sync with Google Sheets and embed my Google credentials")

Exemplo de gráfico automático com Tableau

Mapa e evolução do coronavírus por cidades no Brasil

4. Flourish (menção honrosa)


Método de upload de dados para criar visualizações de dados com o Flourish (CSV, TSV, Json, GeoJson)


O Flourish é uma ferramenta sensacional. Possui interatividades e animações (o modelo da famosa bar chart race), vários tipos de gráficos interessantes, e é versátil nas aplicações, como a possibilidade de criar "histórias", com uma sequência de gráficos, ou até mesmo embedar um gráfico dentro do outro.

Mas o Flourish não tem, até o momento, um método simples de conexão com uma fonte de dados dinâmica. Há apenas a opção de inserir dados via Copiar e Colar, ou upload de arquivos Excel, CSV, TSV, Json e Geojson. Quando lançaram o modelo de Growth Comparison, para comparação do crescimento da Covid-19 entre países, vi que eles possuem API. Para quem vai construir o gráfico via API, é possível usar dados dinâmicos via Json, por exemplo, mas aí depende de saber programar, diferente das outras soluções.




12 de agosto de 2014

Gráficos simples com Datawrapper

Usando a ferramenta alemã Datawrapper para fazer gráficos simples (e interativos) para a web. Abaixo como ficam os gráficos publicados, o passo a passo de como fazer e na sequência um vídeo do passo a passo.

Pesquisa Ibope para presidente (7/ago)

Intenção de voto em 7/ago, em %

Evolução da intenção de voto, em %

Fonte: Ibope. Metodologia: Pesquisa realizada entre 3 e 6 de agosto de 2014 em 17 municípios. Margem de erro: dois pontos percentuais. Nível de confiança: 95%. Pesquisa registrada no TSE sob o protocolo nº BR-00308/2014.




Como fazer

0. Coletar e organizar os dados.

Recomendo manter uma planilha organizada com os dados (resultados da pesquisa) e os metadados (fonte, metodologia, ...). Assim fica mais fácil e confiável para copiar e conferir as informações que vão ser visualizadas.

Para a pesquisa simples (com uma data): Gráfico de barras
Formato da tabela para gerar o gráfico de barras

Para a pesquisa de evolução (várias datas): Gráfico de linhas
Formato da tabela para gerar o gráfico de linhas

No Datawrapper o processo é bem parecido para os dois tipos de gráfico. Para o gráfico de linha só há uma diferença na aba Personalizar, mas está explicada abaixo marcada com "Atenção!".

1. Colar os dados no Datawrapper

2. Conferir se ele entendeu os dados certos

• cada tipo de informação está em uma coluna?
• o cabeçalho foi identificado? (se a tabela tem cabeçalho esta opção tem que estar marcada: "A primeira linha são os rótulos")
• os números que aparecem nessa tabela são os mesmos que foram coletados antes?


3. Criar o gráfico

• Escolha o tipo de gráfico: barras (1 data) ou de linha (várias datas)

• Edite as cores. Escolha uma neutra (cinza) ou escolha uma para cada categoria (partido):


• Atenção: ajuste extra para gráfico de linhas!
Marque "Rótulos diretos" e "Estender até o zero"






• Ajuste o tamanho para não ficar espaço sobrando

• Deixe sem título, descrição e fonte, para adicionar direto pela página, antes e depois do gráfico.

4. Publicar e incorporar (embed)

Copie o código e cole no meio da matéria.

5. Adicione os títulos e metadados ao código

Para essa etapa vai servir aquela planilha com os dados organizados.
Não esqueça de adicionar:
• Título
• Descrição e unidade dos números
• Créditos (Fonte)
• Metodologia e observações


Editando os gráficos já publicados

Você pode editar todos os gráficos já produzidos.
Clique no seu nome de usuário ou em 'Meus gráficos > Todos os gráficos' para abrir sua galeria, que vai ter tudo o que você já fez, organizados por ordem de modificação.

Clique no gráfico para editá-lo.
(Gráficos sem nome ficam com um código esquisito. Preferi fazer o gráfico sem título por achar que o estilo de título padrão do Datawrapper ficaria muito grande no contexto de uma página de matéria. Mas se achar que não tem problema, use o título deles mesmo. Fica até melhor para organizar os gráficos já publicados dentro da galeria)


Após editá-lo, clique em Gráfico Re-publicado para atualizar as alterações





Se o código já foi adicionado em alguma página publicada, confira se as alterações foram atualizadas. Se não, é mais garantido copiar novamente o código e substituir o antigo pelo novo.






Passo a passo em vídeo

Gráfico de barras no Datawrapper (veja direto no Youtube)