Mostrando postagens com marcador Visualização de dados. Mostrar todas as postagens
Mostrando postagens com marcador Visualização de dados. 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:

8 de agosto de 2022

Mapa de calor no Looker Studio: como criar e configurar um heatmap

 

Crie e configure um mapa de calor no Looker Studio

No relatório do Looker (antigo Google Data Studio) é possível criar alguns tipos de mapa utilizando dados geográficos que você tenha em na sua fonte de dados: 
  • Mapa de balão (bubble map), 
  • Mapa preenchido (Filled map), 
  • Mapa de calor (heatmap) e 
  • Mapa de linha (Line map). 

Veja no tutorial abaixo como criar cada um deles e como configurar as cores e os estilos. 



Resolver pontos fora do lugar no mapa

A geolocalização automática do Google pode não ficar do jeito que você precisa pois só é possível adicionar um campo da tabela para identificar o local.




Para consertar isso e aumentar a precisão dos dados é possível concatenar dois ou mais campos da tabela em um campo único para que o Google Maps consiga localizar. Você pode ter nomes de rua, bairros, cidade, latitude, longitude, estado, país, qualquer combinação funciona. Crie um campo calculado com a fórmula  CONCAT e arraste esta nova variável no campo Local do Looker Studio: 

=CONCAT([Estado], [País])

Baixe os dados

Esta é a tabela de exemplo utilizada no vídeo (Homicídios no Brasil por estados em 2015). Você pode abrir o link e ir no menu Arquivo > Fazer o download, ou Fazer uma cópia.

https://docs.google.com/spreadsheets/d/1nwMy4SqfyjSFriCeV7EfHfkF81WDfSjfK71xpwnezKY/edit?usp=sharing

Veja também




30 de outubro de 2019

Aula DDJ UFPR

Aula sobre visualização na disciplina de Jornalismo Investigativo e de Dados na UFPR, com a prof. Myrian Del Vecchio, 30 out 2019.

1. Exemplos

Alguns projetos interessantes envolvendo dados na redação da Gazeta do Povo (2010-2019): reportagens investigativas, infográficos para matérias, páginas com dados automatizados.



Abrir slides em outra janela
(Links quebrados: Retratos PR, 1000 homicídiosEleições 2014)

2. Gráfico de corrida eleitoral


3. Teoria rápida



Abrir slides em outra janela: Visualização de dados - teoria rápida

4. Raw





Abrir slides em outra janela: Gráficos básicos com Raw Graphs

Mais detalhes sobre como formatar uma tabela (slide 15 em diante)

5. Extras

Links e outras dicas para trabalhar com dados

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