FERRAMENTAS DE DASHBOARD

UNIDADE 1 - INTRODUÇÃ O À VISUALIZAÇÃ O

DE DADOS E INFORMAÇÕ ES

ELTON SARMANHO SIQUEIRA

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 design de interação e visualização
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 Data Science
(FOREMEN, 2016). 
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 visualização de dados e informações (GERSHON; EICK, 1997),
em 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.
 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 et al., 1999) de tal maneira que o usuário
possa usar 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.
 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
(http://www.proceedings.blucher.com.br/article-details/visualizao-sobre-
dados-de-redes-sociais-20367).

Afinal, o que é visualização de informaçõ es? Segundo Card et al. (1999), a visualização de informaçõ es é o uso
de 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, zooming, filtragem, caracterização
de relacionamentos e extração de informaçõ es diversificadas.
 VOCÊ SABIA?
Sendo uma á rea em constante expansã o, existem conferê ncias importantes sobre
Visualizaçã o de Informações, a saber, o ACM Symposium on Software Visualization;
e o International Conference of Information Visualization. No contexto nacional, há
eventos como o Brazilian Symposium on Computer Graphics and Image Processing –
SIBGRAPI, que tem uma grande relevâ ncia na á rea acadê mica e desenvolvem
novas pesquisas e produtos nesse campo de estudo.

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, dashboard, que serão assuntos dos pró ximos tó picos.

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. 
 VAMOS PRATICAR?
Desenvolva trê s grá ficos que apresentem os principais tipos pr
apresentados nesse material. Fique atento na construçã o de cada grá fico
relacionar em cada eixo tipos primitivos diferentes.  

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 figura a seguir: 
 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 et al., 2001) e estas açõ es promovem mudanças na
representação visual criando uma nova aparência no conjunto de dados em estudo.
 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 Playtest
controlado (sã o testes que avaliam 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
(https://youtu.be/7kWTL8nLrYI).

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, scroll bar). Em outro nível, temos as funçõ es de
seleção de dados de interesse (em inglês, point region of interest), como vemos na figura a seguir, as quais
podem ou não provocar tanto um reposicionamento da amostra de dados, gerando uma nova visualização
como certo nível de detalhamento (zooming semântico) de uma parte dessa amostra (ver figura a seguir) e,
possivelmente, a omissão de outra. 
Temos outras funçõ es mais complexas, como: operaçõ es de poda (prunning) e agrupamento (clustering), que
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). 
 VAMOS PRATICAR?
Crie um painel de visualizaçã o que implemente as funcionalidades de Pru
Clustering. Fique à vontade para escolher amostra de dados a ser utilizada

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 overview+detalhe, enquanto as outras situaçõ es apresentam a técnica chamada de foco+contexto
(CARD et al., 1999). Estas e outras técnicas serão explicadas mais adiante.
 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 dashboard e em banco de dados.

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:
 Figura 4 - Modelo de Referência para Visualização de Informaçõ es
Fonte: FREITAS et al., 1995, p. 149.

A etapa inicial é denominada de Transformações de Dados e é quando os dados brutos são processados e
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 Mapeamento Visual, a qual abrange a construção de uma estrutura visual que mostre os
dados da tabela. Toda estrutura visual pode ser dividida em três segmentos: substrato espacial, marcas
visuais e propriedades gráficas das marcas. O primeiro segmento, chamado substrato visual, assinala o
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 marcas visuais são compostas por símbolos gráficos que retratam os itens de dados. A figura a seguir
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 propriedades gráficas, que são os atributos visíveis que
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

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 et al. (1999), Spencer (2000) e Ware (2004).

Por fim, as Transformações Visuais são ú ltimo passo do processo de visualização em que é possível alterar
e estender as estruturas visuais interativamente por meio de operaçõ es básicas, como vemos a seguir (clique
para ler).
 Testes de Permitem obter informaçõ es elementares sobre algum elemento da tabela de dados.

localizaçã
o

Controles Proporcionam ampliar, reduzir e deslocar a imagem com o propó sito de fornecer
de ponto distintas visõ es.

de vista

Distorções Tendendo gerar ampliaçõ es de uma determinada região em detrimento de outra.

da
imagem

VAMOS PRATICAR?
Desenvolva um mecanismo de seleçã o dados por interesse utilizando
imagem significativa, por exemplo, um mapa. Fique à vontade de esc
imagem para exercitar o conceito em questã o.

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.

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 Brushing é uma interação com transformação de

dados que corresponde em um 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 Pivot Tables é uma interação com mapeamento visual

que, geralmente, é encontrada em 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.
 Figura 7 - Técnica de Pivot Tables.
Fonte: EXCELCAMPUS, 2019.

• A técnica de Direct Selection é uma interação com as

transformações de visualizações que possibilita 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.
 VOCÊ O CONHECE?
Jock D. Mackinlay é um pesquisador americano em visualizaçã o de informações e vice-
presidente de pesquisa e design da Tableau Software. Junto com outros autores ele
desenvolveu um conjunto de té cnicas de visualizaçã o de informaçã o e orientações para
desenvolvedores de dashboard seguirem para a construçã o de visualizadores de alta
qualidade.
Para saber mais sobre vida de Jock D. Mackinlay, acesse:
https://research.tableau.com/user/jock-mackinlay
(https://research.tableau.com/user/jock-mackinlay).

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 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.

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, Overview + Detail
(Geral + Detalhes), landscape (Paisagem) e Scrolling/Zooming que alteram a dimensão do substrato visual,
manipulam 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 (foco) através de uma leve
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
treinamento para seu uso eficiente.
Para Nascimento e Ferreira (2011), os principais exemplos de técnicas do tipo Foco+Contexto são a Fisheye,
Browser Hiperbólico, Perspective Wall e o Table Lens. Elas serão brevemente explicadas a seguir.

1.4.3 Fisheye
Outra técnica visualização bastante conhecida na literatura é chamada de Fisheye, a qual gera uma visão
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.

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.

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.

Figura 9 - FishEye Menu.

Fonte: BEDERSON, 2012. XX.

Outra técnica usada em conjunto com Fisheye é Browser Hiperbó lico ou árvore Hiperbó lica, a qual vemos a
seguir.

1.4.4 Browser hiperbólico

A técnica de Browser Hiperbó lico consegue combinar Foco+Contexto com desenho radial de árvores para
ajudar 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 mouse tendo como
objetivo selecionar vértices de interesse ao usuário. Assim, é possível mover o vértice selecionado para o
centro do display e provocar uma compactação dos dados que estão distantes do mesmo. 

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 Wall e Table Lens

A técnica Perspective Wall (MACKINLAY et al., 1991, p. 176) possibilita a visualização de diversas
informaçõ es 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.
 Figura 11 - Exemplo de Calendário usando a técnica Perspective Wall.
Fonte: NASCIMENTO; FERREIRA, 2011, p.31.

A segunda técnica chamada de Table Lens (RAO; CARD, 1994) é uma estratégia efetiva para a compressão de
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 pixels (na forma de linhas).
 Figura 12 - Table Lens.
Fonte: NASCIMENTO; FERREIRA, 2011, p. 31.

Ainda temos que o comprimento das linhas de pixel são definidas pelo atributo do dado na coluna em
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
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, Overview+Detail), temos que uma parte dos dados é
mostrada de forma ampla e minuciosa em uma área de maior visualização (chamado detail), enquanto que
uma imagem reduzida, que frequentemente está posicionada lateralmente na tela (o overview), apresenta uma
visão 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 zooming permite mudar a escala da representação visual sem que a representação seja
distorcida, somente replicando a ação de aproximação ou de afastamento usada em imagens consideradas não
dinâmicas.
 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 zoom para adquirir uma visão com
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 zoom”, por exemplo. Com o avanço das tecnologias e
dos dispositivos de toque (touch), essa técnica está bastante desenvolvida e consolidada já que o uso dos
dedos 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 alpha sliders, range sliders (veja a 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. Fish Eye Menu [screenshot]. Disponível em: http://hcil2.cs.umd.edu/trs/2000-12/2000-
12.html (http://hcil2.cs.umd.edu/trs/2000-12/2000-12.html). Acesso em: 25 ago. 2019.
CARD, S. K. et al. Readings in Information Visualization: using vision to think. In: KAUFMANN, M. Series in
Interactive Technologies. Amsterdam: Academic Press, 1999.
COCKBURN, A.; KARLSON, A.; BEDERSON, B., A Review of Overview+Detail Zooming and Focus+Context
Interfaces. ACM Computing Surveys, v. 41, p. 1-3, 2009.
DI BATTISTA, G. et al. Graph Drawing. Upper Saddle River: Prentice Hall, 1999.
DRUPAL. Improve query filter UI on admin/content. Download e Extend, [201-]. Disponível em:
https://www.drupal.org/project/drupal/issues/355820
(https://www.drupal.org/project/drupal/issues/355820). Acesso em: 25 ago. 2019.
FOREMAN, J. W. Data Smart. Usando Data Science Para Transformar Informação em Insight. São Paulo: Alta
Books, 2016.
FREITAS, C. M. D. S. et al. Cava. Introdução à Visualização de Informaçõ es. Revista de Informática Teó rica e
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 Informática Teórica e Aplicada, Porto Alegre, v. 2, n. 1, p. 5-36, 1995.
FURNAS, G. W. The FISHEYE view: a new look at structured files. Technical Report #81-11221-9. New
Jersey: Bell Laboratories 1981.
GERSHON, N.; EICK, S. G. Information Visualization. IEEE Computer Graphics and Applications, v. 17, n. 4,
p. 29-31, 1997.
HERMAN, I.; MELANÇON, G.; MARSHALL, M.S. Graph Visualization and Navigation in Information
Visualization: a survey. IEEE Transactions on Visualization and Computer Graphics, v. 6, n. 1, p. 24-42,
2000.
JOSÉ , M. F.; REIS, B. S. Projetos gráficos: fundamentos 2D e 3D. São Paulo: É rica, 2015. Disponível em:
https://integrada.minhabiblioteca.com.br/books/9788536519517
(https://integrada.minhabiblioteca.com.br/books/9788536519517). Acesso em: 25 ago. 2019.
KELLEHER, C. Visualizing the Universal Data Cube. University of Massachusetts Lowell. Tese de
Doutorado, 2014. 
LAMPING, J.; RAO, R. The hyperbolic browser: A focus + context technique for visualizing large hierarchies.
Journal of Visual Languages and Computing, v. 7, n.1, 1996, p. 33–35.
MACKINLAY, J. Automating the design of graphical presentations of relational information. ACM Transactions
on Graphics, v. 5, n. 2, p. 110–141, 1986.
MACKINLAY, J. D.; ROBERTSON, G. G.; CARD, C.  The perspective wall: Detail and context smoothly integrated.
In: Proceedings of ACM CHI’91 - Conference on human factors in Computing Systems and Graphics Interface.
ACM-Press, 1991. p. 173–179. Disponível em: https://research.tableau.com/sites/default/files/p173-
mackinlay.pdf (https://research.tableau.com/sites/default/files/p173-mackinlay.pdf). Acesso em: 25 ago.
2019.
MICROSOFT OFFICE. Create a PivotTable timeline to filter dates. Support Office, 2019. Disponível em:
https://support.office.com/en-us/article/create-a-pivottable-timeline-to-filter-dates-d3956083-01be-408c-
906d-6fc99d9fadfa (https://support.office.com/en-us/article/create-a-pivottable-timeline-to-filter-dates-
d3956083-01be-408c-906d-6fc99d9fadfa). Acesso em: 25 ago. 2019.
NASCIMENTO, H. A. D.; FERREIRA, C. B. R. Uma Introdução à Visualização de Informaçõ es. Visualidades -
Revista do Programa de Mestrado em Cultura Visual, Goiânia,v. 9, n. 2, p. 13-43, 2011.
NASCIMENTO, H. A. D.; FERREIRA, C. B. R. (2005). Visualização de Informações - Uma Abordagem
Prática, p. 1262–1312. Livro Texto da XXIV Jornada de Atualização em Informática.  
ORIGINLAB. Magnifying or Zooming In on a Portion of the Graph. Data Exploration, [201-]. Disponível em:
https://www.originlab.com/doc/Origin-Help/Zoom-Portion-of-Graph
(https://www.originlab.com/doc/Origin-Help/Zoom-Portion-of-Graph). Acesso em: 25 ago. 2019.
RAO, R.; CARD, S. K. The table lens: Merging graphical and symbolic representation in an interactive focus +
context visualization for tabular information. In: Proc. ACM Conf. on Human Factors in Software. ACM-
Press, 1994. p. 318–322. Disponível em: https://hci.stanford.edu/courses/cs448b/papers/Rao-TableLens.pdf
(https://hci.stanford.edu/courses/cs448b/papers/Rao-TableLens.pdf). Acesso 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. Anais [...]. São Paulo: Blucher, 2015.
SARMANHO, E. Project Game Data Explorer (PGD EX) - Sprint 2. Youtube, 26 jun. 2019. Disponível em:
https://www.youtube.com/watch?v=7kWTL8nLrYI&feature=youtu.be (https://www.youtube.com/watch?
v=7kWTL8nLrYI&feature=youtu.be). Acesso em: 25 ago. 2019.
SHNEIDERMAN, B. The eyes have it: a task by data type taxonomy for information visualizations. In:
PROCEEDINGS OF IEEE SYMPOSIUM ON VISUAL LANGUAGES, 1996. Anais [...]. Boulder: IEE, 1996. p. 336-
343. Disponível em: cs.umd.edu/~ben/papers/Shneiderman1996eyes.pdf
(http://cs.umd.edu/~ben/papers/Shneiderman1996eyes.pdf). Acesso em: 25 ago. 2019.
SPENCE, R. Information Visualization. Nova Jersey: ACM Press, 2000.
TABLEAU RESEARCH. Jock Mackinlay. About, [201-]. Disponível em: https://research.tableau.com/user/jock-
mackinlay (https://research.tableau.com/user/jock-mackinlay). Acesso em: 25 ago. 2019.
WARE, C. Information Visualization: perception for design. 4. ed. In: Kaufmann, M. Series in Interactive
Technologies. Amsterdam: Academic Press, 2004.
PYQTGRAPH. Pyqtgraph - scientific graphics and gui library for python, [201-]. Disponível em:
http://www.pyqtgraph.org/ (http://www.pyqtgraph.org/). Acesso em: 25 ago. 2019.