Ferramentas de Dashboard

Prof. M.Sc. Marcelo Tomio Hama

1
 Ferramentas de
Dashboard

AULAS 7 e 8

Hierárquicos e Redes:
Visualização e Pesquisa por
Ferramentas de Dashboard

2
Hierarquias: Introdução e Motivações

Embora alguns dados sejam uma simples coleção de números,

a maioria pode ser organizada em hierarquias naturais. Por
exemplo, considere:
- Entidades geográficas, como condados, estados e países;
- Estruturas de comando para empresas e governos;
- Pacotes de software e árvores filogenéticas.

Mesmo para dados sem hierarquia aparente, métodos

estatísticos (por exemplo, agrupamento de k-means) podem ser
aplicados para organizar hierarquicamente. Há técnicas de
visualização para alavancar a estrutura hierárquica:
- micro-observações de elementos individuais
- macro-observações de grandes grupos.
Fonte: https://queue.acm.org/detail.cfm?id=1805128

3
Diagramas Linkados por Nó

A palavra árvore é usada alternadamente com hierarquia, já que os ramos

fractais de um carvalho podem espelhar o aninhamento de dados. Se
tomarmos uma planta bidimensional de uma árvore, temos uma escolha
popular para visualizar hierarquias: um diagrama de vínculo de nó.

Diagrama linkado radialmente. Exemplo:

https://gojs.net/latest/samples/IVRtree.html

4
Diagramas Linkados por Nó

Um esquema de visualização
alternativo é o algoritmo de
dendrograma (ou cluster), que coloca
os nós folha da árvore no mesmo
nível. Assim, no diagrama da figura ao
lado, as classes (nós folha laranja)
estão no diâmetro do círculo, com os
pacotes (nós internos azuis) dentro.
Usar coordenadas polares em vez de
cartesianas tem uma estética
agradável, enquanto usa o espaço de
forma mais eficiente.

Diagrama linkado cartesianamente. Exemplo:

https://philogb.github.io/jit/static/v20/Jit/Examples/RGraph/example1.html

5
Diagramas Linkados por Nó

Há ainda a árvore recuada, usada de forma onipresente pelos sistemas operacionais

para representar diretórios de arquivos, entre outros aplicativos. Embora a árvore
recuada exija espaço vertical excessivo e não facilite inferências multiescala, ela permite
a exploração interativa eficiente da árvore para encontrar um nó específico. Além disso,
permite a varredura rápida de rótulos de nós, e dados multivariados.

Layout de árvores indentadas. Exemplo:

https://gojs.net/latest/samples/treeView.html

6
Diagramas de Adjacência

O diagrama de adjacência é uma variante de preenchimento de espaço do diagrama de

linkagem por nó. Em vez de desenhar um link entre pai e filho na hierarquia, os nós são
desenhados como áreas sólidas (arcos ou barras) e sua localização em relação aos nós
adjacentes revela sua posição na hierarquia. Como os nós agora ocupam espaço,
podemos usar uma codificação de comprimento para o tamanho das classes e pacotes
de software.

Diagrama de adjacência.

7
Diagramas de Adjacência

O layout do sunburst é implementado usando

um layout de partição, que também pode gerar
um diagrama de vínculo de nó. Da mesma
forma, o layout do cluster anterior pode ser
usado para gerar um diagrama de adjacência
de preenchimento de espaço em coordenadas
cartesianas ou polares.

Este tipo de visualização mostra a hierarquia

por meio de uma série de anéis, que são
fatiados para cada nó de categoria. Cada anel
corresponde a um nível na hierarquia, com o
círculo central representando o nó raiz e a
hierarquia movendo-se para fora dele.

Referências: https://datavizcatalogue.com/

8
Diagramas Enclausurados

Introduzido por Ben Shneiderman em

1991, um mapa de árvore subdivide
recursivamente a área em retângulos. Tal
como acontece com os diagramas de
adjacência, o tamanho de qualquer nó na
árvore é rapidamente revelado.

São uma forma alternativa de visualizar a

estrutura hierárquica de um diagrama de
árvore enquanto também exibe as
quantidades para cada categoria por meio
do tamanho da área. Cada categoria é
atribuída a uma área retângulo com seus
retângulos de subcategoria aninhados
dentro dela.

Referências: https://datavizcatalogue.com/

9
Diagramas Enclausurados

Empacotando círculos em vez de

subdividir retângulos, podemos
produzir um tipo diferente de
diagrama de fechamento que tem
uma aparência quase orgânica.
Embora não use o espaço de forma
tão eficiente quanto um mapa de
árvore, o "espaço desperdiçado" do
layout de empacotamento em círculo
revela efetivamente a hierarquia. Ao
mesmo tempo, os tamanhos dos nós
podem ser comparados rapidamente
usando julgamentos de área.

Referências: https://datavizcatalogue.com/methods/circle_packing.html

10
Redes: Introdução e Motivações

Além da organização, um aspecto dos dados que podemos

desejar explorar por meio da visualização é o relacionamento.
Em uma rede social:
- Quem é amigo de quem?
- Quem são os atores centrais?
- Que panelinhas existem?
- Quem serve de ponte entre grupos díspares?
Uma hierarquia é uma forma especializada de rede: cada nó tem
exatamente um link para seu pai, enquanto o nó raiz não possui
links. Assim, os diagramas de vínculo de nó também são usados para
visualizar redes, mas a perda de hierarquia significa que um
algoritmo diferente é necessário.
Fonte: https://queue.acm.org/detail.cfm?id=1805128

11
Layouts Dirigidos por Força

Uma abordagem comum e intuitiva para o layout da rede é modelar o gráfico como um
sistema físico: os nós são partículas carregadas que se repelem e os links são molas
amortecidas que unem os nós relacionados. Uma simulação física dessas forças
determina então as posições dos nós; técnicas de aproximação que evitam calcular
todas as forças de pares permitem o layout de um grande número de nós.

Grafo dirigido por forças.

12
Diagramas em Arcos

Diagramas de arco usam um layout unidimensional de nós, com arcos circulares para
representar links. Embora um diagrama de arco possa não transmitir a estrutura geral do
gráfico tão efetivamente quanto um layout bidimensional, com uma boa ordenação de
nós é fácil identificar cliques e pontes. Além disso, como acontece com o layout de
árvore recuada, os dados multivariados podem ser facilmente exibidos ao lado dos nós.

Diagrama de arco.
Exemplo: https://datavizcatalogue.com/methods/arc_diagram.html

13
Hands-On em Caso de Estudo

{
Você faz parte de uma equipe de "id": "1",
engenheiros de software e desejam "nome": "Fulano da Silva Sauro",
criar uma aplicação para visualizar a "nascimento": "1986-04-19",
"falecimento": "n/d",
estrutura hierárquica de árvores "genero": "homem",
genealógicas. O objetivo é mostrar os "nacionalidade": "brasil",
graus de parentesco entre cada um "etnia": "pardo",
dos nós (ao lado, um registro de nó). "parentes": [ 2, 3 ]
}

A proposta da sua visualização deverá ser entregue em formato de wireframe,

com dados mockados. Na proposta, "o que" será mostrado não é relevante,
sendo o objetivo apresentar "o como" os dados serão mostrados;
Sendo um software para mostrar hierarquias, temos interesse em mostrar de
forma intuitiva as relações entre as entidades, além de termos também
visualizações adicionais para mostrar atributos de forma filtrada e estatísticas
das nossas entidades (proporcionalidades das etnias, dos países de
nacionalidade, de gêneros, e de status vivo/falecido).

14
Exercícios para Casa

Obtenha e leia o artigo "Visualisation with treemaps and

sunbursts in many objective optimisation" disponível no
BlackBoard e/ou Edmodo. Elabore um resumo de 1 página do
conteúdo assimilado.

15
Dúvidas?
marcelo.hama@fmu.br

16