Apresentação do PowerPoint

Transcrição

Apresentação do PowerPoint
Agenda
O que é Visualização de Informação?
Percepção e Visualização de Informação
Visualização na prática
 Bons e Maus exemplos
 Metodologias para desenvolvimento/criação de Visualização de
Informação
 Ferramentas e Recursos
Visualização de Informação
Um pouco de história ...
 Em 1854, um surto de cólera
matou 616 pessoas em
Londres
 John Snow: físico que
contestava a atribuição do
miasma como agente da
doença
 Dados sobre a quantidade de
mortes para cada endereço
foram mapeados
Fonte: http://public.tableau.com/s/gallery/mapping-1854-cholera-outbreak
Mapa de Snow
• Cada linha representa uma
morte
• Maior concentração de mortes
era próximo a um poço d’água
contaminada
Mapa de Snow
• Cada linha representa uma
morte
• Maior concentração de mortes
era próximo a um poço d’água
contaminada
1869: Mapa da campanha russa de Napoleão
Visualização de Informação
Visualizar
• Formar uma imagem
mental
• Transformar conceitos
abstratos em imagens
mentalmente visíveis
• Usar os estímulos
provenientes dos olhos
para criar uma imagem
visual
Visualização de Informação
John Tukey em 1965 : A visualização de informação será o principal recurso para os
analistas de dados
Uso do representações visuais e interativas dos dados suportadas por
computador para ampliar a cognição (Card, 1999)
Objetivo da visualização de informação é ampliar o desempenho cognitivo, não
apenas para criar imagens interessantes. A visualização de informação deve
fazer para a mente o que fazer automóveis para os pés (Card, 2008).
A promessa da Visualização de Informação é acelerar nosso entendimento e
nossas ações em um mundo de volumes crescentes de informações (Card,
2008).
Visualização de Informação
Uso do representações visuais e interativas dos dados suportadas por
computador para ampliar a cognição (Card, 1999)
Objetivo da visualização de informação é ampliar o desempenho cognitivo,
não apenas para criar imagens interessantes. A visualização de informação
deve fazer para a mente o que fazer automóveis para os pés (Card, 2008).
A promessa da Visualização de Informação é acelerar nosso entendimento e
nossas ações em um mundo de volumes crescentes de informações (Card,
2008).
Visualização de Informação
Processo Analítico Visual
Ciência do raciocínio analítico apoiada por interfaces visuais interativas (Thomas e
Cook, 2005)
Transforma o excesso de informação para auxiliar a tomada de decisão em situações
em tempo real (Keim et al., 2009)
Visualização de Informação
Classificação com base na natureza dos dados manipulados
Visualização
Visualização
Científica
Visualização
de Informação
Visualização Científica
Representa dados científicos
Dados que correspondem a objetos físicos, fenômenos da natureza
Exemplo: visualização de órgãos do corpo humano
Visualização de Informação
Representa dados abstratos
Dados sem representação geométrica correspondente ao mundo físico
Exemplo: casos de microcefalia no Brasil
Visualização de Informação
Outras áreas relacionadas
Visualização de
Informação
Análise
Exploratória de
Dados
Mineração
Visual de Dados
Visualização do
Conhecimento
Infográfico
Análise Exploratória de Dados
Abordagem para analisar dados em busca de padrões, tendências
Emprega técnicas (como histograma, gráfico de dispersão) para
o Maximizar ideias (insights) sobre o conjunto de dados
o Detectar anomalias e outliers
o Extrair variáveis importantes
Mineração Visual de Dados
Uso de técnicas de visualização no processo de mineração de dados para
o Selecionar conjunto de dados relevantes à extração de conhecimento
o Encontrar discrepâncias e inconsistências nos dados
o Apresentar os resultados obtidos
Visualização do Conhecimento
Auxilia o processo de criação e compartilhamento de conhecimento
Uso de representações visuais para criar, integrar e aplicar conhecimento
Formatos visuais utilizados: esboços, diagramas, mapas mentais, metáforas visuais
Infográfico x Visualização de Informação
Infográfico e visualização de informação
 Conceitos semelhantes: baseados nos mesmos princípios de design
 Infográfico conta estórias que o designer quer explicar
 Visualização permite que as pessoas construam suas próprias ideias com
base nas evidências fornecidas
Infográfico x Visualização de Informação
Infográfico
o Manualmente desenhada
o Específica para os dados representados não sendo trivial recriá-la com
dados diferentes
o Rica em conteúdo visual para chamar atenção
o Poucos dados
Visualização de Informação
o Desenhada com o auxílio de métodos computacionais
o Facilmente recriada com dados diferentes
o Poucos recursos visuais
o Muitos dados
Visualização de Informação
Visualização de Informação
Requisitos
Áreas de
Aplicação
Visualização de Informação
Ferramenta Cognitiva que utiliza a percepção visual
para criação do conhecimento
Visualização
Visualização de Informação
Mantra da Visualização (Shneiderman, 1996 )
Primeiro:
Visão Geral
Zoom e
Filtragem,
Só depois, os
Detalhes
Variação de 1430 ações durante 52 semanas
Visualização de Informação
Mantra da Visualização (Shneiderman, 1996 )
Foco entre a 8ª e 12ª semana
Primeiro:
Visão Geral
Zoom e
Filtragem,
Só depois, os
Detalhes
Visualização de Informação
Mantra da Visualização (Shneiderman, 1996 )
Primeiro:
Visão Geral
Zoom e
Filtragem,
Só depois, os
Detalhes
Seleção das
ações com
maiores valores
entre a 8ª e 12ª
semana
Visualização de Informação
Mantra da Visualização (Shneiderman, 1996 )
Primeiro:
Visão Geral
Zoom e
Filtragem,
Só depois, os
Detalhes
Detalhes das
ações com
maiores valores
entre a 8ª e 12ª
semana
Visualização de Informação
Mantra da Visualização (Shneiderman, 1996 )
Primeiro:
Visão Geral
Zoom e
Filtragem,
Só depois, os
Detalhes
Visualização de Informação
Teoria de Gestalt (forma)
• Como o cérebro organiza os elementos que percebem?
• Quais os princípios que configuram esta organização?
• O todo é diferente da soma das partes (Wolfgang Köhler)
• Conhecimento das partes advém do conhecimento do todo
Visualização
de Informação
O significado
das partes depende da forma
como são contextualizadas para formar o todo
Visualização de Informação
Teoria de Gestalt (forma)
• Pregnância: qualidade daquilo que é fácil de ser percebido (simples,
regulares, simétricas e equilibradas)
• Auxilia a definir padrões e elementos que são mais facilmente
percebidos
Visualização de Informação - Princípios de Gestalt
Pregnância (organize os elementos de forma lógica): clareza, equilíbrio e
unificação visual facilitam a percepção
Visualização de Informação - Princípios de Gestalt
Proximidade: elementos próximos tendem a ser agrupados
Visualização de Informação - Princípios de Gestalt
Proximidade: elementos próximos tendem ser agrupados
Visualização de Informação - Princípios de Gestalt
Proximidade: elementos próximos tendem ser agrupados
Visualização de Informação - Princípios de Gestalt
Proximidade: elementos próximos tendem ser agrupados
Visualização de Informação - Princípios de Gestalt
Proximidade (defina a localização dos elementos de acordo com o objetivo da
análise)
Visualização de Informação - Princípios de Gestalt
Similaridade: elementos com características semelhantes
tendem a ser agrupados (cor, forma, orientação)
Visualização de Informação - Princípios de Gestalt
Similaridade: elementos com características semelhantes
tendem a ser agrupados
Há alguma
segregação
nesta imagem?
Visualização de Informação - Princípios de Gestalt
Similaridade: elementos com características semelhantes
tendem a ser agrupados (cor, forma, orientação)
Visualização de Informação - Princípios de Gestalt
Figura/Fundo: Toda imagem é percebida como combinação
de uma figura e um fundo
Visualização de Informação - Princípios de Gestalt
Figura/Fundo (a figura é mais facilmente percebida quando o
contraste entre a figura e o fundo é maior)
Visualização de Informação - Princípios de Gestalt
Fechamento: tendência em perceber formas completas
Visualização de Informação - Princípios de Gestalt
Continuidade: tendência a perceber uma orientação entre os
elementos que parecem construir um fluxo
Visualização de Informação - Princípios de Gestalt
Continuidade: pode ser usada para destacar ou negar um
relacionamento entre os dados
Visualização de Informação
Estágio pré-atentivo da percepção
• Acontece antes que a atenção seja direcionada a algum
objeto ou um ponto focal
• Pode ser usado para influenciar atenção do visualizador
Visualização de Informação
Seleção de Cor
Visualização de Informação
Seleção de forma
Visualização de Informação
Você consegue responder rapidamente onde está o
círculo vermelho?
Visualização de Informação
Elementos com uma característica em comum são mais
facilmente percebidos
Visualização de Informação
Elementos com uma característica em comum são mais
facilmente percebidos
Visualização de Informação
Linha inclinada entre várias linhas verticais: pré-atentivo
Linha vertical entre várias linhas inclinadas: não é préatentivo
Visualização de Informação
Texto não é pré-atentivo
SUBJECT PUNCHED QUICKLY OXIDIZED TCEJBUS DEHCNUP YLKCIUQ DEZIDIXO
CERTAIN QUICKLY PUNCHED METHODS NIATREC YLKCIUQ DEHCNUP SDOHTEM
SCIENCE ENGLISH RECORDS COLUMNS ECNEICS HSILGNE SDROCER SNMULOC
GOVERNS PRECISE EXAMPLE MERCURY SNREVOG ESICERP ELPMAXE YRUCREM
CERTAIN QUICKLY PUNCHED METHODS NIATREC YLKCIUQ DEHCNUP SDOHTEM
GOVERNS PRECISE EXAMPLE MERCURY SNREVOG ESICERP ELPMAXE YRUCREM
SCIENCE ENGLISH RECORDS COLUMNS ECNEICS HSILGNE SDROCER SNMULOC
SUBJECT PUNCHED QUICKLY OXIDIZED TCEJBUS DEHCNUP YLKCIUQ DEZIDIXO
CERTAIN QUICKLY PUNCHED METHODS NIATREC YLKCIUQ DEHCNUP SDOHTEM
SCIENCE ENGLISH RECORDS COLUMNS ECNEICS HSILGNE SDROCER SNMULOC
Visualização de Informação
Teoria de Gestalt e Estágio Pré-Atentivo
 O que pode ser percebido mais facilmente?
 Que propriedades são adequadas para destacar uma informação?
 O que pode gerar “ruídos” na visualização?
Visualização de Informação
Ranking de
precisão
estabelecidos
pelas tarefas
perceptuais
Visualização de Informação
Requisitos
Áreas de
Aplicação
Visualização na prática
Visualização na prática: quando a representação é ruim
Cor e altura são randômicos
Porcentagem de desemprego no Brasil é
menor que no Reino Unido, EUA e
Alemanha, mas altura da coluna é maior
Visualização na prática: quando a representação é ruim
If Bush tax cuts expire
40%
39,60%
impostos se o governo Bush parasse de
realizar cortes nos impostos
39%
• Conclusão: a alteração na taxa será 5
38%
vezes maior em relação a hoje (2012)
37%
• Atenção: o eixo Y inicia em 34% em vez
de iniciar em zero
36%
35%
• Objetivo: mostrar a alteração na taxa de
35%
• Recomendação: todo gráfico de colunas
deve iniciar em zero, pois o usuário
34%
Now
Jan. 1, 2013
Fonte: Fox News
compara quão alto cada coluna é
If Bush tax cuts expire
40%
39,60%
39%
If Bush tax cuts expire
40%
35%
39,60%
35%
30%
38%
25%
37%
20%
36%
15%
35%
10%
35%
5%
34%
0%
Now
Jan. 1, 2013
Fonte: Fox News
Now
Jan. 1, 2013
• Gráfico de Pizza em 3D no formato
espiral
• Acerto:
• Usar gráfico de pizza para
representar a porcentagem dos
dados
• Erros cometidos:
• Uso do 3D sem necessidade
• Formato espiral não acrescenta
informação ao gráfico
• Solução:
• Usar um gráfico de pizza no
formato padrão e sem 3D
Anatomy of a Winning TED Talk
Statement of Utler
Certainty 5%
Spontaneous
Moment 5%
Sophisticated
Visual Aids 1%
Opening Joke
5%
Snappy
Refrain 12%
Personal
Failure 23%
Contrarian
Thesis 49%
• Objetivo:
• Apresentar as preferências de
comida suína
• Dar ênfase ao tipo de comida
preferido
• Erros cometidos:
• Uso do 3D sem necessidade
• Background, bordas
• Legenda redundante
• Negrito nos rótulos
• Escolha do gráfico de pizza
O gráfico de pizza não é
recomendado para
representar esse tipo de dado?
• Objetivo:
• Apresentar as preferências de
comida suína
• Dar ênfase ao tipo de comida
preferido
• Erros cometidos:
• Uso do 3D sem necessidade
• Background, bordas
• Legenda redundante
• Negrito nos rótulos
• Escolha do gráfico de pizza
• Solução:
• Gráfico de Barras
• Cor diferente para dar ênfase ao
tipo de comida preferido (bacon)
Processo para criar visualizações
Exemplo atual
Não linear!!!
Contextualização
Definição do contexto de utilização da visualização
Propósito de uso das técnicas de visualização
o Análise Exploratória
• Processo de pesquisa por informação relevante dentro dos dados (Tominski , 2006)
• Não há hipóteses sobre os dados
• Técnicas com alto grau de interatividade (Tominski , 2006)
o Análise Explanatória
• Comunica e compartilha informações (Iliinsky e Steele, 2011)
• Os dados são conhecidos por quem cria a visualização (Fisher, 2010)
• A escolha da técnica depende do público alvo (Keim et al., 2006)
Captura
Obtenção dos dados brutos para a visualização
Complexidade variada
oDownload
oAPI
Atualização dos Dados
Fontes de Dados
Limpeza
Qualidade dos dados
oDimensões
oMétricas
O que deve ser considerado
OpenRefine
Conversão
Manipulação dos dados para converter em formato apropriado
oConsiderar tecnologia e recursos do gráfico
oIntegração de diferentes fontes
oFacilitar a criação do gráfico
oFacilitar manipulação na visualização
Transformação
Descoberta de novos conhecimentos
oDados podem conter informações que não são explícitas
Métodos utilizados
oMatemáticos: soma, operação de conjunto
• Estatísticos: média, desvio padrão
oAprendizado de máquina: mineração
Mapeamento Visual
Consiste na escolha do modelo visual (ou do gráfico) para representar os dados
Critérios de escolha
o Características do conjunto de dados
o Tarefa
o Contexto
Recursos que auxiliam na escolha
o Catálogo de visualização (http://www.datavizcatalogue.com/)
o Wikis, Sites, Blogs e Projetos
o Tarefas perceptuais (escala de Cleveland e McGill)
o Matriz de seleção de gráficos – Stephen Few
Mapeamento Visual
Princípios recomendados na literatura para a escolha e construção do gráfico
o Evitar distorcer o que os dados têm a dizer
o Evitar recursos que distraiam o público-alvo (chartjunk)
o Incluir informações adicionais no gráfico para ajudar no entendimento dos dados
o Usar poucas cores (6-9)
Mercado de Ações
Recursos que auxiliam na escolha da técnica
Construção Visual
Formas de construir a visualização
o Bibliotecas (javascript)
• D3.js
• HighCharts.js
o Softwares
• Tableau
• Watson Analytics
• Excel
Ferramentas de construção visual
Interação
Métodos interativos são adicionados à visualização
oFacilita a exploração dos dados
Exemplos de métodos interativos
oSeleção de subconjunto dos dados
oFiltragem dos dados
oMudança do foco da visualização
Validação
Verificar se a visualização atende ao objetivo definido inicialmente
Formas de validação
oTécnicas para validar usabilidade
oAvaliação com usuário final da visualização
Links úteis
Exemplos de visualização
ohttp://public.tableau.com/s/gallery/50-years-crime-us
ohttp://www.healthmap.org/en/
ohttp://healthintelligence.drupalgardens.com/content/dashboardmonitor-microcephaly-outbreak-brazil
ohttp://population.io/#/1992/02/17/female/Brazil/home
ohttp://www.storybench.org/spread-zika-virus-roundup-visualizations/
ohttp://london2012.nytimes.com/results
ohttp://www.cabreastcancer.org/causes/
ohttp://evolutionofweb.appspot.com/?hl=pt-br
Links úteis
Wikis
ohttp://www.infovis-wiki.net/index.php?title=Category:Publications
ohttp://www.wikiviz.org/
Blogs
ohttp://www.thefunctionalart.com/
ohttp://www.perceptualedge.com/
ohttp://flowingdata.com/
ohttp://www.visualisingdata.com/
ohttp://viz.wtf/
ohttp://www.informationisbeautiful.net/
ohttp://vizwiz.blogspot.com.br/
Links úteis
Blogs
ohttps://eagereyes.org/
ohttp://www.cs.ubc.ca/~tmm/vadbook/
ohttps://datavisualization.ch/showcases/
ohttp://infosthetics.com/
Projetos
ohttp://helpmeviz.com/2014/02/05/have-data-will-visualize/
ohttp://seeingdata.org/
ohttp://www.brightpointinc.com/
ohttp://www.visual-telling.com/
ohttp://labvis.eba.ufrj.br/
Links úteis
Ferramentas:
ohttp://www.tableau.com/
ohttp://www.ibm.com/analytics/watson-analytics/us-en/
ohttp://www.qlik.com/
ohttps://infogr.am
Ferramentas Big Data:
ohttp://www.pentaho.com/
ohttp://hadoop.apache.org/
ohttp://circos.ca/
KEEP CALM AND VISUALIZE YOUR DATA
Obrigada!
Melise Paula ([email protected])
Bárbara Caetano ([email protected])

Documentos relacionados

uma estratégia para visualização da informação gerada a partir de

uma estratégia para visualização da informação gerada a partir de O crescente uso dos recursos de informática no dia a dia da sociedade, coletando e armazenando dados, está fazendo com o que o volume de dados armazenado e suas conexões cresçam exponencialmente, s...

Leia mais