Data Visualization: Uma Arte Objetiva
Em um mundo com uma infinidade de dados, entenda como podemos extrair o melhor das informações e mostrá-las de maneira clara, simples e eficiente.
É muito comum em empresas ver planilhas, gráficos, apresentações, pesquisas, análises, números e outros diversos tipos de fontes de informações que ilustre ou represente uma situação. Ainda mais na era digital, em que decisões baseadas em dados são indispensáveis.
Em contextos mais complexos como no mundo da Ciência de Dados, existem modelos modelos de inteligência artificial, análises estatísticas e muitos conceitos matemáticos que são aplicados para solucionar problemas. Mas mesmo em assuntos mais difíceis de se lidar, é geralmente necessário uma apresentação de forma simples, para que qualquer pessoa em diferentes contextos, tenha a capacidade de entender o que foi feito.
A questão mais importante aqui é: Todos precisam analisar, consumir ou mostrar dados em algum momento, e por isso usamos a visualização de dados (Data Visualization) para nos auxiliar no processo gráfico de exibição de informações. O título da publicação, Uma Arte objetiva, é apenas para referenciar que toda visualização de dados tem um fundamento e pode ser aprimorado para extrair o melhor das análises, de forma simples e com um objetivo explícito.
Vamos ver alguns importantes fatores que compõem uma boa visualização de dados:
Propriedades Textuais:
Começando pelo mais simples. Maior parte da nossa comunicação em apresentações ou slides é por meio de textos, mas também podemos usar texto para complementar um gráfico, assim agregamos mais valor e acaba que podemos fazer uma explicação prévia. Por exemplo:
Podemos usar algumas propriedades textuais para apresentar informações mais relevantes, ou mesmo dar destaque. Por meio disso, quando algum leitor for ver essas informações, perceberá mais facilmente o que foi realçado, assim conseguimos planejar aonde queremos que os olhos do leitor vá dentro do nosso texto. Vejamos algumas dessas propriedades:
Negrito:
Tente contar quantos números zeros existem dentro da sequência de números a seguir:
Pode ser um pouco difícil, pois o espaçamento entre os números é pequeno e a cor clara apenas nos ajuda a confundir os valores. Mas usando destaque em negrito nos textos, podemos perceber mais facilmente todos os números desejados:
Itálico:
Geralmente, o uso de itálico se dá para citações, palavras estrangeiras, nomes científicos ou algum termo que se queira dar ênfase ou estranhamento. O destaque de termos em itálico, não é tão eficiente quanto o negrito (visualmente), mas pode ser usado como um segundo nível na hierarquia de destaque. Note que por conta da alteração do padrão das letras, é perceptível a localização da palavra em itálico à primeiro momento, mas não tanto quanto o negrito:
Underline:
O uso do underline ajuda muito a destacar palavras, muito comumente utilizado para referenciar links para outras páginas ou referências externas. Ele quando usado, causa uma fácil visualização, mas quebra um pouco a harmonia do texto e gera uma pequena poluição visual. Geralmente o nível mais baixo da hierarquia de destaque das propriedades textuais:
Podemos utilizar de todas as propriedades que vimos para guiar melhor nosso leitor pelas informações que estamos apresentando. Assim mesmo em um olhar rápido, o leitor vai conseguir localizar e extrair a informação necessária de forma mais rápida:
Maiúsculas e minúsculas:
Uma coisa muito importante para a facilitação da leitura é a forma como percebemos as palavras. Note que é mais fácil ler palavras em minúsculo do que em maiúsculo. Isso se deve ao fato das palavras minúsculas terem um contorno mais flexível e possuírem mais variações, tornando a palavra mais fácil de ser decifrada pelo nosso cérebro.
Font Serifada e Não Serifada:
Um tópico muito comum para web design é a tipográfica, de forma geral, dividida entre Sans-Serif e Serifas que divergem um pouco em seu uso:
A fonte acima, Libre Baskerville é um típico exemplo de fonte serifada (Serif), e podemos perceber isso por todos os adornos ao entorno de cada letra. Estes adornos são ótimos para textos extensos, com um foco de leitura prolongada, pois gera uma ideia de continuidade das letras, como se estivessem juntas, o efeito chamado de “coagulação ótica” que facilita a visualização de um conjunto de letras para um rápido entendimento e percepção.
Já as fontes Sans-Serif (sem serifa) não possuem esses adornos, geralmente usadas de forma mais trabalhadas para títulos ou frases de ênfase. Como por exemplo a fonte Nunito:
Cores:
Uma coisa muito importante quando se trata de apresentar informações, são as cores. Uma dica muito importante que posso dar é: “Nem sempre confie nas paletas de cores padrões do software que você estiver utilizando”. Muitas vezes, são ótimas paletas, mas quando às implementamos em algum tipo de gráfico, tudo fica confuso e mesmo dando apenas uma olhada, sentimos que tem algo “estranho naquela visualização”. Vamos entender como interpretar melhor isso:
Similaridade de Cores:
Considerado um dos princípios gestalt de User Interface Design, a similaridade geralmente pode ser aplicada à cores, tamanhos e formas com o intuito de gerar um padrão de características bem próximas, assim tendemos a ver esses objetos com similaridade e classificá-los como um mesmo grupo de uma forma mais rápida.
Paleta de Cores:
Um ponto muito importante em uma boa visualização de dados é a composição de cores utilizadas, por meio dela, conseguimos facilitar ou dificultar o entendimento das informações contidas em um gráfico/texto.
Podemos também usar as cores para contextualizar com alguma informação externa ao gráfico ou dar ênfase para algo apresentado e assim direcionar a visão do leitor para onde você deseja.
Uma dica minha é usar paletas de cores já criadas no Adobe Color, que nos sugerem tendências, ou algum padrão de cor de alguma imagem:
Vamos ver um exemplo para entendermos melhor a importancia das cores:
Bom, temos 4 tipos de informações um pouco dispersas, mas quando alguém for analisar este gráfico, provavelmente vai demorar muito até extrair alguma informação útil. Para auxiliar nisso, vamos usar das cores para destacar algo, explicitar uma ideia. No livro Storytelling with Data de Cole Nussbaumer ela diz, “Todo gráfico tem algo a contar” e vamos usar apenas cores para destacar isso.
Ficou mais clara a informação ? Deu para perceber qual foi a única empresa que teve não teve uma grande queda nos últimos meses ? A paleta usada é a seguinte:
Exemplos ruins:
Bom, agora que entendemos um pouco dos elementos auxiliares que podem transformar uma visualização de dados, vamos tentar entender o que são exemplos ruins e buscar entender o que têm neles que dificultam a visualização de dados.
O caso da Pizza:
Gráfico de pizza do canal Fox sobre uma pesquisa em relação a corrida presidencial nos Estados Unidos em 2012:
O gráfico acima, é simplesmente uma pizza 3D, mas observe que os dados estão sendo apresentados de uma forma estranhas. Veja que a soma dos valores, dá mais de 100%, o que nos deixa 2 possibilidades, ou os dados coletados estão errados, ou o gráfico é baseado em uma uma pesquisa de múltipla escolha. Levando em conta que é uma pesquisa de múltipla escolha, os rótulos em algum momento tem pessoas em comum, quando uma pessoa escolheu mais de uma opção.
Contra Exemplo:
Aqui eu refiz o gráfico tentando tirar as redundâncias apresentadas anteriormente. Utilizei o diagrama de Venn para trabalhar com a sobreposição das informações, retirar as redundâncias e destaquei os valores que seriam mais relevantes. Dados que tem algo em comum, mas são de conjuntos distintos podem ser apresentados usando diagramas e informações numéricas. Geralmente esse tipo de visualização é bom para poucas classes dos dados.
Mais pizza:
É muito comum pessoas que trabalham com exibição de informações não gostarem muito de gráficos de pizzas, isso porque: é um pouco difícil de ser lido de forma rápida, não é fácil se basear nos tamanhos das fatias para interpretar a porcentagem que ela representa, e quando se tem várias divisões chega a ser difícil saber o quanto vale para cada coisa.
Gráficos de pizzas são bons, mas geralmentepara poucas categorias de dados( de 2 a 4) e apresentando os valores, sejam em percentuais ou cheios.
Contra exemplo:
Usando um gráfico de barra empilhada é possível mostrar dados que compõem um todo, no caso 100% das empresas de tech no mercado. Escolhendo uma palheta associada ao tema e destacando o mais relevante das informações: 5 empresas versus 282 outras no mercado mundial.
Dados Tabelados:
Vamos observar os dados de um ativo na bolsa valores, mas agora por meio de uma simples tabela:
Perceba que temos muitas informações dispostas, e que apesar de todos os títulos e as marcações de linhas, temos que é difícil explorar qualquer valor dentro dessa tabela, isso nos custaria muito tempo. Analisar dados abertos assim é difícil, quando se trata apenas da visualização sem qualquer tipo de interação. Por conta disso, tabelas dessa forma para serem exibidas, devem ser usadas apenas em casos que os usuários vão ter muito tempo disponível para analisar ou dispor de algum meio computacional para interagir com os dados.
Contra exemplo:
Essa tabela tem muitas informações, mas como mostra dados de variação ao longo dos meses, podemos usar uma saturação de cor para indicar valores mais fortes ( maiores ) e mais fracos (menores), assim é mais fácil de ler o gráfico sem ter que avaliar número por número especificamente. Adicionando um título, deu abertura para retirar a última coluna com valores repetidos.
Essa não é a melhor forma o possível para apresentar esses dados, mas uma tabela com saturação de cor ( cores mais fortes para valores maiores e claras para os menores ) nos ajudam muito a compreender as diferenças e onde se encontram os valores.
Famoso Gráfico 3D:
Como foi dito antes, gráficos em 3D, nem sempre são bons para mostrar informações, vamos ver um exemplo tirado da documentação do software Minitab:
Aquecer o jantar a intervalos de tempo mais curtos resulta em produtos cozidos insatisfatoriamente e baixos índices de qualidade. No entanto, aquecer a intervalos mais longos combinados com as temperaturas mais altas também resulta em índices baixos porque a comida fica cozida demais. As definições ideais parecem estar entre 400 ° e 450 ° e entre aproximadamente 30 e 36 minutos.
Repare que no gráfico…Você consegue entender onde são os maiores pontos de qualidade? e os de menor qualidade? e não só isso, também a noção de profundidade (eixo da Temperatura) foi totalmente perdida. Usar gráficos 3D em apresentações ou dashboards é muito complicado, pois tentamos reduzir um meio tridimensional para um meio de bi-dimensional e com isso somos forçados a perder muita informação. Portanto aconselho fortemente repensar em utilizar gráficos 3D.
Contra exemplo:
Apesar de ser um gráfico em 3D, é possível usar outros artifícios além da dimensionalidade para reproduzir a informação. Como no caso, substituímos o eixo da profundidade por uma combinação de cores, formas e tamanho para conseguir reproduzir toda a informação relevante do gráfico.
2D em 3D:
Os gráficos 2D dispostos de uma forma 3D, também tem seu lado negativo, eles acabam trazendo um excesso de informações e um desnorteamento de direção para uma coisa que não precisava ser tão complexa, então também é aconselhado a repensar na utilização. Exemplo:
Vendas de Roupas de uma Loja:
Repare que é difícil saber qual a marca que os valores atingem no gráfico, por conta das linhas na 3º dimensão.
Contra exemplo:
Aqui podemos não ter exibido o valor total de cada barra, mas conseguimos passar a mesma ideia que o gráfico anterior com uma maior precisão pois não tem como se confundir com os valores dos eixos.
Gráficos com figuras:
Muitas vezes é possível substituir elementos base dos gráficos por alguma figura, como no seguinte exemplo. O Gráfico está mostrando a população mundial em 2008 de alguns países.
O gráfico em si é bem simples e tenta mostrar a grande diferença do tamanho da população entre alguns pais, mas apesar de tudo o fato de não haver barras e sim uma figura que aumenta dependendo do tamanho da população, deixa mais confuso ainda as informações que o gráfico deseja passar, e o leitor pode demorar um pouco para visualizar e entender as informações.
Usar figuras confunde o básico que estamos acostumados a ver e exige um esforço extra para comparar e referenciar valores ao tamanho da figura.
Contra exemplo:
Toda a informação que estava poluindo os dados finais foi removida, não há mais distrações pelas figuras, existem agora valores indicando uma precisão maior da informação e uma das coisas mais importantes, ordenação. Nesse caso utilizei um gráfico de barras, pois os nomes dos países vão ter mais espaço para serem exibidos, ao invés do que o de colunas.
Verticalização de Textos:
O gráfico é bem simples, mas uma das coisas que dificulta a leitura das informações apresentadas é simplesmente o fato dos elementos no eixo X estarem na vertical. Apesar das cores estarem ajudando e todo o gráfico ser bem direto quanto ao que quer mostrar, demoramos um pouco mais para entender os textos apresentados verticalmente. Não é algo necessariamente ruim, mas pode causar um delay ao digerir visualmente esses dados.
Contra exemplo:
Por ter sido feito em softwares diferentes, não consegui reproduzir perfeitamente o outro gráfico, mas veja o quão mais fácil é visualizar textos na horizontal. Isso deixa com que a leitura do gráfica seja rápida e contínua.
Excesso de Informação:
Maioria das visualizações de dados criadas são para “Expor os dados”, pense nisso como uma tabela, lotada de informações, em que esperamos que nosso leitor leia e tira as próprias conclusões. Isso é um pouco problemático no contexto de análise de dados, pois toda análise tem que ser feita com algum objetivo e geralmente elas já vem com uma “Sugestão” indicando algo.
Umas das características que considero como indicadores de que um gráfico está servindo para o que foi criado são (fazendo a sugestão certa):
- Quando o usuário chega à mesma conclusão em que eu cheguei, mais rápido que o tempo que eu levei para isso.
- E que ele não tenha que me perguntar nada para fazer isso. Consegue reproduzir tudo sozinho.
Quando alguém está criando um gráfico, geralmente tem um contato maior com os dados, consegue perceber a grandeza, a continuidade, a escala, as diferenças, os padrões e etc… trabalhar com os dados até montar uma visualização nos faz entender melhor o que está sendo mostrado. E quando algum leitor consegue ter, em uma rápida olhada, o mesmo entendimento que o autor do gráfico levou talvez algumas horas para exprimir de uma forma condensada, então realmente a visualização está sendo eficiente.
Vamos trabalhar com um grande exemplo para entender isso na prática:
Imagine que você acabou de receber um teste para uma vaga na empresa que você mais queria, como analista de dados e te pedem para melhorar essa análise. ( Sim você tem todos os dados usados e mais o Google do seu lado).
Ok, o que você sabe até então?
- Houve uma queda em algum momento de 2020 e você tem que explicitar isso de alguma forma.
- Os dados estão dispostos como médias diárias.
- Você possui 21 meses de dados.
- Você está trabalhando com 10 ativos distintos.
Bom, acho que você poderia testar primeiramente colocar todos os ativos da mesma cor para não se confundir. Aliás, pelo título, a queda foi no mercado em que você está analisando e não em um único ativo. Vejamos:
Bom, você notou que ficou com menos ruído, mas agora também eestá mais confuso. Note que parece haver um caos maior no periodo de Janeiro 2020 e Maio 2020. Então podemos tentar diminuir a granularidade dos dados, transformar médias diárias em médias mensais.
Realmente, você estava certo! De fevereiro 2020 para março 2020, todos os ativos caíram. Então sua missão agora é destacar esse fato. Você poderia tentar reduzindo o período de análise de 21 meses para 10, deixando apenas de novembro de 2019 até julho de 2020. Além disso vamos tentar ganhar algum espaço no gráfico, para fazer isso modificamos o eixo Y para um range de $0 até $140.
Certo, o que você pode fazer agora é trabalhar alguns atributos para conseguirmos dar uma maior visibilidade da informação. Vamos trocar os títulos dos eixos para fazer mais sentido, destacar os pontos do gráfico que há uma queda, retirar os símbolos e as linhas semi-transparentes de valores.
Agora, você poderia tentar usar textos para complementar esse gráfico, além de usar valores fechados para destacar ou enfatizar a observação proposta.
E por fim temos uma visualização muito mais precisa em questão do enunciado do teste. Observe que apenas utilizamos os artifícios já explicados aqui anteriormente e retiramos o excesso de informação para focar no que precisavamos.
A ideia principal de dar objetivos para os gráficos e visualizações de dados é essa. À partir de um ponto visto em uma extensa análise, temos que deixar isso visível de uma forma que qualquer um possa ler e entender o que está acontecendo.
E tudo isso nos leva ao próximo tópico:
Contextualização e StoryTelling:
A magia das histórias:
“Quando você vê uma boa partida, assiste a um filme cativante ou mesmo lê um livro fantástico, você está experimentando a magia das histórias. Uma boa história, prende sua atenção e coloca você na jornada, criando uma responsabilidade emocional. No meio disso, você se encontra sem vontade alguma de largar isso de lado. E depois de terminar, seja em um dia, uma semana ou sete meses depois, você poderia contar aquilo que viu com todos os detalhes para um amigo” — Cole Naussbaumer em Storytelling With Data.
Visualização de dados, não é somente um gráfico exposto para ser destrinchado, é uma parte de uma análise, que tem toda uma história a ser contada.
Uma análise, assim como uma história, tem que ter início, meio e fim muito bem definidos. Pois assim, qualquer um consegue iniciar sabendo de nada e passar por toda uma contextualização para ser capaz de entender o que está acontecendo e chegar ao fim com a conclusão correta, quanto à tudo que a análise mostrou.
Um dos grandes pontos da contextualização, e chave para conseguir ter uma ideia completa do que deve ser feito é a definição da audiência. Saber quem vai ler, quem via analisar, qual o nível de experiência, o nicho, idade, tudo isso molda a forma que a história deve ser contada.
Gráficos, plots, imagens, referências, citações, textos, números fechados pode ser vistos apenas como blocos. Cada bloco tem seu significado e tenta contar algo, e a composição de vários deles é uma história. O ponto mais complexo para isso é saber usar os blocos certos para fazer uma conectividade entre todos e dar sentido à análise.
Interação
Um dos tópicos mais profundos de Data Visualization é a interação. Vamos começar essa parte com uma citação do livro de Scott Murray, Interactive Data Visualization for the Web: An Introduction to Designing with D3 :
“Visualizações estáticas, podem oferecer apenas uma pré-composição dos dados, então muitas visualizações estáticas são necessárias para apresentar uma vasta quantidade de perspectivas da mesma informação. O número de dimensões dos dados é limitado, e também às vezes é necessário que todos os elementos visuais sejam exibidos na mesma superfície ao mesmo tempo. Representar datasets multidimensionais em imagens estáticas é notoriamente difícil. (…) Uma interação dinâmica pode empoderar os usuários para explorar os dados por si só.”
Bom, acho que o parágrafo anterior consegue descrever tudo. Quando temos a oportunidade de prover interatividade aos usuários, ele pode montar a sua analise, colher os dados que quer, modificar e analisar da forma deseja sem qualquer profissional experiente para auxíliá-lo.
Interação entra em contra partida com muitos pontos que apresentamos aqui, por exemplo:
Uso do 3D:
Antes visualizações em 3D não eram tão interessantes, mas isso porque não consideramos interatividade, mas agora, o próprio usuário pode explorar essa visualização, de forma com que seja simples analisar um gráfico 3D, da forma que é desejada.
Contextualização e StoryTelling:
Para lidar com interatividade, alguns pontos do storytellig mudam, por exemplo: o público alvo deve ser muito bem definido, pois além de focar os dados à eles, é necessário que o público saiba como interagir com os gráficos e como extrair informações importantes deles, isso passa a ser um pré-requisito muito importante pois antes poderíamos ter um usuário completamente leigo, e agora um usuário com experiência prévia para todo e qualquer utilização desses dados.
Ao invés de cada dataviz apresentar uma ideia, uma sugestão, agora temos que eles apresentam realmente uma vastidão de dados, em que o próprio usuário monta sua ideia e compila sua própria história com base nessas análises gráficas interativas. Isso ocorre totalmente em dashboards ou ferramentas Self-service BI.
As vantagens disso é, agora passa a ter muitas pessoas fazendo análises a partir do acesso aos dados. Mas em contrapartida deve haver muito cuidado ao montar visualizações para serem utilizadas dessa forma.
Algumas dicas:
- As dicas para montar uma visualização de dados simples e eficientes se mantém na medida do possível. Usar elementos que se adequam com interatividade, sejam eles: variações à textos, cores dos gráficos, utilizar menos os gráficos 2D em 3D. Boa parte disso não se altera.
- Aqui é muitas vezes bom prover gráficos com um excesso de informação, para que assim o usuário filtre o que vai ser mais importante para ele.
- Uma coisa importante é tentar minimizar a possibilidade de ocorrer viés. Isso é, apresentar a informação de uma forma que expressa uma ideia generalizada, assim qualquer pessoa que vá analisar, deve partir a própria análise de uma da pré-análise já construída. Isso minimiza o entendimento errado das informações.
- Apesar do “ o próprio usuário montar sua história”, facilite isso à ele, disponibilize as informações de forma próxima umas às outras com base em seus contextos. (Uma aplicação da similaridade para informações próximas).
Referencias:
Felipe Melão — Diferença entre fontes com serifa e sem serifa,
Cole Nussbaumer Knaflic — Storytelling com Dados,
Scott Murray — Interactive Data Visualization for the Web: An Introduction to Designing with D3,
