1

Hyperbolic Tree

Karina da Silva Salles

Universidade Católica de PelotasCentro Politécnico

Ciência da ComputaçãoVisualização de Informações

Prof. Dr. Paulo Roberto Gomes Luzzardi

2

Sumário

• Introdução• Conceitos Iniciais• Geometria Hiperbólica• Técnica de Leiaute Radial• Técnica de Árvore Hiperbólica• Hyperbolic Browser• Exemplos• Curiosidade

3

Introdução

• As representações gráficas de árvores são desafios da Visualização de Informação Hierárquica;

• Visualização de Informação Hierárquica: visa desenvolver técnicas de leiautes para dispor estruturas hierárquicas;

• Visa solucionar a dificuldade de se representar visualmente árvores que tendem a expandir-se exponencialmente, em seus níveis mais profundos;

4

Conceitos Iniciais

• Árvore Hiperbólica ou Leiaute Hiperbólico;• Proposta por Lamping et al. em 1995, através

do Navegador Hiperbólico (Hyperbolic Browser);• Baseia-se no uso da geometria hiperbólica;• Representa os dados em uma circunferência de

raio constante;• Pode ser representada uma grande quantidade

de elementos sem que estes ultrapassem o espaço limitado pela borda.

5

Conceitos Iniciais

6

Geometria Hiperbólica

• A origem das chamadas geometrias não-euclidianas está ligada ao questionamento do quinto axioma

• “se uma reta t, intersectando duas retas r e s em um plano, forma ângulos interiores α e ß com soma menor que a de dois ângulos retos, então as retas r e s, se prolongadas indefinidamente, irão encontrar-se do lado cujos ângulos têm soma menor que a de dois ângulos retos".

7

Geometria Hiperbólica

• Temos na Geometria Euclidiana que, a distância que separa duas semi-retas r e s dispostas paralelamente permanece a mesma quando nos movemos para a direita (d = d’).

8

Técnica de Leiaute Radial

• É uma técnica de Mapeamento Visual;• Consiste em representar graficamente uma

estrutura hierárquica sobre um plano, no qual os nós são dispostos sobre circunferências concêntricas;

• Cada uma das circunferências representa um nível hierárquico da estrutura;

9

Técnica de Leiaute Radial

• A navegação através desta técnica é dada pela realocação dos nós de uma árvore sobre as circunferências concêntricas;

10

Técnica de Leiaute Radial

11

Técnica de Árvore Hiperbólica

• Consiste em representar uma estrutura hierárquica por meio de um leiaute radial disposto em um plano hiperbólico;

• É uma técnica de visão foco+contexto ideal para representar grandes estruturas hierárquicas;

• O plano hiperbólico oferece o espaço necessário para suportar hierarquias de crescimento exponencial;

12

Técnica de Árvore Hiperbólica

13

Técnica de Árvore Hiperbólica

• Os nós próximos ao centro da circunferência ganham destaque e maior espaço para alocar seus filhos;

• Em contrapartida, quanto mais afastados, ou mais próximos da borda da circunferência, menor será a área destinada para disposição de seus filhos;

• Toda a estrutura hierárquica é representada dentro de uma única circunferência;

14

Técnica de Árvore Hiperbólica

• Desenvolvida durante estudos que buscavam minimizar o custo de se estruturar um grande volume de informações em uma única visualização;

• Sua principal aplicação é na visualização de grandes estruturas de informações hierárquicas;

• De acordo com Lamping et al. (1995), a Árvore Hiperbólica é capaz de exibir dez vezes mais nós do que a estrutura de árvore em lista indentada;

15

Técnica de Árvore Hiperbólica

• A navegação em uma hierarquia de informação é feita por meio de mudança de foco, acionada quando o usuário interage com a estrutura;

• (1) clique de mouse em um nó qualquer da estrutura, que acarreta na realocação deste nó ao centro da circunferência e re-disposição dos demais ao seu redor;

• (2) arraste de mouse, na qual a realocação dos nós é feita automaticamente conforme a movimentação do mouse;

• A mudança de foco é realizada por meio de transição animada;

16

Técnica de Árvore Hiperbólica

17

Técnica de Árvore Hiperbólica

• Soluciona as principais dificuldades da visão foco+contexto:

• (1) necessidade de obter simultaneamente tanto a visão geral da informação quanto a informação detalhada;

• (2) possibilidade de diferenciação entre visão geral e visão que necessita ser detalhada; e

• (3) combinação destas informações dentro de um único campo visual, como na visão humana.

18

Hyperbolic Browser

• Primeiro software a implementar a Técnica de Árvore Hiperbólica;

• Desenvolvido por Lamping et al. em 1995;• A patente pertence atualmente a empresa

Business Objects Inc.13, uma subsidiária da companhia SAP;

• A aplicação consiste em representar graficamente um conjunto de informações disposto em uma estrutura de árvore, na qual os nós correspondem aos dados existentes neste conjunto;

19

Hyperbolic Browser

20

Exemplos - Bibliotecas

Hyperbolic Tree Java Library• Desenvolvida pelo francês Christophe Bouthier;• Implementada em linguagem de programação

Java;• Destinada a visualização e navegação de

árvores hiperbólicas.

21

Exemplos - Bibliotecas

Hyperbolic Browser• http://hypertree.woot.com.ar/ • HyperbolicTree.js

22

Exemplos - Link

AGRISSOLOS• Sistema de visualização de zoneamento

agrícola, contendo a previsão de safras e outros processos de apoio à tomada de decisões.

• http://www.inf.ufsc.br/~fileto/Agrissolos/SiBCS/SiBCS.html

23

Exemplos - Programas

Star Tree Designer• É um software de licença shareware;• Idioma inglês;• Sistema operacional Windows;• Desenvolvido pela Inxight Software Inc.;

24

Exemplos - ProgramasStar Tree Designer

25

Exemplos - Programas

Star Tree Designer• Pontos Positivos:

– facilidade de interação para manipular a estrutura hierárquica;

– oferecimento de diversas funcionalidades para a visualização e manipulação da hierarquia;

– existência de vários atributos e propriedades gráficas associados ao nó, como por exemplo, respectivamente, texto de exibição e cor de preenchimento do nó;

– possibilidade de nomear arestas.

26

Exemplos - Programas

Star Tree Designer• Pontos Negativos:

– impossibilidade de inserção de imagens nas arestas e ausência de funcionalidade para localizar um nó específico na árvore.

27

Exemplos - Programas

Treebolic Generator• http://treebolic.sourceforge.net/• Desenvolvido pelo francês Bernard Bou;• É um software de código aberto;• Implementado em Java;• Independênte de sistema operacional;• Idioma: inglês e francês;

28

Exemplos - ProgramasTreebolic Generator

29

Exemplos - Programas

Treebolic Generator• Pontos Positivos:

– possibilidade de editar os atributos dos componentes da estrutura hierárquica com um editor de arquivos XML;

– oferece diversos atributos e propriedades gráficas aos componentes da estrutura hierárquica, por exemplo, texto de exibição e cor de preenchimento;

– possibilidade de nomear relacionamento entre nós; – e existência de diversas propriedades gráficas para as

arestas, por exemplo, opção por tipo de linha, cor, imagem e terminadores.

30

Exemplos - Programas

Treebolic Generator• Pontos Negativos:

– a edição da estrutura hierárquica não é feita por meio da técnica de leiaute hiperbólico, e sim pelo leiaute de árvore em lista indentada;

– não há possibilidade de recortar, copiar ou colar um nó e seus descendentes;

– a modificação de certos atributos da árvore pode gerar defeitos na visualização da árvore, como por exemplo, distância e ângulo entre nós pai e filho;

– e não possibilita localizar um nó específico na árvore.

31

Exemplos - Programas

Hiper Editor• http://www.agrolivre.gov.br/ • É um software de código aberto;• Desenvolvido pela Embrapa Informática

Agropecuária;• Implementado em Java e executado por meio

de applet;• Independênte de sistema operacional;• Integração com aplicações web;

32

Exemplos - ProgramasHiper Editor

33

Exemplos - Programas

Hiper Editor• Pontos Positivos:

– fácil compreensão; – possibilidade de inserção de link entre nós, simulando

um grafo; – funcionalidade de criar cópia dos atributos de um nó

e de seus descendentes para incorporá-los em outra estrutura da árvore;

– e possibilidade de busca de um nó através do texto por ele exibido.

34

Exemplos - Programas

Hiper Editor• Pontos Negativos:

– distorções nas representações das arestas que ligam os nós da árvore;

– ausência de opção para o usuário escolher um local no computador para salvar a estrutura hierárquica, bem como para abrir uma estrutura de árvore salva no computador;

– ocorrência de falhas ao salvar a estrutura; – existência de poucas propriedades gráficas aos nós;– e ausência de propriedades gráficas para as arestas.

35

Exemplos - Programas

HiperTree Studio• http://hypertreestudio.sourceforge.net/ • Desenvolvido por Rodrigo Mologni Gonçalves

dos Santos (UNICAMP);• É um software multiplataforma;• Implementado em Java;• Sob licença GNU General Public License (GPL)

36

Exemplos - Programas

HiperTree Browser• Desenvolvido por Rodrigo Mologni Gonçalves

dos Santos (UNICAMP);• Este destina-se apenas a visualização e

navegação de árvores hiperbólicas por meio de navegadores, sendo a estrutura hierárquica carregada de um arquivo de extensão HTZ.

• http://www.dca.fee.unicamp.br/~mologni/hypertree.html

37

Exemplos - Programas

Star Tree Studio• Produzido pela companhia Inxight Software, Inc.• Oferece um mecanismo de pesquisa chamado

“spotlighting”, que melhora a navegação;• Somente para ambiente Windows;

38

Curiosidade

• Maurits Cornelius Escher (1898-1972), um artista gráfico holandês, criou uma ilustração de um disco unitário hiperbólico em 1953, chamado de Circle Limit III.

• Escher era fascinado pela capacidade de representar o infinito dentro do limite de uma circunferência.

• Sua obra, segundo Mussbaumer (2005), influenciou o surgimento da Técnica de Árvore Hiperbólica.

39

Circle Limit III, por Maurits Cornelius Escher

40

Referências• Rodrigo Mologni Gonçalves dos Santos. Teoria e

Desenvolvimento de Software Multiplataforma para Visualização e Manipulação de Árvores Hiperbólicas. (UNICAMP)

• Tópicos de Geometria Hiperbólica, Flávia Cristina Martins Queiroz, et. al.

• Treebolic Generator. (http://treebolic.sourceforge.net/)• Hiper Editor. (http://www.agrolivre.gov.br/)• HiperTree Studio. (http://hypertreestudio.sourceforge.net/)• Star Tree Studio. (

http://projects.ischool.washington.edu/tabrooks/424/OrganizationalMetaphors/StarTrees/Inxight%20Software%20-%20Star%20Tree%20Demos.htm)

• Hyperbolic Browser. (http://hypertree.woot.com.ar/)