Ferramentas de Dashboard - Unidade 1

Prévia do material em texto

30/11/2022 19:29 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=O58206T0eLmhJ16GKsWvtw%3d%3d&l=jfkRYXHnSqvUmIHSRZvHbg%3d%3d&cd=AQ0ra… 1/29
FERRAMENTAS	DE	DASHBOARD
UNIDADE 1 - INTRODUÇA� O A� VISUALIZAÇA� O
DE DADOS E INFORMAÇO� ES
ELTON SARMANHO SIQUEIRA
30/11/2022 19:29 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=O58206T0eLmhJ16GKsWvtw%3d%3d&l=jfkRYXHnSqvUmIHSRZvHbg%3d%3d&cd=AQ0ra… 2/29
30/11/2022 19:29 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=O58206T0eLmhJ16GKsWvtw%3d%3d&l=jfkRYXHnSqvUmIHSRZvHbg%3d%3d&cd=AQ0ra… 3/29
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.
30/11/2022 19:29 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=O58206T0eLmhJ16GKsWvtw%3d%3d&l=jfkRYXHnSqvUmIHSRZvHbg%3d%3d&cd=AQ0ra… 4/29
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.
30/11/2022 19:29 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=O58206T0eLmhJ16GKsWvtw%3d%3d&l=jfkRYXHnSqvUmIHSRZvHbg%3d%3d&cd=AQ0ra… 5/29
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
30/11/2022 19:29 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=O58206T0eLmhJ16GKsWvtw%3d%3d&l=jfkRYXHnSqvUmIHSRZvHbg%3d%3d&cd=AQ0ra… 6/29
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çãoa 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. 
30/11/2022 19:29 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=O58206T0eLmhJ16GKsWvtw%3d%3d&l=jfkRYXHnSqvUmIHSRZvHbg%3d%3d&cd=AQ0ra… 7/29
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: 
VAMOS PRATICAR?
Desenvolva três grá�icos que apresentem os principais tipos prim
apresentados nesse material. Fique atento na construção de cada grá�ico e 
relacionar em cada eixo tipos primitivos diferentes. 
•
•
•
•
30/11/2022 19:29 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=O58206T0eLmhJ16GKsWvtw%3d%3d&l=jfkRYXHnSqvUmIHSRZvHbg%3d%3d&cd=AQ0ra… 8/29
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.
30/11/2022 19:29 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=O58206T0eLmhJ16GKsWvtw%3d%3d&l=jfkRYXHnSqvUmIHSRZvHbg%3d%3d&cd=AQ0ra… 9/29
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). 
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 Prunn
Clustering. Fique à vontade para escolher amostra de dados a ser utilizada.
https://youtu.be/7kWTL8nLrYI
30/11/2022 19:29 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=O58206T0eLmhJ16GKsWvtw%3d%3d&l=jfkRYXHnSqvUmIHSRZvHbg%3d%3d&cd=AQ0r… 10/29
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 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:
30/11/2022 19:29 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=O58206T0eLmhJ16GKsWvtw%3d%3d&l=jfkRYXHnSqvUmIHSRZvHbg%3d%3d&cd=AQ0r… 11/29
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.
•
•
•
•
30/11/2022 19:29 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=O58206T0eLmhJ16GKsWvtw%3d%3d&l=jfkRYXHnSqvUmIHSRZvHbg%3d%3d&cd=AQ0r…12/29
Temos, ainda, o último seguimento chamado propriedades	 grá�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).
30/11/2022 19:29 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=O58206T0eLmhJ16GKsWvtw%3d%3d&l=jfkRYXHnSqvUmIHSRZvHbg%3d%3d&cd=AQ0r… 13/29
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
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.
VAMOS PRATICAR?
Desenvolva um mecanismo de seleção dados por interesse utilizando al
imagem signi�icativa, por exemplo, um mapa. Fique à vontade de escol
imagem para exercitar o conceito em questão.
•
30/11/2022 19:29 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=O58206T0eLmhJ16GKsWvtw%3d%3d&l=jfkRYXHnSqvUmIHSRZvHbg%3d%3d&cd=AQ0r… 14/29
relações entre variáveis consideradas importantes, como vemos na
figura a seguir.
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.
•
30/11/2022 19:29 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=O58206T0eLmhJ16GKsWvtw%3d%3d&l=jfkRYXHnSqvUmIHSRZvHbg%3d%3d&cd=AQ0r… 15/29
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).
Figura 7 - Técnica de Pivot Tables.
Fonte: EXCELCAMPUS, 2019.
•
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.
30/11/2022 19:29 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=O58206T0eLmhJ16GKsWvtw%3d%3d&l=jfkRYXHnSqvUmIHSRZvHbg%3d%3d&cd=AQ0r… 16/29
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;
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.
https://research.tableau.com/user/jock-mackinlay
30/11/2022 19:29 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=O58206T0eLmhJ16GKsWvtw%3d%3d&l=jfkRYXHnSqvUmIHSRZvHbg%3d%3d&cd=AQ0r… 17/29
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;
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
•
•
•
•
30/11/2022 19:29 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=O58206T0eLmhJ16GKsWvtw%3d%3d&l=jfkRYXHnSqvUmIHSRZvHbg%3d%3d&cd=AQ0r… 18/29
culturalmente por terem um signi�icado de�inido.
Isso facilita no processo de abstração do
conhecimento.
O trabalhofeito 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.
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
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.
Figura 8 - Esquema da percepção de atributos visuais.
Fonte: NASCIMENTO; FERREIRA, 2011, p. 22.
30/11/2022 19:29 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=O58206T0eLmhJ16GKsWvtw%3d%3d&l=jfkRYXHnSqvUmIHSRZvHbg%3d%3d&cd=AQ0r… 19/29
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.
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.
30/11/2022 19:29 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=O58206T0eLmhJ16GKsWvtw%3d%3d&l=jfkRYXHnSqvUmIHSRZvHbg%3d%3d&cd=AQ0r… 20/29
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.
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. 
Figura 9 - FishEye Menu.
Fonte: BEDERSON, 2012. XX.
30/11/2022 19:29 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=O58206T0eLmhJ16GKsWvtw%3d%3d&l=jfkRYXHnSqvUmIHSRZvHbg%3d%3d&cd=AQ0r… 21/29
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. 
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.
30/11/2022 19:29 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=O58206T0eLmhJ16GKsWvtw%3d%3d&l=jfkRYXHnSqvUmIHSRZvHbg%3d%3d&cd=AQ0r… 22/29
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.
30/11/2022 19:29 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=O58206T0eLmhJ16GKsWvtw%3d%3d&l=jfkRYXHnSqvUmIHSRZvHbg%3d%3d&cd=AQ0r… 23/29
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.
Figura 12 - Table Lens.
Fonte: NASCIMENTO; FERREIRA, 2011, p. 31.
30/11/2022 19:29 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=O58206T0eLmhJ16GKsWvtw%3d%3d&l=jfkRYXHnSqvUmIHSRZvHbg%3d%3d&cd=AQ0r… 24/29
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.
30/11/2022 19:29 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=O58206T0eLmhJ16GKsWvtw%3d%3d&l=jfkRYXHnSqvUmIHSRZvHbg%3d%3d&cd=AQ0r… 25/29
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-].
30/11/2022 19:29 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=O58206T0eLmhJ16GKsWvtw%3d%3d&l=jfkRYXHnSqvUmIHSRZvHbg%3d%3d&cd=AQ0r… 26/29
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 15 - Filtragem usando Query.
Fonte: DRUPAL, [201-].
Figura 16 - Range Sliders �iltrando data.
Fonte: SUPPORT OFFICE, 2019.
30/11/2022 19:29 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=O58206T0eLmhJ16GKsWvtw%3d%3d&l=jfkRYXHnSqvUmIHSRZvHbg%3d%3d&cd=AQ0r… 27/29
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 �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.
http://hcil2.cs.umd.edu/trs/2000-12/2000-12.html
https://www.drupal.org/project/drupal/issues/355820
30/11/2022 19:29 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=O58206T0eLmhJ16GKsWvtw%3d%3d&l=jfkRYXHnSqvUmIHSRZvHbg%3d%3d&cd=AQ0r… 28/29
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	deInformaçõ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Ç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://integrada.minhabiblioteca.com.br/books/9788536519517
https://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
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/
30/11/2022 19:29 Ferramentas de Dashboard
https://student.ulife.com.br/ContentPlayer/Index?lc=O58206T0eLmhJ16GKsWvtw%3d%3d&l=jfkRYXHnSqvUmIHSRZvHbg%3d%3d&cd=AQ0r… 29/29