Ferramentos de Dashboard 1

Prévia do material em texto

- -1
FERRAMENTAS DE DASHBOARD
UNIDADE 1 - INTRODUÇÃO À VISUALIZAÇÃO 
DE DADOS E INFORMAÇÕES
ELTON SARMANHO SIQUEIRA
- -2
Introdução
Neste capítulo apresentaremos a visualização de dados e informações, representações visuais e algumas
estratégias de visualização. Você também conhecerá alguns conceitos sobre de interação e visualizaçãodesign
analítica. Além disso, você sabe a importância de visualizarmos dados? Qual é a melhor visualização para cada
situação? O que devemos considerar quando queremos criar um projeto de visualização de informações?
Além disso, vamos apresentar os fundamentos básicos da visualização de dados e informações, mostrando a
importância deste campo no atual cenário em que vivemos, no qual dados são valiosos para qualquer empresa
tomar decisões precisas e consistentes sobre seus negócios. Desta forma, abordaremos outro campo de estudos
que vem sendo difundido e tendo bastante importância, a ciência de dados ou (FOREMEN, 2016).Data Science 
Acompanhe!
1.1 Visualização de dados e de informações
Há uma enorme tendência em se apresentar os dados de forma mais legível possível. O avanço das tecnologias e
dos algoritmos para a aquisição de dados (empresas como a UBER e o Facebook, que utilizam bastante para
obterem vantagem competitiva) tem disponibilizado um grande volume de dados em diferentes formatos (texto,
áudio, imagem, mapas entre outros) (JOSE; REIS, 2019).
Além disso, muitos usuários têm a necessidade de buscar uma informação em uma determinada fonte de dados
e, de certa forma, conseguem obter tranquilamente uma massa de dados significativa, dentre a qual é preciso ter
muito atenção ao buscar e verificar a informação correta, pois muito do que foi obtido pode ou não ser relevante.
Desta maneira, a sobrecarga de informações é uma questão preocupante na representação de resultados obtidos
por determinadas fontes de dados, como banco de dados, banco de imagens, mapas digitais e etc., já que o
importante é selecionar e visualizar somente resultados de interesse do usuário.
Um modo de tratar essa questão é utilizar a (GERSHON; EICK, 1997), emvisualização de dados e informações
que podemos delinear esse termo como uma representação visual útil das informações acompanhadas de uma
organização lógica e com certos critérios estabelecidos baseado nos dados de origem. Por exemplo, Google Maps
(ver figura a seguir) é um mecanismo de busca baseado em dados como (nome, CEP ou coordenadas geográficas)
que gera uma representação gráfica por meio de um mapa e de um conjunto de informações pertinentes.
- -3
Figura 1 - Figura 1- Google Maps
Fonte: Fonte: GOOGLE MAPS, 2019.
A visualização de informações proporciona mostrar os dados na forma de simples gráficos (linhas, de barras e de
pizza) e outras visualizações mais complexas (mapas, consulta em bases de dados, e no desenho de diagramas
como organogramas e árvores genealógicas (DI BATTISTA ., 1999) de tal maneira que o usuário possa usaret al
de forma simples a sua percepção visual para uma melhor compreensão das informações.
Nesse material, a visualização de dados e a visualização de informações não terão distinção uma vez que, de
certa forma, não é relevante separá-las no contexto global das técnicas de visualização e alguns autores fazem
meras distinções com base nas classes de aplicações ou interesse do usuário. As técnicas de visualização de
informações buscam mostrar graficamente os dados de um determinado contexto para que o usuário possa
entender melhor os dados disponíveis a partir relações espaciais existentes de modo a compreendê-las de forma
clara, gerando um novo conhecimento ou descoberta (um dos principais objetivos desse estudo).
De forma geral, podemos dizer que o objetivo da visualização de informações é ajudar no entendimento dos
dados, o qual, sem uma visualização, exigiria maior esforço para ser compreendido.
- -4
Afinal, o que é visualização de informações? Segundo Card . (1999), a visualização de informações é o uso deet al
representações visuais de dados abstratos suportados por computador e interativas para ampliar a cognição. A
partir dessa definição temos um importante passo durante processo de visualização, que seria determinar qual
técnica deve ser utilizada em uma determinada situação (maiores detalhes serão explanados no próximo tópico).
Claramente, esta escolha dependente do tipo de dado que está sendo estudado e dos trabalhos que necessitam
ser realizados.
Segundo alguns estudos, há classificações que buscam ajudar o usuário a adequar sua necessidade (ou sua
aplicação) em alguma técnica, por exemplo, Shneiderman (1996) utilizou a seguinte classificação (baseada por
tipo de dados e por tarefas): unidimensionais (1D), temporais, bidimensionais (2D), tridimensionais (3D) e
multidimensionais (nD), dirigidas à visualização de hierarquias e de relacionamentos (grafos), e possibilitar a
existência de tarefas como: gerar uma visão geral e detalhada, , filtragem, caracterização dezooming
relacionamentos e extração de informações diversificadas.
Agora que você reconhece a ampla abrangência do conceito de visualização de dados e informações, já está
preparado para compreender sobre dados e suas representações visuais, técnicas de visualizações de
informações, , que serão assuntos dos próximos tópicos.dashboard
CASO
Tendo em vista a expansão das redes sociais (Facebook, Twitter e entre outras), Riff et al.
(2015) desenvolveram um trabalho que mostra uma ferramenta de visualização de
informações, empregando dados extraídos do Twitter baseado em hashtags e seguindo modelo
de visualização de dados desenvolvido por Ben Fry. A partir desses dados, os autores criaram
uma visualização que permite explorar os acontecimentos de certo dia e seu impacto na
respectiva rede social.
Para mais detalhes, acesse: http://www.proceedings.blucher.com.br/article-details/visualizao-
.sobre-dados-de-redes-sociais-20367
VOCÊ SABIA?
Sendo uma área em constante expansão, existem conferências importantes sobre Visualização
de Informações, a saber, o ACM ; e o Symposium on Software Visualization International
. No contexto nacional, há eventos como o Conference of Information Visualization Brazilian
, que tem uma grandeSymposium on Computer Graphics and Image Processing – SIBGRAPI
relevância na área acadêmica e desenvolvem novas pesquisas e produtos nesse campo de
estudo.
- -5
1.2 Caracterização de dados
Dados descrevem de forma geral as entidades que são os elementos de estudo. Os dados são os atributos que
podem ser caracterizados conforme os critérios definidos, logo, a percepção das propriedades dos dados é um
importante passo para escolha correta da técnica de visualização a ser utilizada.
Conforme Freitas e Wagner (1995), podemos estabelecer um critério para caracterizar um atributo em que seria
sua classe (ou tipo) de informação que representa, nesse caso, um atributo que pode ser uma entidade dentro de
uma classe, podendo ser: característica, categoria, atributo nominal ou ordinal. Além disso, os atributos possuem
uma propriedade individual: escalares, vetoriais, ou tensoriais (considerando um intervalo, podem assumir
valores inteiros ou ponto flutuante). Outro critério para a caracterização dos atributos está relacionado ao tipo
primitivo do dado e pode ser alfanumérico, inteiro ou ponto flutuante.
Por fim, os dados podem ser caracterizados conforme a dimensão e a natureza do domínio. Considerando a
dimensão, temos (clique para ler):
Unidimensionalidade
Bidimensionalidade
Tridimensionalidade
N-dimensionalidade
Enquanto ao domínio, pode ser de natureza contínua ou discreta.
1.2.1 Representação visual
Representações visuais se enquadram em figuras que servem para representar uma amostra de dados sob algum
estudo. Popularmente, temos os gráficos de dispersão, de linhas, de barras e de pizza que possibilitam observar
as relações entre os atributos, como vemos na figuraa seguir:
VAMOS PRATICAR?
Desenvolva três gráficos que apresentem os principais tipos primitivos apresentados nesse
material. Fique atento na construção de cada gráfico e tente relacionar em cada eixo tipos
primitivos diferentes.
- -6
Figura 2 - Representação visual de Gráficos Simples
Fonte: PYQTGRAPH, 2019.
Ainda temos representações através de mapas, de diagramas e de grafos, que são representações gráficas
complexas as quais servem para mostrar componentes visuais (símbolos geométricos e cores). Considerando a
natureza e o domínio do estudo, as representações visuais podem ser unidimensionais, bidimensionais ou
tridimensionais.
1.2.2 Recursos de interação
Em certos momentos, a representação visual não é suficiente para proporcionar uma compreensão de uma
grande massa de dados. Constantemente são disponibilizadas funções que os usuários podem utilizar por meio
de ações em diferentes níveis (FREITAS ., 2001) e estas ações promovem mudanças na representação visualet al
criando uma nova aparência no conjunto de dados em estudo.
- -7
Considerando o nível mais primitivo ou básico estão as funções de navegação pelo deslocamento horizontal
/vertical de uma barra de rolagem (em inglês, ). Em outro nível, temos as funções de seleção de dadosscroll bar
de interesse (em inglês, ), como vemos na figura a seguir, as quais podem ou não provocarpoint region of interest
tanto um reposicionamento da amostra de dados, gerando uma nova visualização como certo nível de
detalhamento ( semântico) de uma parte dessa amostra (ver figura a seguir) e, possivelmente, a omissãozooming
de outra.
Temos outras funções mais complexas, como: operações de poda ( ) e agrupamento ( ), queprunning clustering
são essenciais nas tarefas de navegação e exploração em diagramas que representam estruturas como grafos
(para uma leitura mais completa sobre as funções citadas, leia Herman e Marshall, 2000).
As operações citadas anteriormente possibilitam ocorrer três situações: (1) a representação é modificada para
apresentar somente a região de interesse selecionada; (2) a referida região de interesse ocupa, exclusivamente, o
campo de visão essencial e o resto da amostra de dados é sustentado em outra área; e (3) a região de interesse e
a visão geral, ambas apresentadas conjuntamente. A situação 2 apresenta uma técnica chamada de visão 
, enquanto as outras situações apresentam a técnica chamada de (CARD .,+detalheoverview foco+contexto et al
1999). Estas e outras técnicas serão explicadas mais adiante.
VOCÊ QUER VER?
Em 2019, o cientista de dados Elton Sarmanho, da Universidade Federal do Pará, desenvolveu
uma ferramenta de visualização de dados que apresenta os sinais fisiológicos ao longo do
tempo dos usuários que participaram de um controlado (são testes que avaliamPlaytest
experiência do jogador durante interação com um jogo digital). Nessa ferramenta, percebemos
algumas técnicas de interação e apresentação de alguns gráficos.
Para verificar a referida ferramenta, acesse: .https://youtu.be/7kWTL8nLrYI
VAMOS PRATICAR?
Crie um painel de visualização que implemente as funcionalidades de e .Prunning Clustering
Fique à vontade para escolher amostra de dados a ser utilizada.
- -8
Figura 3 - Seleção de dados de interesse em uma imagem
Fonte: PYQTGRAPH, 2019.
Em um nível superior estariam funções que possibilitam representar visualmente os dados em segmentos ou
frações, considerando alguns critérios definidos pelos usuários. Essas funções são filtros ou consultas dinâmicas,
comumente encontradas em e em banco de dados.dashboard
1.3 Modelo de referência de visualização
Um modelo de referência de visualização possibilita a identificação dos elementos importantes a serem
considerados na utilização de uma determinada técnica. Existem diferentes modelos, entretanto, usaremos o
modelo de referência para o processo de visualização de informações proposto por Card et al. (1999), como
vemos a figura a seguir, o qual é bastante consolidado no meio acadêmico:
- -9
Figura 4 - Modelo de Referência para Visualização de Informações
Fonte: FREITAS et al., 1995, p. 149.
A etapa inicial é denominada de e é quando os dados brutos são processados eTransformações de Dados
estruturados, normalmente, na forma de uma ou de mais tabelas. O processamento visa a eliminar os dados
incorretos e truncados através de seus filtros e agrupamentos. Uma forma simples de estruturar os dados em
tabelas é designar uma linha para cada dado e uma coluna para cada atributo. Desta forma, número total de
linhas apontará a quantidade total de dados a serem visualizados e, consequentemente, o número total de
colunas que incide na dimensão dos dados.
A etapa seguinte é o , a qual abrange a construção de uma estrutura visual que mostre osMapeamento Visual
dados da tabela. Toda estrutura visual pode ser dividida em três segmentos: substrato espacial, marcas
. O primeiro segmento, chamado assinala ovisuais e propriedades gráficas das marcas substrato visual,
espaço para a visualização, geralmente, representado por eixos (por exemplo, eixo X e Y no domínio cartesiano).
Conforme Nascimento e Ferreira (2011, p. 18), existem quatro tipos elementares de eixos:
• U = eixo não estruturado (ou sem eixo);
• N = eixo nominal (região dividida em sub-regiões);
• O = eixo ordenado (região dividida em sub-regiões cuja ordem tem importância);
• Q = eixo quantitativo (região que tem uma métrica, como valores inteiros ou reais).
As são compostas por símbolos gráficos que retratam os itens de dados. A figura a seguirmarcas visuais
apresenta os tipos de marcas visuais mais comuns: pontos, linhas, áreas, volumes e figuras complexas cujos
detalhes possuem extrema relevância.
Figura 5 - Marcas Visuais
Fonte: NASCIMENTO; FERREIRA, 2011, p. 19.
Temos, ainda, o último seguimento chamado , que são os atributos visíveis quepropriedades gráficas
•
•
•
•
- -10
Temos, ainda, o último seguimento chamado , que são os atributos visíveis quepropriedades gráficas
representam as marcas visuais. As propriedades frequentemente utilizadas são: posição espacial, forma, cor,
tamanho e área (para objetos bidimensionais) ou volume (objetos tridimensionais) da marca, além da
orientação, sentido e inclinação de marcas. Há propriedades complexas que proporcionam dinamismo à marca:
animação, velocidade, direção e sentido do movimento, além da frequência com que o estado de marca altera sua
forma
Por fim, as são último passo do processo de visualização em que é possível alterar eTransformações Visuais
estender as estruturas visuais interativamente por meio de operações básicas, como vemos a seguir (clique para
ler).
Testes de
localização
Permitem obter informações elementares sobre algum elemento da tabela de dados.
Controles de
ponto de
vista
Proporcionam ampliar, reduzir e deslocar a imagem com o propósito de fornecer distintas
visões.
Distorções da
imagem
Tendendo gerar ampliações de uma determinada região em detrimento de outra.
Os recursos de interação implementados durante a etapa de transformação visual proporcionam ao usuário
examinar diferentes cenários para uma melhor compreensão dos dados que estão sendo vistos. Vale ressaltar
que o trabalho para processo de exploração dos dados é transmitido parcialmente para a máquina, uma vez que
as atividades de processamento de imagens são feitas exclusivamente pela máquina, deixando somente para o
usuário tarefa de analisar dados quando a visualização é alterada.
VOCÊ QUER LER?
Livros especializados também apresentam conceitos e técnicas de visualização de informações
que podem direcionar ao estudante para um profundo conhecimento sobre este campo de
estudo. Os textos estão em inglês e podem ser encontrados em Card . (1999), Spenceret al
(2000) e Ware (2004).
VAMOS PRATICAR?
Desenvolva um mecanismo de seleção dados por interesse utilizando alguma imagem
significativa,por exemplo, um mapa. Fique à vontade de escolher a imagem para exercitar o
conceito em questão.
- -11
1.3.1 Técnicas de interação
Agora descreveremos algumas técnicas de interação encontradas nas etapas do modelo anterior, as quais são
comumente utilizadas durante construção de painel de visualização de dados ou dashboard.
• A técnica de é uma interação com transformação de dados que corresponde em um Brushing
procedimento interativo que é capaz selecionar na tela os dados específicos ou uma amostra de dados do 
total, facilitando a identificação e exploração dos efeitos sobre as relações entre variáveis consideradas 
importantes, como vemos na figura a seguir.
Figura 6 - Técnica de Brushing
Fonte: KELLEHER, 2014, p. 32.
• A técnica de é uma interação com mapeamento visual que, geralmente, é encontrada em Pivot Tables
tabelas e/ou planilhas eletrônicas e que possibilita ao usuário ter uma interação dinâmica sobre dados 
sobre as linhas e colunas, como vemos na figura a seguir.
•
•
- -12
Figura 7 - Técnica de Pivot Tables.
Fonte: EXCELCAMPUS, 2019.
• A técnica de é uma interação com as transformações de visualizações que possibilita Direct Selection
selecionar e destacar elementos gráficos isoladamente ou em grupos (ver figura anterior - Técnica de 
).Brushing
1.4 Aspectos gerais da visualização
Destacamos que nem toda visualização de dados é útil para determinado objetivo. Conforme Mackinlay (1986),
podemos considerar dois aspectos para visualização que nos auxiliam a definir a sua utilidade: a expressividade
e a efetividade.
Uma visualização é avaliada como expressiva caso seja capaz de apresentar todos os dados de interesse ao
usuário e nada mais. Já a efetividade está condicionada em mostrar os dados de forma compreensível, ou seja,
para uma visualização alcançar efetividade, ela precisa ser naturalmente perceptível e ocasionar um menor
número de erros de interpretação ao usuário. Esses dois aspectos são relevantes, pois uma visualização pode não
ser apta em enfatizar padrões valiosos nos dados, consequentemente, não proporcionará novas informações
além daquilo que é usualmente conhecido. A visualização pode ser de árduo entendimento ou ocasionar
•
VOCÊ O CONHECE?
Jock D. Mackinlay é um pesquisador americano em visualização de informações e vice-
presidente de pesquisa e design da . Junto com outros autores eleTableau Software
desenvolveu um conjunto de técnicas de visualização de informação e orientações para
desenvolvedores de seguirem para a construção de visualizadores de altadashboard
qualidade.
Para saber mais sobre vida de Jock D. Mackinlay, acesse: https://research.tableau.com/user
./jock-mackinlay
- -13
além daquilo que é usualmente conhecido. A visualização pode ser de árduo entendimento ou ocasionar
interpretações falsas, que em geral desdizem com o verdadeiro sentido dos dados.
Podemos destacar alguns problemas que comprometem a efetividade de uma visualização. Clique nas setas para
ler:
insuficiência de dados na visualização pode prejudicar processo de contextualização das informações relevantes;
desprezar atributos relevantes;
sobreposição de gráficos em escalas ou sistemas de coordenadas diferentes impede uma comparação das
informações na tela;
realizar mapeamento inadequado dos dados para marcas e atributos visuais.
Existem outras propriedades como cor, dimensionalidade, tamanho e forma dos elementos visuais que
impactam no processo de cognição e na elaboração de visualizações efetivas. A existência de funcionalidades
para interagir com os dados pode contribuir para melhorar a visualização.
Nascimento e Ferreira (2011, p. 20) nos mostram alguns pontos que propiciam elevação da expressividade e da
efetividade das visualizações, clique a seguir para ler.
Utilize o modelo da figura apresentada anteriormente, “Modelo de Referência para Visualização de Informações”,
durante a criação de novas visualizações. O referido modelo auxilia na modularização do processo de mudança
dos dados brutos em imagens interativas. Com efeito, novos mecanismos podem ser incrementados à visualização
sem a necessidade de mudar o processo como um todo;
Realizar uma limpeza ou remoção dos elementos visuais desnecessários, por exemplo, legendas sem relevância
durante o processo de construção visualização;
Alcance a simplicidade. Se houver formas distintas de representar visualmente uma mesma informação, escolha
sempre a mais simples;
Use, de forma adequada, símbolos e atributos visuais que ajudem na percepção dos dados e dos padrões
existentes. Por exemplo, ao usar gráfico de linhas, tente usar diferentes cores para diferentes linhas e dependendo
do contexto use certas cores que são bem conhecidas academicamente ou culturalmente por terem um
significado definido. Isso facilita no processo de abstração do conhecimento.
O trabalho feito por Mackinlay (1986) mostra uma relação de associação dos atributos de dados com os
atributos visuais, propondo uma escala de prioridade para usar de forma adequada esses atributos visuais. As
ordens de prioridade construída pelo autor são apresentadas no esquema a seguir para três tipos de dados
(quantitativos, ordinais e nominais), partindo do atributo visual mais perceptível até o menos perceptível. O
objetivo é associar os atributos mais importantes dos dados aos atributos visuais no topo da lista, usando a
sequência recomendada.
- -14
Figura 8 - Esquema da percepção de atributos visuais.
Fonte: NASCIMENTO; FERREIRA, 2011, p. 22.
A seguir serão discutidos com mais detalhes algumas das técnicas de visualização de informações que visam
analisar de forma geral e específica os dados.
1.4.1 Técnicas de visualização de informações
Existem dois critérios para o estudo e a classificação das técnicas de visualização de informações. O primeiro
considera a forma como as técnicas interagem com substrato visual, as marcas e as características dos elementos
visuais. Nesse critério, temos técnicas que utilizam as cores, Foco + Contexto, (Geral +Overview + Detail
Detalhes), (Paisagem) e que alteram a dimensão do substrato visual, manipulamlandscape Scrolling/Zooming
dinamicamente a associação dos dados e alteram a escala de ampliação da figura (NASCIMENTO; FERREIRA,
2011). No segundo critério, as técnicas são classificadas conforme as características dos dados a serem
visualizados, considerando a dimensionalidade e as estruturas. Vamos levar em consideração aqui o primeiro
critério.
Um mecanismo bastante explorado por várias técnicas na apresentação de informações é o uso de cores. Utilizar
a cor de forma correta e precisa não é uma tarefa simples, já que a associação inapropriada de atributos de dados
a cores pode gerar uma poluição visual ou quebra da percepção da informação.
Assim, Ware (2004) aponta algumas orientações para o uso adequado de cores, por exemplo, enfatizar a
preocupação com o contraste da cor de uma marca visual com a cor de fundo, em que o contraste entre as cores
adjacentes pode ou não modificar expressivamente a entendimento de uma cor, fazendo com que ela pareça
mais clara ou escura. O respectivo autor indica artifícios para minimizar esse efeito, por exemplo, projetar uma
borda de cor branca ou preta (de espessura fina) ao redor de um objeto colorido. A seguir, vamos detalhar outras
técnicas de visualizações.
1.4.2 Foco + contexto
Iremos apresentar procedimento chamado Foco+Contexto em que foca em apresentar uma visualização macro
dos dados a serem apresentados, porém enfatizando certa área de interesse ( ) através de uma levefoco
ampliação. No geral, busca-se ampliar a área de interesse enquanto se compacta o restante da imagem (contexto
- -15
ampliação. No geral, busca-se ampliar a área de interesse enquanto se compacta o restante da imagem (contexto
). Ressaltamos que essa técnica aplica uma distorção da figura original, assim, ela pode demandar treinamentopara seu uso eficiente.
Para Nascimento e Ferreira (2011), os principais exemplos de técnicas do tipo Foco+Contexto são a , Fisheye
e o . Elas serão brevemente explicadas a seguir. Hiperbólico, Browser Perspective Wall Table Lens
1.4.3 Fisheye
Outra técnica visualização bastante conhecida na literatura é chamada de , a qual gera uma visãoFisheye
detalhada de uma área de interesse através de uma taxa maior de ampliação no centro dessa área e decrescente
no sentido da periferia da imagem.
Além disso, a referida técnica foi comumente empregada para a navegação em árvores de diretórios (conforme
vemos na figura a seguir), em que subárvores eram expandidas ou compactadas conforme a localização de uma
área de interesse do usuário.
VOCÊ SABIA?
A técnica Fisheye proposta por Furnas (FURNAS, 1981) é amplamente usada em imagens
bidimensionais, porém, foi inicialmente utilizada para a visualização de texto. As seções de
texto de interesse secundário eram removidas, mostrando somente o seu título. Já a área ou
subárea de interesse primário aparecia em maiores detalhes.
- -16
Figura 9 - FishEye Menu.
Fonte: BEDERSON, 2012. XX.
Outra técnica usada em conjunto com é Hiperbólico ou árvore Hiperbólica, a qual vemos aFisheye Browser
seguir.
1.4.4 hiperbólicoBrowser
A técnica de Hiperbólico consegue combinar Foco+Contexto com desenho radial de árvores para ajudarBrowser
na navegação de grandes hierarquias de dados. Podemos destacar o trabalho feito por Lamping e Rao (1996, p.
XX), no qual os autores mapeiam a estrutura de uma árvore em uma representação no plano hiperbólico a ser
projetado em um display.
Uma característica desse plano é que a circunferência de um círculo no qual o centro incide com o centro da tela
aumenta exponencialmente com o seu raio. Isso quer dizer que existe mais espaço livre para se compactar dados
na medida em que se aproxima da periferia da estrutura. Usando essa representação, essa técnica oferece em
torno de dez vezes mais vértices de uma árvore do que usando uma visualização no plano cartesiano.
Conforme Lamping e Rao (1996, p. 35) é possível constatar a efetividade da navegação em um Browser
Hiperbólico. Alterações no foco podem ser feitas por meio de movimentos simples do tendo comomouse
objetivo selecionar vértices de interesse ao usuário. Assim, é possível mover o vértice selecionado para o centro
do e provocar uma compactação dos dados que estão distantes do mesmo.display
- -17
Figura 10 - Browser Hiperbólico.
Fonte: NASCIMENTO; FERREIRA, 2019, p. 30.
Desta maneira, esta técnica realiza transições progressivas e leves com relação ao ponto de foco, de modo a
conservar o mapa mental, como vemos na figura anterior.
1.4.5 Perspectiva e Wall Table Lens
A técnica Perspective Wall (MACKINLAY ., 1991, p. 176) possibilita a visualização de diversas informaçõeset al
em sequência por meio de um retângulo horizontal em que é dobrado para trás nos limites à direita e à esquerda
da área de interesse, gerando uma perspectiva tridimensional dos resultados. Uma figura dessa técnica pode ser
vista a seguir.
- -18
Figura 11 - Exemplo de Calendário usando a técnica Perspective Wall.
Fonte: NASCIMENTO; FERREIRA, 2011, p.31.
A segunda técnica chamada de (RAO; CARD, 1994) é uma estratégia efetiva para a compressão deTable Lens
grande massa de dados alfanuméricos multidimensionais apresentados em uma tabela e mostrados
completamente em uma tela. Os dados (as linhas) de grande interesse ficam visivelmente expandidos, enquanto
os demais elementos são compactados em pequenos (na forma de linhas).pixels
Figura 12 - Table Lens.
Fonte: NASCIMENTO; FERREIRA, 2011, p. 31.
Ainda temos que o comprimento das linhas de são definidas pelo atributo do dado na coluna empixel
correspondência. A técnica de Table Lens proporciona interação do usuário por meio da seleção das linhas de
maior interesse, o que gera sua ampliação e a visualização dos valores acurados nas suas colunas. Existe a
- -19
maior interesse, o que gera sua ampliação e a visualização dos valores acurados nas suas colunas. Existe a
possibilidade de ordenar as linhas com base nos atributos das colunas para simplificar a consulta dos dados e
explorar correlações entre eles.
1.4.6 Geral + Detalhe
A técnica conhecida como Geral + Detalhe (em inglês, ), temos que uma parte dos dados éOverview+Detail
mostrada de forma ampla e minuciosa em uma área de maior visualização (chamado ), enquanto que umadetail
imagem reduzida, que frequentemente está posicionada lateralmente na tela (o ), apresenta uma visãooverview
geral de todo conteúdo disponível. A respectiva técnica possibilita sincronizar a região ampliada com uma marca
visual na imagem reduzida, de tal maneira que direciona qual segmento dos dados está detalhado.
Figura 13 - Um exemplo de overview+display. Overview se localiza canto direito inferior da tela ao qual permite 
usuário ver contexto da região detalhada
Fonte: COCKBURN et al., 2009, p. 3.
Esta técnica é frequentemente utilizada em processadores de texto e em programas de apresentação de slides e
imagens para organizar a navegação e a visualização de dados em uma lista de diversas páginas.
1.4.7 Zooming
Essa técnica possibilita ao usuário controlar o nível de abstração de uma representação de dados, de modo que
essa representação possa apresentar uma visão mais ampla ou detalhada de uma área de dados específica. Desta
forma, o permite mudar a escala da representação visual sem que a representação seja distorcida,zooming
somente replicando a ação de aproximação ou de afastamento usada em imagens consideradas não dinâmicas.
- -20
Figura 14 - Técnica Zooming sobre gráfico de linha.
Fonte: ORIGINLAB, [201-].
De certa maneira, essa técnica possibilita o controle do foco e o fator de para adquirir uma visão comzoom
adequada perspectiva em cima dos dados de interesse, de modo a não perder a noção de posição e contexto. O
usuário pode realizar essa operação através da “barra de ”, por exemplo. Com o avanço das tecnologias ezoom
dos dispositivos de toque ( ), essa técnica está bastante desenvolvida e consolidada já que o uso dos dedostouch
torna possível realizá-la de forma eficiente.
1.4.8 Filtragem
Essa técnica possibilita a seleção dos dados a serem representados conforme as condições definidas numa
consulta. Os dados que não estão inclusos nesta condição, construída pelo usuário, ficam ocultados de forma não
estarem visíveis e podem retornar mais tarde por meio de outra consulta. Este tipo de técnica, a qual é baseada
no paradigma da manipulação direta dos dados, auxilia na elaboração de um sistema mais responsivo, usando
consultas textuais orientadas ( ).queries
Figura 15 - Filtragem usando Query.
Fonte: DRUPAL, [201-].
Além do uso de consultas, a filtragem pode ser feita usando , (veja aalpha sliders range sliders figura a seguir) e
- -21
Além do uso de consultas, a filtragem pode ser feita usando , (veja aalpha sliders range sliders figura a seguir) e
entre outros componentes gráficos.
Figura 16 - Range Sliders filtrando data.
Fonte: SUPPORT OFFICE, 2019.
A técnica de filtragem é recomenda quando se tem uma massa de dados e o observador somente deseja
visualizar uma pequena parte deles, logo, é fortemente recomendada a implementação dessa técnica em projetos
de visualização de informações.
Síntese
Finalizamos este estudo introdutório no qual apresentamos os conceitos de visualização de dados e informação.
Além disso, neste capítulo você teve a oportunidade de:
Nesta unidade, você teve a oportunidade de:
• entender melhor sobre dados e mecanismos de interação;
• ter noções gerais sobre Modelo de referência de visualização;
• compreender as técnicas de interação;
• conhecer alguns aspectos gerais que devem ser levados em conta para uma visualização de dados 
adequada;
• conhecer algumas técnicas de visualização.Bibliografia
BEDERSON, B. B. [screenshot]. Disponível em: Fish Eye Menu http://hcil2.cs.umd.edu/trs/2000-12/2000-12.
html. Acesso em: 25 ago. 2019.
CARD, S. K. Readings in Information Visualization: using vision to think. : KAUFMANN, M. et al. In Series in
. Amsterdam: Academic Press, 1999.Interactive Technologies
COCKBURN, A.; KARLSON, A.; BEDERSON, B., A Review of Overview+Detail Zooming and Focus+Context
•
•
•
•
•
- -22
COCKBURN, A.; KARLSON, A.; BEDERSON, B., A Review of Overview+Detail Zooming and Focus+Context
Interfaces. , v. 41, p. 1-3, 2009. ACM Computing Surveys
DI BATTISTA, G. . Upper Saddle River: Prentice Hall, 1999.et al. Graph Drawing
DRUPAL. Improve query filter UI on admin/content. , [201-]. Disponível em: Download e Extend https://www.
. Acesso em: 25 ago. 2019.drupal.org/project/drupal/issues/355820
FOREMAN, J. W. Usando Data Science Para Transformar Informação em Insight. São Paulo: AltaData Smart. 
Books, 2016.
FREITAS, C. M. D. S. Cava. Introdução à Visualização de Informações. Revista de Informática Teórica eet al.
Aplicada, Porto Alegre, v. 8, n. 2, p. 143-158, 2001.
FREITAS, C. M. D. S.; WAGNER, F. R. Ferramentas de suporte às tarefas da análise exploratória visual. Revista de
, Porto Alegre, v. 2, n. 1, p. 5-36, 1995.Informática Teórica e Aplicada
FURNAS, G. W. The FISHEYE view: a new look at structured files. . New Jersey:Technical Report #81-11221-9
Bell Laboratories 1981.
GERSHON, N.; EICK, S. G. Information Visualization. , v. 17, n. 4, p.IEEE Computer Graphics and Applications
29-31, 1997.
HERMAN, I.; MELANÇON, G.; MARSHALL, M.S. Graph Visualization and Navigation in Information Visualization: a
survey. , v. 6, n. 1, p. 24-42, 2000.IEEE Transactions on Visualization and Computer Graphics
JOSÉ, M. F.; REIS, B. S. . São Paulo: Érica, 2015. Disponível em: Projetos gráficos: fundamentos 2D e 3D
https://integrada.minhabiblioteca.com.br/books/9788536519517. Acesso em: 25 ago. 2019.
KELLEHER, C. . University of Massachusetts Lowell. Tese de Doutorado,Visualizing the Universal Data Cube
2014.
LAMPING, J.; RAO, R. The hyperbolic browser: A focus + context technique for visualizing large hierarchies. 
, v. 7, n.1, 1996, p. 33–35.Journal of Visual Languages and Computing
MACKINLAY, J. Automating the design of graphical presentations of relational information. ACM Transactions
, v. 5, n. 2, p. 110–141, 1986.on Graphics
MACKINLAY, J. D.; ROBERTSON, G. G.; CARD, C. The perspective wall: Detail and context smoothly integrated. : In
 - Conference on human factors in Computing Systems and Graphics Interface. ACM-Proceedings of ACM CHI’91
Press, 1991. p. 173–179. Disponível em: https://research.tableau.com/sites/default/files/p173-mackinlay.pdf.
Acesso em: 25 ago. 2019.
MICROSOFT OFFICE. Create a PivotTable timeline to filter dates. , 2019. Disponível em: Support Office
https://support.office.com/en-us/article/create-a-pivottable-timeline-to-filter-dates-d3956083-01be-408c-
. Acesso em: 25 ago. 2019.906d-6fc99d9fadfa
NASCIMENTO, H. A. D.; FERREIRA, C. B. R. Uma Introdução à Visualização de Informações. Visualidades -
, Goiânia,v. 9, n. 2, p. 13-43, 2011.Revista do Programa de Mestrado em Cultura Visual
NASCIMENTO, H. A. D.; FERREIRA, C. B. R. (2005). , p.Visualização de Informações - Uma Abordagem Prática
1262–1312. Livro Texto da XXIV Jornada de Atualização em Informática. 
ORIGINLAB. Magnifying or Zooming In on a Portion of the Graph. , [201-]. Disponível em: Data Exploration
. Acesso em: 25 ago. 2019.https://www.originlab.com/doc/Origin-Help/Zoom-Portion-of-Graph
RAO, R.; CARD, S. K. The table lens: Merging graphical and symbolic representation in an interactive focus +
context visualization for tabular information. : . ACM-Press,In Proc. ACM Conf. on Human Factors in Software
1994. p. 318–322. Disponível em: . Acessohttps://hci.stanford.edu/courses/cs448b/papers/Rao-TableLens.pdf
em: 25 ago. 2019.
RIFF, C. et al. Visualização sobre dados de redes sociais. In: SPINILLO, C. G. et al. (Ed.). CIDI - CONGRESSO
INTERNACIONAL DE DESIGN DA INFORMAÇÃO. VII., 2015, São Paulo. . São Paulo: Blucher, 2015.Anais [...]
SARMANHO, E. Project Game Data Explorer (PGD EX) - Sprint 2. , 26 jun. 2019. Disponível em: Youtube
. Acesso em: 25 ago. 2019.https://www.youtube.com/watch?v=7kWTL8nLrYI&feature=youtu.be
SHNEIDERMAN, B. The eyes have it: a task by data type taxonomy for information visualizations. In: 
PROCEEDINGS OF IEEE SYMPOSIUM ON VISUAL LANGUAGES, 1996. . Boulder: IEE, 1996. p. 336-343.Anais [...]
Disponível em: . Acesso em: 25 ago. 2019.cs.umd.edu/~ben/papers/Shneiderman1996eyes.pdf
SPENCE, R. . Nova Jersey: ACM Press, 2000.Information Visualization
- -23
SPENCE, R. . Nova Jersey: ACM Press, 2000.Information Visualization
TABLEAU RESEARCH. Jock Mackinlay. , [201-]. Disponível em: About https://research.tableau.com/user/jock-
. Acesso em: 25 ago. 2019.mackinlay
WARE, C. Information Visualization: perception for design. 4. ed. : Kaufmann, M. In Series in Interactive
. Amsterdam: Academic Press, 2004.Technologies
PYQTGRAPH. , [201-]. Disponível em: Pyqtgraph - scientific graphics and gui library for python http://www.
. Acesso em: 25 ago. 2019.pyqtgraph.org/
	Introdução
	1.1 Visualização de dados e de informações
	1.2 Caracterização de dados
	1.2.1 Representação visual
	1.2.2 Recursos de interação
	1.3 Modelo de referência de visualização
	1.3.1 Técnicas de interação
	1.4 Aspectos gerais da visualização
	1.4.1 Técnicas de visualização de informações
	1.4.2 Foco + contexto
	1.4.3 Fisheye
	1.4.4 Browser hiperbólico
	1.4.5 Perspectiva Wall e Table Lens
	1.4.6 Geral + Detalhe
	1.4.7 Zooming
	1.4.8 Filtragem
	Síntese
	Bibliografia