Upload
others
View
2
Download
0
Embed Size (px)
Citation preview
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
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
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
10 Capıtulo 2. Visualizacion
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.
12 Capıtulo 2. Visualizacion
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]).
16 Capıtulo 2. Visualizacion
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.
20 Capıtulo 3. Visualizacion de Grafos
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
22 Capıtulo 3. Visualizacion de Grafos
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.
24 Capıtulo 3. Visualizacion de Grafos
(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.
Tecnicas de diagramado para grafos 25
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.
26 Capıtulo 3. Visualizacion de Grafos
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]).
Tecnicas de diagramado para grafos 27
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]).
28 Capıtulo 3. Visualizacion de Grafos
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
Tecnicas de diagramado para grafos 29
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]).
30 Capıtulo 3. Visualizacion de Grafos
(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
Tecnicas de diagramado para grafos 31
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.
32 Capıtulo 3. Visualizacion de Grafos
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]).
Tecnicas de diagramado para grafos 33
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
34 Capıtulo 3. Visualizacion de Grafos
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.
36 Capıtulo 3. Visualizacion de Grafos
(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
Visualizacion de grafos en 3D 37
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
38 Capıtulo 3. Visualizacion de Grafos
(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.
Visualizacion de grafos en 3D 39
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.
40 Capıtulo 3. Visualizacion de Grafos
(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
Visualizacion de grafos en 3D 41
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
42 Capıtulo 3. Visualizacion de Grafos
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
44 Capıtulo 3. Visualizacion de Grafos
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]),
46 Capıtulo 3. Visualizacion de Grafos
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/).
48 Capıtulo 3. Visualizacion de Grafos
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.
52 Capıtulo 4. Diagramado Esferico
(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.
54 Capıtulo 4. Diagramado Esferico
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
56 Capıtulo 4. Diagramado Esferico
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).
58 Capıtulo 4. Diagramado Esferico
(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.
60 Capıtulo 4. Diagramado Esferico
(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
Algoritmos para Diagramado Esferico 61
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
62 Capıtulo 4. Diagramado Esferico
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-
Algoritmos para Diagramado Esferico 63
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
64 Capıtulo 4. Diagramado Esferico
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 );
Algoritmos para Diagramado Esferico 65
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.
66 Capıtulo 4. Diagramado Esferico
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.
Algoritmos para Diagramado Esferico 67
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
68 Capıtulo 4. Diagramado Esferico
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
Algoritmos para Diagramado Esferico 69
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 )
70 Capıtulo 4. Diagramado Esferico
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
72 Capıtulo 4. Diagramado Esferico
(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.
74 Capıtulo 4. 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
78 Capıtulo 5. Interacciones sobre grafos en un diagramado Esferico
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
80 Capıtulo 5. Interacciones sobre grafos en un diagramado Esferico
(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
82 Capıtulo 5. Interacciones sobre grafos en un diagramado Esferico
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.
86 Capıtulo 6. Planetas y estrellas. 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.
88 Capıtulo 6. Planetas y estrellas. La metafora
(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
90 Capıtulo 6. Planetas y estrellas. La metafora
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-
Los planetas y las estrellas como metafora 91
(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
92 Capıtulo 6. Planetas y estrellas. La metafora
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
Los planetas y las estrellas como metafora 93
• 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.
100 Apendice A. Grafos
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
102 Apendice A. Grafos
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.
106 Apendice B. Historia
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.
108 Apendice B. Historia
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)).
110 Apendice B. Historia
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.
116 Apendice C. 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.
118 Apendice C. Implementacion
Figura C.6: Codigo para el algoritmo de Layout Esferico.
Capturas 119
Figura C.7: Codigo para el algoritmo de UbicarNodos.
120 Apendice C. Implementacion
(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
GD ’98: Proceedings of the 6th International Symposium on Graph Drawing
(London, UK, 1998), Springer-Verlag, pp. 384–393.
[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
(Washington, DC, USA, 1998), IEEE Computer Society, pp. 137–145.
[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
GD ’97: Proceedings of the 5th International Symposium on Graph Drawing
(London, UK, 1997), Springer-Verlag, pp. 403–414.
[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
(Washington, DC, USA, 1995), IEEE Computer Society, pp. 51–59.
[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)
(Washington, DC, USA, 2001), IEEE Computer Society, pp. 43–51.
[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.