DASHBOARD

Prévia do material em texto

20/09/2022 16:41 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=pjeriGzcfGyZSc0okYZAqw%3d%3d&l=fbCRfpn2sMM5yeV5AmkumQ%3d%3d&cd=ho0tguE… 1/26
FERRAMENTAS	DE	DASHBOARD
UNIDADE 1 - INTRODUÇA� O A� VISUALIZAÇA� O
DE DADOS E INFORMAÇO� ES
ELTON SARMANHO SIQUEIRA
20/09/2022 16:41 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=pjeriGzcfGyZSc0okYZAqw%3d%3d&l=fbCRfpn2sMM5yeV5AmkumQ%3d%3d&cd=ho0tguE… 2/26
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 signi�icativa, dentre a qual é
preciso ter muito atenção ao buscar e veri�icar 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 �igura a seguir) é um mecanismo de busca baseado em dados como (nome, CEP ou
coordenadas geográ�icas) que gera uma representação grá�ica por meio de um mapa e de um conjunto de
informações pertinentes.
20/09/2022 16:41 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=pjeriGzcfGyZSc0okYZAqw%3d%3d&l=fbCRfpn2sMM5yeV5AmkumQ%3d%3d&cd=ho0tguE… 3/26
A visualização de informações proporciona mostrar os dados na forma de simples grá�icos (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 gra�icamente 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.
Figura 1 - Figura 1- Google Maps
Fonte: Fonte: GOOGLE MAPS, 2019.
20/09/2022 16:41 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=pjeriGzcfGyZSc0okYZAqw%3d%3d&l=fbCRfpn2sMM5yeV5AmkumQ%3d%3d&cd=ho0tguE… 4/26
A�inal, 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 de�iniçã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á classi�icaçõ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 classi�icaçã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, �iltragem, caracterização
de relacionamentos e extração de informações diversi�icadas.
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ıd́os 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). 
http://www.proceedings.blucher.com.br/article-details/visualizao-sobre-dados-de-redes-sociais-20367
20/09/2022 16:41 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=pjeriGzcfGyZSc0okYZAqw%3d%3d&l=fbCRfpn2sMM5yeV5AmkumQ%3d%3d&cd=ho0tguE… 5/26
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.
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.
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 de�inidos, 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 �lutuante). Outro critério para a caracterização dos
atributos está relacionado ao tipo primitivo do dado e pode ser alfanumérico, inteiro ou ponto �lutuante. 
VAMOS PRATICAR?
Desenvolva três grá�icos que apresentem os principais tipos pr
apresentados nesse material. Fique atento na construção de cada grá�ico
relacionar em cada eixo tipos primitivos diferentes. 
20/09/2022 16:41 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=pjeriGzcfGyZSc0okYZAqw%3d%3d&l=fbCRfpn2sMM5yeV5AmkumQ%3d%3d&cd=ho0tguE… 6/26
Por �im, 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 �iguras que servem para representar uma amostra de dados sob
algum estudo. Popularmente, temos os grá�icos de dispersão, de linhas, de barras e de pizza que possibilitam
observar as relações entre os atributos, como vemos na �igura a seguir: 
•
•
•
•
20/09/2022 16:41 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=pjeriGzcfGyZSc0okYZAqw%3d%3d&l=fbCRfpn2sMM5yeV5AmkumQ%3d%3d&cd=ho0tguE… 7/26
Ainda temos representações através de mapas, de diagramas e de grafos, que são representações grá�icas
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 é su�iciente 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.
Figura 2 - Representação visual de Grá�icos Simples
Fonte: PYQTGRAPH, 2019.
20/09/2022 16:41 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=pjeriGzcfGyZSc0okYZAqw%3d%3d&l=fbCRfpn2sMM5yeV5AmkumQ%3d%3d&cd=ho0tguE… 8/26
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 �igura 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 �igura 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). 
As operações citadas anteriormente possibilitam ocorrer três situações: (1) a representação é modi�icada 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
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
�isioló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á�icos.
Para veri�icar a referida ferramenta, acesse: https://youtu.be/7kWTL8nLrYI
(https://youtu.be/7kWTL8nLrYI). 
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
https://youtu.be/7kWTL8nLrYI
20/09/2022 16:41 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=pjeriGzcfGyZSc0okYZAqw%3d%3d&l=fbCRfpn2sMM5yeV5AmkumQ%3d%3d&cd=ho0tguE… 9/26
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.
Em um nı́vel superior estariam funções que possibilitam representar visualmente os dados em segmentos ou
frações, considerando alguns critérios de�inidos pelos usuários. Essas funções são �iltros ou consultas
dinâmicas, comumente encontradas em dashboard e em banco de dados.
Figura 3 - Seleção de dados de interesse em uma imagem
Fonte: PYQTGRAPH, 2019.
1.3 Modelo de referência de visualização
Um modelo de referência de visualização possibilita a identi�icaçã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 �igura a seguir, o qual é bastante consolidado no meio acadêmico:
20/09/2022 16:41 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=pjeriGzcfGyZSc0okYZAqw%3d%3d&l=fbCRfpn2sMM5yeV5AmkumQ%3d%3d&cd=ho0tgu… 10/26
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 �iltros 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á�icas	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á�icos que retratam os itens de dados. A �igura a seguir
apresenta os tipos de marcas visuais mais comuns: pontos, linhas, áreas, volumes e �iguras complexas cujos
detalhes possuem extrema relevância.
Figura 4 - Modelo de Referência para Visualização de Informações
Fonte: FREITAS et al., 1995, p. 149.
•
•
•
•
20/09/2022 16:41 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=pjeriGzcfGyZSc0okYZAqw%3d%3d&l=fbCRfpn2sMM5yeV5AmkumQ%3d%3d&cd=ho0tgu… 11/26
Temos, ainda, o último seguimento chamado propriedadesgrá�icas, 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
Por �im, 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).
Figura 5 - Marcas Visuais
Fonte: NASCIMENTO; FERREIRA, 2011, p. 19.
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). 
Testes	de
localizaçã
o	
Permitem obter informações elementares sobre algum elemento da tabela de dados. 
20/09/2022 16:41 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=pjeriGzcfGyZSc0okYZAqw%3d%3d&l=fbCRfpn2sMM5yeV5AmkumQ%3d%3d&cd=ho0tgu… 12/26
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.
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. 
VAMOS PRATICAR?
Desenvolva um mecanismo de seleção dados por interesse utilizando 
imagem signi�icativa, por exemplo, um mapa. Fique à vontade de esc
imagem para exercitar o conceito em questão. 
•
20/09/2022 16:41 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=pjeriGzcfGyZSc0okYZAqw%3d%3d&l=fbCRfpn2sMM5yeV5AmkumQ%3d%3d&cd=ho0tgu… 13/26
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 6 - Técnica de Brushing
Fonte: KELLEHER, 2014, p. 32.
•
Figura 7 - Técnica de Pivot Tables.
Fonte: EXCELCAMPUS, 2019.
20/09/2022 16:41 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=pjeriGzcfGyZSc0okYZAqw%3d%3d&l=fbCRfpn2sMM5yeV5AmkumQ%3d%3d&cd=ho0tgu… 14/26
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 de�inir 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 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:
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). 
insu�iciência de dados na visualização pode prejudicar processo de contextualização das
informações relevantes;
https://research.tableau.com/user/jock-mackinlay
20/09/2022 16:41 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=pjeriGzcfGyZSc0okYZAqw%3d%3d&l=fbCRfpn2sMM5yeV5AmkumQ%3d%3d&cd=ho0tgu… 15/26
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 �igura 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;
desprezar atributos relevantes;
sobreposição de grá�icos 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.
•
•
•
20/09/2022 16:41 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=pjeriGzcfGyZSc0okYZAqw%3d%3d&l=fbCRfpn2sMM5yeV5AmkumQ%3d%3d&cd=ho0tgu… 16/26
Use, de forma adequada, sıḿbolos e atributos
visuais que ajudem na percepção dos dados e dos
padrões existentes. Por exemplo, ao usar grá�ico
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
signi�icado de�inido. 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ı́dapelo 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.
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ı́�ica os dados.
1.4.1 Técnicas de visualização de informações
•
Figura 8 - Esquema da percepção de atributos visuais.
Fonte: NASCIMENTO; FERREIRA, 2011, p. 22.
20/09/2022 16:41 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=pjeriGzcfGyZSc0okYZAqw%3d%3d&l=fbCRfpn2sMM5yeV5AmkumQ%3d%3d&cd=ho0tgu… 17/26
Existem dois critérios para o estudo e a classi�icaçã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 �igura (NASCIMENTO;
FERREIRA, 2011). No segundo critério, as técnicas são classi�icadas 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 modi�icar 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 �ina) 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 �igura original, assim, ela pode demandar
treinamento para seu uso e�iciente.
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.
20/09/2022 16:41 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=pjeriGzcfGyZSc0okYZAqw%3d%3d&l=fbCRfpn2sMM5yeV5AmkumQ%3d%3d&cd=ho0tgu… 18/26
Além disso, a referida técnica foi comumente empregada para a navegação em árvores de diretórios (conforme
vemos na �igura 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ıt́ulo. Já a área ou subárea de interesse primário aparecia em
maiores detalhes. 
20/09/2022 16:41 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=pjeriGzcfGyZSc0okYZAqw%3d%3d&l=fbCRfpn2sMM5yeV5AmkumQ%3d%3d&cd=ho0tgu… 19/26
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.
Figura 9 - FishEye Menu.
Fonte: BEDERSON, 2012. XX.
20/09/2022 16:41 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=pjeriGzcfGyZSc0okYZAqw%3d%3d&l=fbCRfpn2sMM5yeV5AmkumQ%3d%3d&cd=ho0tgu… 20/26
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. 
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 �igura 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 �igura
dessa técnica pode ser vista a seguir.
Figura 10 - Browser Hiperbólico.
Fonte: NASCIMENTO; FERREIRA, 2019, p. 30.
20/09/2022 16:41 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=pjeriGzcfGyZSc0okYZAqw%3d%3d&l=fbCRfpn2sMM5yeV5AmkumQ%3d%3d&cd=ho0tgu… 21/26
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 �icam visivelmente expandidos,
enquanto os demais elementos são compactados em pequenos pixels (na forma de linhas).
Figura 11 - Exemplo de Calendário usando a técnica Perspective Wall.
Fonte: NASCIMENTO; FERREIRA, 2011, p.31.
Figura 12 - Table Lens.
Fonte: NASCIMENTO; FERREIRA, 2011, p. 31.
20/09/2022 16:41 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=pjeriGzcfGyZSc0okYZAqw%3d%3d&l=fbCRfpn2sMM5yeV5AmkumQ%3d%3d&cd=ho0tgu… 22/26
Ainda temos que o comprimento das linhas de pixel são de�inidas 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 simpli�icar 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.
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ı́�ica.
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 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.
20/09/2022 16:41 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=pjeriGzcfGyZSc0okYZAqw%3d%3d&l=fbCRfpn2sMM5yeV5AmkumQ%3d%3d&cd=ho0tgu… 23/26
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 e�iciente.
1.4.8 Filtragem
Essa técnica possibilita a seleção dos dados a serem representados conforme as condições de�inidas numa
consulta. Os dados que não estão inclusos nesta condição, construı́da pelo usuário, �icam 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 14 - Técnica Zooming sobre grá�ico de linha.
Fonte: ORIGINLAB, [201-].
Figura 15 - Filtragem usando Query.
Fonte: DRUPAL, [201-].
20/09/2022 16:41 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=pjeriGzcfGyZSc0okYZAqw%3d%3d&l=fbCRfpn2sMM5yeV5AmkumQ%3d%3d&cd=ho0tgu… 24/26
Além do uso de consultas, a �iltragem pode ser feita usando alpha	sliders, range	sliders (veja a �igura a seguir)
e entre outros componentes grá�icos. 
A técnica de �iltragem é 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.
Figura 16 - Range Sliders �iltrando data.
Fonte: SUPPORT OFFICE, 2019.
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.
•
•
•
•
•
20/09/2022 16:41 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=pjeriGzcfGyZSc0okYZAqw%3d%3d&l=fbCRfpn2sMM5yeV5AmkumQ%3d%3d&cd=ho0tgu… 25/26
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 �ilter 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 �iles. 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.
JOSE� , M. F.; REIS, B. S. Projetos	 grá�icos:	 fundamentos	 2D	 e	 3D. São Paulo: E� 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/�iles/p173-
mackinlay.pdf (https://research.tableau.com/sites/default/�iles/p173-mackinlay.pdf). Acesso em: 25 ago.
2019.
MICROSOFT OFFICE. Create a PivotTable timeline to �ilter dates. Support	 Of�ice, 2019. Disponı́vel em:
https://support.of�ice.com/en-us/article/create-a-pivottable-timeline-to-�ilter-dates-d3956083-01be-408c-
906d-6fc99d9fadfa (https://support.of�ice.com/en-us/article/create-a-pivottable-timeline-to-�ilter-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.
http://hcil2.cs.umd.edu/trs/2000-12/2000-12.html
https://www.drupal.org/project/drupal/issues/355820
https://integrada.minhabiblioteca.com.br/books/9788536519517https://research.tableau.com/sites/default/files/p173-mackinlay.pdf
https://support.office.com/en-us/article/create-a-pivottable-timeline-to-filter-dates-d3956083-01be-408c-906d-6fc99d9fadfa
https://www.originlab.com/doc/Origin-Help/Zoom-Portion-of-Graph
20/09/2022 16:41 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=pjeriGzcfGyZSc0okYZAqw%3d%3d&l=fbCRfpn2sMM5yeV5AmkumQ%3d%3d&cd=ho0tgu… 26/26
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ÇA� 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	 -	 scienti�ic	 graphics	 and	 gui	 library	 for	 python, [201-]. Disponı́vel em:
http://www.pyqtgraph.org/ (http://www.pyqtgraph.org/). Acesso em: 25 ago. 2019.
https://hci.stanford.edu/courses/cs448b/papers/Rao-TableLens.pdf
https://www.youtube.com/watch?v=7kWTL8nLrYI&feature=youtu.be
http://cs.umd.edu/~ben/papers/Shneiderman1996eyes.pdf
https://research.tableau.com/user/jock-mackinlay
http://www.pyqtgraph.org/