Olá, devs!

           A Competição de artigos desta semana é sobre análise de dados, uma área em que eu estou me aprofundando para trabalhar no futuro.

Para escrever este artigo, eu escolhi uma área em que sou apaixonado desde cedo, a visualização de dados, e escrevo, especificamente, sobre a visualização interativa de dados.

Sumário

1.   Introdução

2.   Análise de Dados

3.   Visualização de Dados

4.   Visualização Interativa de Dados

5.   Minhas Visualizações

6.   Conclusão

7.   Referências

8.   Artigos Citados

1 – Introdução

Desde os tempos remotos do colégio, eu sou fascinado por gráficos. Não só pela beleza artística, mas pela clareza que eles agregam a algum assunto.

No início, eram os gráficos das funções matemáticas, retas, parábolas, hipérboles, curvas infinitas ou infinitamente perto dos eixos.

Na universidade, eram as curvas no plano tridimensional, curvas paramétricas, curvas impossíveis nos cálculos de variáveis complexas. Depois vieram os gráficos da estatística.

Na pós-graduação, fiquei fascinado pelos filtros de processamento de imagem, pelo realismo da computação gráfica, pelos fractais. Até hoje, eu me lembro da primeira vez que eu programei uma bolinha se movendo na tela, batendo nos limites da tela e voltando, em um ângulo simétrico ao da batida.

Amava os vídeos com simulação de missões da NASA (Voyager, Viking, o vôo rasante 3D em Marte), em Computação Gráfica criada pela equipe do JPL (“Jet Propulsion Lab”), da NASA.

E isso tudo sem falar nos games digitais que vi nascer, como Pong, Space Invaders, Pole Position e outros.

Atualmente, eu estou me aprofundando em Ciência de Dados e Inteligência Artificial (IA), e fico fascinado com as diversas formas de visualizar uma massa de dados, permitindo que os dados contem uma história.

O fascínio é ainda maior quando a visualização é interativa, possibilitando a cada um contar sua própria história com os mesmos dados.

Eu já publiquei aqui alguns artigos sobre a beleza da arte computacional, tratando da Arte com CSS, uma série de 3 artigos sobre Computação Gráfica, e mais um sobre Visualização de dados geográficos (ver os links no final do artigo).

É essa paixão pela visualização gráfica que me faz dedicar um artigo inteiro para detalhar a Visualização Interativa.

2 - Análise de Dados

Atualmente, não há dúvida que os dados são importantíssimos para o crescimento das grandes organizações do mundo inteiro, bem como para as pequenas também.

Eles podem mostrar claramente os erros cometidos no passado e identificar os cenários futuros que a organização pode enfrentar. É preciso tomar decisões para não repetir os erros anteriores e selecionar as melhores alternativas para seguir no futuro.

Por isso, é imprescindível analisar os dados disponíveis, formando um embasamento, antes de tomar decisões importantes.

Segundo matéria do site da Amazon [1], a análise de dados transforma dados brutos em insights, que podem se converter em ações benéficas para clientes, funcionários e a própria organização, como:

·        criação de experiências personalizadas para os clientes;

·        desenvolvimento de produtos digitais relacionados;

·        otimização de operações;

·        aumento da produtividade dos funcionários.

A análise de dados utiliza ferramentas, tecnologias e processos com o objetivo de encontrar tendências e resolver problemas, permitindo melhorar a tomada de decisões, moldar os processos e promover o crescimento dos negócios.

Desta forma, ela ajuda as organizações a ter mais visibilidade e uma compreensão mais aprofundada de seus processos e serviços, fornecendo informações detalhadas sobre a experiência e os problemas dos clientes, mudando o paradigma além dos dados.

Quanto maior a quantidade de dados, melhor será a análise. Hoje, estamos na era do big data, um conjunto enorme de dados diversificados (estruturados, não estruturados e semiestruturados), gerados continuamente em alta velocidade e volumes enormes (da ordem de petabytes ou exabytes).

A análise de big data é um processo complexo que busca encontrar padrões, tendências e relações em conjuntos enormes de dados, exigindo ferramentas e tecnologias específicas, poder computacional e armazenamento de dados que ofereçam suporte ao crescimento.

A análise de big data apresenta as seguintes etapas:

·        coleta de dados

·        armazenamento físico de dados

·        processamento de dados

·        limpeza de dados

·        análise de dados

Coleta de dados – utiliza os processos seguintes:

·        ETL (“Extract, Transform, Load”); que consiste em extrair, transformar no formato necessário e, finalmente, carregar os dados;

·        ELT, que extrai, depois carrega para, enfim, transformar os dados.

Armazenamento de dados – os dados são movidos para o armazenamento em "data lakes" ou "data warehouses" na nuvem, podendo ser acessados por ferramentas de BI (“Business Intelligence”).

Processamento de dados – os dados são organizados e passam por consultas analíticas para obter resultados precisos. O processamento pode ser centralizado ou distribuído, bem como em lote ou em tempo real.

Limpeza de dados - envolve a eliminação de falhas nos dados, como duplicações, inconsistências, redundâncias ou formatos incorretos, além da eliminação de dados indesejados para análise.

Análise de dados - os dados brutos são convertidos em insights acionáveis. Divide-se em:

·         Análise descritiva – busca entender o que aconteceu ou o que está acontecendo no ambiente de dados, podendo ser usadas visualizações de dados (como gráficos de pizza, de barras, de linhas), tabelas ou narrativas.

·        Análise diagnóstica - análise aprofundada, ou detalhada, para descobrir por que algo aconteceu, usando técnicas como detalhamento, descoberta de dados, mineração de dados e correlações.

·        Análises preditiva - utiliza dados históricos para fazer previsões precisas sobre tendências futuras, usando técnicas como “machine learning”, previsão, correspondência de padrões e modelagem preditiva.

·        Análise prescritiva – a partir dos dados preditivos, ela prevê o que provavelmente acontecerá, sugerindo uma resposta ideal para esse resultado, podendo usar análises de grafos, simulação, processamento de eventos complexos, redes neurais e mecanismos de recomendação.

           A análise de dados pode ser automatizada, por meio da otimização de processos e técnicas como scripts simples, ferramentas de modelagem de dados e análises estatísticas.

           Os resultados de uma análise de dados podem ser apresentados por visualização de dados, respaldando as tomadas de decisões.

3 - Visualização de Dados

Segundo Abbott [2], a visualização de dados, também chamada dataviz (de “data visualization”), está situada na interseção entre design, análise e engenharia de software. A autora diz que é difícil encontrar um profissional formado em todas estas 3 áreas, sendo fácil ele ter uma ou duas destas formações, mas não as três juntas.

           Ela afirma que a visualização de dados envolve alguns conhecimentos destacados:

·        como o cérebro recebe e processa informações;

·        como as padronizações do W3C (“World Wide Web Consortium”)se relacionam com o tema;

·        quais são as 3 cores primárias usadas nos gráficos;

·        como escolher as cores e fontes de texto certas para sua visualização;

·        como é o processo de criação de uma grande visualização.

           Ela diz que a visualização está no cotidiano de todos, mas ela tem um início marcante na história.

         No século 19, segundo ela, na Inglaterra, a enfermeira combatente Florence Nightingale coletou e registrou dados de suas próprias experiências durante a Guerra da Crimeia. Usando estes dados sobre as condições do Hospital em que ela trabalhava, ela apresentou ideias aos poderes constituídos e ninguém a levava a sério.

           Então, ela criou visualizações gráficas dos seus dados e apresentou-lhes, pressionando todos os poderes de seu tempo, enviando publicações até para a Rainha Vitória.

           Uma das visualizações mais famosas que Florence criou, chamada hoje de a rosa de Nightingale, está mostrada abaixo:

           O gráfico mostra que a principal causa de morte em soldados não vem dos ferimentos de batalha, mostrados em vermelho, mas de doenças evitáveis, que são mostradas em azul. 

Finalmente, eles mudaram de ideia e Florence conseguiu implantar a lavagem das mãos e saneamento em hospitais, muito antes da teoria dos germes. Essa mudança impressionante, cujos efeitos ainda hoje sentimos, foram gerados por esse gráfico!!!

           A autora ainda destaca o ponto mais importantes de uma visualização de dados, que é conhecer seu público!!

           Ela diz que a sua plateia precisa entender o trabalho, a mensagem, a história que você está tentando contar. Nada do seu esforço nem a beleza da sua visualização importam se o seu público não entendê-la.

           A autora lista alguns elementos importantes para uma visualização: cor, forma, movimento, tipografias e os princípios de Gestalt (cercamento, proximidade, simetria, figura/fundo, conexão, fechamento e continuidade).

           Ela diz que a cor pode chamar a atenção do usuário para valores importantes em um mar de dados pontuais, distinguir categorias semelhantes ou categorias qualitativas de informação.

           Já a forma de um elemento é usada para representar informações quantitativas, como a posição espacial, para representar mapas, por exemplo.

           O movimento é um atributo que chama muito a atenção e deve ser usado com moderação.

           Os princípios da Gestalt de cercamento e proximidade permitem agrupar objetos ou elementos para mostrar que eles estão relacionados entre si.

Eles podem ser combinados com simetria reflexiva, rotacional e translacional, que podem destacar padrões repetitivos.

           O princípio figura/fundo identifica claramente o que é o primeiro plano principal e o fundo.

           Finalmente, da mesma forma que os princípios de fechamento e continuidade, o princípio de conexão indica um grupo de elementos relacionados.

           Como as cores, as tipografias permitem escolher aquelas mais legíveis para cada mídia, bem como padronizar tamanhos e alinhamentos, simetria, hierarquia, legibilidade e espaços em branco.

           Os tipos de gráfico a serem usados na visualização são extremamente importantes e precisam estar de acordo com a história que você deseja contar.

           É sempre bom manter a simplicidade e evitar gráficos que apresentam dificuldades de entendimento pela plateia, como gráficos de pizza, de rosca, com dois eixos ou com formato tridimensional.

           A autora recomenda remover tudo que não representa informação útil, como linhas de grade, eixos, rótulos etc.

Como melhorar os seus gráficos

           Com base no parágrafo anterior, Nussbauer [3] diz que é importante eliminar a desordem dos gráficos, isso pode ser feito removendo o excesso de informações ou clareando outros elementos importantes.

Com base no gráfico original mostrado abaixo, vamos seguir o passo a passo da remoção de elementos que causam desordem para melhorá-lo. As figuras fazem parte do livro [3].

1.   Remover a borda do gráfico

2.   Remover linhas de grade

3.   Remover marcadores de dados

4.   Limpar rótulos de eixo

5.   Rotular dados diretamente

6.   Aproveitar cores consistentes

A figura abaixo mostra a comparação entre entre as versões inicial e final do gráfico, após as alterações realizadas:

4 - Visualização Interativa de Dados

           Segundo Tominski [4], a interação adiciona a flexibilidade necessária à visualização, permitindo uma participação ativa na análise visual dos dados.

           Podemos nos concentrar em diferentes características dos dados, observar os dados de diferentes perspectivas ou ajustar representações visuais de modo a criar os insights desejados.

           Embora a interação incorpore competências humanas no processo de construção da visualização, os métodos computacionais automáticos utilizam o poder da máquina.

           Dados grandes e complexos geralmente não podem ser visualizados na sua totalidade. Análises computacionais automáticas processam os dados em busca de características ou abstrações significativas que são mais fáceis de digerir do que os dados brutos.

           Esta forte alternância de esforços computacionais e humanos é a vantagem da análise interativa de dados visuais para a geração de conhecimento.

           O computador pode processar grandes quantidades de dados com rapidez e precisão. Já o ser humano tem enormes habilidades de detecção de padrões e é proficiente em criatividade pensamento e tomada de decisão flexível.

           Uma consequência direta da interação de dados, humanos e computadores é que o conhecimento de diferentes áreas deve ser reunido para uma análise de dados de sucesso.

Tópicos relevantes incluem design visual, computação gráfica, interação homem-máquina, interfaces de usuário, psicologia, ciência de dados e algoritmos, por exemplo. A necessidade de fazer com que diversos métodos funcionem em conjunto resulta em um desenvolvimento não trivial de soluções práticas.

A brasileira Fernanda Viégas

           Eu já era apaixonado por visualização gráfica e fiquei ainda mais quando assisti a uma palestra dada pela brasileira Fernanda Viégas, em 2009, no evento TEDx-São Paulo [6] (vídeo da palestra no Youtube).

           A palestra tratou de visualização e análise de dados e foi fantástica, super motivadora e bem divertida. Fernanda é PhD. pelo MIT e, na época, estava trabalhando na IBM.

           Em um projeto, ela criou um site de visualização de dados, chamado Many Eyes [7], gratuito, em que o usuário poderia subir seus dados, escolher um tipo de gráfico e disponibilizá-lo livremente. A ideia era permitir visualização para todos.

           Em 2009, Fernanda Viégas foi citada como mulheres mais influentes no mercado da tecnologia [8]. Atualmente, ela é professora de Harvard e ainda dá palestras no mundo todo sobre os seus projetos voltados para a visualização e análise de dados.

           Infelizmente, o site Many Eyes foi fechado pela IBM em junho de 2015, segundo matéria da Computerworld [7].

Exemplos de visualizações do Many Eyes:

Ainda segundo [4], para criar ferramentas úteis de análise de dados, é preciso descrever seu contexto antecipadamente, seguindo uma variação dos 5W (do método 5W2H): o quê, por que, quem, onde e quando.

·        Que dados devem ser analisados? Cada um dos diferentes tipos de dados (dados de censo, trajetórias de movimento, e outros) possui suas próprias características, como escala, dimensionalidade e heterogeneidade.

·        Por que os dados são analisados? O objetivo é realizar os objetivos das pessoas, envolvendo tarefas analíticas, como identificar valores ou estabelecer padrões.

·        Quem analisará os dados? Cada usuário precisa de ferramentas de análise diferentes, bem como cada um possui habilidades individuais e preferências.

·        Onde os dados serão analisados? O local básico é um computador com monitor, mouse e teclado, ou então uma tela de exibição ou superfícies visuais interativas.

·        Quando os dados serão analisados? A visualização, interação e a computação devem estar disponíveis no momento certo, podendo seguir fluxos de trabalho específicos de cada domínio, de acordo onde cada etapa está associada com suas próprias necessidades individuais.

            Segundo [5], a Visualização “Interativa” de Dados pode ser definida como a visualização dos dados que passou por alguma interação com o usuário em alguma etapa, não apenas quando os dados já estão apresentados graficamente.

           No entanto, ele diz que o termo é comumente associado à interação com os dados, de alguma forma, no momento da apresentação gráfica, e é assim que eu entendo uma visualização interativa.

           Segundo ele, uma visualização pode várias técnicas de interação: visão geral, detalhe, contexto, filtragem e zoom.

           Com base nisso, o autor mostra alguns exemplos de visualizações interativas que dão mais ênfase à aparência e facilidade de entendimento de situações do cotidiano e da história que contam.

Exemplo1 - Escalada de dois alpinistas.

Veja como a forma de apresentação da rocha dá uma noção da distância, dificuldade e até permite a comparação do tamanho dos alpinistas e do paredão. 

Exemplo 2 – Movimentação de meios de transportes, em tempo real

O site VBB-Livekarte mostra, em tempo real, a movimentação de vários meios de transportes (metrôs, ônibus, trens), de Berlim. Ela permite ao usuário saber os horários de viagem com antecedência, informações sobre a linha e as paradas de cada estação, além de mapear iniciativas como o compartilhamento de carros e bicicletas.

Exemplo 3 – Ferramenta Nosso Ônibus, em Natal-RN

Na cidade de Natal — RN, foi implementada, e disponibilizada para uso, uma ferramenta (Nosso Ônibus) semelhante. Ela se limita apenas aos ônibus, fornecendo com precisão os horários de chegada e passagem dos ônibus nos pontos selecionados para visualização, além de indicar quais deles trafegam por cada parada.



5 – Minhas Visualizações

Na fase em que eu me encontro, me aprofundando em Ciências de Dados, toda vez que eu vejo uma situação interessante, já penso em como criar uma visualização para esclarecer os detalhes dela.

           E uma dessas situações foi o atual Campeonato Brasileiro da Série A (o Brasileirão) desse ano, pois houve uma grande reviravolta ao longo da competição.

           Logo no início do campeonato, o time do Botafogo, que não é campeão há 28 anos, despontou na ponta da tabela, chegou a abrir 13 pontos para o segundo colocado, mas, numa queda de rendimento histórica, perdeu o título aparentemente imperdível.

Então, nada melhor do que criar uma visualização gráfica para ilustrar a história desse campeonato.

A ferramenta usada foi o Flourish e essa visualização usou um gráfico de linhas dinâmico (“line chart race”), apresentando a evolução da posição de todos os times participantes, rodada a rodada

Veja como o Botafogo passou quase todo o campeonato em primeiro lugar, vindo a perder esta posição (e o título) nas 4 rodadas finais.

Segue o link desta visualização:

https://public.flourish.studio/visualisation/15969895/

Impressionado com a beleza desta visualização, resolvi criar outra, desta vez, com as posições dos carros de corrida no GP da Inglaterra de 2021, cujos dados consegui em um site de estatísticas esportivas.

Uma corrida de Fórmula 1 é muito dinâmica, pois todos os carros são obrigados a parar nos boxes, pelo menos 1 vez, para trocar os pneus por outros, de um tipo diferente. Assim, durante a corrida, quando um carro para trocar os pneus, perde várias posições para vários carros que vem atrás dele.

O link a seguir mostra esta visualização:

https://public.flourish.studio/visualisation/15976659/

6 - Considerações finais

Desde os tempos remotos do colégio, eu sou fascinado por gráficos visuais. Desde os gráficos das funções matemáticas, às curvas no plano 3D, curvas de Bézier, splines cúbicas e superfícies bicúbicas 3D, como aquelas usadas na Computação Gráfica.

Eu era fascinado pelos comerciais com animações em Computação Gráfica 3D, bem como os vídeos com simulação de missões da NASA (Voyager, Viking, o vôo rasante 3D em Marte), feitas pela equipe do JPL (“Jet Propulsion Lab”).

Atualmente, eu sou fanático pela visualização gráfica de dados, desde as interfaces de usuário de sistemas e apps até os dashboards usados na visualização de big data.

Esta área só está começando e acho que ainda tem muita coisa boa para vir, como a holografia e o Metaverso, tão propalado mas meio quieto. Quem sabe?

Se alguém quiser me dar um emprego nessa área, aceito na hora!

É brincar de trabalhar! Ou trabalhar com um brinquedo!

7 – Referências

[1] Amazon, O que é Análise de dados? Disponível em: <https://aws.amazon.com/pt/what-is/data-analytics/>. Acesso em: 06/12/2023

[2] Desireé Abbott, Everyday Data Visualization, MEAP V05, Manning, 2023.

[3] Cole Nussbaumer Knaflic, Storytelling with Data, John Wiley & Sons, Hopboken, 2015.

[4] Christian Tominsk, Heidrum Schumann, Interactive Visual data Analysis, CRC ress, 2020.

[5] Moisés Oliveira, Uma breve introdução à Visualização de Dados Interativa. Disponível em:

<https://medium.com/@moises.catonio/uma-breve-introdu%C3%A7%C3%A3o-%C3%A0-visualiza%C3%A7%C3%A3o-de-dados-interativa-dd516fe1f478>.Acesso em: 06/12/2023.

[6] Yotube, Fernanda Viégas at TEDxSaoPaulo. Disponível em: <https://www.youtube.com/watch?v=HT7u7inzNuc>. Acesso em: 06/12/2023.

[7] Machlis Musings, IBM to shutter dataviz pioneer Many Eyes. Disponível em : <https://www.computerworld.com/article/2930326/ibm-to-shutter-dataviz-pioneer-many-eyes.html>. Acesso em 06/12/2023.

[8] Renata Honorato, Uma brasileira influente no Google. Disponível em: https://veja.abril.com.br/tecnologia/uma-brasileira-influente-no-google>. Acesso em 06/12/2023. 

8 – Artigos citados

Os artigos a seguir foram publicados por mim, na plataforma da DIO.



Artigo 31 - Arte com CSS e Javascript

Artigo 28 - Computação Gráfica 1: a história e o que eu vivenciei

Artigo 30 - Computação Gráfica 2: evolução e áreas de aplicação

Artigo 38 - Computação Gráfica 3 - Técnicas básicas

Artigo 45 - Bancos de Dados Espaciais – POSTGIS (3º lugar)