universidad nacional del sur tesis de magister en ciencias...

Universidad Nacional del Sur

Tesis de Magister en Ciencias de la Computacion

Diagramado Esferico

Diagramado para la visualizacion de grafos en 3D

Martın Leonardo Larrea

Bahıa Blanca Argentina

2006

Prefacio

Esta Tesis es presentada como parte de los requisitos para optar al grado academico

de Magister en Ciencias de la Computacion, de la Universidad Nacional del Sur, y no

ha sido presentada previamente para la obtencion de otro tıtulo en esta Universidad u

otras. La misma contiene los resultados obtenidos en investigaciones llevadas a cabo en

el Departamento de Ciencias e Ingenierıa de la Computacion, durante el perıodo com-

prendido entre el 1 de abril de 2004 y el 10 de noviembre de 2006, bajo la direccion de la

Dr. Silvia M. Castro, Profesora Asociada del Departamento de Ciencias e Ingenierıa de

la Computacion.

Martın Leonardo Larrea

[email protected]

Departamento de Ciencias e Ingenierıa de la Computacion

Universidad Nacional del Sur

Bahıa Blanca, 10 de octubre de 2006.

Gracias a todos ellos...

Resumen

Redes de computadoras, esquemas de base de datos, sistemas de software, redes so-

ciales, la Web, ..., todos tiene en comum que pueden ser modelados a traves de un grafo

y que si visualizacion es crucial.

Para lograr una representacion visual de un grafo, primero debemos determinar como

ubicar sus elementos, vertices y arcos, en el espacio 2D o 3D. El espacio de soluciones para

este problema es muy extenso y solo algunas representaciones pueden considerarse acept-

ables desde el punto de vista de su efectividad/usabilidad. La forma en la que se disponen

en pantalla los elementos del grafo se conoce como diagramado (layout) y constituye un

factor determinante en la representacion visual.

La visualizacion de grafos en 3D presenta multiples retos: la eleccion de un diagramado

apropiado, el uso de interacciones que faciliten la exploracion de los datos y una metafora

que ayude a la comprension de la informacion. Una buena combinacion de estos tres ele-

mentos (diagramado, interacciones y metafora) tendran como resultado una visualizacion

a partir de la cual se logre un proceso analıtico mas efectivo.

El trabajo de esta tesis se centro basicamente en la visualizacion de grafos; en este

sentido, se desarrollo una nueva tecnica para la visualizacion de grafos en tres dimen-

siones; esto incluye tanto el diseno de un nuevo diagramado para grafos, al que hemos

denominado Diagramado Esferico, como el conjunto de interacciones que se aplican sobre

la representacion. Si bien esta nueva tecnica permite representar estructuras a diferentes

niveles de detalle, tambien puede tomarse como la base para una tecnica de visualizacion

que permita visualizar mas informacion. Para ello, y tomando como base la metafora

del universo, se extendio la tecnica de visualizacion, manteniendo en todo momento la

consistencia entre la representacion visual y la metafora.

Se diseno un nuevo diagramado 3D para grafos, el diagramado Esferico. Este es una

generalizacion a 3D del diagramado radial para grafos en 2D. La base para el diagramado

radial 2D son los cırculos concentricos sobre los cuales se ubican los nodos. El espacio

dedicado a los hijos de un nodo se encuentra definido sobre un sector de la circunferencia

cuya longitud se determina en funcion de la cantidad de hijos de cada subarbol. Para ex-

tender este diagramado al espacio 3D se mapearon al espacio tridimensional los cırculos

concentricos; esto se logro considerando esferas concentricas. En el diagramado radial los

nodos se ubican sobre el perımetro de cada circunferencia; para el diagramado Esferico

los nodos seran ubicados sobre la superficie de cada esfera. En este diagramado, la posib-

lidad de colocar los nodos sobre una superficie y no sobre una curva permite ubicar mas

elementos por nivel.

Se definio un conjunto de interacciones que brindan la capacidad de volar a traves

de la representacion, algo ya visto en otras visualizaciones 3D, sin embargo en este caso

diferenciamos dos tipos de navegacion: la dirigida y la libre. Tambien se permite que el

usuario pueda contar con diferentes vistas de un mismo objeto, presentando cuatro vistas

diferentes de la visualizacion.

Finalmente se desarrollo una metafora con el objetivo de enriquecer la visualizacion y

permitir que el disenador de la visualizacion pueda contar con elementos adicionales con

los cuales trabajar.

A partir de este trabajo continuaran diferentes lıneas de investigacion como trabajos a

futuro. En lo que respecta al diagramado esferico es nuestro objetivo el diseno de nuevos

algoritmos que permitan una distribucion alternativa de los nodos para lograr un mayor

aprovechamiento de la superficie de la esfera.

En lo que respecta a las interacciones presentadas se continuara buscando nuevas

formas que permitan mejorar la comunicacion e interaccion entre el usuario y la visual-

izacion. Con la implementacion del diagramado esferico existente se procedera a desar-

rollar pruebas de usabilidad cuyos resultados serviran como realimentacion para futuras

implementaciones.

En el contexto de la metafora presentada sera necesario contar con pruebas de usabil-

idad que permitan evaluar como influye la metafora en la percepcion de la informacion

que se esta visualizando.

Indice general

Indice de figuras VII

1. Introduccion 2

1.1. Contribucion de la Tesis . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

1.2. Estructura de la Tesis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

2. Visualizacion 7

2.1. Modelo Unificado de Visualizacion . . . . . . . . . . . . . . . . . . . . . . . 9

2.1.1. Estados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

2.1.2. Transformaciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

2.1.3. Interacciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

2.2. Ejemplo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

3. Visualizacion de Grafos 17

3.1. Dibujado de un grafo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

3.2. Tecnicas de diagramado para grafos . . . . . . . . . . . . . . . . . . . . . . 23

3.2.1. Diagramado para arboles . . . . . . . . . . . . . . . . . . . . . . . . 23

3.2.2. Diagramado Planar . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

3.2.3. Diagramado por Capas . . . . . . . . . . . . . . . . . . . . . . . . . 29

3.2.4. Diagramado Dirigido por Fuerzas . . . . . . . . . . . . . . . . . . . 31

3.2.5. Diagramado por Grilla . . . . . . . . . . . . . . . . . . . . . . . . . 32

3.2.6. Diagramado Hiperbolico . . . . . . . . . . . . . . . . . . . . . . . . 33

3.2.7. Arbol de cubrimiento . . . . . . . . . . . . . . . . . . . . . . . . . . 33

3.3. Visualizacion de grafos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

3.4. Visualizacion de grafos en 2D . . . . . . . . . . . . . . . . . . . . . . . . . 35

3.5. Visualizacion de grafos en 3D . . . . . . . . . . . . . . . . . . . . . . . . . 35

3.5.1. Information Landscape . . . . . . . . . . . . . . . . . . . . . . . . . 37

3.5.2. Starlight . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

3.5.3. Cone Tree . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

3.5.4. H3. Diagramado Hiperbolico . . . . . . . . . . . . . . . . . . . . . . 40

3.5.5. Cubos de Informacion . . . . . . . . . . . . . . . . . . . . . . . . . 41

3.6. Visualizacion de Grandes Grafos . . . . . . . . . . . . . . . . . . . . . . . . 43

3.7. Escalabilidad Visual . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

4. Diagramado Esferico 49

4.1. Diagramado Radial en Arboles . . . . . . . . . . . . . . . . . . . . . . . . . 49

4.1.1. Diagramado Radial por Grapham J. Wills . . . . . . . . . . . . . . 50

4.1.2. Diagramado Radial por Giuseppe Di Battista . . . . . . . . . . . . 50

4.2. Diagramado Radial en grafos . . . . . . . . . . . . . . . . . . . . . . . . . . 52

4.3. Diagramado Esferico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54

4.4. Algoritmos para Diagramado Esferico . . . . . . . . . . . . . . . . . . . . . 59

4.4.1. Algoritmo 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

4.4.2. Algoritmo 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67

4.5. Agrupamientos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71

5. Interacciones sobre grafos en un diagramado Esferico 75

5.1. Navegacion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

5.1.1. Navegacion Dirigida . . . . . . . . . . . . . . . . . . . . . . . . . . 76

5.1.2. Navegacion Libre . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77

5.2. Vistas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77

5.2.1. Vista Completa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78

5.2.2. Vista en Tercera Persona . . . . . . . . . . . . . . . . . . . . . . . . 78

5.2.3. Vista en Primera Persona y Vista en Persona . . . . . . . . . . . . 78

5.2.4. Vista del contexto . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79

5.2.5. Zoom Semantico . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80

6. Planetas y estrellas. La metafora 83

6.1. La metafora . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83

6.2. Trabajo previo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84

6.2.1. Galaxy of News . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84

6.2.2. Starlight Information Visualization System . . . . . . . . . . . . . . 85

6.2.3. Galaxies Visualization . . . . . . . . . . . . . . . . . . . . . . . . . 86

6.2.4. XCruiser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87

6.3. Los planetas y las estrellas como metafora . . . . . . . . . . . . . . . . . . 88

6.3.1. Planetas y estrellas . . . . . . . . . . . . . . . . . . . . . . . . . . . 89

7. Conclusiones 95

7.1. Trabajo Futuro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96

A. Grafos 97

A.1. Grafos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97

A.2. Conceptos fundamentales . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98

A.2.1. Caminos y Ciclos . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100

A.2.2. Subgrafos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102

A.2.3. Conectividad . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102

B. Historia 103

B.1. Los principios del dibujado de grafos . . . . . . . . . . . . . . . . . . . . . 103

B.2. Leonhard Euler y el dibujado de Grafos . . . . . . . . . . . . . . . . . . . . 105

B.3. Primeros ejemplos de dibujado de grafos . . . . . . . . . . . . . . . . . . . 108

C. Implementacion 112

C.1. Introduccion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112

C.2. Estructuras de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112

C.2.1. Estructura de directorios . . . . . . . . . . . . . . . . . . . . . . . . 112

C.2.2. Esferas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113

C.2.3. Regiones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

C.3. Codigo principal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

C.4. Capturas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116

Bibliografıa 122

Indice de figuras

2.1. El proceso de visualizacion. . . . . . . . . . . . . . . . . . . . . . . . . . . 9

2.2. Modelo Unificado de Visualizacion. . . . . . . . . . . . . . . . . . . . . . . 10

2.3. El modelo en Visualizacion Cientıfica . . . . . . . . . . . . . . . . . . . . . 14

2.4. El modelo en Visualizacion de Informacion . . . . . . . . . . . . . . . . . . 15

3.1. Diferentes aplicaciones de grafos. . . . . . . . . . . . . . . . . . . . . . . . 18

3.2. Diferentes niveles de zoom sobre un grafo . . . . . . . . . . . . . . . . . . . 20

3.3. Un arbol con una alta densidad de nodos genera oclusion . . . . . . . . . . 21

3.4. Reglas Basicas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

3.5. Reglas Semanticas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

3.6. Reglas Estructurales. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

3.7. Algorıtmo de Reingold y Tilford en arboles . . . . . . . . . . . . . . . . . . 26

3.8. Algoritmo de diagramado H . . . . . . . . . . . . . . . . . . . . . . . . . . 26

3.9. Arbol representado utilizando la tecnica HV . . . . . . . . . . . . . . . . . 27

3.10. Diagramado Radial para arboles . . . . . . . . . . . . . . . . . . . . . . . . 27

3.11. Ballon view de un arbol . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

3.12. Tree-map: Uso de rectangulos para representar arboles. . . . . . . . . . . . 29

3.13. Un grafo y su version planar . . . . . . . . . . . . . . . . . . . . . . . . . . 30

3.14. Diagramado por capas vertical . . . . . . . . . . . . . . . . . . . . . . . . . 30

3.15. Grafo basado en grilla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

3.16. Diagramado Hiperbolico . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

3.17. Grafos planares representados en 2D y 3D. . . . . . . . . . . . . . . . . . . 36

3.18. WebBook, visualizacion de paginas web . . . . . . . . . . . . . . . . . . . . 37

3.19. Captura de pantalla para el navegador de archivos de las estaciones de

trabajo SGI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

3.20. Sistema Starlight. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

3.21. Visualizaciones utilizando cone trees . . . . . . . . . . . . . . . . . . . . . 40

3.22. Vista hiperbolica 3D de un grafo. . . . . . . . . . . . . . . . . . . . . . . . 41

3.23. Cubo de Informacion. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

3.24. Interaccion de seleccion en un cubo de informacion. . . . . . . . . . . . . . 43

3.25. Grafo con 32727 nodos y 1206654 arcos. . . . . . . . . . . . . . . . . . . . 44

3.26. Grafo con 302832 nodos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

4.1. Diagramado radial para un arbol . . . . . . . . . . . . . . . . . . . . . . . 51

4.2. El problema de los arcos senalado por Battista. . . . . . . . . . . . . . . . 52

4.3. Tangente al punto v en Ci. . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

4.4. Diagramado radial para un arbol. . . . . . . . . . . . . . . . . . . . . . . . 54

4.5. Espacio sin utilizar en el diagramado radial . . . . . . . . . . . . . . . . . . 55

4.6. Dos grafos dibujados utilizando un diagramado radial . . . . . . . . . . . . 55

4.7. Visualizacion de la red Gnutella . . . . . . . . . . . . . . . . . . . . . . . . 56

4.8. Angulos de apertura en un diagramado radial . . . . . . . . . . . . . . . . 56

4.9. Dos grafos dibujados utilizando un diagramado radial . . . . . . . . . . . . 57

4.10. Generalizacion de diagramado radial a esferico . . . . . . . . . . . . . . . . 58

4.11. Los angulos α y uα de un nodo. . . . . . . . . . . . . . . . . . . . . . . . . 59

4.12. Angulos involucrados en la generacion del diagramado esferico. . . . . . . . 60

4.13. Conos esfericos en esferas circulares. . . . . . . . . . . . . . . . . . . . . . . 61

4.14. Area sobre la cual se ubicaran los nodos correspondientes al nivel 1. . . . . 62

4.15. Anillo central a la esfera. Cuando se consideran los hijos de la raız este

anillo se subdivide de acuerdo a los angulos calculados. . . . . . . . . . . . 63

4.16. La region resaltada le corresponde a un nodo y se obtuvo dividiendo el

anillo central de acuerdo al calculo de los angulos . . . . . . . . . . . . . . 64

4.17. Cada nodo se ubica en el centro de su region. . . . . . . . . . . . . . . . . 65

4.18. El proceso de subdivision y proyeccion para el diagramado esferico . . . . 66

4.19. Es paso inicial crea una esfera con tantos triangulos como hojas tenga el

arbol y ubica la raız en el centro de la misma. . . . . . . . . . . . . . . . . 67

4.20. Division de la esfera exterior en tantas regiones como hijos tenga la raız. . 68

4.21. La zona marcada en verde corresponde a la ubicacion de las hojas del

subarbol sobre el ultimo nivel. . . . . . . . . . . . . . . . . . . . . . . . . . 69

4.22. Las regiones proyectadas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

4.23. Esta imagen muestra claramente la recusividad de las proyecciones. . . . . 70

4.24. Estructura de directorios a visualizar. . . . . . . . . . . . . . . . . . . . . . 72

4.25. La estructura de directorios a traves del diagramado esferico. . . . . . . . . 73

4.26. Las esferas creadas para poder resolver el diagramado esferico. . . . . . . . 73

4.27. El arbol de directorios junto a los triangulos en donde se ubican nodos. . . 74

4.28. Agrupamiento por distancia en un diagramado esferico. . . . . . . . . . . . 74

5.1. Navegacion en modo dirigido. . . . . . . . . . . . . . . . . . . . . . . . . . 76

5.2. Navegacion en modo Libre. . . . . . . . . . . . . . . . . . . . . . . . . . . . 77

5.3. Vista Completa presenta una vista similar a la que da H3 . . . . . . . . . . 78

5.4. Vista en Tercera Persona del elemento en foco, el elemento en el centro de

la visualizacion. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79

5.5. Los dos modos de vista en primera persona. . . . . . . . . . . . . . . . . . 79

5.6. Ausencia de contexto en alguna de las vistas. . . . . . . . . . . . . . . . . . 80

5.7. Visualizacion del contexto a la vista actual . . . . . . . . . . . . . . . . . . 81

5.8. Solo en la vista 5.6(a) se tiene una vision global del grafo . . . . . . . . . . 81

6.1. Galaxy of News . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84

6.2. Capturas de pantalla del sistema Starlight . . . . . . . . . . . . . . . . . . 86

6.3. Uso de scatterplot para la representacion de documentos . . . . . . . . . . 86

6.4. Capturas de pantalla del sistema XCruiser . . . . . . . . . . . . . . . . . . 88

6.5. El universo, con sus galaxias, estrellas y planetas. . . . . . . . . . . . . . . 89

6.6. La esfera como principal elemento en la visualizacion . . . . . . . . . . . . 90

6.7. El tamano de la esfera asociado a un valor numerico. . . . . . . . . . . . . 90

6.8. Variaciones en el color y la textura podrıan indicar variaciones de uno o

mas parametros asociados a un elemento . . . . . . . . . . . . . . . . . . . 91

6.9. Los anillos de un planeta tambien se pueden utilizar como metaforas para

representar informacion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92

6.10. Las lunas orbitando los planetas. . . . . . . . . . . . . . . . . . . . . . . . 92

A.1. Modulos y sus dependencias representados como un grafo. . . . . . . . . . 98

A.2. Una proteına representada utilizando un grafo. . . . . . . . . . . . . . . . . 99

A.3. La jerarquıa de archivos vista como un arbol, un tipo partıcular de grafo. . 100

A.4. Grafos dirigidos y no dirigidos. . . . . . . . . . . . . . . . . . . . . . . . . . 100

A.5. Un grafo simple y un multigrafo dirigido . . . . . . . . . . . . . . . . . . . 101

A.6. Clausura transitiva de un grafo . . . . . . . . . . . . . . . . . . . . . . . . 101

A.7. Subgrafos de G. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102

B.1. Descripciones del juego de Morris correspondientes al siglo XIII. . . . . . . 104

B.2. Arboles genealogicos presentes en manuscriptos de la Edad Media. . . . . . 105

B.3. Arbol genealogico del siglo XV. . . . . . . . . . . . . . . . . . . . . . . . . 106

B.4. Arbol genealogico que incluye el siglo XV y XVI. . . . . . . . . . . . . . . 107

B.5. Representaciones de taxonomıas del siglo XIV. . . . . . . . . . . . . . . . . 107

B.6. Una representacion de Squares of opposition del siglo XIV . . . . . . . . . 108

B.7. Una version mas compleja de los Squares of opposition . . . . . . . . . . . 109

1

B.8. Representaciones de un mapa de Konigsberg realizados por Leonhard Euler.109

B.9. Representacion abstracta del problema de los puentes . . . . . . . . . . . . 110

B.10.Primeros ejemplos del edad moderna del dibujado de grafos. . . . . . . . . 110

B.11.Grafos en dominios de aplicacion fuera de la matematica. . . . . . . . . . . 111

C.1. Tabla de arcos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113

C.2. Tabla de nodos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114

C.3. Figura de un icosahedron . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

C.4. La cantidad de triangulos no es igual a la cantidad de hojas. . . . . . . . . 115

C.5. Modificacion del codigo Edgebreaker. . . . . . . . . . . . . . . . . . . . . . 117

C.6. Codigo para el algoritmo de Layout Esferico. . . . . . . . . . . . . . . . . . 118

C.7. Codigo para el algoritmo de UbicarNodos. . . . . . . . . . . . . . . . . . . 119

C.8. Cada color identifica un subarbol cuya raız es hija de la raız del arbol

principal. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120

C.9. Incluir los triangulos como parte de la visualizacion enriquece la vista. . . . 121

Capıtulo 1

Introduccion

La esencia de la visualizacion es el uso de representaciones visuales e interacciones

con el objetivo de obtener un rapido insight de un conjunto complejo de datos. Card,

Mackinlay y Shneiderman ([CMS99]) definen visualizacion como:

El uso de representaciones visuales interactivas de datos para ampliar la capacidad

cognitiva.

Las representaciones visuales transforman datos en formas visibles que resaltan aspec-

tos importantes, como anormalidades y similitudes en los datos. Estas representaciones

visuales logran que el usuario perciba, en forma rapida, aspectos significativos de su con-

junto de datos. Aumentando la capacidad cognitiva del usuario a traves de representa-

ciones visuales se logra un proceso analıtico mas rapido y enfocado.

Sin duda es un gran reto crear representaciones visuales adecuadas. Cada repre-

sentacion visual debe permitir que el usuario explore los datos con efectividad. Tal explo-

racion requiere que el usuario pueda interactuar con la representacion y ganar insight a

traves de estas interacciones.

Las caracterısticas de los datos y su organizacion son aspectos fundamentales al mo-

mento de seleccionar una representacion visual adecuada. Un tipo en particular de organi-

zacion es la de estructura relacional. En este caso, en el espacio de informacion se encuen-

tran entidades relacionadas con otras entidades. Estos tipos de datos son una constante

en las Ciencias de la Computacion, Matematica, Ingenierıa y muchas otras disciplinas.

Contribucion de la Tesis 3

Tales estructuras son modeladas frecuentemente como grafos en donde las entidades se

representan como vertices y las relaciones como arcos entre vertices.

Para lograr una representacion visual de un grafo, primero debemos determinar como

ubicar sus elementos, vertices y arcos, en el espacio 2D o 3D. El espacio de soluciones para

este problema es muy extenso y solo algunas representaciones pueden considerarse acept-

ables desde el punto de vista de su efectividad/usabilidad. La forma en la que se disponen

en pantalla los elementos del grafo se conoce como diagramado (layout) y constituye un

factor determinante en la representacion visual.

La visualizacion de grafos en 3D presenta multiples retos: la eleccion de un diagramado

apropiado, el uso de interacciones que faciliten la exploracion de los datos y una metafora

que ayude a la comprension de la informacion. Una buena combinacion de estos tres ele-

mentos (diagramado, interacciones y metafora) tendran como resultado una visualizacion

a partir de la cual se logre un proceso analıtico mas efectivo.

En Visualizacion, la metafora ha sido incorporada como un camino de comprension

de lo nuevo a traves de lo ya conocido ([DFAB97]). Las metaforas funcionan en base a un

principio de semejanza, puesto que establecen una similitud entre dos conceptos y ademas

tienen valor generativo que nos sirve para crear nuevas descripciones de un fenomeno

menos conocido en terminos de otro mas conocido. Desde hace tiempo este concepto ha

sido utilizado en el mundo de la visualizacion para ayudar al usuario a comprender la

informacion visualizada; la metafora no solo es aplicada en la representacion visual sino

tambien en las interacciones que actuan sobre ella.

Este trabajo presenta un diagramado para grafos en tres dimensiones, y con esto como

punto de partida, define un conjunto de interacciones y una metafora que se adapta al

diagramado.

1.1. Contribucion de la Tesis

Los ultimos avances en Visualizacion y, particularmente en Visualizacion de Informa-

cion, ponen en manifiesto los temas esenciales de investigacion. Hoy en dıa, una tarea

desafiante en dicha area lo constituye el encontrar estrategias y desarrollar herramientas

para visualizar los distintos tipos de informacion; es constante la busqueda de nuevas

4 Capıtulo 1. Introduccion

formas de representacion. En lo que respecta a la Visualizacion de Informacion, el dia-

gramado espacial y los algoritmos de dibujado de grafos juegan un rol fundamental. Un

buen diagramado comunica efectivamente las caracterısticas claves de una estructura o

un sistema complejo a un amplio rango de usuarios mientras que uno pobre oscurece la

naturaleza de la estructura subyacente.

El trabajo de esta tesis se centro basicamente en la visualizacion de grafos; en este

sentido, se desarrollo una nueva tecnica para la visualizacion de grafos en tres dimen-

siones; esto incluye tanto el diseno de un nuevo diagramado para grafos, al que hemos

denominado Diagramado Esferico, como el conjunto de interacciones que se aplican sobre

la representacion. Si bien esta nueva tecnica permite representar estructuras a diferentes

niveles de detalle, tambien puede tomarse como la base para una tecnica de visualizacion

que permita visualizar mas informacion. Para ello, y tomando como base la metafora

del universo, se extendio la tecnica de visualizacion, manteniendo en todo momento la

consistencia entre la representacion visual y la metafora.

En este contexto, se detalla a continuacion el trabajo que constituye la contribucion

de esta tesis:

Diagramado Esferico: El diagramado esferico se desarrollo como una extension

del diagramado radial 2D a 3D. La base para el diagramado radial son los cırculos

concentricos sobre los cuales se ubican los nodos. El espacio dedicado a los hijos de

un nodo se encuentra definido sobre un segmento de la circunferencia cuya longitud

se determina en funcion de la cantidad de hijos de cada subarbol. Al pasar a tres

dimensiones los cırculos concentricos del diagramado radial se mapean a esferas

concentricas; en el diagramado radial los nodos se ubican sobre las circunferencias;

en el esferico, los nodos seran ubicados sobre la superficie de cada esfera; para esto

se han desarrollado dos alternativas diferentes.

Interacciones: Ademas de considerar las interacciones clasicas de las visualiza-

ciones en 3D se definieron nuevas interacciones. Dos tipos de navegacion son pre-

sentados:

• Navegacion Dirigida.

• Navegacion Libre.

Cuatro tipos de vistas de la visualizacion:

Estructura de la Tesis 5

• Vista Completa.

• Vista en Tercera Persona.

• Vista en Primera Persona.

• Vista en Persona.

Metafora: Varios sistemas han utilizado la metafora de planetas y estrellas con

anterioridad pero flexibilizando en demasıa la relacion entre la visualizacion y la

metafora. Presentamos una nueva metafora para la visualizacion de informacion

utilizando grafos basada en los conceptos de planetas y estrellas.

1.2. Estructura de la Tesis

En esta tesis incluimos los conceptos relevantes, de modo tal que la lectura de la misma

sea autocontenida. A continuacion describimos su estructura y los resultados obtenidos:

Capıtulo 1 Introduccion. Introducimos los objetivos y el marco en el que desarrollamos

esta investigacion. Tambien enumeramos cuales son las contribuciones de la misma.

Capıtulo 2 Visualizacion. En este capıtulo haremos una introduccion al area de visu-

alizacion, detallando los campos que cubre esta disciplina. Analizaremos la creacion

de visualizaciones como un proceso constituido por estados y transformaciones. De-

scribiremos las caracterısticas de dicho proceso para luego introducir el “Modelo

Unificado de Visualizacion” ([MCFE03]).

Capıtulo 3 Visualizacion de Grafos. La visualizacion de grafos se basa en la existen-

cia de una relacion inherente entre los datos a visualizar. Gracias a esta relacion, los

datos se pueden representar como nodos y las relaciones como arcos. Este capıtu-

lo repasa las caracterısticas que se deben tener en cuenta al dibujar un grafo y se

realiza un relevamiento de las tecnicas de diagramado de grafos, considerando tam-

bien las aplicables a arboles. A continuacion se detallan los principios basicos de

la visualizacion de grafos, para luego introducir diferentes tecnicas para la visual-

izacion de estos en 3D. Este capıtulo concluye con una revision de los problemas de

escalabilidad y la visualizacion de grandes grafos.

6 Capıtulo 1. Introduccion

Capıtulo 4 Diagramado Esferico. En este capıtulo presentamos el diagramado Esferi-

co como la extension en 3D del diagramado Radial. Comenzamos con una introduc-

cion al diagramado Radial y las diferentes tecnicas que se utilizan para calcular la

ubicacion de los nodos. Posteriormente se presenta el diagramado Esferico, se es-

tablecen los conceptos basicos involucrados y se finaliza con la presentacion de dos

algoritmos que permiten generar este diagramado.

Capıtulo 5 Interacciones sobre grafos en un diagramado Esferico. El relevamien-

to de tecnicas de visualizacion de grafos en 3D que se realiza en el capıtulo 3 incluye

tambien sus interacciones. El capıtulo 4 retoma este tema para introducir las in-

teracciones asociadas al diagramado Esferico. La navegacion de la visualizacion se

presenta en dos formas: Navegacion Libre y Navegacion Dirigida. La forma en como

el usuario se situa ante la visualizacion define el tipo de vista que tendra; para este

caso presentamos 4 tipos de vistas diferentes: Vista Completa, Vista en Tercera Per-

sona, Vista en Primera Persona y Vista en Persona. Este capıtulo presenta tambien

el uso de zoom semantico para poder interactuar sobre agrupamientos de nodos y

la inclusion de ayudas visuales para dar contexto a la vista del usuario

Capıtulo 6 Planetas y estrellas. La metafora. Este capıtulo presenta una metafora

basada en una version simplificada del universo. Varios sistemas presentan visual-

izaciones que, de acuerdo a sus autores, utilizan una metafora de universo; en este

capıtulo se hace un relevamiento de tales sistemas observando en que grado sopor-

tan la metafora. Luego de este analisis se presenta la metafora que creemos mejor

se adapta al diagramado Esferico detallando sus componentes y funciones.

Capıtulo 7 Presentamos las Conclusiones Finales y el Trabajo Futuro

Apendice A En este Apendice describimos los conceptos basicos de grafos.

Apendice B En este Apendice describimos la historia y evolucion de la visualizacion de

grafos.

Apendice C En este Apendice describimos brevemente la implementacion de una apli-

cacion basada en el diagramado Esferico

Capıtulo 2

Visualizacion

La visualizacion es el proceso por el cual se crea una representacion visual interactiva

a partir de un conjunto de datos. Este proceso se puede definir como una serie de sub-

procesos, transformaciones y estados de los datos ([MCFE03]); dicho proceso puede ser

utilizado en una amplia gama de dominios de aplicacion. Debido a esta gran variedad de

dominios de aplicacion surgen precisamente los distintos campos de la disciplina. Si bien el

objetivo comun es la obtencion de representaciones visuales interactivas con el proposito

de la adquisicion y el uso del conocimiento; segun la naturaleza y caracterısticas de la

informacion a visualizar podemos hablar de:

Visualizacion Cientıfica: Tiene como caracterıstica la visualizacion de datos

cientıficos, tıpicamente datos fısicos. El sustrato espacial se encuentra presente en

los datos a visualizar. Dentro de este campo a su vez se distinguen:

• Visualizacion de Volumenes: Representacion, manipulacion y rendering de

datos volumetricos.

• Visualizacion de Flujos: Representacion, manipulacion y rendering de datos

vectoriales y tensoriales.

Visualizacion de Software: Incluye la visualizacion de algoritmos y programas

(datos y codigo). Usualmente se distingue entre:

• Visualizacion de Algoritmos: Visualizacion de las estructuras de alto nivel que

caracterizan a un software. Enfoque basicamente pedagogico.

8 Capıtulo 2. Visualizacion

• Visualizacion de Programas: Visualizacion del codigo y los datos reales de un

programa. Enfoque centrado en herramientas de la ingenierıa de software.

Visualizacion de informacion: Visualizacion de datos abstractos, no basados en

lo fısico. Los datos no poseen un mapeo espacial inherente.

Crear representaciones visuales adecuadas es un gran reto. Cada representacion visual

debe permitir que el usuario explore los datos con efectividad. Tal exploracion requiere

que el usuario pueda interactuar con la representacion y ganar insight a traves de estas

interacciones.

En una primera instancia, el diseno de un conjunto de interacciones bien definidas

requiere de conocimientos del dominio especıfico de la aplicacion. Esto es natural ya que

cada disciplina y las caracterısticas particulares de las mismas determinan los analisis a

los que se someteran los datos. Afortunadamente, aunque sea frecuente que distintos do-

minios de aplicacion requieran representaciones visuales diferentes, varios de ellos pueden

compartir estados intermedios de los datos, o requerir manipulaciones a nivel de vistas

similares o incluso necesitar de las mismas transformaciones de datos.

Es claro que los requerimientos impuestos por cada dominio pueden llegar a ser

dramaticamente diferentes; sin embargo, un analisis de los mismos nos permite encon-

trar denominadores comunes:

En los extremos del proceso de visualizacion tenemos, por un lado, los datos propios

de cada dominio de aplicacion, y por el otro una representacion abstracta de estos

en pantalla. Las propiedades distintivas de los datos manejados en los extremos del

proceso permiten hablar de separacion entre datos y vista (Figura 2.1).

Esa separacion entre datos y vistas se hace mas evidente en la visualizacion de

informacion dado que los datos a ser mostrados carecen usualmente de un mapeo

espacial inherente.

Es evidente que entre los dos extremos mencionados los datos van sufriendo sucesivas

transformaciones.

Por otro lado la visualizacion tiene que ser el medio por el cual el usuario explora

el espacio de datos de su interes para lograr obtener un insight de los mismos. Es

claro que un proceso con esas caracterısticas debe ser netamente interactivo.

Modelo Unificado de Visualizacion 9

Para que los usuarios puedan interactuar de manera efectiva deben saber sobre

que se esta trabajando y cuales son los efectos de las interacciones posibles.

Figura 2.1: El proceso de visualizacion.

Se define entonces un modelo consistente para los procesos de visualizacion que sea

valido para los diferentes dominios de aplicacion. Esta consistencia permitira a los usuar-

ios lograr interacciones efectivas en el proceso de visualizar datos provenientes de distintos

dominios de aplicacion, basandose en un unico modelo mental. Este modelo se denom-

ina Modelo Unificado de Visualizacion ([MCFE03]) y es aplicable a cualquier vi-

sualizacion independientemente del campo particular de origen. En este modelo quedan

explıcitamente representadas las operaciones provistas y los operandos sobre los que se

pueden aplicar, conjuntamente con la secuencia de transformaciones propias del proceso.

2.1. Modelo Unificado de Visualizacion

Cualquier proceso de visualizacion puede pensarse como una transformacion de los

datos en una representacion visual; es un proceso cognitivo que requiere de la participacion

del usuario (Figura 2.1). El Modelo Unificado de Visualizacion es un modelo de estados

representado como un flujo entre los distintos estados que van asumiendo los datos a

lo largo del proceso. En el esquema planteado, los nodos representan los estados de los

datos y las aristas las transformaciones necesarias para pasar de un estado al proximo. El

modelo consiste en cinco estados y cuatro transformaciones (Figura 2.2).

A continuacion se detallan los estados y transformaciones involucrados en este modelo:

2.1.1. Estados

Datos Crudos: Se corresponde con el estado inicial. La clasificacion de los datos es

un tema amplio y complejo que no presenta una relacion directa con el tema de esta


Figura 2.2: Modelo Unificado de Visualizacion.

tesis por lo que sera abordado superficialmente y enfatizando las caracterısticas que

puedan resultar interesantes para su posterior visualizacion. Bertin (1977) sugiere

dos formas basicas de datos: Valores de Datos y Estructuras de Datos. En otras

palabras clasifica los datos en entidades y relaciones. Estos conceptos tienen una

larga historia en el diseno de Bases de Datos pero su uso en Visualizacion es reciente.

• Entidades: Son los objetos de interes que queremos visualizar.

• Relaciones: Las relaciones pueden estar definidas por las estructuras y/o pa-

trones bajo los que se presentan las entidades. Las relaciones pueden estar

dadas en forma explıcita dentro de los Datos Crudos y obtenerlas puede llegar

a ser el objetivo del proceso de visualizacion. Las relaciones pueden ser fısicas,

conceptuales o estructurales. Tanto las entidades como las relaciones poseen

propiedades que se expresan en termino de sus atributos.

• Atributos: Expresan las propiedades de las entidades y relaciones; no pueden

ser pensados en forma independiente. Las caracterısticas de los atributos a

mostrar son un aspecto importante a considerar al momento de disenar una

visualizacion.

Datos Abstractos: Es un estado intermedio de los datos. En este estado ten-

emos todos los datos que el usuario preselecciono dentro de los Datos Crudos como

potencialmente visualizables. Dentro de este estado podemos tener entonces un sub-

conjunto de los Datos Crudos al cual se le puede haber agregado datos derivados de

los existentes o tambien pueden ser Datos Crudos que se pueden haber mejorado de

alguna manera. En sıntesis, los Datos Abstractos constituyen el universo visualiz-

able. Cualquier interaccion del usuario que exceda a los datos almacenados en este

estado demandara una nueva captura de Datos Crudos.

Modelo Unificado de Visualizacion 11

Datos a Visualizar: Este estado representa un subconjunto de los Datos Ab-

stractos. Esta constituido por todos los datos que van a ser visualizados de alguna

manera. Es un estado que se justifica claramente desde lo conceptual. Es importante

tener en cuenta que para un mismo conjunto de Datos Crudos se pueden tener en-

tonces mas de un conjunto de Datos a Visualizar. Estos datos pueden no ser aun

directamente visualizables.

Datos Mapeados Visualmente: Este es el estado previo a la generacion de la

representacion visual y es el resultado de mapear visualmente los Datos a Visualizar.

Los datos contenidos en este estado son directamente visualizables aplicando una

tecnica que los soporte. La caracterıstica distintiva de este estado es la presencia

de un sustrato espacial que directamente pudo haber estado ausente en el estado

anterior; precisamente, esta es una de las diferencias basicas entre Visualizacion de

Informacion y Cientıfica. Esta diferencia sera mas visible en la seccion 2.2 donde

presentaremos un ejemplo.

Datos Mapeados Visualmente = Datos a visualizar + Estructura Visual

donde la Estructura Visual esta determinada por:

Estructura Visual = Sustrato Espacial + Elementos Visuales + Atributos graficos

de los elementos visuales

En este punto resulta evidente que para un determinado conjunto de Datos a Vi-

sualizar pueden coexistir varios conjuntos de Datos Mapeados Visualmente. Esta

caracterıstica es relevante en el marco de un proceso de exploracion del espacio de

datos, donde el usuario puede o necesita comparar y analizar distintas maneras de

visualizar un mismo conjunto de datos.

Datos Visualizados: Es el ultimo estado del proceso de visualizacion. Esto no

significa que sea el estado final del proceso cognitivo que esta llevando a cabo el

usuario, todo lo contrario, este constituye el estado en el que el usuario comienza la

exploracion visual de los datos. Es muy probable que a partir de una visualizacion el

usuario comience a interactuar para lograr el insight de los datos que es el objetivo

buscado.


2.1.2. Transformaciones

Transformacion de Datos Crudos a Datos Abstractos: Esta transformacion

permite al usuario seleccionar cuales son los datos que quiere visualizar y llevarlos

a un formato manejable por el sistema.

Transformacion de Datos Abstractos a Datos a Visualizar: Esta transfor-

macion permite que el usuario indique que quiere visualizar dentro del conjunto de

Datos Abstractos.

Transformacion de Mapeo Visual: Esta transformacion permite que el usuario

especifique como quiere visualizar los datos presentes en el conjunto de Datos a

Visualizar. Se generan las estructuras necesarias para soportar el sustrato espacial,

los elementos visuales que se utilizaran en la representacion y los atributos de los

mismos.

Transformacion de Visualizacion: Esta transformacion permite la repre-

sentacion en pantalla de todos los datos contenidos en el conjunto de Datos Mapea-

dos Visualmente. Usualmente resultara en la aplicacion de una tecnica de visual-

izacion que soporte el mapeo visual presentado.

2.1.3. Interacciones

No solo es fundamental buscar y aplicar un mapeo visual a un conjunto de datos ab-

stractos sino tambien brindar las interacciones necesarias para la exploracion de los datos

visualizados. Se ha expresado reiteradamente que la visualizacion debe ser un proceso

interactivo. La visualizacion es un proceso cognitivo mediante el cual iterativa e inter-

activamente el usuario explora el espacio de sus datos. Es claro que la interaccion debe

ocurrir en distintos puntos a lo largo de todo el proceso de visualizacion. Una vez realizada

la primera iteracion, es decir una vez que se obtuvo la primera representacion visual, el

usuario interactua en la ultima etapa del proceso. El hecho de que las interacciones tengan

lugar en el estado de los Datos Visualizados no quiere decir que se puedan resolver en ese

estadıo. La interaccion esta reflejada en el modelo a nivel de los distintos estados y las

correspondientes transformaciones.

Ejemplo 13

2.2. Ejemplo

Para mostrar como el modelo soporta aplicaciones provenientes de las distintas ramas

de visualizacion mostraremos distintos ejemplos representativos y los ubicamos dentro del

modelo. Para cada aplicacion, partiendo de los datos crudos, se van aplicando las sucesivas

transformaciones generando los sucesivos estados intermedios hasta alcanzar finalmente

las representaciones visuales correspondientes.

En el ejemplo de Visualizacion Cientıfica que se presenta (Figura 2.3), se muestran

distintas visualizaciones posibles de acuerdo a las elecciones hechas en cada etapa del

proceso. En este caso, se supone que se cuenta con un conjunto de tomografıas y se elige

una de estas para ser visualizada. De acuerdo a distintas necesidades, se puede querer

ver el conjunto 3D de una determinada tomografıa o solo parte de esta. Cuando se trata

de visualizar esta ultima opcion puede quererse visualizar solo un tipo de tejido (como el

oseo en este ejemplo) o una parte especıfica del conjunto volumetrico.

En el ejemplo de Visualizacion de Informacion (Figura 2.4) tambien se muestran dis-

tintas visualizaciones posibles. En este caso, el objetivo es visualizar distintos aspectos

de informacion sobre las llamadas telefonicas realizadas por los abonados a una empresa

telefonica.

Figura 2.3: El modelo en Visualizacion Cientıfica ([MCFE03]).

Ejemplo 15

Figura 2.4: El modelo en Visualizacion de Informacion ([MCFE03]).

Capıtulo 3

Visualizacion de Grafos

Este trabajo se centra en la visualizacion de grafos dentro del contexto de la visu-

alizacion de informacion, no solo creando una representacion visual para los datos sino

tambien considerando las interacciones apropiadas dentro de dicha representacion.

La visualizacion de grafos se basa en la existencia de una relacion inherente entre los

datos a visualizar. Gracias a esta relacion, los datos se pueden representar como nodos y

las relaciones como arcos. El grafo es la estructura fundamental para la representacion de

estos datos.

Existe una gran variedad de areas de aplicacion para la visualizacion de grafos. En

un sistema operativo, por ejemplo, es comun encontrarse con una jerarquıa de archivos;

dicha jerarquıa puede representarse como un arbol (Figura 3.1(a)), un tipo especial de

grafo. No solo la presentacion es importante sino tambien las interacciones sobre ella.

Muchas veces es necesario navegar en esta jerarquıa para poder encontrar un archivo en

particular. Cualquiera que haya realizado esto probablemente ha experimentado algunos

de los problemas relacionados con la visualizacion de grafos. ¿Donde estoy?, ¿Donde

esta el archivo que estoy buscando? En Biologıa, los grafos son utilizados para representar

arboles de evolucion, mapas moleculares, mapas geneticos y proteınas (Figura 3.1(b)), en

Ingenierıa de Software los grafos son utilizados para representar diagramas de clases y

relaciones (Figura 3.1(c)) y ası son innumerables los casos donde podemos encontrar

ejemplos de aplicaciones de grafos.

Una visualizacion de grafos consta de una representacion visual y un conjunto de

interacciones que el usuario utilizara para explorar y navegar dicha representacion visual.

18 Capıtulo 3. Visualizacion de Grafos

(a) La jerarquıa de archivos vista como un arbol, un

tipo partıcular de grafo.

(b) Una proteına represen-

tada utilizando un grafo.

(http://www.math.cornell.edu/ dur-

rett/RGD/RGD.html.)

(c) Diagrama de clases visto como un grafo.

(http://www.cs.uoregon.edu/research/cm-

hci/VizFix/.)

Figura 3.1: Diferentes aplicaciones de grafos.

Dibujado de un grafo 19

El primer paso para obtener una representacion visual consiste en definir un mapeo visual,

es decir, elegir como se representaran graficamente los datos a visualizar. Con el mapeo

visual definido y en funcion de los datos de entrada se genera la representacion. Con la

representacion visual en pantalla, el usuario comienza a interactuar y esto seguramente

desencadenara un nuevo proceso de dibujado.

3.1. Dibujado de un grafo

El problema de dibujado de un grafo puede plantearse de manera muy simple:

Dado un conjunto de nodos y un conjunto de arcos, calcular la posicion de los nodos y

las curvas que se dibujaran entre ellos para denotar los arcos.

Este problema ha existido desde hace mucho tiempo debido a que un grafo se define

por su dibujado. Comenzando a fines del siglo XVIII y principios del XIX los dibujos de

grafos comenzaron a aparecer en diversos contextos. En las matematicas muchos trabajos

comenzaron a contener ilustraciones de grafos. Como veremos a continuacion, aunque el

problema sea muy simple, su solucion, sin duda, no lo es.

Uno de los aspectos clave en el dibujado de grafos es su tamano. La cantidad de

nodos y arcos del mismo condiciona la eleccion del metodo. Con grafos muy grandes se

puede comprometer la performance del metodo de visualizacion limitando las posiblidades

de interaccion en tiempo real. La figura 3.2 muestra como una vista global nos permite

observar la estructura general del grafo perdiendo su detalle; para esto debemos acercarnos

al grafo, ganando detalle en la imagen pero perdiendo la vista global. Ademas para grafos

muy grandes se pueden alcanzar rapidamente los lımites del medio de visualizacion. Aun

en el caso de poder visualizar todos los elementos del grafo, aparecen cuestiones como la

visibilidad y la usabilidad de la representacion. La visibilidad se relaciona con la posibilidad

de distinguir entre un elemento y otro y no se da en aquellos casos en que existe una

gran densidad de elementos por unidad de superficie de pantalla. La usabilidad es la

contrapartida de la visibilidad pero desde el punto de vista de la interaccion, por ejemplo,

la posibilidad de seleccionar un elemento de un conjunto de manera efectiva. Al querer

visualizar completamente grafos muy grandes se produce una aglomeracion de elementos

en la que no es posible distinguir el elemento de interes ya que existe una oclusion entre

los nodos y los arcos.


Otro aspecto clave, sobre todo en visualizacion de informacion, lo constituye la ca-

pacidad de la representacion de preservar el mapa mental del usuario ([HDM98], [Nor96],

[MKS95]). Un mismo grafo puede representarse de muchas maneras y asignando posi-

ciones distintas a nodos y arcos. El usuario tıpicamente asocia visualmente los conceptos

en su mente en relacion a la representacion que obtuvo de la visualizacion. Al cambiar las

posiciones de los nodos y los arcos se le dificulta el reconocimiento de esa nueva repre-

sentacion como una equivalente a la anterior. Es normal que el usuario se sienta perdido

pues la nueva representacion que obtuvo no concuerda con el mapa mental que construyo a

partir de la vista anterior. El paso entre las dos vistas puede darse como consecuencia

de una interaccion del usuario o simplemente ser dos ejecuciones independientes de una

herramienta no interactiva. En cualquier caso, una propiedad deseable para el algoritmo

de representacion visual es que sea predecible; es decir que para el mismo grafo, o uno

similar, en ejecuciones distintas arroje la misma representacion, o una muy similar. Cuan-

do se utilizan tecnicas de dibujado no precedibles es frecuente recurrir a la animacion para

suavizar los cambios entre las vistas y evitar ası que el usuario se pierda en el proceso.

Figura 3.2: Un grafo visto a diferentes distancias (http://www.parisc-

linux.org/ willy/kde/report.html).

Dibujado de un grafo 21

Como dijimos antes, la visualizacion de grafos de gran tamano es un problema muy

complejo. Pocos sistemas pueden decir que manejan efectivamente grafos con miles de no-

dos. NicheWorks ([Wil97]) y H3Viewer ([Mun98]) son algunos de los pocos sistemas que

pueden manejar conjuntos de datos en el orden de los miles de elementos. El tamano de

un grafo puede hacer que un algoritmo de diagramado bueno se transforme en completa-

mente inusable. La figura 3.3 muestra un arbol con algunos cientos de nodos utilizando el

algoritmo de Reingold and Tilford. Debido a la alta densidad del grafo, las interacciones

se vuelven muy complicadas; ademas, las oclusiones que se producen hacen imposible

seleccionar un nodo en particular.

Figura 3.3: Un arbol con tal alta densidad de nodos genera oclusion y dificulta las inte-

racciones de seleccion ([HMM00]).

De lo dicho previamente puede verse que no es sencillo representar apropiadamente

un grafo. Sin embargo, el estudio de las grandes posibilidades que ofrece la representacion

de grafos ha dado lugar a una serie de reglas que se citan a continuacion. Segun Kozo

Sugiyama ([Sug02]) las reglas estaticas que sirven para dibujar un solo grafo se dividen

en:

Reglas Basicas

Reglas Semanticas

Reglas Estructurales


Reglas Basicas

Se refieren a aspectos elementales como el solapamiento entre aristas, vertices o ambos.

(a) No solapar vertices. (b) No solapar arcos.

(c) No solapar vertices con arcos.

Figura 3.4: Reglas Basicas.

Reglas Semanticas

Son reglas de posicionamiento de vertices y de dibujado de arcos derivadas del signifi-

cado de los vertices y los arcos. Por ejemplo, dibujar el tamano de un vertice o el grosor

de un arco en funcion de su importancia.

Reglas Estructurales

Son reglas de posicionamiento relacionadas solo con las propiedades de la teorıa de

grafos. Por ejemplo colocar los vertices de mayor orden en el centro del dibujo o minimizar

la longitud total de aristas, minimizar el numero de cruces entre vertices, etc.

Estas reglas persiguen la optimizacion del dibujo y pretenden facilitar la representacion

de la forma mas sencilla y clara posible.

Tecnicas de diagramado para grafos 23

(a) Alinear vertices especıficos. (b) Disponer vertices especıficos en

curva.

(c) Dibujar vertices especıficos con dis-

tintos tamano.

(d) Emplazar vertices especıficos en la

frontera.

(e) Agrupar vertices especıficos.

Figura 3.5: Reglas Semanticas.

3.2. Tecnicas de diagramado para grafos

3.2.1. Diagramado para arboles

Los arboles son grafos conexos que presentan una estructura jerarquica. Se reconoce

un nodo como la raız del arbol y presentan la propiedad que desde cualquier nodo existe

un unico camino al nodo raız. Los arboles pueden construirse y recorrerse recursivamente

lo que es aprovechado por las tecnicas de diagramado.


(a) Centrar los vertices con orden

alto.

(b) Emplazar en forma jerarquica

(c) Minimizar los cruces de arcos. (d) Buscar equilibrio en las di-

mensiones del dibujo.

(e) Organizar simetricamente.

(f) Minimizar las esquinas en ar-

cos.

(g) Colocar los hijos simetricos. (h) Evitar cruces de ramas difer-

entes.

(i) Emplazamiento uniforme. (j) Minimizar el area de dibujo. (k) Minimizar la longitud total

de aristas.

Figura 3.6: Reglas Estructurales.


La eficiencia computacional de los algoritmos utilizados para obtener las representa-

ciones visuales de los grafos cobra vital importancia si se desea dotar de interactividad a la

visualizacion. El principal problema asociado es la escalabilidad de los algoritmos ya que el

comportamiento con grafos pequenos difiere respecto de grafos con miles de nodos o arcos.

Muchas herramientas evaden el problema representando de manera completa los nodos

sobre los que se halla focalizado el usuario y eliminan detalle del contexto proporcionando

ideas aproximadas de su composicion. De esta manera solo procesan exhaustivamente una

pequena porcion del grafo, ahorrando tiempo y poder computacional. Ademas, aun sin

el objetivo de interactuar en mente, la eficiencia sigue siendo importante debido a que

muchas tecnicas y procedimientos relacionados con la representacion visual de grafos son

computacionalmente intensivos, i.e. la minimizacion de cruces entre arcos de un grafo es

un problema NP-Completo.

A continuacion se hace una breve descripcion de los algoritmos del diagramado mas

significativos. Para un mayor detalle en cuanto a sus implementaciones y caracterısticas

el lector puede consultarse el libro Graph Drawing ([GDBT99]).

Reingold y Tilford

Es el clasico algoritmo para la representacion de arboles (Figura 3.7). En este, los

nodos de cada nivel de profundidad del arbol ocupan la misma alineacion horizontal, si

el arbol se dibuja vertical, u horizontal si el arbol se dibuja horizontalmente. Los hijos

se colocan debajo o a la derecha del nodo ancestro en comun. El algoritmo admite un

posicionamiento de los nodos en forma de grilla y el espaciado entre nodos es uno de sus

parametros ([RT81], [JQW90])

H

Este algoritmo es utilizado para representar de manera ortogonal arboles binarios

(Figura 3.8). Los arcos que se originan en niveles impares se dibujan verticales (horizon-

tales) y los que se originan en niveles pares se dibujan horizontales (verticales). De esta

manera, en el caso de arboles completos, se van formando esquemas que aproximan frac-

tales en forma de H. Sin embargo, solo logra un aprovechamiento optimo del espacio con

arboles totalmente balanceados. En esta tecnica se pierde la nocion de cual es la raız del

arbol, sobre todo en arboles incompletos.


Figura 3.7: Algorıtmo de Reingold y Tilford en arboles ([HMM00]).

Figura 3.8: Algoritmo de diagramado H ([HMM00]).

Arboles HV

Al igual que los algoritmos H, los HV tambien constituyen representaciones ortogonales

de arboles binarios. (Figura 3.9). En ellos, los arcos tambien adoptan posiciones verticales

u horizontales; a diferencia de los anteriores, los arcos que conectan un padre con su hijo

izquierdo se dibujan verticales hacia abajo y los arcos que lo hacen con su hijo derecho

se dibujan horizontales hacia la derecha. La longitud que se le da a los arcos de cada uno

de ambos hijos es determinada por el algoritmo para hacer uso mas eficiente del espacio

([GDBT99]).


Figura 3.9: Arbol representado utilizando la tecnica HV ([GDBT99]).

Diagramado Radial

En el posicionamiento radial, cada nivel de profundidad se dispone sobre una circun-

ferencia o anillo (Figura 3.10). Conforme se crece en el nivel de profundidad, se aumenta

el radio de dicha circunferencia. Cada subarbol ocupa un subconjunto convexo de un

trapecio circular originado a partir de la circunferencia en la cual se ubica la raız de dicho

subarbol. Para arboles desbalanceados tambien resulta dificultoso determinar cual nodo

es la raız del arbol desdibujandose la jerarquıa ([YFDH01]).

Figura 3.10: Diagramado Radial para arboles. ([HMM00]).


Vista de globo

La vista de globo o balloon view de un arbol consiste en un posicionamiento de los

nodos sobre circunferencias no concentricas entre sı (Figura 3.11). Cada circunferencia

se centra en el padre de los nodos que se ubican sobre ella. Esta vista puede obtenerse

como una proyeccion en el plano de los Cone Trees en 3D. Esta tecnica de visualizacion

de arboles sera contemplada en la seccion de diagramado en 3D ([MH98]).

Figura 3.11: Ballon view de un arbol ([HMM00]).

Bloques

Otro enfoque totalmente diferente de los anteriores consiste en representar los arboles

utilizando bloques anidados (Figura 3.12). En dichas representaciones cada nodo es un

bloque, normalmente rectangular, cuya area interior se divide entre sus hijos. A su vez,

cada hijo divide su area entre los suyos y de esa manera se genera la representacion.

Una variante del esquema esta dada por los denominados tree maps en los que el area

no se divide uniformemente entre los hijos de un padre sino que se asignan diferentes

areas segun algun factor de peso, por ejemplo en una visualizacion de un sistema de

directorios y archivos mediante tree maps se asigna a cada archivo un tamano en pantalla

proporcional al espacio que ocupa en el disco. Otras variantes involucran el uso del color

para distinguir niveles, la particion del espacio horizontal y vertical alternativamente con

el mismo objetivo, o el dividir un area menor del bloque padre para sus hijos de manera

que se haga explıcito el anidamiento. Sin embargo, pese a esta capacidad extra de mostrar


informacion, la percepcion de la estructura de un arbol mediante tree maps es dificultosa

([JS91]).

Figura 3.12: Tree-map: Uso de rectangulos para representar arboles ([HMM00]).

3.2.2. Diagramado Planar

En esta representacion no existen cruces en los arcos; sin embargo no todos los grafos

admiten una representacion plana. El testeo de planaridad en ciertos casos puede ser

una operacion muy costosa por lo que solo se la reserva a grafos pequenos, posiblemente

subgrafos obtenidos a partir de clusterizar un grafo. Si bien la eliminacion de los cruces

es un criterio estetico importante, no es atractiva en visualizacion de informacion si se

compara el uso de tecnicas mas simples y mas generales que si bien no son optimas,

minimizan el numero de cruces en forma aceptable.

3.2.3. Diagramado por Capas

Bajo esta denominacion se agrupa un conjunto de tecnicas aplicables a digrafos, en las

cuales se asignan nodos a capas de representacion. Los elementos de dichas capas quedan

alineados horizontal o verticalmente en la representacion final. Sugiyama, Tagawa y Toda

([KST81]) presentaron este metodo en 1981; el mismo es muy intuitivo y se puede aplicar

a cualquier digrafo sin restricciones. Estas caracterısticas lo hacen muy practico y se han

desarrollado numerosas variantes del mismo ([You96]).


(a) (b)

Figura 3.13: La figura 3.13(b) es una representacion planar del digrafo de la figura 3.13(a)

([GDBT99]).

Figura 3.14: Diagramado por capas vertical ([GDBT99]).

El enfoque basico consta de tres etapas:

1. Asignar vertices a capas: En esta etapa se determina la coordenada vertical u

horizontal de cada vertice, la cual sera la misma para todos los elementos de cada

capa.

2. Reduccion de cruces: En esta etapa se considera el reordenamiento de los ele-

mentos de cada capa de manera de minimizar la cantidad de cruces. Para ello se

analizan las capas consecutivas de manera de no aplicar una minimizacion de cruces


global a todo el grafo. Igualmente, tanto la minimizacion de cruces global como la

de dos capas consecutivas son problemas NP-Hard por lo que en este paso se utilizan

heurısticas.

3. Determinacion de la coordenada horizontal (o vertical): Se realiza un ajuste

final de las posiciones de los nodos en cada capa preservando el orden que adquirieron

en la etapa anterior de manera de minimizar las curvas que presentan los arcos.

El esquema principal requiere digrafos acıclicos (DAG). Sin embargo esta restriccion

puede levantarse con una etapa de preprocesamiento en que se obtiene un DAG a partir

de un digrafo. En cada una de las etapas existen variantes acerca de como implemen-

tarlas. La obtencion del DAG, por ejemplo, puede realizarse invirtiendo ciertos arcos del

grafo original de manera de eliminar los ciclos o bien puede extraerse un subgrafo que sea

acıclico. La ubicacion de las capas tambien admite muchas posibilidades e incide direc-

tamente sobre la disposicion que obtendran los elementos del grafo. En la reduccion de

cruces pueden aplicarse diversas tecnicas. Una explicacion detallada del metodo se puede

encontrar en [GDBT99].

La predictibilidad de la tecnica esta sujeta al metodo utilizado para distribuir los nodos

sobre las capas, aunque lograr variantes predecibles termina aumentando la complejidad

del metodo.

3.2.4. Diagramado Dirigido por Fuerzas

Los metodos dirigidos por fuerzas son una analogıa a los sistemas de fuerzas presentes

en la fısica. Constan de dos etapas principales: el modelo, un sistema de fuerzas definido

para los nodos y arcos del grafo, y el algoritmo, el cual se utilizara para encontrar el

equilibrio del sistema.

Tıpicamente se suele considerar que los nodos se repelen entre sı, como si cada uno

de ellos tuviera una carga electrica equivalente, y se suele representar a los arcos como

resortes de manera de contrarrestar la repulsion de los nodos que se hallan conectados.

Dichos resortes se modelan con la Ley de Hooke. De esta manera se obtiene un modelo

fısico-electrico el cual tiende a un estado de energıa mınimo en el que la representacion se

estabiliza y se genera la representacion.


Los algoritmos que se utilizan son a menudo iterativos y aproximan gradualmente cada

nodo a su posicion final. Los arcos se suelen representar mediante lıneas rectas. Estos

metodos no son predecibles y de hecho, porciones del grafo similares pueden representarse

de manera muy diferente. Sin embargo, en Visualizacion de Informacion, la estabilizacion

del sistema suele animarse para que el usuario no pierda el mapa mental. El hecho de

iterar una gran cantidad de veces para resolver el sistema hace al metodo muy lento sobre

todo para un gran numero de nodos. Una descripcion mas precisa de estos metodos se

pueden encontrar en [GDBT99].

3.2.5. Diagramado por Grilla

El diagramado de grilla puede imponerse a partir de una convencion de dibujado que

lo exija (Figura 3.15). La restriccion por convencion que se imponga no permitira alter-

nativas. Sin embargo, aun en casos en que no se imponga como una restriccion, es posible

utilizar alguna de las variantes basadas en grillas. La caracterıstica comun a este conjunto

de tecnicas es que los nodos y los puntos de cruce de arcos ocupan posiciones discretas

predefinidas y equiespaciadas. En realidad, la existencia de una grilla para posicionar los

nodos no determina el diagramado utilizado. De hecho, varias de las tecnicas descriptas

admiten una representacion con grilla.

Figura 3.15: Grafo basado en grilla ([GDBT99]).


3.2.6. Diagramado Hiperbolico

Esta tecnica permite visualizar y manipular grandes estructuras jerarquicas combi-

nando en una sola vista foco + contexto; de esta manera se le ofrece al usuario, en

una unica vista, tanto una vision en detalle como una vision global buscando obtener un

equilibrio entre el detalle local y el contexto global. El area central, en donde se encuentra

el foco, recibe una mayor porcion de espacio mientras que la restante se utiliza para ubicar

el contexto. La transicion entre ambas regiones es suave y no confunde al usuario. Este

efecto se logra al ubicar la estructura jerarquica sobre un plano basado en el modelo de

Poincare para geometrıa no Euclidiana (Figura 3.16), tambien conocida como geometrıa

hiperbolica ([LRP95]).

Figura 3.16: Diagramado Hiperbolico. (http://iv.slis.indiana.edu/sw/hyptree.html).

3.2.7. Arbol de cubrimiento

Debido a la baja complejidad que presentan los algoritmos de diagramado de arboles

y a lo simples que resultan de implementar, para grafos grandes se suele utilizar una

tecnica que permite extender la aplicabilidad de dichos algoritmos a grafos en general.

La idea consiste en extraer un arbol de cubrimiento del grafo que se desea representar,

un Spanning Tree o arbol de cubrimiento, y aplicarle un algoritmo de diagramado de

arboles. En una etapa posterior se agregan los arcos que se eliminaron del grafo original

cuando se obtuvo el arbol de cubrimiento. Existen diversos algoritmos para obtener un

arbol de cubrimiento a partir de un grafo ([PR02], [Cha00], [KKT95]). Una forma simple


consiste en realizar un recorrido en anchura a partir de un nodo arbitrario que pasara a

ser la raız del arbol de cubrimiento. En la obtencion del arbol de cubrimiento pueden

contemplarse diversos objetivos de optimizacion que resulten en representaciones mas

adecuadas en ciertos dominios de aplicacion, por ejemplo hallando un arbol de cubrimiento

que minimice/maximice pesos en los arcos. Esto es importante desde el momento en que

la eleccion del arbol de cubrimiento, entre los muchos que posee un grafo en general,

condiciona el diagramado. Para la obtencion de diversos arboles de cubrimiento para un

grafo, y en consecuencia de diversos diagramados, suele asociarse una funcion de peso

que determina que arcos se descartaran. Una funcion que ha demostrado tener buenos

resultados con grafos densos es el uso de capas.

3.3. Visualizacion de grafos

Para lograr ampliar efectivamente la capacidad cognitiva del usuario a traves de una

visualizacion es necesario establecer algunos principios basicos de visualizacion. Estos prin-

cipios son una adaptacion de los presentados por Norman ([Nor93]) y Tversky ([TMB02])

y son aplicables a la visualizacion de grafos.

Principio de Adecuacion: La representacion visual no debe presentar ni mas ni

menos informacion que la necesaria para la tarea a desarrollar. Toda informacion

adicional puede convertirse en una distraccion y dificultar la tarea.

Principio de Naturalidad: La capacidad de cognicion se vuelve mas efectiva

cuando las propiedades de la representacion visual se asemejan mas a aquellas de los

datos representados. Este principio establece que una metafora visual es apropiada

cuando coincide con el modelo que el usuario tiene de la informacion.

Principio de Coincidencia: Las representaciones de informacion son mas efectivas

cuando son acordes a la tarea que se quiere realizar. Una representacion visual

adecuada debe acompanar las interacciones del usuario.

Principio de Congruencia: La estructura y el contenido de la visualizacion de-

berıa corresponderse con la estructura y el contenido de la representacion mental

deseada. En otras palabras, la representacion visual deberıa presentar los conceptos

importantes en el dominio de interes.

Visualizacion de grafos en 2D 35

Principio de Comprension: La estructura y el contenido de la visualizacion de-

berıan ser percibidos y comprendidos en forma rapida y precisa.

3.4. Visualizacion de grafos en 2D

Como hemos dicho en repetidas ocasiones, la visualizacion es la combinacion de una

representacion visual y un conjunto de interacciones. Para generar la representacion visual

es necesario contar con una tecnica de diagramado, que en este caso debe ser una tecnica

de diagramado 2D; la seccion 3.2 cubrio este conjunto de tecnicas. Las interacciones que

se presentaran en la proxima seccion son, en muchos casos, una extension de tecnicas

para visualizaciones 2D. En [Spe00], [GDBT99] y [JM03] se pueden encontrar extensas

descripciones sobre tecnicas de visualizacion para grafos en 2D; nosotros continuaremos

directamente con la visualizacion de grafos en 3D.

3.5. Visualizacion de grafos en 3D

Una tecnica que se utiliza frecuentemente para poder ganar mas espacio para visualizar

los grafos es pasar de dos a tres dimensiones (Figura 3.17). Se supone que la dimension ex-

tra que se gana brindara mas espacio para ubicar el grafo. En muchos casos, los algoritmos

de diagramado en 2D son adaptados a 3D. Los trabajos realizados por Young ([You96])

o Ware ([War00]) son ejemplos de dichas adaptaciones. A pesar de las ventajas que se

tienen al mostrar un grafo en tres dimensiones, se introducen algunos nuevos problemas.

Los objetos en tres dimensiones pueden ocluirse unos a otros y ademas no es una tarea

facil determinar la mejor vista en el espacio ([EHW97]). En todas las visualizaciones en

tres dimensiones es comun encontrar elementos extras que mejoren la interpretacion de la

informacion, tal como la transparencia y tambien se le permite al usuario desplazarse den-

tro de este mundo tridimensional; sin embargo muchas veces esta navegacion del mundo

tridimensional genera inconvenientes.

La tecnica de Cone Tree ([RMC91], [RCM93]) es uno de los mejores diagramados

3D para grafos en visualizacion de informacion. En contraste con ejemplos previos, Cone

Tree fue desarrollado directamente para 3D, en lugar de surgir como una generalizacion

de tecnicas 2D.


(a) Un grafo planar en 2D ([GDBT99]). (b) Un grafo planar en 3D

(http://escience.anu.edu.au/images/catalogue3.html).

Figura 3.17: Grafos planares representados en 2D y 3D.

Aunque es comun pensarlo, la ganancia de espacio no es la unica ventaja del mundo

tridimensional. Debido a que los humanos vivimos en un mundo 3D, utilizar una di-

mension mas para representar grafos nos permite utilizar metaforas del mundo real para

representar estructuras complejas. En el trabajo de Ware y Franck ([CG94]) se indica que

los usuarios perciben mejor la informacion cuando los datos se muestran en 3D en lugar de

en 2D. Uno de los primeros sistemas de distribucion masiva que aprovecho esta metafora

fue el File System Navigator que era parte de las SGI Workstations hasta la version 5.

La representacion del grafo, un arbol representando el espacio de disco del usuario, es un

simple diagramado planar. El aspecto 3D consiste en una mano y bloques tridimensionales

cuyo tamano es consistente con el espacio en disco de los archivos. Utilizando la mano, el

usuario podrıa ”volar”por este terreno virtual. El concepto de ”volar”fue implementado

en multiples sistemas por ejemplo, STARLIGTH ([RRD+97]) o mas recientemente por

Chen y Carr ([CC99]). Metaforas mas complejas para el mundo tridimensional incluyen

Perspective Wall ([RCM93]), VizNet ([Wex93]) y Vitesse ([NV98]). Un buen ejemplo es

WebBook ([CRY96]), en donde se utiliza la metafora de libros (Figura 3.18) para repre-

sentar paginas web. Aquı no solo se pueden mantener varios libros en el espacio gracias a

la profundidad que se gana con 3D, sino que la metafora de libros permite ofrecer una rep-

resentacion conocida al usuario junto con interacciones relacionadas. WebBook presenta

cada sitio como un libro, y las paginas que forman este sitio, como las paginas del libro.

El usuario cuenta con una biblioteca donde guardar sus paginas web (libros) favoritas.

Cuando el usuario selecciona un enlace que cambia de sitio, el libro se cierra y uno nuevo

se abre; si el enlace es a una pagina dentro del sitio actual, las paginas del libro se cambian


hasta llegar a la deseada creando el efecto de que el usuario esta hojeando el libro.

Figura 3.18: WebBook, visualizacion de paginas web

(http://www1.acm.org/sigs/sigchi/chi96/proceedings/papers/Card/skc1txt.html).

El trabajo de Hubona, Shirah y Fout ([HSF97]) sugiere que los usuarios logran un

mejor entendimiento de la informacion presentada en 3D cuando pueden manipularla, es

decir, interactuar con la representacion visual. A continuacion analizaremos algunos de

las representaciones de grafos en 3D mas significativas, teniendo en cuenta el diagramado

que utilizan y las interacciones que permiten.

3.5.1. Information Landscape

Si bien es considerada por algunos autores como una visualizacion en 2.5 dimensiones

([WCJ98]), el navegador de archivos de las estaciones de trabajo SGI (Figura 3.19) es

una de las primeras aplicaciones de distribucion masiva, que aprovecho la representacion

tridimensional asociada con una metafora conocida.

Este sistema permite visualizar un sistema de archivos en tres dimensiones. Utilizando

la estructura jerarquica del sistema de archivos muestra un arbol mediante un diagramado

planar ([Sch90]). Cada directorio se renderiza utilizando un prisma rectangular cuya altura

indica el numero de archivos en ese directorio. Por sobre cada uno de estos prismas se

encuentran pequenas cajas que identifican a cada archivo individualmente. Aquı tambien


(a) (b)

Figura 3.19: Captura de pantalla para el navegador de archivos de las estaciones de trabajo

SGI (http://escience.anu.edu.au/images/catalogue3.html).

la altura de una caja denota el tamano de dicho archivo. Para este sistema, el color fue

utilizado como indicador de la “edad” de cada archivo.

La metafora de este sistema se encuentra en la capacidad del usuario de volar a traves

de este paisaje virtual, navegando la jerarquıa de archivos. El usuario podrıa acceder a

un archivo simplemente realizando un doble clic sobre la caja correspondiente.

3.5.2. Starlight

El sistema Starlight ([RRD+97]) permite combinar en un mismo espacio virtual datos

de diferentes fuentes. Este espacio que se crea es un ambiente 3D en donde los distin-

tos datos son representados por puntos que al combinarse con otros generan una repre-

sentacion visual que se asemeja a un espacio de estrellas.

Las diferentes relaciones entre los elementos se visualizan en forma de lıneas rectas que

unen los puntos relacionados. Al igual que con la visualizacion del sistema de archivos SGI,

el usuario de Starlight puede “volar” a traves de la representacion para poder analizar la

informacion visualizada. Junto con la posibilidad de navegar la representacion, el usuario

puede mover los objetos en pantalla o abrir aquellos elementos que representen documen-

tos. Starlight es un sistema creado especıficamente para el analisis de informacion.


Figura 3.20: Sistema Starlight (http://en.wikipedia.org/wiki/Starlight Information Visualization System).

3.5.3. Cone Tree

El objetivo de los Cone Tree es permitir la visualizacion y navegacion de un gran

conjunto de informacion. Los Cone Tree fueron creados para un tipo especial de grafo, el

arbol. Este arbol se construye ubicando su raız en el extremo de un cono transparente.

Los hijos de la raız se ubican a igual distancia sobre la base del mismo cono. Este proceso

se repite para cada nodo de la jerarquıa. A medida que se baja en los niveles del arbol,

el diametro del cono disminuye de forma tal de tener espacio suficiente para todos los

elementos. Los conos y los nodos se renderizan utilizando transparencias para disminuir

el problema de oclusion. En algunas implementaciones ([RMC91]) se agrega una sombra

sobre un plano debajo del arbol, para ayudar en la percepcion de profundidad. Esta idea

ha sido reimplementada en varias ocasiones ([CK95], [DC98], [JP98]).

A diferencia de las representaciones previamente analizadas, en esta representacion no

es posible “volar” por la visualizacion. Ademas de contar con las interacciones clasicas

de seleccion de un nodo, un click, y ejecucion, doble click, el usuario puede seleccionar

un nodo y rotar todo su cono. Gracias a esto puede traer al frente cualquier nodo que se

encuentre en la base de una de las figuras conicas. Ademas, al seleccionar un nodo, todos

los restantes en el camino desde la raız al seleccionado son iluminados. Tambien es posible

podar parte del arbol para disminuir la carga visual en pantalla.


(a) Cone Tree creado por Xerox ([RMC91]).

(b) Sistema de archivos de un sistema UNIX. (c) Cone Tree con un despliegue horizontal

([HKW94]).

Figura 3.21: Visualizaciones utilizando cone trees

3.5.4. H3. Diagramado Hiperbolico

El diagramado hiperbolico de grafos es una forma relativamente nueva de presentar

grafos. Los primeros trabajos de investigacion en este area fueron realizados por Lamp-

ing et al. ([LRP95]) y luego continuados por un extenso trabajo por parte de Munzner

([MB95], [Mun97], [Mun98]). Una vista hiperbolica de un grafo provee una distorsion sim-

ilar a la vista de ojo de pez. Como resultado de esta distorsion, es posible visualizar e

interactuar con grandes grafos.

Tres interacciones son posibles sobre el sistema de visualizacion hiperbolica H3: Selec-

cion, rotacion y transicion.

La seleccion, de un nodo o arco, se realiza utilizando el mouse y haciendo un click

sobre el elemento a seleccionar. El elemento seleccionado siempre se encuentra en el


Figura 3.22: Vista hiperbolica 3D de un grafo.

centro del espacio hiperbolico por lo que cuando se realiza una seleccion se ejecuta

inmediatamente una transicion para ajustar el diagramado y posicionar el elemento

en foco en el centro.

La rotacion se realiza sobre la esfera que representa el espacio hiperbolico y ocurre

con respecto al centro de la misma. Cuando ocurre esta interaccion todo el espacio

rota.

Por ultimo la transicion que se ejecuta como consecuencia de una seleccion, puede

utilizarse en forma aislada. Para esto, el usuario debe hacer un click sobre la esfera

y sin soltar el boton desplazar el mouse. De acuerdo a la direccion y velocidad de

desplazamiento del mouse es hacia donde se desplaza el centro de la esfera.

3.5.5. Cubos de Informacion

Los Cubos de Informacion utilizan cubos transparentes anidados utilizados para repre-

sentar relaciones de jerarquıa (Figura 3.23). El tamano de los cubos se ajusta para poder

permitir introducir nuevos elementos. Si la estructura jerarquica C1 esta inmediatamente

por debajo de C entonces existira un cubo con una etiqueta C que contendra a otro cubo


con una etiqueta C1. El color y el nivel de transparencia se utilizan para indicar el ele-

mento seleccionado. Es claro ver como los cubos de informacion son la generalizacion en

tres dimensiones de los Tree Maps ([JS91]).

Figura 3.23: Cubo de Informacion ([HMM00]).

Los Cubos de Informacion fueron creados originalmente para ser visualizados a traves

de lentes de realidad virtual, pero tambien es posible utilizarlos en un monitor comun.

Para manipular la informacion representada en un cubo de informacion se utiliza un

DataGlobe ([ZLB+87]) como dispositivo de interaccion. El DataGlobe permite dos inter-

acciones basicas: rotacion y seleccion.

La rotacion le permite al usuario comprender la estructura 3D de un cubo de

informacion. Utilizando el DataGlobe el usuario puede tomar el cubo y hacerlo

rotar; cuando lo suelta el cubo queda en la posicion en la que se lo dejo.

La transparencia de cada cubo permite ver por completo su interior. Sin embargo

cuando el usuario desea inspeccionar uno de los cubos interiores, necesita adentrarse

en el. Para lograr esto se cuenta con una interaccion de seleccion. La seleccion se

logra poniendo en foco un cubo y ejecutando una accion de seleccion. Para poner

en foco un elemento solo se lo debe senalar (Figura 3.24).

Visualizacion de Grandes Grafos 43

Figura 3.24: Interaccion de seleccion en un cubo de informacion ([HMM00]).

3.6. Visualizacion de Grandes Grafos

Como dijimos en el capıtulo 2 la visualizacion involucra dos aspectos esenciales: la

representacion visual y las interacciones necesarias para manipular dicha representacion.

Respecto a la construccion de la representacion visual, uno de los principales desafıos que

debe enfrentarse es el de la complejidad de la representacion visual, la cual es directamente

proporcional a la cantidad de ıtems y a la cantidad de atributos y al nivel de detalle de la

misma. La complejidad visual se relaciona con la densidad de elementos visuales presentes

en el espacio de mostrado tales como la representacion elegida para los nodos, para los

arcos y su informacion asociada. Este es un aspecto crıtico ya que impacta directamente

en la legibilidad de la vista, la cardinalidad de los conjuntos de datos subyacentes y

la eficiencia requerida para asegurar tiempos de respuesta interactivos. En cuanto a las

interacciones, estas deben complementar la representacion visual permitiendo al usuario

adaptar la vista y constituyendose, de esta manera, en una herramienta efectiva para

lidiar con la complejidad de la representacion. Dado que la visualizacion es un proceso

cognitivo netamente interactivo, las interacciones provistas tienen un impacto decisivo

en el exito de la misma, igualando en importancia a la construccion de la representacion

visual. Conforme los conjuntos de datos manejados crecen en tamano, los aspectos citados

anteriormente aumentan en relevancia al momento de disenar visualizaciones efectivas.

En lo referido a visualizacion de grafos, Herman ([HMM00]) es quien realiza el tra-

bajo de recopilacion mas reciente de los metodos de visualizacion de grafos, incluida su


navegacion. En cuanto a las representaciones, la caracterıstica de los trabajos relevados (y

existentes hasta el momento) es que la mayorıa de los metodos y sistemas estan limitados

en cuanto a su escalabilidad; cabe mencionar que las aplicaciones que permiten visualizar

del orden de los miles de nodos y enlaces (Figuras 3.25 y 3.26), solo muestran topologıa.

Con respecto a la navegacion, si bien se detallan algunas tecnicas y su aplicabilidad en

visualizacion, estas surgen como respuesta a problemas puntuales faltando un encuadre

de acuerdo a un criterio uniforme que trascienda los dominios de aplicacion particulares.

Figura 3.25: Grafo con 32727 nodos y 1206654 arcos

(http://apropos.icmb.utexas.edu/lgl/).

Por otro lado, muy pocos sistemas automaticos explotan la interactividad en grandes

grafos. Como dijimos, el primer trabajo en lo que respecta a la navegacion de los mismos

es el realizado por Munzner ([MB95], [Mun97], [Mun98]). Este trabajo es el paso inicial

Escalabilidad Visual 45

tendiente a lograr una completa caracterizacion de las interacciones necesarias para la

exploracion de grandes espacios de informacion subyacente.

3.7. Escalabilidad Visual

La escalabilidad visual es la capacidad de las herramientas de visualizacion de mostrar

efectivamente grandes conjuntos de datos en terminos de la cantidad de ıtems y/o de las

dimensiones de los ıtems individuales.

Los recientes avances en la tecnologıa disponibles para la sociedad en general (sensores,

satelites, redes telefonicas, redes globales de computadoras, etc.) estan generando inmen-

sos conjuntos de datos. Estos conjuntos, denominados casi en forma estandar conjuntos de

datos masivos (gran cantidad de datos, cada uno de los cuales tiene una gran cantidad de

dimensiones) desafıan la habilidad de las comunidades cientıfica y no cientıfica en lo ref-

erente a medir, analizar y visualizar datos. Para enfrentar este desafıo es necesario contar

con nuevos metodos, herramientas y tal vez definiciones de distintas disciplinas. Adicional-

mente a la necesidad de una mayor variedad de modelos estadısticos para analizar estos

conjuntos de datos masivos y complejos y de nuevos metodos para extraer el conocimiento

en los datos, es necesario avanzar en la generacion de tecnicas que permitan visualizarlos

efectivamente.

Las grandes colecciones de datos de muchas organizaciones estan creciendo exponen-

cialmente. Ejemplos de tales colecciones gigantescas de datos multidimensionales son gen-

eradas a partir de diversos campos tales como la simulacion, los sistemas de marketing,

los sistemas de salud, los sistemas atmosfericos, la Web, las colecciones de textos, etc..

Las tecnicas y las herramientas usadas en el analisis y las visualizaciones de conjuntos de

datos pequenos y medianos son inadecuadas y, en algunos casos, no son simplemente apli-

cables a grandes conjuntos de datos multidimensionales. Los principales obstaculos son

las limitaciones humanas, la complejidad computacional y la falta de software adecuado.

Los analisis previos de escalabilidad visual no son muchos. Las referencias disponibles

incluyen el trabajo de Wegman E. J. “Huge Data sets and the frontiers of computational

feasibility” ([Weg95]) que enfatiza en las capacidades humanas y Keim D. A “Design-

ing pixel-oriented visualization techniques” ([Kei00]) que explora las limitaciones de las

tecnicas de visualizacion basadas en pixels. En lo que se refiere a escalabilidad en visu-

alizaciones, hay algunas propuestas interesantes sobre visualizacion de redes ([KM05]),


visualizaciones de texto ([CMS99]) y en datos multidimensionales ([Eic00b]). Solo re-

cientemente hubo trabajos relativos a proveer una estructura para direccionar y pensar

acerca de la cuestion de escalabilidad visual, particularmente con respecto al rol de la

visualizacion como un medio de acceder a los detalles de los datos ([Eic00a]).

Figura 3.26: Grafo 302832 nodos (http://apropos.icmb.utexas.edu/lgl/).

Capıtulo 4

Diagramado Esferico

Como describimos en la seccion 3.5, muchas tecnicas de representacion 3D surgen a

partir de generalizaciones o extensiones a tecnicas 2D. Ejemplo de esto son los Cubos de

Informacion que surgen a partir de los Tree Maps y el diagramado hiperbolico 3D que surge

como una generalizacion de su version en 2D; sin embargo no existe una generalizacion 3D

del diagramado radial. Aun con los buenos resultados obtenidos a partir del diagramado

radial 2D es posible alcanzar mejores utilizando una version 3D; se tendrıa mas espacio

sobre el cual ubicar los nodos y se permitirıa un mayor conjunto de interacciones. En

este capıtulo presentaremos el resultado de generalizar el diagramado radial 2D a 3D y al

que hemos denominado “diagramado esferico”. Inicialmente introduciremos la tecnica de

dibujado radial y, a partir de esta, presentaremos la extension a 3D. Ademas mostraremos

como se extendio el diagramado radial 2D a grafos y luego haremos lo mismo para 3D.

4.1. Diagramado Radial en Arboles

Un dibujado radial es una variacion del dibujado de arboles por capas, en donde

la raız del arbol se ubica en un origen y los nodos de cada nivel del mismo se ubican

respectivamente en capas circulares concentricas a este origen. En el dibujado radial,

un subarbol es dibujado dentro de un area conica. Las capas C1, C2,..., Ck (donde k es

la altura del arbol) de un diagramado radial y un area conica se pueden apreciar en la

Figura 4.4. Es importante notar que los vertices a profundidad i se encuentran ubicados en

el cırculo Ci y que el radio de Ci esta dado por una funcion creciente ρ(i). A continuacion

50 Capıtulo 4. Diagramado Esferico

daremos una breve resena de las dos tecnicas mas relevantes que se utilizan para calcular

un layout radial, la de Wills ([Wil97]) que se extiende en ([YFDH01]) y la de Battista et.

al. ([GDBT99]).

4.1.1. Diagramado Radial por Grapham J. Wills

Esta tecnica fue descripta por Grapham J. Wills en su trabajo “NicheWorks-

Interactive Visualization of Very Large Graphs” ([Wil97]) y en “Animated Exploration

of Dynamic Graphs with Radial Layout” ([YFDH01]). Conceptualmente, el diagramado

radial se obtiene ubicando la raız del arbol en el centro del diagramado y dandole un

angulo de 360o sobre el cual ubicar sus hijos; dicho angulo se lo conoce como angular

span o angulo de apertura. Luego se ubican los subarboles, para cada nodo ya ubicado, se

divide su angulo de apertura entre cada uno de sus subarboles utilizando el tamano del

subarbol como peso en la division, el parametro que se considera para determinar el peso

del subarbol es la cantidad de hojas del mismo. Por lo tanto, si tenemos un nodo con un

angulo de apertura de 20o y tres hijos con subarboles de tamano 3, 2 y 5 sus angulos de

apertura seran 6o, 4o y 10o respectivamente. Los hijos se ubican sobre el perımetro de un

anillo cuyo radio es proporcional a la distancia a la raız y se colocan en el centro de cada

uno de sus angulos de apertura.

En la Figura 4.1 el nodo raız R es ubicado en el centro de los anillos concentricos, con

sus hijos en el anillo a distancia 1 de R; R tiene un tamano de 20 y su hijo S es un subarbol

de tamano 10, por lo tanto el angulo de apertura para S es de 360o ∗10/20 = 180o. El hijo

de S, T , es un subarbol de tamano 5 por lo que su angulo de apertura es 180o∗5/10 = 90o.

Para el nodo U es 180o ∗ 2/10 = 10o y V obtiene 180o ∗ 3/10 = 54o. Este proceso continua

hasta que todos los nodos hayan sido ubicados.

4.1.2. Diagramado Radial por Giuseppe Di Battista

El algoritmo de Battista ([GDBT99]), difiere del de Wills en el modo en que se calculan

los angulos de apertura. Battista senala que si el angulo de apertura se calcula solamente

en base al numero de hojas del subarbol u, lo que llama l(u), podrıan ocurrir que un

arco se salga del espacio reservado para el. La figura 4.2(a) muestra como el arco (v, u) se

extiende por fuera del area asignada lo que podrıa afectar la percepcion de informacion.

Diagramado Radial en Arboles 51

Figura 4.1: Diagramado radial para un arbol ([Wil97]).

En la figura 4.2(b) vemos el mismo problema en la visualizacion presentada por Wills en

“Animated Exploration of Dynamic Graphs with Radial Layout” ([YFDH01]).

Veamos entonces la propuesta de Battista para calcular el angulo de apertura que

evita que los arcos se salgan de sus areas asignadas.

Supongamos que v se ubica en la capa Ci, y que la tangente a Ci a traves de v se

encuentra con Ci+1 en a y b como muestra la Figura 4.3. La region Fv en la Figura 4.3,

limitada por el segmento ab y las proyecciones del origen a traves de a y b, es convexa.

Se restringe el subarbol con raız en v a la region Fv. Los hijos de v se ubican en Ci+1 de

acuerdo al numero de hojas en sus respectivos subarboles. Mas precisamente, para cada

hijo u de v, el angulo βu de Fu es:

βu = min(l(u)βu

l(u), τ)

En donde l(u) es el numero de hojas para el subarbol con raız u, βu es el angulo de

Wu y τ es el angulo formado por la region Fu. El hijo de v, u, es ubicado en el centro de

Wu.


(a) El arco (u, v) queda fuera de su anillo. (b) El mismo problema en la visualizacion

de la red Gnutella.

Figura 4.2: El problema de los arcos senalado por Battista.

Utilizando el metodo de Battista se mejora la presentacion del grafo debido a que se

evitan los cruces de arcos, sin embargo esto se logra al costo de espacio que no se utiliza.

En la figura 4.5 vemos el espacio asignado para cuatro nodos. Las zonas marcadas en

verde representan espacio no asignado para ningun nodo.

4.2. Diagramado Radial en grafos

En “Animated Exploration of Dynamic Graphs with Radial Layout” ([YFDH01]) se

presenta un algoritmo de posicionamiento radial para visualizar la red de servidores de

Gnutella. Este algoritmo es una modificacion del presentado por G. J. Wills que permite

visualizar grafos; adicionalmente se permite variar el tamano de los nodos. La ubicacion

del grafo en los anillos concentricos se realiza mediante una busqueda en anchura a partir

de un nodo determinado. De esta forma cada nodo, excepto el inicial, tendra un adyacente

como padre y posiblemente uno o mas adyacentes como hijos. Una vez determinada esta

relacion, el arbol es dibujado con un diagramado radial y aquellos arcos que no pertenecen

al arbol sino que son propios del grafo se insertan con un color diferente (Figura 4.6). Las

Diagramado Radial en grafos 53

Figura 4.3: Tangente al punto v en Ci.

Figuras 4.7 y 4.8 muestran los resultados obtenidos al utilizar este algoritmo. En la Figura

4.8 se puede apreciar como se consideran los angulos de aperturas.

Como dijimos antes, este sistema permite dibujar nodos de diferentes tamanos. Para

minimizar la posibilidad de oclusion por parte de grandes nodos sobre otros, el tamano de

cada uno es tomado en cuenta al momento de calcular el espacio para cada subarbol. El

angulo de apertura de cada nodo individual es su diametro dividido la distancia al foco.

Este calculo es posible para cada nodo ya que se conoce la distancia de cada uno al foco.

Se calcula el ancho de cada subarbol calculando el angulo de apertura para cada nodo

raız del subarbol, el angulo de apertura total de cada uno de sus subarboles y se elige el

mayor de estos dos. Como en el caso del diagramado de arboles, cada nodo se ubica en el

centro de su area (Figura 4.7).

En la figura 4.8 se pueden ver dos grafos ubicados con un diagramado radial. En ambos,

el nodo A es el foco y cuenta con los 360o para ubicar sus hijos. El nodo B posee una

gran cantidad de hijos, por lo que posee un mayor espacio con respecto a sus hermanos.

La region asignada a B se muestra con un suave sombreado, los hijos de B se ubican en

el segundo anillo; la region para el nodo C, hijo de B, se muestra con un sombreado mas

oscuro.

El diagramado radial puede extenderse a 3D; para ello debe considerarse el mapeo a

tres dimensiones de los cırculos concentricos y la ubicacion y distribucion de los subarboles.


Figura 4.4: Diagramado radial para un arbol.

Veremos a continuacion como se realizo tal extension a 3D.

4.3. Diagramado Esferico

La base para el diagramado radial son los cırculos concentricos sobre los cuales se

ubican los nodos. El espacio dedicado a los hijos de un nodo se encuentra definido sobre

un sector de la circunferencia cuya longitud se determina en funcion de la cantidad de

hijos de cada subarbol.

El primer paso para introducirnos en el diagramado esferico es mapear al espacio

tridimensional los cırculos concentricos; esto se logra considerando esferas concentricas

(Figura 4.10(b)). En el diagramado radial los nodos se ubican sobre el perımetro de cada

circunferencia; para el diagramado esferico los nodos seran ubicados sobre la superficie de

cada esfera.

En el diagramado radial a cada nodo se le asocian dos angulos:

α: Angulo de apertura. Determina el tamano del area conica.

uα: Angulo de ubicacion. Determina la ubicacion del area conica dentro del espacio

de circunferencias.

Diagramado Esferico 55

Figura 4.5: Espacio sin utilizar en el diagramado radial

Figura 4.6: Dos grafos dibujados utilizando un diagramado radial

La figura 4.11 nos muestra el rol que cumplen cada uno de estos angulos. Notese que

para poder utilizar el angulo uα es necesario definir un punto inicial, que consideramos el

angulo 0. En el caso de la figura 4.11 esto ocurre en la parte superior de los cırculos. El

desplazamiento del area conica, a partir de uα se realiza con respecto al punto inicial y el

centro de la misma.

Al extender el diagramado radial al espacio tridimensional debemos decidir que re-

giones sobre las superficies de las esferas concentricas asignaremos a cada subarbol. Una


Figura 4.7: Visualizacion de la red Gnutella ([YFDH01]).

Figura 4.8: Angulos de apertura en un diagramado radial ([YFDH01])

opcion consiste en extender directamente el diagramado radial considerando nuevos angu-

los y regiones piramidales. En este caso el area conica del espacio bidimensional se trans-

formara en una piramide con una base curva. Para poder generar esta piramide debemos

tener en cuenta dos angulos.

α: Angulo de apertura horizontal. Equivalente al angulo que tenıamos en el diagra-

mado radial.

β: Angulo de apertura vertical. Este nuevo angulo es el que nos permite determinar

la piramide a partir del area conica.

Diagramado Esferico 57

Figura 4.9: Dos grafos dibujados utilizando un diagramado radial

Para ubicar el area conica dentro del espacio de las circunferencias se utilizo el angulo

uα; ahora, ademas de ubicar la piramide en un plano horizontal, tambien debemos hacerlo

en un plano vertical. Asociando un angulo a cada plano podemos ubicar la piramide

dentro de las esferas que conformar el espacio del diagramado esferico. Los dos angulos

involucrados son:

uα: Angulo de ubicacion horizontal. Equivalente al angulo que tenıamos en el dia-

gramado radial.

uβ: Angulo de ubicacion vertical. Una vez ubicada la piramide en el plano horizontal

a traves de este angulo podemos ubicarla en el plano vertical, dandole una cierta

elevacion.

Analogamente a lo que se hace en el diagramado radial, al considerar los angulos

de ubicacion debemos definir un punto inicial, un angulo 0; en el diagramado esferico

debemos hacerlo tanto en el plano horizontal como en el vertical.

En la Figura 4.12 vemos graficamente la ubicacion de estos angulos. La zona marcada

en azul (Figura 4.12(a)) se genera por el angulo α. La zona marcada en amarillo es la

correspondiente al angulo β. La ubicacion de la piramide generada se da a traves de los

angulos uα y uβ que se pueden apreciar en verde y rojo respectivamente.

Combinando estos cuatro angulos es posible ubicar un plano curvo sobre cualquier

parte de la superficie de una esfera. Los conos circulares que se generaban en el diagramado

radial ahora se transforman en piramides con bases curvas (Figura 4.13).


(a) Anillos concentricos para diagramado radial.

(b) Esferas concentricas para diagramado esferico.

Figura 4.10: Generalizacion de diagramado radial a esferico

Ahora que ya vimos como considerar los sectores sobre cada esfera debemos ver como

se calculan los diferentes angulos para un grafo dado.

Como se vio en la seccion 4.2 dado un grafo se puede recuperar un arbol, aplicar un al-

goritmo de diagramado sobre el arbol, ubicarlo de acuerdo a este resultado y para finalizar

agregar los arcos propios del grafo. Utilizaremos entonces esta metodologıa. De ahora en

adelante consideraremos el diagramado esferico sobre un arbol y luego agregaremos los

arcos que no correspondan al arbol y sı al grafo.

En el proceso de generacion del diagramado esferico se identifican dos pasos muy

importantes:

Algoritmos para Diagramado Esferico 59

Figura 4.11: Los angulos α y uα de un nodo.

El calculo de los angulos α y β correspondientes a cada nodo, que determinan el

tamano de cada piramide.

La forma en que se ubican los nodos sobre la superficie de las esferas, lo que

servira para determinar los angulos uα y uβ.

Identificadas estas dos tareas a realizar, podrıan considerarse distintas opciones para

lograr la distribucion de los subarboles. Nosotros hemos disenados dos algoritmos que

permiten llevar a cabo esta tarea.

4.4. Algoritmos para Diagramado Esferico

Veremos ahora los algoritmos que corresponden a las distintas alternativas que pre-

sentamos para el diagramado esferico.

4.4.1. Algoritmo 1

En primera instancia desarrollaremos el algoritmo base; este es una extension casi

directa del utilizado para el diagramado radial 2D, pero debe tener en cuenta que en 3D

debe determinarse como elegir cada uno de los angulos mencionados.


(a) La zona marcada indica el angulo α. (b) La zona marcada indica el angulo β.

(c) La zona marcada indica el angulo uα. (d) La zona marcada indica el angulo uβ .

Figura 4.12: Angulos involucrados en la generacion del diagramado esferico.

1. Se ubica el nodo raız en el centro del espacio tridimensional. Sus angulos α y β se

establecen en 360o. Como los hijos del nodo raız van a distribuirse sobre una esfera

completa no se consideran para este caso los angulos uα y uβ.

2. Para cada nodo n comenzando desde la raız:

a) Se calculan los angulos α y β para cada hijo de n.

b) Dentro de la superficie curva que le corresponde a n y de acuerdo a los angulos

α y β se ubican los hijos de n en la superficie. Este paso define el valor de los


Figura 4.13: Conos esfericos en esferas circulares.

angulo uα y uβ para cada nodo.

c) Se agregan los arcos desde n hasta cada hijo.

En la seccion 4.1 consideramos dos versiones de diagramado radial. La primera de ellas

calculaba los angulos de apertura en base a la cantidad de hojas de cada subarbol. De

acuerdo a Battista ([GDBT99]) esta forma de calculo puede generar arcos que escapen

de sus areas conicas, por lo que se propone una segunda version. Estas dos situaciones se

pueden extender al diagramado esferico.

Entonces, si nos basamos en el metodo presentado por Wills en “NicheWorks-

Interactive Visualization of Very Large Graphs” ([Wil97]) el calculo de los angulos α

y β se realizara en funcion de la cantidad de hojas de cada subarbol tal como se vio

en 4.1.1. Esta tecnica tiene la ventaja de ser muy simple de implementar debido a que

solo requiere conocer la cantidad de hojas del subarbol con raız en un nodo n dado. Es-

to es posible de calcular durante la ejecucion del algoritmo con un simple recorrido en

preorden o es posible tener este valor calculado y almacenado en una estructura de datos.

Battista ([GDBT99]) define una ecuacion para calcular el angulo de apertura para cada

nodo. Esta ecuacion surge de la necesidad de evitar los cruces de arcos y esto lo logra

limitando el angulo de apertura en funcion de una recta tangente al punto en donde se


ubica el nodo del momento. Esto tambien se puede aplicar en el diagramado esferico, pero

ahora con un plano tangente al punto del nodo actual. Como se vio antes, se mejorarıa la

presentacion del diagramado debido a la no existencia de cruces pero se incrementarıa la

complejidad del calculo de los angulos.

El proximo algoritmo presenta una version mas concreta del algoritmo 1. En el algorit-

mo 1.1 optamos por tomar un angulo β fijo, considerando ±β/2 a partir del ecuador, y un

angulo α que se determinara teniendo en cuenta la cantidad de hojas de los subarboles;

utilizaremos el metodo de Wills ([Wil97]) para el calculo del angulo α y dejaremos el

metodo de Battista ([GDBT99]) para futuras implementaciones. Ası, se generaran re-

giones rectangulares sobre una seccion de las esferas; en la Figura 4.14 podemos ver esta

seccion resaltada en color verde. Esta limitacion a las regiones rectangulares nos facili-

tara la ubicacion de los nodos, y al no considerar los polos de la esfera tendremos una

mejor distribucion de los nodos.

Figura 4.14: Area sobre la cual se ubicaran los nodos correspondientes al nivel 1.

El algoritmo 1.1 es el siguiente:

Ubicar la raız en el centro de la esfera mas interior.

Calcular los angulos para los hijos de la raız igual que para el caso del diagramado

radial en 2D; considerando el anillo central de la esfera (Figura 4.15) como el equiv-


alente a la circunferencia del diagramado radial, se puede dividir este en segmentos

de acuerdo a los angulos calculados.

Asociar a cada nodo un segmento del anillo y la region rectangular correspondiente.

En la Figura 4.16 vemos una de estas regiones resaltada. Cada region tiene asociado

un nodo que se ubicara en el centro de la misma (Figura 4.17). A esta division

que acabamos de hacer la denominaremos division vertical, esta diferenciacion ten-

dra sentido en el proximo punto. Para cada nodo n hijo de la raız le corresponde

entonces una region Rn sobre la esfera mas interior.

Figura 4.15: Anillo central a la esfera. Cuando se consideran los hijos de la raız este anillo

se subdivide de acuerdo a los angulos calculados.

Cada una de estas regiones se proyecta sobre la siguiente esfera dando lugar a una

nueva region de igual forma que la anterior pero con mayor superficie. A partir de

ahora definiremos la region Rin como aquella region correspondiente al nodo n en

la esfera i-esima tomando como esfera 1 a la mas interior. Para un nodo n hijo de

la raız y su region R1n, los hijos de n se ubicaran en la region R2

n, es decir, en la

proyeccion de R1n sobre la esfera 2. Esto se generaliza para todo nodo n en la esfera

i y su proyeccion sobre la esfera i + 1.

Para ubicar los hijos de n, cuya region es Rin, en Ri+1

n realizaremos nuevamente el

calculo que presenta Wills ([Wil97]) para cada hijo de n y nuevamente realizaremos


Figura 4.16: La region resaltada le corresponde a un nodo y se obtuvo dividiendo el anillo

central de acuerdo al calculo de los angulos

una division en regiones rectangulares de Rin. Sin embargo, en este caso, haremos una

division horizontal y no vertical, de esta forma se logra un mayor aprovechamien-

to de las regiones. Este proceso se repite para cada nodo alternando la forma de

subdivision entre vertical y horizontal. La Figura 4.18 nos muestra el proceso de

proyeccion y subdivision en forma detallada.

A continuacion presentamos el algoritmo en mas detalle

Algoritmo LayoutEsferico( Arbol A )

1. Nodo r ← raız del arbol A;

2. Numero de esfera nesfera ← 1;

3. Angulo ang ← 360;

4. Region Rg ← la region indicada anteriormente;

5. Cadena division ← vertical;

6. AplicarLayout( A, r, division, Rg, nesfera, ang );


Figura 4.17: Cada nodo se ubica en el centro de su region.

fin LayoutEsferico;

Algoritmo AplicarLayout( Arbol A, Nodo r, cadena division, region Rg,

Numero de esfera nesfera, angulo ang)

1. A partir de un recorrido en preorden sobre A comenzando en r hacer:

2. Sean r1,...,rn los n hijos de r. Calculamos, utilizando el metodo de Wills, el angulo

correspondiente a cada ri. Este resultado se almacena en angri

3. Si division = “vertical” entonces

a) Se divide en forma vertical la region Rg de la esfera nesfera en n regiones;a

cada nodo ri le corresponde una region Rgri; el ancho de cada region Rgri

se

determına por el angulo angri.

b) El nodo ri se ubica sobre la esfera nesfera en el centro de la region Rgri.

c) AplicarLayout( A, ri, “horizontal”, Rgri, nesfera + 1, angri

);

sino

a) Se divide en forma horizontal la region Rg de la esfera nesfera en n regiones;a

cada nodo ri le corresponde una region Rgri; el ancho de cada region Rgri

se

determına por el angulo angri.


Figura 4.18: El proceso de subdivision y proyeccion para el diagramado esferico

b) El nodo ri se ubica sobre la esfera nesfera en el centro de la region Rgri.

c) AplicarLayout( A, ri, “vertical”, Rgri, nesfera + 1, angri

);

fin Si;

fin AplicarLayout;

Este algoritmo es un primer paso a un optimo uso de la esfera como area para dis-

tribuir los nodos. Vemos como el diagramado esferico aprovecha la tercera dimension para

distribuir los nodos en un mayor espacio lo que permite diagramar arboles mas grandes.

Sin duda hay otras alternativas de diagramado esferico; una opcion serıa aprovechar toda

la esfera para distribuir las hojas; sin embargo debe lograrse una distribucion uniforme y

eficiente sobre la misma. A continuacion se propone un algoritmo de diagramado esferico

que posee estas caracterısticas.


4.4.2. Algoritmo 2

En este algoritmo se distribuiran las hojas uniformente sobre toda la esfera; para ello

se discretizara la superficie de la esfera mediante triangulos y se ubicaran en ellos los

nodos. A diferencia del algoritmo anterior que limitaba la superficie de la esfera sobre la

cual se ubicaban los nodos, aquı se puede logar un uso completo de la misma. Ademas,

en este caso, el calculo de los angulos esta implıcito en el uso de los triangulos.

Comenzando a partir de un arbol, si la estructura original es un grafo, lo haremos a

partir de su arbol de cubrimiento; sea h la cantidad de hojas del arbol e i la profundidad

del mismo. El primer paso consiste en ubicar la raız del arbol en el espacio y luego crear

una esfera, que sera la mas interior, con h triangulos; la raız se ubicara en el centro de

la esfera recien creada y sobre esta ubicaremos los nodos del primer nivel (Figura 4.19).

Si tenemos una profundidad i entonces tendremos i esferas iguales a la interior, con la

misma cantidad de triangulos y la misma distribucion, pero con mayor radio.

Figura 4.19: Es paso inicial crea una esfera con tantos triangulos como hojas tenga el

arbol y ubica la raız en el centro de la misma.

Si la raız del arbol tiene m hijos y cada uno es raız de un subarbol con hm hojas

entonces dividiremos la esfera recien creada en m regiones identificadas como Rm (Figura

4.20) donde cada una contendra hm triangulos. Como la esfera sobre la cual estamos

trabajando fue creada con tantos triangulos como hojas tiene el arbol, estamos seguros

que podemos ubicar todas las regiones Rm necesarias. Lo que estamos haciendo es reservar

el espacio necesario para ubicar, en el peor caso, todas las hojas de cada subarbol. A


continuacion asociaremos a cada hijo de la raız la region Rm que se creo para el y lo

ubicaremos en el centro de la misma.

(a) La esfera exterior es dividada en re-

giones.

(b) Para este ejemplo trabajaremos con la

region marcada en rojo.

Figura 4.20: Division de la esfera exterior en tantas regiones como hijos tenga la raız.

El numero de triangulos de cada region se corresponde con la cantidad de hojas de cada

subarbol.

El algoritmo de diagramado para este caso recorre el arbol por niveles. Por cada nivel

que se recorre se crea una nueva esfera, identica a la ultima, pero con un radio mayor.

Para recorrer los nodos a un nivel de profundidad i primero se obtienen todos los nodos

n a un nivel de profundidad i − 1, es decir, los padres de los nodos en el nivel i. Los

nodos en el nivel i − 1 ya fueron visitados y por lo tanto se les asocio una region sobre

una esfera. Para cada nodo n en el nivel −1 se obtiene su region asociada y se la proyecta

sobre la esfera recien creada. Todas las proyecciones que se realizan para los nodos del

nivel i se hacen sobre la misma esfera. Esta nueva region que se crea es dividida en tantas

subregiones como hijos tenga el nodo n, la cantidad de triangulos que compongan cada

subregion dependera de la cantidad de hojas de los subarboles cuyas raıces sean hijos de

n.

Una vez que se termina de recorrer el nivel i, se repite la operacion sobre le nivel i + 1

hasta recorrer el ultimo nivel del arbol.

Todas las regiones que creamos sobre una esfera j se proyectan sobre la esfera j + 1

y estas sobre j + 2 y ası sucesivamente (Figura 4.23); como resultado obtenemos una


Figura 4.21: La zona marcada en verde corresponde a la ubicacion de las hojas del subarbol

sobre el ultimo nivel.

(a) Todas las regiones de la esfera i se

proyectan sobre la i + 1.

(b) Las regiones proyectadas fijan la

posicion de los nodos.

Figura 4.22: Las regiones proyectadas.

jerarquıa de regiones que nos permite ubicar los nodos del arbol de acuerdo a su propia

jerarquıa.

A continuacion se da una descripcion en pseudo-codigo del algoritmo descripto an-

teriormente; como se puede apreciar, en este caso, el resultado claramente no es una

extension del algoritmo para el diagramado radial en 2D sino una estrategia de resolucion

completamente nueva.

Algoritmo Layout Esferico( Arbol A )


Figura 4.23: Esta imagen muestra claramente la recusividad de las proyecciones.

1. Entero ctd ← Cantidad de hojas del arbol;

2. Sea ε una esfera formada por ctd triangulos;

3. Asociar la region compuesta por todos los triangulos en ε a la raız del arbol;

4. UbicarNodos( A, ε, 1 );

5. Ubicamos la raız del arbol en el centro de la esfera ε;

fin Algoritmo Layout Esferico;

Algoritmo UbicarNodos( Arbol A, Esfera ε, Profundidad m)

1. Si existen nodos en A a profundidad m, entonces:

2. Crear una nueva esfera igual a ε pero de mayor radio;

3. Llamamos a esta nueva esfera ε;

4. Sea H(n), con n raız de un subarbol en A, la cantidad de hojas en el subarbol con

raız n de A;

5. Sea ni, con 1 ≤ i ≤ c, los c nodos a profundidad m− 1 en el arbol A;

Agrupamientos 71

6. Para cada ni hacer:

a) Sea Rnila region asociada al nodo ni;

b) Proyectamos la region Rnisobre ε y creamos una nueva region denominada

R+1ni

;

c) Sea nij , con 0 ≤ j ≤ f , los f hijos del nodo ni;

d) Para cada nij hacer:

1) Sea ctd la cantidad de hojas del subarbol de A con raız en nij

2) Obtengo de R+1ni

una subregion de ctd triangulos contiguos;

3) Asocio esta nueva region al nodo nij actual;

4) Ubico el nodo actual en el centro de la region que acabo de asociarle;

7. UbicarNodos( A, ε, m + 1 );

fin Algoritmo UbicarNodos;

Este algoritmo fue implementado como parte de una aplicacion que permite la visu-

alizacion de la estructura de directorios de una computadora. Los detalles de la imple-

mentacion se pueden ver en el apendice C. A continuacion se muestran algunas capturas

de pantalla de los resultados obtenidos; otro ejemplo de los resultados obtenidos puede

verse tambien en el apendice C.

La imagen 4.24(a) nos muestra la estructura de directorios que se visualizara, en este

caso es la carpeta “Xebece 1.0.2”, como caracterıstica de este directorio podemos ver en

la figura 4.24(b) que en el ultimo nivel, en la carpeta “xebece” tenemos 145 archivos; en

total el directorio cuenta con 269 elementos, entre directorios y archivos.

En la figura 4.25 podemos ver la estructura de directorio representada utilizando el

diagramado esferico. La figura 4.26 agrega la vista de las esferas involucradas junto con

el arbol y finalmente en la figura 4.27 podemos ver el arbol y los triangulos en donde se

ubican los nodos.

4.5. Agrupamientos

El agrupamiento es el proceso de organizar objetos en grupos tal que los miembros de

cada grupo son similares de acuerdo a una o mas caracterısticas. Las variaciones en estas


(a) La estructura de di-

rectorio con raız en “Xe-

bece 1.0.2” a visualizar.

(b) Una de sus carpetas contiene 145

archivos.

Figura 4.24: Estructura de directorios a visualizar.

caracterısticas hacen que en algunos casos sea muy simple encontrar los grupos y en otros

extremadamente difıcil.

La estructura de esferas concentricas, al igual que los anillos concentricos, favorecen

el agrupamiento por distancia. Todos aquellos elementos que se encuentren a distancia x

del centro, se encuentran en la esfera Ex. Si se desea simplificar la vista agrupando todos

los elementos a distancia 1 del centro, se puede comprimir la esfera interior agrupando

todo su contenido en un solo elemento. Los arcos salientes de aquellos nodos que se

ubicaban en la superficie de Ex se mantienen pues sus adyacentes no se modifican. La

Figura 4.28 muestra en 4.28(a) el estado inicial, con la esfera mas interior resaltada. En

la Figura 4.28(b) dicha esfera se comprime para crear un nuevo elemento que representa

el agrupamiento de aquellos nodos a distancia 1 del centro.

Figura 4.25: La estructura de directorios a traves del diagramado esferico.

Figura 4.26: Las esferas creadas para poder resolver el diagramado esferico.


Figura 4.27: El arbol de directorios junto a los triangulos en donde se ubican nodos.

(a) La esfera resaltada es la mas interior. (b) Al comprimirse crea un nuevo elemento

que representa el agrupamiento.

Figura 4.28: Agrupamiento por distancia en un diagramado esferico.

Capıtulo 5

Interacciones sobre grafos en un

diagramado Esferico

La creacion de representaciones visuales adecuadas es un gran reto. No solo por la

representacion en si, sino porque debe permitir que el usuario explore los datos con efec-

tividad. Tal exploracion requiere que el usuario pueda interactuar con la representacion y

ganar insight a traves de estas interacciones; estas deben permitir navegar y explorar la

visualizacion de un modo intuitivo y eficiente. Es por ello que, ademas de haber definido

la representacion visual, debemos definir ahora cuales son las interacciones adecuadas que

permitiran explorar y navegar la representacion.

En la seccion 3.5 vimos las interacciones mas comunes asociadas a las visualizaciones

3D. Describiremos aquellas que se definieron para el diagramado esferico. Algunas de

estas interacciones son una adaptacion de las vistas en la seccion 3.5 mientras que otras

las hemos definido expresamente para esta representacion.

5.1. Navegacion

La navegacion es un proceso que se logra a traves de interacciones y nos permite

desplazarnos dentro de la visualizacion sin alterar la representacion visual. En este trabajo

contemplaremos dos tipos de navegacion:

Dirigida

Libre

76 Capıtulo 5. Interacciones sobre grafos en un diagramado Esferico

5.1.1. Navegacion Dirigida

Cuando el usuario navegue el espacio en modo dirigido, debera indicar hacia donde

desea desplazarse; para ello debera senalar cual es el objetivo hacia el cual se dirigira.

Si el foco esta en un objeto, en modo dirigido no se pueden realizar desplazamientos

hasta un espacio sin elementos; para poder navegar se debera indicar otro objeto de la

visualizacion. En modo dirigido tambien serıa posible limitar el movimiento solo a objetos

que se encuentren conectados al objeto actual o a aquellos que estan a una distancia dada.

(a) El foco de la vista se encuentra en un

elemento

(b) El usuario selecciona un elemento.

(c) La vista cambia para poner en foco el

elemento seleccionado

Figura 5.1: Navegacion en modo dirigido.

En la figura 5.1(a) vemos un grafo en 3D en el que el ojo nos indica el elemento en

foco. Si el usuario se encuentra en navegacion dirigida, para poder desplazarse en la vista,

debera seleccionar un elemento (Figura 5.1(b)) y luego podra desplazarse hacia el (Figura

5.1(c)). Este tipo de navegacion se puede lograr utilizando un mouse y un doble click para

indicar hacia donde desplazarse.

Vistas 77

5.1.2. Navegacion Libre

En el caso de navegacion libre el usuario tiene la libertad de moverse en cualquier

direccion, incluso hacia un espacio vacıo. En la figura 5.2 tenemos el mismo estado inicial

que el senalado en la figura 5.1, pero en este caso el usuario se encuentra en un modo de

navegacion libre; por esta razon el usuario puede desplazarse libremente hasta un punto

cualquiera de la vista (Figura 5.2(b).

(a) El foco de la vista se encuentra en un

elemento

(b) El usuario se desplaza libremente por la

vista

Figura 5.2: Navegacion en modo Libre.

Para este caso se debe contar con un dispositivo de entrada que permita un control

sobre la vista, pudiendo girar en el plano vertical y horizontal, y ademas contar con una

forma de control sobre el desplazamiento.

5.2. Vistas

Se definieron cuatro formas diferentes de posicionar la vista del usuario sobre el espacio

tridimensional.

Vista Completa

Vista en Tercera Persona

Vista en Primera Persona

Vista en Persona


5.2.1. Vista Completa

En Vista Complea el usuario se ubica fuera del universo y lo ve desde allı; esto es

similar a la vista que provee el navegador H3. A diferencia de las otras vistas, aquı es

posible manipular el universo, pudiendo rotarlo, alejarlo o acercarlo. Es similar a tener

un universo dentro de una esfera y manipular dicha esfera (Figura 5.3).

Figura 5.3: Vista Completa presenta una vista similar a la que da H3.

5.2.2. Vista en Tercera Persona

Para Vista en Tercera Persona el usuario se encuentra en una determinada posicion

en el universo observando el elemento seleccionado. El elemento que se esta observando

se ubicara en el centro de la vista (Figura 5.4).

5.2.3. Vista en Primera Persona y Vista en Persona

La Vista en Primera Persona y la Vista en Persona se situan en el objeto; en el

primer caso es la camara la que se situa visualmente sobre el objeto, como si el usuario

estuviese parado sobre el planeta u objeto seleccionado. En el caso de la Vista en Persona,

Vistas 79

Figura 5.4: Vista en Tercera Persona del elemento en foco, el elemento en el centro de la

visualizacion.

la vista situa al usuario dentro del objeto; esta es la vista que tendrıa el objeto del universo

(Figura 5.5).

(a) Vista en Primera Persona (b) Vista en Persona

Figura 5.5: Los dos modos de vista en primera persona.

5.2.4. Vista del contexto

Si observamos cada uno de los ejemplos planteados en la figura 5.6 se puede ver que,

excepto para la vista en modo Vista Completa, las restantes vistas no permiten ver lo

que ocurre en el resto del grafo, es decir que se pierte el contexto general. En estos casos,

es necesario brindarle al usuario una vista general del universo, que le dara contexto a

su posicion actual. Una pequena esfera situada en uno de los rincones de la pantalla

servira como referencia del contexto de la posicion. Dentro de esta se dibuja el grafo que

el usuario esta navegando, o el subgrafo necesario para que este tenga una referencia de


(a) Vista Completa (b) Vista en Tercera Persona

(c) Vista en Primera Persona (d) Vista en Persona

Figura 5.6: Solo en la vista 5.6(a) se tiene una vision global del grafo

su ubicacion. Junto con el grafo tambien se dibujara el cono de vision actual del usuario.

Esto le permitira reconocer en forma rapida que parte del grafo esta viendo. La figura 5.7

nos muestra como serıa la esfera mencionada para el grafo de la figura 5.6.

Combinando las vistas anteriores con este nuevo agregado logramos obtener foco y

contexto en todas nuestras vistas (Figura 5.8).

5.2.5. Zoom Semantico

La definicion de Zoom Semantico nos dice que la representacion amplificada de un

objeto no es necesariamente un escalado de su aspecto geometrico sino que puede incluir

una variacion de su forma o representacion con el objetivo de favorecer la comprension

de su naturaleza. En la subseccion 4.5 indicamos como el diagramado Esferico favorece el

agrupamiento por distancia, a este tipo de agrupamiento lo podemos considerar como un

Zoom Semantico sobre cada nodo. Ası solo es necesario diferenciar dos tipos de interaccion

sobre un nodo, zoom-in que, en caso de que el nodo este representando un agrupamiento

lo harıa explotar y zoom-out que provocarıa una contraccion sobre la menor esfera que

contiene al nodo.

Figura 5.7: Visualizacion del contexto a la vista actual

(a) Vista en Tercera Persona (b) Vista en Primera Persona

(c) Vista en Persona

Figura 5.8: Solo en la vista 5.6(a) se tiene una vision global del grafo

Capıtulo 6

Planetas y estrellas. La metafora

6.1. La metafora

Tanto en visualizacion de informacion como en el desarrollo de interfaces humano-

computadora, la metafora ha sido incorporada como un camino de comprension de lo

nuevo a traves de lo ya conocido ([DFAB97]).

Uno de los grandes principios organizadores con que funciona nuestro conocimiento, es

el de la similitud. Los seres humanos categorizamos la realidad en base a tomas de decision

sobre lo que comparten los estımulos que pretendemos analizar, decidiendo por ejemplo

que una manzana y una pera se parecen y aunandolas bajo el concepto de “fruta”; de

manera analoga igualamos estımulos, conceptos y proposiciones, para poder incorporarlos

significativamente a nuestra estructura cognitiva. Gracias a este mecanismo conseguimos

almacenar mayor cantidad de informacion y de una forma mas organizada, lo que favorece

su recuperacion y utilizacion.

Las metaforas funcionan precisamente en base a este principio organizador, puesto

que establecen una similitud entre dos conceptos aparentemente no relacionados. Las

metaforas tienen valor generativo, y este nos sirve para crear nuevas descripciones de un

fenomeno menos conocido en terminos de otro mas conocido.

Varios sistemas han utilizado la metafora de planetas y estrellas con anterioridad

pero flexibilizando en demasıa la relacion con la metafora. Presentamos a continuacion

un relevamiento de estos sistemas y luego una nueva metafora para la visualizacion de

informacion utilizando grafos basada en los conceptos de planetas y estrellas.

84 Capıtulo 6. Planetas y estrellas. La metafora

6.2. Trabajo previo

6.2.1. Galaxy of News

Este trabajo realizado por Earl Rennison del MIT Media Lab [Ren94] se focaliza en la

visualizacion de grandes cantidades de piezas de informacion. Utilizando un motor rela-

cional se crea una red entre los documentos de acuerdo a su relacion por autor, categorıa,

area de interes, etc. Esta red es luego visualizada en un ambiente 3D junto con la posibil-

idad de zoom semantico, panning y ayudas visuales que se crean en forma dinamica para

asistir al usuario en su navegacion y exploracion de la informacion. El motor relacional no

solo asocia elementos en un nivel horizontal sino tambien vertical lo que permite realizar

luego un zoom semantico. La figura 6.1 nos muestra una serie de capturas del sistema.

Para mayores referencias sobre el trabajo se recomienda leer [Ren94].

Figura 6.1: Galaxy of News (http://perso.limsi.fr/jacquemi/IHM05-TR/VC-visu-

edl3.html).

Tal como afirma Renninson en su trabajo, Galaxy of News utiliza la metafora de

galaxias y sistemas solares. Si se analiza la semejanza entre la representacion visual y la

metafora en la cual se basa, las diferencias son sustanciales.

En lugar de planetas se tienen los tıtulos asociados a las piezas de informacion.

Trabajo previo 85

Los sistemas solares, agrupaciones de planetas, se representan con palabras que a su

vez representan una agrupacion de artıculos, ya sea por tema, autor, categorıa, etc.

Estos grupos se vuelven a agrupar para formar nuevos sistemas solares y finalmente

la galaxia

Visualmente no hay ningun indicio que permita asociar lo que se esta viendo con una

galaxia o sistema solar. La representacion visual esta tan alejada de lo que el usuario

espera al pensar en la metafora de una galaxia, que la adaptacion a lo que realmente

esta viendo es dificultosa y puede inducir desorientacion.

6.2.2. Starlight Information Visualization System

Como describimos en la seccion 3.5.2 el sistema Starligth fue creado con el objetivo

de poder visualizar un conjunto de datos provenientes de diferentes fuentes en un mismo

ambiente visual ([RRD+97], [RRDM99]). Aunque el sistema Starlight cuenta con multiples

formas de visualizacion, su principal representacion visual es la que da nombre al sistema.

Graficamente, el sistema crea un ambiente visual 3D (Figura 6.2) en donde se utiliza

un scatterplot para representar diferentes tipos de informacion y arcos para indicar la

relacion entre la informacion y el origen y entre diferentes datos. Se utilizan variantes

en color y forma sobre los puntos generados por el scatterplot, de acuerdo a diferentes

atributos. El nombre del sistema es una referencia a la representacion que se obtiene al

dibujar los puntos en el espacio y su similitud a un campo de estrellas. Tal como se indica

en el trabajo [RRD+97] la representacion resultante es un starfield, un campo de estrellas.

El trabajo [RRD+97] solo habla de campos de estrellas, sin involucrar planetas, galax-

ias ni sistemas solares. En este sentido, la metafora a la cual se ajusta la representacion

visual es muy limitada y muy facil de respetar. Es justo decir que el campo de estrellas

que se crea a traves del scatterplot respeta la metafora; sin embargo, son los agregados

visuales los que distorsionan la representacion y afectan la metafora. Las imagenes que

se agregan sobre la periferia del espacio crean un ambiente en el cual es difıcil asociar la

representacion visual final con la metafora.


(a) El sistema Starlight relacionando datos

en el espacio con mapas que se muestar co-

mo imagenes sobre un plano

(b) Agregados visuales en el sistema

Starligth. Se pueden apreciar tres conjun-

tos de datos y una serie de imagenes como

ayudas visuales.

Figura 6.2: Capturas de pantalla del sistema Starlight ([RRD+97]).

6.2.3. Galaxies Visualization

En este trabajo, presentado en “Visualizing the Non-Visual: Spatial analysis and in-

teraction with information from text documents” ([WTP+95]) se plantea la metafora de

galaxias para la visualizacion de documentos. A traves de un motor de procesamiento

de textos, los documentos de textos son agrupados de acuerdo a sus similitudes y luego

representados visualmente utilizando un scatterplot (Figura 6.3). Sin duda, el resultado

de la visualizacion se asemeja un cielo nocturno.

Figura 6.3: Uso de scatterplot para la representacion de documentos

(http://showcase.pnl.gov/show?it/galaxies).

Trabajo previo 87

Sin embargo, en la representacion visual, a cada documento se le asocia un punto por lo

que es muy limitada la cantidad de atributos que se le puede adjuntar. Solo una variacion

de color serıa posible y quizas forma, aunque esta ultima no serıa posible percibir en

un gran conjunto de puntos. En este caso, la metafora permite representar una cantidad

limitada de atributos de cada documento; esto conduce a que para poder realizar un

analisis mas profundo es necesario salirse de la metafora, cambiar de representacion o

utilizar herramientas auxiliares.

6.2.4. XCruiser

Desarrollado como una aplicacion para la navegacion de jerarquıas de archivos, XCruis-

er ([H04]) utiliza la metafora de Universo con Galaxias en el. Cada directorio dentro de la

jerarquıa se representa como una galaxia que puede contener otras galaxias, directorios,

o estrellas, archivos (Figura 6.4). Cada estrella tiene un tamano proporcional al tamano

del archivo y el nombre y tipo de archivo determina su color y posicion. Los archivos con

nombres cortos se encuentran mas cercanos al centro de la galaxia mientras que aquellos

con nombres largos se encuentran mas lejos. Los accesos directos o soft links se representan

como agujeros de gusano, worm hole.

De las aplicaciones vistas hasta el momento, XCruiser es el que mas respeta la metafora

en cuestion. Sin embargo, se podrıa objetar que la representacion de las estrellas deberıa

ser utilizando esferas y no discos, ya que estos ultimos no se corresponden con la metafora

de galaxias y sistemas.

Como se puede apreciar en la figura 6.4(d) una gran densidad de elementos en pantalla

hacen que la representacion se vuelva poco clara y hasta confusa. Serıa necesario contar con

algun tipo de detalle bajo demanda que permita mejorar la claridad ante estas situaciones.

En el trabajo “3D Graphics in the User Interface of a File System Browser” ([H04])

varias crıticas son realizadas contra XCruiser con respecto a las interacciones que permite;

en particular, se plantean problemas en la navegacion y en la seleccion. Las velocidades

de navegacion no logran ser las apropiadas, yendo muy rapido en algunos casos, lo que

dificulta la seleccion y muy lento en otros, lo que logra que el usuario sienta que esta per-

diendo el tiempo. La seleccion no es una tarea facil, en particular en los casos de oclusion

o de grandes agrupamientos de elementos.


(a) Cada archivo se representa como una es-

trella y son agrupados en galaxias.

(b) El tamano y el color de cada estrella se

determinan en funcion del tamano y tipo del

archivo

(c) Una novedosa idea en XCruiser es repre-

sentar los soft links como worm holes, arcos

en verde en la figura.

(d) Una alta densidad de elmentos en pan-

talla crean una representacion poco clara.

Figura 6.4: Capturas de pantalla del sistema XCruiser ([H04]).

6.3. Los planetas y las estrellas como metafora

Vivimos en un mundo tridimensional, nos encontramos sumergidos en un ambiente

en el que objetos que manipulamos dıa a dıa son tridimensionales. Al utilizar graficos

tridimensionales para la representacion de grafos, estamos permitiendo la inclusion de

metaforas del mundo real que ayuden en la percepcion de estructuras complejas. A partir

de ahora, el universo (Figura 6.5) sera nuestra metafora. Utilizando una vision simplificada

del universo podemos obtener una representacion intuitiva, efectiva y agradable de un

grafo en tres dimensiones.

Los planetas y las estrellas como metafora 89

Figura 6.5: El universo, con sus galaxias, estrellas y planetas.

6.3.1. Planetas y estrellas

Desde la ninez la imaginacion nos lleva a viajar por planetas y estrellas recorriendo el

universo. Son estos elementos los principales componentes de este universo simplificado.

En muchas de las representaciones de grafos en 2D se utilizan cırculos para representar

elementos, en 3D los cırculos se transforman en esferas, y en nuestra metafora esas esferas

consisten en planetas y estrellas. En ambos casos, la figura base es la esfera.

No todos los planetas, ni todas las estrellas son iguales. Muchas variables afectan la

composicion y forma de cada planeta y estrellas, y a partir de esto podemos representar

datos en multiples dimensiones. Es posible mapear un significativo numero de atributos en

los diferentes elementos que componen los planetas. A continuacion describimos aquellos

elementos que forman parte de la composicion de un planeta y que pueden ser utilizados

para representar atributos.

Tamano. El tamano de cada planeta y estrella puede asociarse a un valor numerico.

A mayor tamano, mayor valor numerico asociado.

Textura y color. La textura y el color de un planeta y/o estrella puede indicarnos

caracterısticas del elemento que estamos representando. Se puede definir una escala de


Figura 6.6: La esfera como principal elemento en la visualizacion

Figura 6.7: El tamano de la esfera asociado a un valor numerico.

color y asociarla a un valor numerico. O texturas asociadas a posibles estados de un

elemento. Una combinacion de ambas tambien tendrıa resultados practicos.

Rotacion. Los planetas rotan sobre sus ejes, la velocidad de rotacion puede ser un

parametro que estamos representando.

Anillos. Algunos planetas poseen anillos en su exterior. La cantidad, color y tamano de

los mismos pueden ser aprovechados para continuar representando valores de los elementos

a visualizar. En particular, si el tamano de un planeta representa un valor porcentual, el

primer anillo interno asociado al planeta nos podrıa servir como referencia para el valor

de 100 %.

Lunas. Al igual que los anillos, muchos planetas son orbitados por lunas. La cantidad

de ellas, su tamano, color, textura y velocidad de rotacion nos permitiran asociarle val-


(a) Variacion de color.

(b) Variacion de textura.

Figura 6.8: Variaciones en el color y la textura podrıan indicar variaciones de uno o mas

parametros asociados a un elemento

ores. Cada luna puede ser tratada como un planeta mas, por lo tanto, tambien podemos

asociarle anillos.

En resumen, los elementos de la metafora que se pueden asociar a cada elemento de

la visualizacion son:

Planeta

• Tamano

• Rotacion

• Color

• Textura

• Anillos

◦ Tamano

◦ Color

◦ Textura


Figura 6.9: Los anillos de un planeta tambien se pueden utilizar como metaforas para

representar informacion

Figura 6.10: Las lunas orbitando los planetas.

• Lunas

◦ Cantidad

◦ Tamano

◦ Rotacion

◦ Color

◦ Textura

◦ Anillos

Estrella

• Tamano


• Textura

• Color

Esto significa que tenemos 20 opciones por cada elemento. Podemos imaginarnos una

tabla con 20 columnas y cada fila de esta tabla podrıa representarse facilmente con un

planeta o estrella junto a sus lunas y anillos.

Capıtulo 7

Conclusiones

Las representaciones visuales permiten transformar datos en formas visibles que re-

saltan aspectos importantes, como anormalidades y similitudes en los datos. Estas repre-

sentaciones visuales logran que el usuario perciba, en forma rapida, aspectos significativos

de su conjunto de datos. Aumentando la capacidad cognitiva del usuario a traves de

representaciones visuales se obtiene un proceso analıtico mas rapido y enfocado.

Sin duda es un gran reto crear representaciones visuales adecuadas. Cada repre-

sentacion visual debe lograr invitar al usuario a explorar los datos. Tal exploracion requiere

que el usuario pueda interactuar con la representacion y es a traves de estas interacciones

que realmente logra ganar insight.

La visualizacion es el proceso por el cual se crea una representacion visual interactiva

a partir de un conjunto de datos. Una tecnica que se utiliza frecuentemente para poder

ganar espacio para visualizar grafos es pasar de dos a tres dimensiones. En general la

dimension extra que se gana brindara mas espacio para ubicar el grafo.

El trabajo realizado en esta tesis consistio en:

Desarrollo del diagramado Esferico. Disenamos un diagramado 3D para grafos. Este

es una generalizacion a 3D del diagramado radial para grafos en 2D. En este diagra-

mado, la posiblidad de colocar los nodos sobre una superficie y no sobre una curva

permite ubicar mas elementos por nivel.

Se definio un conjunto de interacciones que brindan la capacidad de volar a traves

de la representacion, algo ya visto en otras visualizaciones 3D, sin embargo en este

96 Capıtulo 7. Conclusiones

caso diferenciamos dos tipos de navegacion: la dirigida y la libre. Tambien se permite

que el usuario pueda contar con diferentes vistas de un mismo objeto, presentando

cuatro vistas diferentes de la visualizacion.

Desarrollamos una metafora con el objetivo de enriquecer la visualizacion y permitir

que el disenador de la visualizacion pueda contar con elementos adicionales con los

cuales trabajar.

Dentro del conjunto de interacciones que se definieron para este diagramado tenemos,

la capacidad de volar a traves de la representacion, algo ya visto en otras visualizaciones

3D, sin embargo en este caso diferenciamos dos tipos de navegaciones. Algo novedoso en

el ambito de las visualizaciones es contar con diferentes vistas de un mismo objeto.

7.1. Trabajo Futuro

A partir de este trabajo se pueden continuar diferentes lıneas de investigacion como

trabajos a futuro. En lo que respecta al diagramado esferico es nuestro objetivo el diseno

de nuevos algoritmos que permitan una distribucion alternativa de los nodos para lograr

un mayor aprovechamiento de la superficie de la esfera; en este sentido se analizara la

posibilidad de utilizar diagramas de Voronoi como tecnica para ubicar los subarboles. Han

surgido diferentes trabajos ([IBS05], [NLC02] y [DKS02]) que anticipan la factibilidad del

uso de diagramas de Voronoi en el diagramado esferico.

En lo que respecta a las interacciones presentadas se continuara buscando nuevas for-

mas que permitan mejorar la comunicacion e interaccion entre el usuario y la visualizacion.

Tambien se evaluaran, a traves de pruebas de usabilidad, las interacciones presentadas.

Con la implementacion del diagramado esferico existente se procedera a desarrollar prue-

bas de usabilidad cuyos resultados serviran como realimentacion para futuras implementa-

ciones.

En el contexto de la metafora presentada se continuara desarrollando la misma para

poder recrear, a traves de la visualizacion, un universo tal como el usuario lo conoce. En

este contexto tambien sera necesario contar con pruebas de usabilidad que permitan eval-

uar como influye la metafora en la percepcion de la informacion que se esta visualizando.

Apendice A

Grafos

A.1. Grafos

Las estructuras relacionales, formadas por entidades y relaciones entre estas entidades,

son una constante en las ciencias de la computacion, matematica, ingenierıa y muchas

otras disciplinas. Tales estructuras son modeladas frecuentemente como grafos; las en-

tidades son se represetan como vertices y las relaciones como arcos. Es comun, hoy en

dıa, encontrarse con diferentes aplicaciones en las cuales el grafo es el modelo subyacente,

ejemplos de esto son:

En la ingenierıa de software se utilizan grafos para modelar las dependencias entre

modulos. Un modulo se representa como vertice (figura A.1) y la dependencia del

modulo a con el modulo b se representa con un arco de a hacia b.

Un sistema operativo representa la jerarquıa de archivos como como un arbol, un

tipo partıcular de grafo (Figura A.3).

En la Biologıa, una proteına puede ser representada utilizando un grafo (Figura

A.2).

La visualizacion de una estructura relacional resultara util en la medida en que el

diagrama asociado sea efectivo y ademas que la informacion asociada puede recuperarse

en forma efectiva. Un buen diagrama ayuda al usuario a entender el sistema, a favorecer el

98 Apendice A. Grafos

Figura A.1: Modulos y sus dependencias representados como un grafo.

insight, es decir, la asimilacion rapida de informacion o monitoreo de grandes cantidades

de datos; uno malo puede confundir e inducir a conclusiones erroneas.

Este apendice servira para definir los conceptos basicos necesarios de grafos.

A.2. Conceptos fundamentales

Un grafo G es un par (V,E), donde V es un conjunto finito de elementos denominados

vertices, tambien denominados nodos, y E es un conjunto de pares no ordenados de

vertices, denotados por {x, y}, que se pueden denominan lados, aristas, arcos, etc. (Figura

A.4(a)) En este caso decimos que x e y son extremos de la arista {x, y}. Denotamos V (G)

al conjunto de vertices del grafo G y por E(G) al conjunto de aristas del grafo G. Ademas

υ(G) y ε(G) denotan respectivamente el numero de vertices y el numero de aristas de G.

Puesto que E es un multiconjunto es posible que existan pares repetidos, en este caso G

tiene aristas multiples. Tambien es posible que algun par no ordenado de E tenga el mismo

vertice repetido; en este caso decimos que el lado es un lazo (loop) o bucle. Cuando existen

lados multiples y/o lazos decimos que G es un multigrafo (Figura A.5. Si no hay lados

multiples ni lazos decimos que G es un grafo simple. Un digrafo G es un par G = (V, E)

donde V es un conjunto de vertices y E es un conjunto de pares ordenados. Los lados se

Conceptos fundamentales 99

Figura A.2: Una proteına representada utilizando un grafo.

denotan por pares ordenados (u, v), cada par denota una arista dirigida que tiene como

vertice inicial a u y como vertice final a v. (Figura A.4(b))

Dos vertices u, v de un grafo G = (V, E) se dicen adyacentes si existe un arco {u, v}tal que {u, v} ∈ E, asimismo dos arcos son adyacentes si tienen un mismo vertice como

extremo; analogamente si e = {u, v} decimos que el arco e es incidente sobre los vertices u

y v. El grado de un vertice es el numero de lados incidentes en el. El grado de un vertice u

se denota gr(u). Denotamos con δ(G) y ∆(G) el mınimo y el maximo grado de los vertices

de G respectivamente.

En un digrafo distinguimos entre grado entrante y grado saliente de u, el primer indica

el numero de lados que tienen al vertice u como terminal. Esto es el numero de pares {a, u}tal que {a, u} ∈ E y a es un vertice en V . Para el caso de los vertices salientes se considera

el numero de arcos que tienen al vertice u como inicial. Esto es el numero de pares {u, a}tal que {u, a} ∈ E y a es un vertice en V . Para denotar estos dos valores utilizaremos la

notacion gr−(u) y gr+(u) respectivamente.


Figura A.3: La jerarquıa de archivos vista como un arbol, un tipo partıcular de grafo.

(a) El arco e = (A,B) como par

no ordenado. Grafo no dirigido

(b) El arco e = (A,B) como par

ordenado. Grafo dirigido

Figura A.4: Grafos dirigidos y no dirigidos.

A.2.1. Caminos y Ciclos

En algunos textos se distingue entre cadenas (chains) y caminos (path), usando el

primer termino para grafos y el segundo para digrafos. Una sucesion alternada de vertices

y lados u1, e1, u2, e2, ..., ek, uk+1 tal que ei = [ui, ui+1] se denomina cadena en un grafo y

camino en un digrafo. Los caminos deben realizarse de acuerdo a la direccion de los lados.

Si no existen lados multiples podemos denotar el camino, sin ambiguedades, como una

sucesion de vertices, vertices consecutivos adyacentes. Una cadena es cerrada si el vertice

inicial y final es el mismo. La cadena cerrada es un ciclo si todos los vertices, excepto los

extremos, son distintos. El camino cerrado es un circuito si todos los vertices, excepto los

extremos, son distintos.

Conceptos fundamentales 101

Figura A.5: Un grafo simple y un multigrafo dirigido

La longitud de una cadena (camino) es el numero de lados que hay en el. La distancia

entre dos vertices distintos es igual a la longitud de la cadena mas corta entre ellos, no

esta definida si no hay camino entre ellos y es cero si los vertices son iguales.

Un arco {u, v} en un digrafo G se dice transitivo si existe un camino desde u a v en

G que no contiene el arco {u, v}. La clausura transitiva G’ de un digrafo G posee un arco

{u, v} para cada camino desde u a v en G. La figura A.6(b) muestra la clausura transitiva

para la figura A.6(a). Como se puede apreciar en estas figuras una clausura transitiva

puede hacer engorroso el dibujo de un grafo siendo preferible una version reducida, tam-

bien llamada reduccion transitiva. Dicha reduccion se obtiene al eliminar todos los arcos

transitivos.

(a) Un grafo representando una

jerarquıa de herencia.

(b) Clausura transitiva al grafo A.6(a)

Figura A.6: Clausura transitiva de un grafo


A.2.2. Subgrafos

Sea G = (V, E) un grafo. Si H = (W,F ) es un grafo tal que W ⊆ V y F ⊆ E decimos

que H es un subgrafo de G. Si F contiene todos los arcos de E que unen a los puntos de

W en G se dice que H es un subgrafo completo de G generado por W . Si W = V decimos

que H es un subgrafo extendido de G.

Figura A.7: Subgrafos de G.

En la figura A.7 se puede ver como el grafo G1 es un subgrafo de G, el grafo G2 es un

subgrafo completo de G y el grafo G3 es un subgrafo extendido de G.

A.2.3. Conectividad

Un grafo no dirigido G es conexo si existe una cadena entre cualesquiera par de vertices.

H es una componente conexta de G si H es un subgrafo conexo completo maximal. Es

decir no existe un subgrafo completo de G que contenga propiamente a H y sea conexo.

Si G es un grafo dirigido y para cada par de nodos (u, v) existe un camino de u a v y de

v a u decimos que G es fuertemente conexo.

Apendice B

Historia

B.1. Los principios del dibujado de grafos

El dibujado de grafos ha sido usado extensamente a traves de los tiempos, pero su uso

como abstracciones visuales de grafos matematicos ha surgido en tiempos recientes y con

un uso masivo en los ultimos 150 anos.

Las primeros dibujos de grafos se asocian al juego de Morris ( se puede encontrar una

descripcion detallada de este juego y sus variantes en http://www.ahs.uwaterloo.ca/ mu-

seum/VirtualExhibits/rowgames/mill.html ). Aunque otros juegos mas antiguos tienen

como base el concepto de grafo, los tableros de Morris utilizan grafos explıcitamente

([Mur52]). Los ejemplos mas antiguos hasta el momento del juego Morris provienen del

antiguo Egipto. De acuerdo a Henry Parker, estos dibujos fueron encontrados en los techos

de un templo correspondiente a la era de Remeses I. Parker describe en su libro estos jue-

gos pero desafortunadamente no brinda ninguna imagen. Los primeros ejemplos del juego

de Morris que fueron dibujados en un libro se corresponden a un trabajo del siglo 13

llamado “Book of Games” producido bajo la direccion de Alfonso X (1221-1284), Rey de

Castilla and Leon (Figura B.1).

Otro ejemplo conocido sobre el uso de grafos en la antiguedad se corresponde con los

arboles genealogicos que decoran algunas casas en villas romanas. Estas representaciones

fueron descriptas por Pliny the Elder y Seneca pero ningun ejemplar ha sobrevivido.

Los ejemplos mas antiguos que si han sobrevivido el paso del tiempo datan de la Edad

Media. La figura B.2 muestra tres ejemplos; el grafo superior pertenece a la familia Noah

104 Apendice B. Historia

Figura B.1: Descripciones del juego de Morris correspondientes al siglo XIII ([KMBW02]).

y proviene del siglo 11, en la parte inferior izquierda de la figura B.2 se observa un arbol

genealogico religioso y en la parte derecha se ve un ejemplo del siglo 12 sobre la dinastıa

Saxon.

El uso de arboles genealogicos no era solo un privilegio de nobles y personajes reli-

giosos. La figura B.3 contiene dos dibujos de genealogıas; el arbol superior presenta la

particularidad de que fue usado como parte de un documento legal por John Stalham,

durante el reinado de Elizabeth I, para demostrar su linaje. El “English Public Records

Office´´ contiene otros documentos similares a este lo que indicarıa que las personas ed-

ucadas de la epoca comprendıa el dibujado de grafos y los utilizaban de forma rutinaria

para el siglo XV. Un ejemplo de arbol genealogico mas denso se puede apreciar en la

figura B.4, dicho arbol corresponde a la genealogıa de la familia Mannelli en Florencia,

Italia. Este es uno de los ejemplos mas claros y antiguos del uso de arcos curvos para la

representacion de un grafo.

En la literatura medieval es frecuente encontrar el uso de grafos para representar tax-

onomıas. La figura de la izquierda en B.5 brinda una elegante representacion de virtudes

cardinales y teologicas con sus respectivas subvirtudes, este cuadro data del siglo XIV. La

imagen en la derecha tambien es una taxonomıa pero de vices pero con una representacion

grafica menos refinada que la anterior.

Los grafos, al igual que los arboles, se encuentran presentes en la literatura medieval

como herramientas para representar y visualizar informacion abstracta. Los Squares of

opposition son herramientas pedagogicas utilizadas para ensenar logica, en particular

relaciones entre proposiciones o silogismos.

Estos grafos fueron disenados para ayudar a recordar conocimientos que los estudiantes

ya poseıan y por lo tanto eran incompletos en cuanto a la informacion que presentaban. La

Leonhard Euler y el dibujado de Grafos 105

Figura B.2: Arboles genealogicos presentes en manuscriptos de la Edad Media

([KMBW02]).

figura B.6 muestra un simple ejemplo creado por Nicole Oresme (1323-1383), matematico

y filosofo frances. En la figura B.7 vemos una version mas compleja de este tipo de grafo,

esta version proviene del siglo XVI y fue creada por Juan de Celaya (1490-1558).

B.2. Leonhard Euler y el dibujado de Grafos

En 1736 Leonhard Euler publico su famoso libro sobre el trazado de caminos utilizando

el problema de los puentes de Konigsberg. En este trabajo Euler resulve el problema

introduciendo los conceptos de ”graph comprising nodes and edges”; este fue el comienzo

de la teorıa de grafos como un area de estudio.


Figura B.3: Arbol genealogico del siglo XV ([KMBW02]).

Sin embargo, 1736 no marca el comienzo de la edad moderna del dibujado de grafos.

Sorprendentemente, en la busqueda de la solucion al problema de los puentes de Konigs-

berg Euler no utilizo la visualizacion de grafos para presentar o explicar la solucion. En

el trabajo se incluyen dos trazados de un mapa de Konigsberg (Figura B.8) pero ninguno

incluye un grafo. El desinteres de Euler por la visualizacion de grafos se explica en el

primer parrafo de su trabajo. Euler comienza haciendo una referencia a la vision de Leib-

niz (1646-1716) sobre un nuevo tipo de geometrıa, una sin medidas o magnitudes. En una

carta de 1679, Leibniz describe esta geometrıa, llamada geometrıa situs, para representar

todo lo que depende de la imaginacion, though without figures.

No fue hasta 150 anos despues que W. W. Rouse Ball (1850-1925) utilizo la primera

representacion abstracta de un grafo para resolver el problema de los puentes de Konigs-

berg (Figura B.9). Otro ejemplo de la abstencion de Euler en el uso de visualizaciones de

grafos se produce en su trabajo de 1759 en otro rompecabezas matematico, “The Knight’s

Leonhard Euler y el dibujado de Grafos 107

Figura B.4: Arbol genealogico que incluye el siglo XV y XVI ([KMBW02]).

Figura B.5: Representaciones de taxonomıas del siglo XIV ([KMBW02]).

Tour” sobre un tablero de ajedrez. El problema plantea la necesidad de encontrar una se-

cuencia de movimientos que lleve al Rey a cada posicion del tablero una y solo una vez de

modo que se termine en la posicion inicial. En 1771, doce anos mas tarde, Vandermonde

resolvio el problema utilizando el dibujado de un grafo.


Figura B.6: Una representacion de Squares of opposition del siglo XIV. Los nodos rep-

resentan proposiciones logicas y los arcos relaciones entre dichas proposiciones. Los no-

dos representan proposiciones logicas y los arcos relaciones entre dichas proposiciones

([KMBW02]).

B.3. Primeros ejemplos de dibujado de grafos

Aunque la transicion a la edad moderna del dibujado de grafos no coincidio con la

invencion de la teorıa de grafos, si ocurrio poco tiempo despues. Comenzando a fines

del siglo XVIII y principios del XIX los dibujos de grafos comenzaron a aparecer mas

frecuentemente y en nuevos contextos. En las matematicas muchos trabajos comenzaron

a contener ilustraciones de grafos:

J.B.Listint (1808-1882) dedico una seccion de su trabajo sobre topologıa de 1847 al

problema de trazar caminos en un grafo. En este trabajo incluyo el dibujo de un

grafo complejo que puede ser dibujado de un solo trazo (Figura B.10(a)).

Sir William Rowan Hamilton (1805-1865) creo un juego basado en un algebra no

conmutativa llamado “Icosian Calculus”. El tablero de juego consistıa en un grafo

(Figura B.10(b)).

Arthur Cayley (1821-1895) realizo un trabajo sobre arboles rotulados en 1857 (Figu-

ra B.10(c)).

Primeros ejemplos de dibujado de grafos 109

Figura B.7: Una version mas compleja de los Squares of opposition del siglo XVI

([KMBW02]).

Figura B.8: Representaciones de un mapa de Konigsberg realizados por Leonhard Euler

([KMBW02]).

La aparicion de los grafos no solo ocurrio en el ambito de la matematica, en otras

areas como la cristalografıa y la quımica su uso comenzo a ser mas frecuente. Rene Just

Hauy (1743-1822) establecio los principios basicos de la cristalografıa. Sus representaciones

abstractas de cristales son una abstraccion visual hıbrida entre un dibujo geometrico y un

grafo tridimensional (Figura B.11(a)). Utilizar el dibujado de un grafo para representar

una molecula puede parecer una tecnica obvia en nuestros tiempos pero diferentes tecnicas

de representacion fueron propuestas antes de que Alexander Crum Brown (1838-1922)

introdujera el dibujado de un grafo como representacion de una molecula (Figura B.11(b)).


Figura B.9: Representacion abstracta del problema de los puentes de Konigsberg a traves

de un grafo ([KMBW02]).

(a) Este grafo de 1847 puede ser dibujado sin

alzar la mano en un solo trazo.

(b) El “Icosian Game” de Hamilton de

1857

(c) Arboles con nodos rotulados de 1857

Figura B.10: Primeros ejemplos del edad moderna del dibujado de grafos ([KMBW02]).

Primeros ejemplos de dibujado de grafos 111

(a) Representacion grafica de un grafo de

1784. Se utilizo para mostrar la geometrıa

de la estructura de cristales.

(b) Representacion grafica de una molecula de 1864. Existen

muy pequenas diferencias entre este tipo de dibujo presen-

tado en el siglo XIX y los utilizados en la actualidad.

Figura B.11: Representaciones graficas de grafos en dominios de aplicacion fuera de la

matematica ([KMBW02]).

Apendice C

Implementacion

C.1. Introduccion

Con el objetivo de poner a prueba el diagramado esferico se implemento una aplicacion

para la visualizacion de una estructura de directorios, dicha visualizacion se realizo uti-

lizando el diagramado esferico.

Utilizando el lenguaje Java se implemento un primer prototipo de aplicacion. Este

prototipo combina el uso de clases de las librerıas prefuse ([HCL05]), VTK ([Moo98]) y

clases propias. Se implementaron estructuras para soportar la estructura de directorios,

las esferas, las regiones y para mantener los resultados del diagramado esferico.

A continuacion se realiza una breve descripcion de las estructuras mencionadas.

C.2. Estructuras de datos

C.2.1. Estructura de directorios

Para poder mantener la informacion relevante con respecto a la estructura de direc-

torios se creo la clase GTree, una extension de la clase Tree de prefuse ([HCL05]). La

clase Tree es una subclase de Graph y permite modelas estructuras jerarquicas a traves

de relaciones padrehijo. La clase GTree, al igual que Tree y Graph utiliza dos tablas para

representar los nodos y los arcos; los diferentes valores que se desean mantener en cada

elemento, nodo o arco, se definen a traves de las columnas de dichas tablas.

Estructuras de datos 113

Para la implementacion de este prototipo la tabla de arcos mantiene dos columnas,

una para indicar la clave del nodo origen y otra para indicar la clave del nodo destino.

Una tercer columna se agrego para ser usada en el futuro, actualmente no tiene uso. En

la figura C.1 podemos ver el codigo que crea la tabla para los arcos.

Figura C.1: Tabla de arcos.

La tabla de nodos se compone de 10 columnas. La primer de ellas se utiliza para alma-

cenar la clave del nodo, valor que se utiliza como ındice en la tabla de arcos; las siguientes

tres columnas identifican datos sobre la estructura de directorio, el nombre del archivo o

carpeta, el camino desde la raız del directorio hasta el elemento y por ultimo un identi-

ficador para diferenciar archivos de carpetas; a continuacion se encuentran las columnas

relacionadas directamente con la visualizacion, POSITION X, POSITION Y y PO-

SITION Z almacenan la posicion en el espacio de la representacion visual asociada a este

elemento; TRIANGLE es el triangulo dentro de la esfera en el que se ubica el elemento;

REGION es la region asociada al elemento y por ultimo ACTOR es la representacion

visual del elemento. La figura C.2 muestra la definicion de la tabla para nodos.

C.2.2. Esferas

Para poder crear una esfera con triangulos suficientes como para ubicar todas las

hojas de un arbol se comienza con un icosahedron (Figura C.3) y sobre el que se realizan

114 Apendice C. Implementacion

Figura C.2: Tabla de nodos.

divisiones de cada una de sus caras en un factor de 4. Las continuas subdivisiones de estas

caras nos permite pasar de 20 a 80, 320, 1280 y asi sucesivamente.

Para este prototipo, si se desea ubicar n hojas la esfera que se creara no tendra n

triangulos sino el menor valor de la secuencia antes descripta que permita ubicar esas

n hojas. Por ejemplo, si se quieren ubicar 70 hojas, entonces se creara una esfera de 80

triangulos, lo mismo si fuesen 43 hojas; si se desea ubicar 956 hojas entonces sera necesario

crear una esfera con 1280 triangulos (Figura C.4).

Para poder representar una esfera se mantiene un arreglo con todos los vertices que

la componen y otro con los triangulos que forman la esfera. Cada triangulo se representa

por una secuencia de tres valores enteros donde cada valor es el ındice de un punto en el

arreglo de puntos.

Codigo principal 115

Figura C.3: Figura de un icosahedron.

(a) Una esfera de 80 triangulos

para ubicar 75 hojas.

(b) Una esfera de 1280 triangulos

para ubicar 956 hojas.

Figura C.4: La cantidad de triangulos no es igual a la cantidad de hojas.

C.2.3. Regiones

En este primer prototipo las regiones se implementan como secuencias de ındices de

triangulos. Para poder obtener una secuencia de triangulos de modo tal que formen una

region continua se modifico el codigo de recorrido del metodo de compresion Edgebreaker

([Ros99]) (Figura C.5) y se implementaron todas las estructuras requeridas por el.

C.3. Codigo principal

El codigo principal de este implementacion es el algoritmo de diagramado esferico visto

en 4.4.2; como se puede apreciar en las figuras C.6 y C.7 se mantiene una gran semejanza

entre el algoritmo y su implementacion.


C.4. Capturas

Para mejorar la percepcion de la visualizacion por parte del usuario, cada subarbol

cuya raız es un hijo de la raız del arbol principal es pintado con un color distinto, de modo

que cada color en la visualizacion representa una subcarpeta de la carpeta origen.

La figura C.8(a) nos muestra el resultado de visualizar una carpeta con 1039 elementos,

la figura C.8(b) nos muestra el mismo arbol pero de un angulo diferente.

La aplicacion tambien permite agregar a la visualizacion cada triangulo que fue usado

para ubicar un nodo; como resultado se pueden observar areas formadas por triangulos de

distintos colores (Figura C.9(a)), cada triangulo es pintado de acuerdo al color de su nodo,

ademas se puede observar que tambien se les ha dado a cada un nivel de transparencia

alto. En caso de grandes arboles en donde la performance de la aplicacion decae, es posible

quitar de la vista los arcos y nodos que forman el arbol y solo visualizar los triangulos;

aunque esta vista no es un reflejo exacto de la estructura jerarquica de directorios permite

tener una vista general de los datos (Figura C.9(b)).

Capturas 117

(a) Procedimiento principal para ejecutar el Edgebreaker.

(b) Procedimiento que realiza el recorrido de los triangulos.

Figura C.5: Modificacion del codigo Edgebreaker.


Figura C.6: Codigo para el algoritmo de Layout Esferico.

Capturas 119

Figura C.7: Codigo para el algoritmo de UbicarNodos.


(a) Arbol con mas de 1000 elementos.

(b) El mismo arbol desde diferente angulo.

Figura C.8: Cada color identifica un subarbol cuya raız es hija de la raız del arbol principal.

Capturas 121

(a) Inclusion de los triangulos en la visualizacion.

(b) La vista formada solamente por los triangulos.

Figura C.9: Incluir los triangulos como parte de la visualizacion enriquece la vista.

Bibliografıa

[CC99] Chen, C., and Carr, L. Visualizing the evolution of a subject domain:

a case study. In VIS ’99: Proceedings of the conference on Visualization ’99

(Los Alamitos, CA, USA, 1999), IEEE Computer Society Press, pp. 449–452.

[CG94] C., W., and G., F. Viewing a graph in a virtual reality display is three

times as good as a 2d diagram. In Visual Languages, 1994. Proceedings.,

IEEE Symposium on (Washington, DC, USA, 1994), IEEE Computer Soci-

ety, pp. 182–183.

[Cha00] Chazelle, B. A minimum spanning tree algorithm with inverse-ackermann

type complexity. J. ACM 47, 6 (2000), 1028–1047.

[CK95] Carriere, J., and Kazman, R. Research report: Interacting with huge hi-

erarchies: beyond cone trees. In INFOVIS ’95: Proceedings of the 1995 IEEE

Symposium on Information Visualization (Washington, DC, USA, 1995),

IEEE Computer Society, pp. 7481–7555.

[CMS99] Card, S. K., Mackinlay, J. D., and Shneiderman, B., Eds. Read-

ings in information visualization: using vision to think. Morgan Kaufmann

Publishers Inc., San Francisco, CA, USA, 1999.

[CRY96] Card, S. K., Robertson, G. G., and York, W. The webbook and

the web forager: an information workspace for the world-wide web. In CHI

’96: Proceedings of the SIGCHI conference on Human factors in computing

systems (New York, NY, USA, 1996), ACM Press, pp. 111–122.

[DC98] Dengler, E., and Cowan, W. B. Human perception of laid-out graphs. In

GD ’98: Proceedings of the 6th International Symposium on Graph Drawing

(London, UK, 1998), Springer-Verlag, pp. 441–443.

BIBLIOGRAFIA 123

[DFAB97] Dix, A., Finlay, J., Abowd, G., and Beale, R. Human-computer

interaction. Prentice-Hall, Inc., Upper Saddle River, NJ, USA, 1997.

[DKS02] Dehne, F. K. H. A., Klein, R., and Seidel, R. Maximizing a voronoi

region: The convex case. In ISAAC ’02: Proceedings of the 13th International

Symposium on Algorithms and Computation (London, UK, 2002), Springer-

Verlag, pp. 624–634.

[EHW97] Eades, P., Houle, M. E., and Webber, R. Finding the best viewpoints

for three-dimensional graph drawings. In GD ’97: Proceedings of the 5th

International Symposium on Graph Drawing (London, UK, 1997), Springer-

Verlag, pp. 87–98.

[Eic00a] Eick, S. G. Visual scalability. IEEE Transactions on Visualization and

Computer Graphics 6, 1 (/2000), 44–58.

[Eic00b] Eick, S. G. Visual discovery and analysis. IEEE Transactions on Visual-

ization and Computer Graphics 6, 1 (2000), 44–58.

[GDBT99] Giuseppe Di Battista, Peter Eades, R. T., and Tollis, I. G. Graph

Drawing: Algorithms for the visualization of graphs. Prentice Hall, New York,

NY, USA, 1999.

[H04] Hoglund, N. 3d graphics in the user interface of a file system browser.

Master’s thesis, Deparment of Numerical Analysis and Computer Science.

Royal Institute of Technology, 2004.

[HCL05] Heer, J., Card, S. K., and Landay, J. A. prefuse: a toolkit for in-

teractive information visualization. In CHI ’05: Proceedings of the SIGCHI

conference on Human factors in computing systems (New York, NY, USA,

2005), ACM Press, pp. 421–430.

[HDM98] Herman, I., Delest, M., and Melancon, G. Tree visualisation and

navigation clues for information visualisation. Tech. rep., CWI (Centre for

Mathematics and Computer Science), Amsterdam, The Netherlands, The

Netherlands, 1998.

[HKW94] Hemmje, M., Kunkel, C., and Willett, A. Lyberworld. a visualization

user interface supporting fulltext retrieval. In SIGIR ’94: Proceedings of the

124 BIBLIOGRAFIA

17th annual international ACM SIGIR conference on Research and develop-

ment in information retrieval (New York, NY, USA, 1994), Springer-Verlag

New York, Inc., pp. 249–259.

[HMM00] Herman, I., Melancon, G., and Marshall, M. S. Graph visualization

and navigation in information visualization. a survey. IEEE Transactions on

Visualization and Computer Graphics 6, 1 (2000), 24–43.

[HSF97] Hubona, G. S., Shirah, G. W., and Fout, D. G. 3d object recognition

with motion. In CHI ’97: CHI ’97 extended abstracts on Human factors in

computing systems (New York, NY, USA, 1997), ACM Press, pp. 345–346.

[IBS05] Imma Boada, Narcıs Coll, N. M., and Sellares, J. A. Approxima-

tions of 3d generalized voronoi diagrams. In Abstracts for the Twentyfirst

European Workshop on Computational Geometry (2005), Technische Univer-

siteit Eindhoven.

[JM03] Junger, M., and Mutzel, P. Graph Drawing Software. Springer-Verlag

New York, Inc., Secaucus, NJ, USA, 2003.

[JP98] Jeong, C.-S., and Pang, A. Reconfigurable disc trees for visualizing large

hierarchical information space. In INFOVIS ’98: Proceedings of the 1998

IEEE Symposium on Information Visualization (Washington, DC, USA,

1998), IEEE Computer Society, pp. 19–25.

[JQW90] J. Q. Walker, I. A node-positioning algorithm for general trees. Softw.

Pract. Exper. 20, 7 (1990), 685–705.

[JS91] Johnson, B., and Shneiderman, B. Tree-maps: a space-filling approach

to the visualization of hierarchical information structures. In VIS ’91: Pro-

ceedings of the 2nd conference on Visualization ’91 (Los Alamitos, CA, USA,

1991), IEEE Computer Society Press, pp. 284–291.

[Kei00] Keim, D. A. Designing pixel-oriented visualization techniques: Theory and

applications. IEEE Transactions on Visualization and Computer Graphics

6, 1 (2000), 59–78.

BIBLIOGRAFIA 125

[KKT95] Karger, D. R., Klein, P. N., and Tarjan, R. E. A randomized linear-

time algorithm to find minimum spanning trees. J. ACM 42, 2 (1995), 321–

328.

[KM05] Kershenbaum, A., and Murray, K. Visualization of network structures.

J. Comput. Small Coll. 21, 2 (2005), 59–71.

[KMBW02] Kruja, E., Marks, J., Blair, A., and Waters, R. A short note on the

history of graph drawing. In Graph Drawing, Vienna, Austria, September

23-26, 2001 (2002), P. Mutzel, M. Junger, and S. Leipert, Eds., Springer,

pp. pp. 272–286.

[KST81] Kozo Sugiyama, S. T., and Toda, M. Methods for visual understanding

of hierarchical system structures. IEEE Transaction on Systems, Man, and

Cybernetics 11, 2 (1981), 109–125.

[LRP95] Lamping, J., Rao, R., and Pirolli, P. A focus+context technique based

on hyperbolic geometry for visualizing large hierarchies. In CHI ’95: Pro-

ceedings of the SIGCHI conference on Human factors in computing systems

(New York, NY, USA, 1995), ACM Press/Addison-Wesley Publishing Co.,

pp. 401–408.

[MB95] Munzner, T., and Burchard, P. Visualizing the structure of the world

wide web in 3d hyperbolic space. In VRML ’95: Proceedings of the first

symposium on Virtual reality modeling language (New York, NY, USA, 1995),

ACM Press, pp. 33–38.

[MCFE03] Martig, S., Castro, S., Fillottrani, P., and Estevez, E. Un modelo

unificado de visualizacion. In Proceedings 9o Congreso Argentino de Ciencias

de la Computacion (2003), pp. 881–892.

[MH98] Melancon, G., and Herman, I. Circular drawings of rooted trees. Tech.

rep., CWI (Centre for Mathematics and Computer Science), Amsterdam, The

Netherlands, The Netherlands, 1998.

[MKS95] Misue K., Eades P., L. W., and Sugiyama, K. Layout adjustment

and the mental map. Journal of Visual Languages and Computing 6 (1995),

183–210.

126 BIBLIOGRAFIA

[Moo98] Moore, J. C. Visualizing with vtk. Linux J. 1998, 53es (1998), 5.

[Mun97] Munzner, T. H3: laying out large directed graphs in 3d hyperbolic space.

In INFOVIS ’97: Proceedings of the 1997 IEEE Symposium on Information

Visualization (InfoVis ’97) (Washington, DC, USA, 1997), IEEE Computer

Society, pp. 2–10.

[Mun98] Munzner, T. Drawing large graphs with h3viewer and site manager. In



[Mur52] Murray, H. J. R. A History of Board Games other than Chess. Oxford

University Press, Oxford, England, Oxford UP 1952, Oxbow Books rep 2002,

1952.

[NLC02] Na, H.-S., Lee, C.-N., and Cheong, O. Voronoi diagrams on the sphere.

Comput. Geom. Theory Appl. 23, 2 (2002), 183–194.

[Nor93] Norman, D. A. Things that make us smart: defending human attributes

in the age of the machine. Addison-Wesley Longman Publishing Co., Inc.,

Boston, MA, USA, 1993.

[Nor96] North, S. C. Incremental layout in dynadag. In GD ’95: Proceedings

of the Symposium on Graph Drawing (London, UK, 1996), Springer-Verlag,

pp. 409–418.

[NV98] Nigay, L., and Vernier, F. Design method of interaction techniques for

large information spaces. In AVI ’98: Proceedings of the working conference

on Advanced visual interfaces (New York, NY, USA, 1998), ACM Press,

pp. 37–46.

[PR02] Pettie, S., and Ramachandran, V. An optimal minimum spanning tree

algorithm. J. ACM 49, 1 (2002), 16–34.

[RCM93] Robertson, G. G., Card, S. K., and Mackinlay, J. D. Information

visualization using 3d interactive animation. Commun. ACM 36, 4 (1993),

57–71.

BIBLIOGRAFIA 127

[Ren94] Rennison, E. Galaxy of news: an approach to visualizing and understanding

expansive news landscapes. In UIST ’94: Proceedings of the 7th annual ACM

symposium on User interface software and technology (New York, NY, USA,

1994), ACM Press, pp. 3–12.

[RMC91] Robertson, G. G., Mackinlay, J. D., and Card, S. K. Cone trees:

animated 3d visualizations of hierarchical information. In CHI ’91: Proceed-

ings of the SIGCHI conference on Human factors in computing systems (New

York, NY, USA, 1991), ACM Press, pp. 189–194.

[Ros99] Rossignac, J. Edgebreaker: Connectivity compression for triangle meshes.

IEEE Transactions on Visualization and Computer Graphics 5, 1 (1999),

47–61.

[RRD+97] Risch, J. S., Rex, D. B., Dowson, S. T., Walters, T. B., May,

R. A., and Moon, B. D. The starlight information visualization system.

In IV ’97: Proceedings of the IEEE Conference on Information Visualisation

(Washington, DC, USA, 1997), IEEE Computer Society, pp. 42–49.

[RRDM99] Rex, B., Risch, J., Dowson, S., and Moon, B. Multiple source infor-

mation analysis, gis and starlight. In GIS ’99: Proceedings of the 7th ACM in-

ternational symposium on Advances in geographic information systems (New

York, NY, USA, 1999), ACM Press, pp. 158–159.

[RT81] Reingold, E., and Tilford, J. Tidier drawing of trees. IEEE Transac-

tions on Software Engineering (1981), 223–228.

[Sch90] Schnyder, W. Embedding planar graphs on the grid. In SODA ’90: Pro-

ceedings of the first annual ACM-SIAM symposium on Discrete algorithms

(Philadelphia, PA, USA, 1990), Society for Industrial and Applied Mathe-

matics, pp. 138–148.

[Spe00] Spence, R. Information Visualization. ACM Press Books, Addison Wesley,

200.

[Sug02] Sugiyama, K. Graph Drawing and Applications for Software and Knowledge

Engineers. World Scientific, 2002.

128 BIBLIOGRAFIA

[TMB02] Tversky, B., Morrison, J. B., and Betrancourt, M. Animation:

can it facilitate? Int. J. Hum.-Comput. Stud. 57, 4 (2002), 247–262.

[War00] Ware, C. Information visualization: perception for design. Morgan Kauf-

mann Publishers Inc., San Francisco, CA, USA, 2000.

[WCJ98] Wiss, U., Carr, D., and Jonsson, H. Evaluating three-dimensional in-

formation visualization designs: A case study of three designs. In IV ’98:

Proceedings of the International Conference on Information Visualisation


[Weg95] Wegman, E. Huge data sets and the frontiers of computational feasibility,

1995.

[Wex93] Wexelblat, A., Ed. Virtual reality applications and explorations. Academic

Press Professional, Inc., San Diego, CA, USA, 1993.

[Wil97] Wills, G. J. Nicheworks - interactive visualization of very large graphs. In



[WTP+95] Wise, J. A., Thomas, J. J., Pennock, K., Lantrip, D., Pottier,

M., Schur, A., and Crow, V. Visualizing the non-visual: spatial anal-

ysis and interaction with information from text documents. In INFOVIS

’95: Proceedings of the 1995 IEEE Symposium on Information Visualization


[YFDH01] Yee, K.-P., Fisher, D., Dhamija, R., and Hearst, M. Animated ex-

ploration of dynamic graphs with radial layout. In INFOVIS ’01: Proceedings

of the IEEE Symposium on Information Visualization 2001 (INFOVIS’01)


[You96] Young, P. Three dimensional information visualisation. Tech. rep., Uni-

versity of Durham, 1996.

[ZLB+87] Zimmerman, T. G., Lanier, J., Blanchard, C., Bryson, S., and

Harvill, Y. A hand gesture interface device. In CHI ’87: Proceedings

of the SIGCHI/GI conference on Human factors in computing systems and

graphics interface (New York, NY, USA, 1987), ACM Press, pp. 189–192.

universidad nacional del sur tesis de magister en ciencias...

Documents