Exibir código-fonte para Padrões estáticos e de movimento

'''Padrões Estáticos e de Movimento
<br>

Conteúdo totalmente extraído do livro:
'''''Information Visualization Perception for design - Colin Ware'''''
<br>

* Minerar dados é efetivamente o processo de encontrar padrões inicialmente desconhecidos ou que se afastaram de determinada norma


* O Analista de mercado procura por qualquer padrão de variáveis que podem predizer uma futura alteração no preço ou nos salários


* Quando procuramos por padrões estamos criando pesquisas visuais que são a chave para o pensamento visual


* Essas consultas, algumas vezes são vagas, outras vezes, precisas


* Em exploração de dados, considerar um padrão pode levar frequentemente a uma compreensão chave, razão convincente para a visualização
<br>


* O que é necessário para que vejamos um grupo?
* Como pode o espaço em 2D ser dividido perceptivelmente em regiões distintas?
* Sobre que condições, dois padrões são reconhecidos como similares?
* O que constitui a conexão visual entre objetos?
* As respostas são direcionadas para a visualização porque muitas das visões de dados são bi-dimensionais e a percepão de padrão trata da extração da estrutura no espaço 2D
<br>


* Modelo de 3 estágios de percepção
** Estágio de abstração de aspectos: A imagem visual é analisada em termos de elementos primitivos de forma, movimento, cores e profundidade estereoscópica
** Estágio de percepção padrão 2D: contornos são descobertos, o mundo visual é segmentado em regiões distintas baseado na textura, cores, movimento e contorno
** Estágio onde estruturas de cenas e objetos são descobertos, usando informação sobre conexões entre as partes componentes, informação ''shape-from-shading''
<br>


[[Arquivo:VIN-Padrões-percepção.png|center]]

<br>


* Existem alterações radicais nos tipos de processamento que ocorrem nos diferentes estágios

* Estágios iniciais: ocorre processamento massivamente paralelo da imagem inteira (Direção ''bottom-up'')
<br>

* Atenção ativa leva ao reconhecimento da pesquisa visual e de objetos (Direção ''top-down'' )

* No nível superior, de 3 a 5 objetos são mantidos na memória visual
<br>


* Se conseguimos fazer um mapeamento das estruturas de informação para prontamente percebermos padrões então estas estruturas serão mais facilmente interpretadas

<br>


* Aprendizado é importante no mecanismo de padrões

* ''Priming'', um tipo de ferramenta de aprendizado, refere-se ao fato de que uma vez que tivermos reconhecido um padrão, este torna-se mais fácil de identificar em aparições subsequentes
<br>

* Aprendizado de padrões a longo prazo ocorre após centenas ou milhares de tentativas porém alguns padrões são mais fáceis de aprender que outros
<br><br>


= Leis de Gestalt =
<br>


* Escola de Psicologia Gestalt (1912): Primeiro esforço sério de se entender percepção de padrões
* Gestalt: padrão em alemão
* 8 Leis de Gestalt: Clara descrição de muitos fenômenos de percepção básicos
* Facilmente traduz em um conjunto de princípios de projeto para visualização de informação
<br>


== Proximidade ==
<br>


* Coisas que estão próximas juntas são perceptivamente agrupadas juntas
<br>


[[Arquivo:Gestalt-Law-1.png|center]]
 Proximidade espacial é uma poderosa interpretação para disposição espacial
 Uma matriz de pontos é percebida como linhas a esquerda (a) e como colunas (b)
 Em (c) devido à proximidade percebemos dois agrupamento de pontos
<br><br>


[[Arquivo:Gestalt-Law-1a.png|center]]
 O princípio da concentração espacial
 O ponto rotulado como x é percebido como parte do grupo (a) ao invés do grupo (b)
<br><br>

* A aplicação da Lei da Proximidade em projetos de visualização é direta: a maneira mais simples e efetiva de enfatizar os relacionamentos entre diferentes entidades de dados é colocá-las em proximidade em um display.
<br><br><br>

== Similaridade ==
<br>

* A forma de elementos de um padrão individual podem também determinar como eles serão agrupados
* Elementos similares tendem a ser agrupados juntos
<br><br><br>

[[Arquivo:Gestalt-Law-1b.png|center]]
 De acordo com a Gestalt, a similaridade entre os elementos  nas linhas alternada faz com que o padrão de linha predomine
<br><br>

[[Arquivo:Gestalt-Law-2.png|center]]
 (a) Dimensões integrais são usadas para delinear linhas e colunas
 (b) Quando dimensões separáveis (cor e textura) são usados, é mais fácil atender separadamente a linhas ou a colunas
<br><br>

* Podemos aplicar também lições do conceito de dimensões integrais e separáveis.
<br><br>

== Conectividade ==
<br>

* Conectar diferentes objetos gráficos por linhas é uma poderosa forma de expressar que existe algumas relações entre eles
* Além  disso, isto é fundamental para o diagrama nó-ligação, um dos métodos mais comuns de representar relacionamentos entre conceitos
<br>

[[Arquivo:Gestalt-Law-3.png|center]]
 Conectividade é um efetivo princípio de agrupamento que é mais forte que 
 (a) proximidade, (b) cor, (c) Tamanho e (d) forma

== Continuidade ==
<br>

* O princípio da continuidade de Gestalt declara que somos mais preparados para construir entidades visuais fora de elementos visuais que são suaves e contínuos que alguns que contenham alterações abruptas na direção
<br>

* O princípio da boa continuidade pode ser aplicado ao problema de desenhar diagramas consistindo de nos de redes e suas ligações entre elas
<br><br>


[[Arquivo:Gestalt-Law-3a.png|center]]
 O padrão da esquerda (a) é percebido como uma linha encurvada sobrepondo-se a um retangulo
 (b) em vez de componentes mais angulares mostrado em (c)
<br><br>



* Pode ficar fácil identificar as fontes e destinos de linhas conectadas se elas forem suaves e contínuas  
<br><br>

[[Arquivo:Gestalt-Law-4.png|center]]
 Em (a), contornos contínuos suaves são usados para conectar os elementos, ao passo que em
 (b) temos linhas com alteração abrupta
 É muito mais fácil perceber conexões quando os contornos conectam-se suavemente
<br><br>

== Simetria ==
<br>

* Simetria pode fornecer um princípio de organização poderoso 
* Uma possível aplicação é em tarefas nos quais os analistas de dados estejam procurando por similaridades entre dois diferentes conjuntos de dados em séries temporais
* São mais fáceis de perceber quando arranjados segundo uma simetria vertical
<br>


[[Arquivo:Gestalt-Law-4b.png|center]]
 O padrão na esquerda consiste de contornos paralelos idênticos
 Nos outros dois padrões, os contornos tem sido refletidos sobre um eixo vertical produzindo uma simetria bilateral
 O resultado é um sentido muito mais forte de uma figura holística
<br><br>

[[Arquivo:Gestalt-Law-4c.png|center]]
 Interpretamos o padrão (a) como uma cruz a frente de um retângulo
 Uma alternativa, dois objetos mostrados em (b) não são percebidos, embora a figura negra
 atrás de uma figura branca poderia ser igualmente uma simples interpretação
 A cruz na interpretação do retângulo tem maior simetria (sobre eixos horizontais) para ambos os componentes
<br><br>

[[Arquivo:Gestalt-Law-4d.png|center]]
 Uma aplicação projetada para permitir aos usuários reconhecerem padrões de diferentes plotagens de séries temporais
 Os dados representam uma sequência de medidas realizada em núcleos de perfuração profunda do oceano
 Dois subconjuntos de de sequência estendidas são mostradas à direita
<br><br>

== Oclusão ==
<br>

* Um contorno em oclusão tende a ser visto como um objeto
* Psicólogos da Gestalt argumentam que existe uma tendência de percepção para fechar contornos que tem lacunas 
<br>


[[Arquivo:Gestalt-Law-5.png|center]]
 O princípio da oclusão de Gestalt força os mecanismos neurais a operarem tentando 
 encontrar soluções de percepção envolvendo contornos fechados
 Consequentemente, em (a) nós vemos um círculo atrás do retângulo e não um anel quebrado como em (b)
<br><br>

[[Arquivo:Gestalt-Law-5b.png|center]]
 Um digrama de Euler
 Este diagrama leva-nos a pensar (entre outras coisas) que entidades podem simultaneamente 
 ser membros dos conjuntos A e C mas não de A, B e C
 Também, qualquer coisa que for membro e B e C é também membro de D
 Esses conceitos bastante difíceis são claramente expressos e compreendidos por meio de contornos fechados
<br><br>

[[Arquivo:Gestalt-Law-5c.png|center]]
 Um diagrama de Euler aperfeiçoado usando textura e cores pode carregar um conjunto mais  
 complexo de relações que um Diagrama de Euler convencional usando apenas contorno fechado.
<br><br>

* Contornos fechados são extremamente importantes na segmentação de telas de monitores em interfaces baseadas em Windows
<br><br>

[[Arquivo:Gestalt-Law-5d.png|center]]
 Contornos retangulares fechados segmentam fortemente o campo visual
 Eles também fornecem referências de células
 Ambas as posições e tamanhos de objetos enclausurados são, para algumas extensões
 interpretadas com respeito à célula que o circunda
<br><br>

== Tamanho relativo ==
<br>

* Em geral, pequenos componentes de um padrão tendem a ser percebidos como objetos
<br>

[[Arquivo:Gestalt-Law-6.png|center]]
 As áreas escuras são menores e portanto mais prováveis de serem percebidas como objetos
 É também fácil de perceber padrões que são orientados horizontalmente e verticalmente como objetos
<br><br>


== Common Fate ==
<br>


'''Figura e Fundo'''
<br>


[[Arquivo:Gestalt-Fig-6-17.png|center]]
 Simetria, circundando espaço em branco e um contorno fechado
 Tudo contribui para sentirmos fortemente que esta forma é uma figura e não um fundo
<br><br>


[[Arquivo:Gestalt-Law-7b.png|center]]
 Vaso de Rubin. As pistas para a figura e fundo são praticamente equilibradas, 
 resultando em uma percepção biestável de qualquer das duas faces, ou um vaso
<br><br>

'''Mais sobre contornos'''
<br>
* Um contorno é um limite contínuo percebido entre regiões de uma imagem visual
* Um contorno pode ser definido por:
** uma linha
** um limite entre regiões de diferentes cores
** profundidade estereoscópica
** padrões de movimento
** texturas
<br>

[[Arquivo:Gestalt-Law-8.png|center]]
 Contorno ilusório , um limite fantasma de uma forma qualquer é vista onde fisicamente nada está presente
<br><br>


[[Arquivo:Gestalt-fig-6-20.png]]
 Diagrama esquemático ilustrando experimentos conduzidos por Field et al (1993)
 Se os elementos foram alinhados como mostrado em (a) para que uma curva suave possa ser traçada através 
 de alguns deles, a curva mostrada em (b) foi percebida
<br><br>



[[Arquivo:Gestalt-Fig-6.21.png|center]]
 Os resultados de Field et al. (1993) sugerem que os campos de vetores devem ser mais fáceis de se 
 perceber se os contornos suaves puderem ser desenhados através das setas
 (a) Uma grade regular é usada para determinar o layout da seta
 (b) As setas foram deslocados de modo que contornos suaves pudessem ser desenhados através das setas
 Como a teoria prevê, a última é mais efetiva
<br><br><br>


'''Direção de percepção: Representando campos de vetores'''
<br><br>

* A percepção de contorno nos leva naturalmente para o problema de percepção de representação de campos de vetores
<br>

* Este problema pode ser quebrado em dois componentes:
** a representação de orientação
** a representação da magnitude
<br><br>


[[Arquivo:Gestalt-Fig-6-22.png|center]]
 Maneira prática de representar um campo de vetores ou fluxo de dados
 Contudo, a direção é ambígua e a magnitude não é claramente expressada (Turk and Banks, 1996)
<br><br>

Comparando técnicas de visualização de Fluxo 2D
<br><br>

[[Arquivo:Gestalt-Fig-6-23.png|center]]
 Desenho em um estilo baseado em pinceladas. Halley descreveu a direção do vento como sendo dada por:
 '' the sharp end of each little stroak pointing out that part of the horizon, from whence the wind continually comes.''
<br><br><br>

[[Arquivo:Gestalt-Fig-6-24.png|center]]
 Direção do vetor pode ser desambígua se dado por meio de alteração do ''background''
<br><br><br>


[[Arquivo:Gestalt-Fig-6-25.png|center]]
 Seis diferentes técnicas de visualização de fluxo avaliadas por Laidlaw et al (2001)
 (a) Setas em uma grade regular. Comprimento fixo
 (b) Setas em uma grade jittered para reduzir os efeitos perceptivos aliasing. Comprimento fixo
 (c) Ícones de triângulo de tamanho proporcional ao campo de densidade de força inversamente relacionado ao tamanho do ícone. (Kirby et al., 1999)
 (d) Linha de convolução integral (Cabral e Leedom, 1993)
 (e) Setas de cabeça grande ao longo de uma linha usando uma grade regular (Turk e Banks, 1996)
 (f) Setas de cabeça grande ao longo de uma linha usando algoritmo de espaçamento constante. (Turk e Bancos, 1996)

= Percepção de transparência =
<br>

* Em muitas situações de visualização, é desejável apresentar data em forma de camada
* Muito comum em GIS
* Uma técnica é apresentar uma camada de dados sobre uma outra considerada transparente
<br><br>

[[Arquivo:Percep-Transp.png|center]]
 Transparência é percebida apenas quando uma boa continuidade é apresentada  e
 quando o correto relacionamento de cores está presente.
<br><br><br>

= Percepção sintática de diagramas =
'''


== A gramatica dos Grafos (nós e arestas) ==

Grafos são basicamente nós interligados por arestas.

A ciencia de Desenhar Grafos.

*Desenhar grafos de acordo com
*Minimizaćao de links
*Menor caminho
*Caminho de menor custo

[[Arquivo:image6.30.jpg|center]]
 A figura mostra o que chamamos de grafos, nós e arestas, representando arvores, ou relacionamento entree os nós
<br>

O conjunto de abstrações comuns aos diagramas nó de ligação está tão perto do onipresente que se pode
ser chamado uma gramática visual.


[[Arquivo:image6.31.jpg|center]]
 Um modelo de dados geral, que usa uma forma de diagrama de ligação do nó é o modelo entidade-relacionamento.
<br>

Tipos de nós e arestas e seus significados.


[[Arquivo:image6.33.jpg|center]]

== A gramatica dos Mapas ==


[[Arquivo:image6.34.jpg|center]]


*Grafos
*Mapas

[[Arquivo:image6.35.jpg|center]]
 Acima temos duas formas de representar a mesma informacao. Por mapas (esquerda) ou grafos (direita)
<br>

== Padrões em Movimento ==

[[Arquivo:image6.36.jpg|center]]

*Efeito roda de carroca


[[Arquivo:roda.gif|center]]

[[Arquivo:roda2.gif|center]]

*Quadros em Movimento

[[Arquivo:image6.37.jpg|center]]


*Percepção da Causalidade

[[Arquivo:image6.40.jpg|center]]

*Percepcão de Movimento