Mostrando postagens com marcador Gráficos. Mostrar todas as postagens
Mostrando postagens com marcador Gráficos. Mostrar todas as postagens

7 de fevereiro de 2023

Cores para visualização de dados: as melhores ferramentas e paletas


Capa do artigo listando os melhores sites para escolher paletas de cores para gráficos e dashboards


A cor é um dos fatores mais impactantes na visualização de dados através de gráficos e dashboards. É um dos recursos visuais que o olho humano absorve por primeiro, e tem alto poder de transmitir significados e conotações diferentes, a depender do público.

E também por isso, a escolha de cores adequadas acaba sendo uma etapa difícil no processo de visualização para quem trabalha com dados. Uma paleta adequada torna o visual bonito e atrativo, com maior chance de leitura e compreensão, ao passo que cores mal escolhidas podem afastar leitores e até causar entendimentos contraditórios.

Para facilitar nesse processo, aqui estão as melhores ferramentas para escolher a paleta de cores ideal para os seus gráficos no excel, google sheets, dashboard no Power BI ou apresentação de slides no powerpoint. Todas elas possuem códigos RGB e hexadecimais para copiar, ajudando tanto quem trabalha com gráficos vetoriais no Figma, Illustrator, Inkscape ou com linguagens de programação como R, Python ou Javascript/CSS.

Paletas prontas para escolher e usar

1. Colors – Chart color generator


Quase desconhecido, esse site japonês é das melhores ferramentas para escolha de paletas de cores bonitas para usar em seus gráficos. Após escolher, a tela de edição permite vários ajustes finos, como brilho, saturação e a substituição de tons da paleta simplesmente arrastando a cor para os lados. 
  • Como usar: é só abrir, escolher uma paleta e usar
  • 55 paletas prontas para escolher
  • A partir de 3 tons, sem limite (a sugestão abre com adequados 7 tons de 3 cores diferentes)
  • É possível escolher as cores principais e o número de tons em cada uma
  • Arrastando a cor na escala gera uma variação de brilho
  • Sliders para ajuste de brilho e vivacidade
  • Color picker: Função de subir a foto 
  • Código para copiar: Hexadecimal e RGB


2. Coolors


O Coolors não é um site específico para visualização de dados, mas pode ser usado com esse fim, além do propósito geral para design gráfico e UX/UI. Ele tem dois modos interessantes de uso: basta escolher uma paleta entre as sugeridas na tela ou ir apertando a barra de espaço para gerar um novo esquema de cor aleatório. 
  • Coolors Pallete Generator: https://coolors.co/generate
    • Como usar: apertar a barra de espaço para gerar uma nova paleta randômica. É possível travar uma ou mais cores para ir gerando combinações.
  • Explore Palletes: https://coolors.co/palettes/trending
    • Como usar: rolar a página e escolher entre as milhares de paletas disponíveis, ordenadas por popularidade dos usuário do site
  • 2 a 10 cores (sugestão inicial com 5 cores)
  • Clique em qualquer cor para copiar o hexadecimal
  • Geração fácil de similares
  • Color picker: Uma URL única para cada cor (exemplo), com checagem de contraste, simulação de daltonismo, esquemas de harmonia com aquela cor e paletas que a utilizam
  • Possibilidade de login para curtir e salvar cores e paletas favoritas
  • Código para copiar: Hexadecimal, RGB, CMYK, HSL, ....

3. ColorBrewer

O clássico dos clássicos. O gerador de paletas de cores para uso em mapas com base nas pesquisas de Cynthia Brewer é uma ferramenta precursora (criada inicialmente em flash!) que provavelmente inspirou todas as outras e ainda é uma mão na roda na hora de escolher uma paleta sem medo de errar.
  • Como usar: escolha tipo de esquema, a quantidade de tons
  • Tipos de esquema de cor: sequenciais, divergentes ou qualitativas
  • Modo sequencial com "single hue" e "multi-hue" (como aquela escala de amarelo a vermelho passando pelo laranja)
  • 3 a 12 tons
  • Modos "colorblind safe", "print friendly" e "photocopy safe" para filtrar as paletas
  • Código para copiar: Hexadecimal, RGB, CMYK, CSS, Javascript
  • Exporta: ASE (Adobe Swatch), paleta para Gimp e Inkscape
http://colorbrewer2.org/

4. ColorSpace



Gerador de paletas a partir de uma única cor. Escolha uma cor ou coloque a cor principal da sua empresa ou organização para gerar 25 esquemas de cor que harmonizem com ela.
  • Como usar: selecione uma cor ou cole o código hexadecimal e gere paletas a partir da cor escolhida
  • Código para copiar: Hexadecimais individuais

5. Adobe Color


O Adobe Color, assim como o Coolors e o ColorSpace, não é dedicada a gráficos, porém é uma ferramenta bem completa, desenhada para todos os profissionais de design e áreas afins. Há o modo de explorar paletas populares entre os usuários, tendências por área (moda, arquitetura, design gráfico, UX/UI, ilustração design de jogos...)
  • Como usar: explore as paletas prontas e escolha uma, ou use o gerador para customizar
  • Possibilidade de login para salvar favoritas
  • Ajuda com harmonia de cores no gerador
  • Busca por palavras chave
  • Código para copiar: Hexadecimal, CSS, LESS, SASS, XML
  • Exporta: ASE, JPG

Paletas para criar e ajustar

Essas ferramentas não tem paletas de cor prontas para escolher, portanto são para um uso mais avançado por profissionais de visualização de dados, mas nada que alguns testes não sejam suficientes para chegar em resultados interessantes. 

6. Viz Palette


Ferramenta para auxiliar na geração de paletas para visualização de dados
  • Usa o colorbrewer, o chroma.js e o colorgorical
  • Permite simular deficiências para ver cores
  • Código para copiar: hexadecimal, rgb ou hsl
  • Projeto do Elijah Meeks & Susie Lu
http://projects.susielu.com/viz-palette

7. Chroma.js Color Scale Helper


Ferramenta pra auxiliar na geração de paletas sequenciais 

https://gka.github.io/palettes/#colors=lightyellow,orange,deeppink,darkred|steps=7|bez=1|coL=1

Outros recursos de cor para programação


Geradores de gradiente

Colorpicker for data

Gerador de gradientes (ou degradês) de cor a partir das duas cores das extremidades

  • Como usar: Selecione duas cores e crie uma escala
  • Adicione quantos steps quiser
  • Seletor visual (Hue-Lightness, Chroma-Lightness, Hue-Chroma)
  • Código para copiar: Hexadecimal
  • Preview aplicado no mapa
http://tristen.ca/hcl-picker/


Color Space


  • Como usar: insira o código ou selecione as 2 ou 3 cores e gere o gradiente
  • Código para copiar: CSS
  • Preview aplicado no background da página

Pixel Gradient Maker

Gerador de divertidos gradientes de cor pixelados

  • estilo pixel-art
  • gerador randômico de gradientes
  • construído com o glitch, ferramenta para construção de apps online
https://pixel-gradient-maker.glitch.me/

Veja também:

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.




26 de novembro de 2017

Visualização de dados



Visualização de dados básica: como formatar dados para cada tipo de gráfico e visualizar usando ferramentas grátis como Raw e Tableau. Também alguns princípios básicos do design da informação aplicados à visualização.


Workshop de visualização de dados no Coda.Br 2017, 2ª Conferência Brasileira de Jornalismo de Dados.


Slides



Abrir slides em outra janela

Arquivos de exemplo


Baixe o Excel
tabela-exemplo-dataviz.xlsx

Ou abra no Google Docs
tabela-exemplo-dataviz (Sheets) (Arquivo > Fazer uma cópia)

Ferramentas


Raw Graphs

Tableau Public



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)

11 de agosto de 2014

Testando ferramentas: fazer gráficos simples

Com Google Docs (Spreadsheets)

https://docs.google.com/spreadsheets

Pontos negativos

• Não adiciona rótulos numéricos (números próximos aos gráficos, labels to data points, data point values)
• Sem espaço para fonte / crédito / observações
• Gráfico de linha: Não tem muita opção para editar a linha do tempo (eixo horizontal)
  • datas ficam não ficam sempre em português
  • as datas mostradas não são as dos dados, são datas com intervalo regular
• Gráficos de barras
  • não mostram o rótulo numérico das barras. No gráfico de linha tudo bem, mas no gráfico de barras fica muito esquisito. Parece que a solução é uma gambiarra pra adicionar os números como anotação (precisa duplicar os números em uma segunda coluna e formatar como texto). Mas a gambiarra só funciona pro gráfico de linha (onde não precisava). No gráfico de barra nem funciona (parece que via API tem uma gambiarra que funciona)
  • barras horizontais: espaço muito curto no eixo vertical (nomes ficam cortad...)
  • barras verticais: assim os nomes cabem no eixo horizontal.

Pontos positivos

• armazenado nas tabelas do Google Docs
• é o mais limpo e neutro: sem créditos, sem links, sem frescura.
• datas irregulares ficam corretamente espaçadas
• se atualizado na tabela, os gráficos embedados são atualizados









Com Data Wrapper

https://datawrapper.de/

Pontos positivos

• Tem espaço para fonte / crédito
• Gráficos corretos, fáceis de fazer, interativos e embedáveis.
• Vários tipos de gráfico.
• Gráficos ficam armazenados em uma conta grátis.
• Gráficos de barras: tem rótulo numérico (diferente do GDocs)

Pontos negativos

• Espaço é pequeno para observações maiores, como metodologias
• Tem versão em português, mas publicado ficam algumas coisas em inglês (Created with, Source, Get the data)









Com Chart Builder

http://quartz.github.io/Chartbuilder/

• Imagem estática apenas.
• Exporta apenas a tabela em html.





Candidato17/abr
Dilma Roussef (PT)37%
Aécio Neves (PSDB)14%
Eduardo Campos (PSB)6%
Pastor Everaldo (PSC)2%



Com Infogram

https://infogr.am/

Pontos negativos

• Pago
• Estilo: pouco neutro (sim, foi feito para ser bonitinho e amigável). E parece haver poucas opções para alterar (será só na versão grátis?)

Pontos positivos

• Fácil de mexer
• Boa interface
• Várias opções de configurações dos gráficos
• Funciona com copiar e colar e com carregar a partir de arquivo




21 de março de 2014

Que tipo de gráfico usar?

Uma pergunta difícil, que às vezes incomoda até quem trabalha o dia inteiro fazendo gráficos, infográficos e visualizações de dados. Qual o melhor tipo de gráfico devo escolher para representar meus dados? Gráfico de pizza, de barra, de linha, de fluxo, de bolha,...?
A resposta, basicamente, depende de duas coisas:

Que tipo de informação você tem?

  • temporal (dia, mês, ano)
  • espacial/geográfica (rua, cidade, país, coordenada)
  • categorias (idade de diferentes pessoas, gastos de diferentes setores, índices de diferentes países, quantidade de frutas por tipo)

O que você deseja mostrar?

  • comparar uma categoria com outra (tempo de 0-100km/h em diferentes carros)
  • mostrar em relação ao todo (um partido gasta um terço da verba da cidade)
  • rankear (quem mais come chocolate)
  • comparar com a média (desempenho de um time está abaixo da média)
  • mostrar escala (o quão grande/pequeno, muito/pouco, longe/perto é alguma coisa)
  • mostrar evolução ao longo do tempo (violência aumentou nos últimos anos)
É claro que na maioria das situações você vai ter pelo menos dois tipos de informação (ex.: gastos de diferentes setores por ano) e às vezes vai querer mostrar mais de uma coisa (um índice de cada país e a relação geográfica entre eles). Aí entram outras variáveis das quais a sua resposta vai depender:
  • nível do público, audiência, leitor
  • complexidade: quantidade de relações, interpretações, conclusões que você quer que o seu leitor seja capaz de fazer com os dados que você vai apresentar
Isso vai delimitar bastante suas escolhas para o tipo de gráfico a escolher, principalmente se você quer mostrar muitas coisas. Se o seu leitor não está acostumado com gráficos, provavelmente vai ser difícil que ele compreenda corretamente o seu gráfico que mostra ao mesmo tempo: o gasto somado de todos os partidos + gasto individual de cada um + evolução ao longo do tempo + valor da variação + médias + ...

É possível que dê pra construir um gráfico assim. Mas ele vai precisar ser tão bem feito que vai levar muitas horas para montar e vai levar tanto tempo para ser interpretado pelo leitor que não vai valer a pena. Melhor seria mostrar em duas ou três partes, ou diminuir o número de informações pra mostrar. Afinal, só porque os dados existem não quer dizer que é interessante você querer mostrar todos. Por isso uma parte muito importante do processo de fazer infográficos é editar e filtrar as informações antes de pensar na forma que elas vão tomar.

Guias RÁPIDOS para escolher o tipo de gráfico

Enquanto não coloco exemplos visuais pra ilustrar o que falei acima, aqui vão bons guias para ajudar na escolha do gráfico:

Se você já sabe bem o que quer:


Se você não sabe nada:


Se você lê inglês na boa e quer uma explicação mais detalhada:




Guias COMPLETOS para escolher o tipo de gráfico

Agora ficou fácil. Ann K. EmerySeverino Ribecca se saíram muito bem em criar uma biblioteca completa de tipos de gráfico e visualização para todas as situações. Ambos os catálogos tem pra cada tipo:

  • definição e descrição
  • explicação de quando usar (é bom pra...)
  • exemplos ilustrados
  • softwares que podem ser usados pra criar o gráfico
  • tutoriais de como fazer

EMERY’S ESSENTIALS Chart Choosing Tool

annkemery.com/essentials

annkemery.com/essentials

The data visualization catalogue

datavizcatalogue.com

datavizcatalogue.com





23 de dezembro de 2013

Gastos dos deputados em 2013

Inaugurando o blog e o arquivo de dados públicos da Gazeta do Povo (aqui no Drive, ou na aba Dados Abertos), publicamos aqui os gastos dos deputados paranaenses ao longo de 2013.

Os dados foram hackeados do Portal da Transparência da Assembleia Legislativa, que além de publicar os dados em PDFs individuais por mês e por deputado (o que dá 54 por mês x 12 = 648 arquivos para baixar se quiser saber quanto foi gasto no ano) travados com senha, tem dificultado mais o acesso por retirar do ar os arquivos referentes a meses e anos anteriores.

Enquanto a lei da transparência ainda patina no Paraná, baixe aqui os arquivos que deveriam estar disponíveis oficialmente:


Baixe os gastos dos deputados do Paraná em 2013

Gráficos

Mês a mês

Total no ano