Ingeniería en Ciencias Computacionales

Análisis y Diseño de Algoritmos Prof. Wendy Trujillo Lugo

Proyecto final: Aplicación para manipular y visualizar grafos dirigidos

Luis Pulido Díaz
Matrícula: 19365

Tijuana, B.C. México, a 24 de mayo de 2011

Cetys Universidad – ICC – Análisis y Diseño de Algoritmos Aplicación para Manipular y Visualizar Grafos Dirigidos (2011-1)

Tabla de contenidos
Introducción y Marco Teórico............................................................... 4 Teoría de Grafos ............................................................................... 4 Historia ......................................................................................... 4 Aplicaciones .................................................................................. 4 Grafo................................................................................................ 5 Algoritmos .................................................................................... 6 Operaciones .................................................................................. 6 Representaciones .......................................................................... 6 Borradores y Bosquejos Previos ........................................................... 7 Lenguajes ......................................................................................... 7 Esbozos ........................................................................................... 7 Aplicación ........................................................................................... 8 Estructura ........................................................................................ 8 Librerías .......................................................................................... 9 Screenshots ................................................................................... 10 Cargando la aplicación ................................................................ 10 Presentación ............................................................................... 10 Agregando nodos ........................................................................ 11 Agregando nodos por voz ............................................................ 11 Menú de opciones (click derecho) ................................................ 12 Agregando aristas ....................................................................... 12 Grafo completo con aristas no valuados....................................... 14 Grafo completo con aristas valuados ........................................... 14 Eliminando una arista ................................................................. 15 Eliminando un nodo .................................................................... 16 Guardando un grafo .................................................................... 18 Recuperando un grafo ................................................................. 18
Luis Pulido Díaz (19365) Página 2 de 26

.............................................................................................Cetys Universidad – ICC – Análisis y Diseño de Algoritmos Aplicación para Manipular y Visualizar Grafos Dirigidos (2011-1) Encontrando la ruta más corta ........ 23 Desarrollo .................... 25 Referencias ......................... 21 Matriz de adyacencia .................................... 22 Lista de adyacencia ..................................................................................................................................... 23 Debugging con Chrome Developer Tools .................. 26 Luis Pulido Díaz (19365) Página 3 de 26 ..................... 22 Profundidad ........................................................ 24 Conclusión ........................................................................................................................................ 20 Matriz de pesos.............................................................................................

En 1852 Francis Guthrie planteó el problema de los cuatro colores que plantea si es posible. Este problema.Cetys Universidad – ICC – Análisis y Diseño de Algoritmos Aplicación para Manipular y Visualizar Grafos Dirigidos (2011-1) Introducción y Marco Teórico Este proyecto es para demostrar lo aprendido en el curso de Análisis y Diseño de Algoritmos (CC405). Al tratar de resolverlo. 
 En 1845. tanto en las estructuras naturales como en las creadas por el hombre. y ejecutar sus operaciones básicas y algunas avanzadas. El problema consta en pasar por todos los puentes sólo una vez y regresar al mismo lugar del que se partió. manipular y visualizar grafos dirigidos. Pueden Luis Pulido Díaz (19365) Página 4 de 26 . la teoría de grafos es aquella que estudia las propiedades de los grafos. cuando Leonhard Euler plantea un problema de lógica llamado “problema de los siete puentes de Königsberg”. Gustav Kirchhoff publicó leyes de los circuitos para calcular el voltaje y la corriente en los circuitos eléctricos mediante el análisis de nodos y las aristas adyacentes. Antes de mostrar la aplicación y describir su funcionamiento. se remonta a 1736. puede ser considerado como el nacimiento de la teoría de grafos. puede omitir su lectura. Si usted ya conoce sobre este tema. utilizando solamente cuatro colores. Teoría de Grafos En los campos de matemáticas y ciencias computacionales. Aplicaciones Los grafos dirigidos se encuentran en los modelos más ubicuos. los matemáticos definieron términos y conceptos teóricos fundamentales de los grafos. El proyecto consta de una aplicación para crear. es necesario definir ciertos conceptos que ayudarán al usuario que no tiene conocimiento del tema a familiarizarse con ellos. Historia El estudio de los grafos (la teoría de grafos). colorear cualquier mapa de países de tal forma que dos países vecinos nunca tengan el mismo color. que no fue resuelto hasta un siglo después por Kenneth Appel y Wolfgang Haken.

la estructura tridimensional de modelos atómicos complejos simulados puede ser estudiada cuantitativamente generando estadísticas de propiedades de la teoría de grafos relacionadas a la topología de los átomos. y el arista entre una página A a una página B existe sí y solo si A tiene un vínculo a B. Los nodos (o vértices) representan páginas disponibles en el sitio Web. biológicos y sociales. y muchos otros campos de estudio.y) se dice que va de x a y.Cetys Universidad – ICC – Análisis y Diseño de Algoritmos Aplicación para Manipular y Visualizar Grafos Dirigidos (2011-1) ser usados para modelar muchos tipos de relaciones y procesar dinámicas en sistemas físicos. de las entidades llamadas nodos o vértices. flujo computacional. Luis Pulido Díaz (19365) Página 5 de 26 . o pueden ser entidades externas representadas por índices enteros o referencias. biología. Una estructura de datos tipo grafo también puede asociar cada arista con un valor. En ciencias de la computación. para medir el prestigio de un actor. Esta teoría también es usada ampliamente en la sociología. capacidad. longitud. ya sea una etiqueta simbólica o un atributo numérico (costo. dispositivos computacionales. los grafos son usados para representar redes de comunicación. Varios problemas de interés práctico pueden ser representados por grafos. Grafo Un grafo es una estructura de datos abstracta con la que se pretende implementar los conceptos de grafo e hipergrafo de matemáticas. notablemente mediante el uso de software de análisis de redes sociales. En física de materiales condensados.). El desarrollo de algoritmos para manipular grafos es de gran interés en las ciencias computacionales. organización de datos. Los nodos pueden ser parte de la estructura de datos. diseño de chips de computadoras. o explorar mecanismos de difusión. un arista (x. Una aproximación parecida se puede tomar de los problemas de viajes. por ejemplo. Esta estructura de datos consiste en un conjunto finito (y si es posible mutable) de pares ordenados. La teoría de grafos también es usada para estudiar moléculas en las ciencias química y física. Un ejemplo práctico: la estructura de vínculos de un sitio Web puede representarse mediante un grafo dirigido. llamados aristas o arcos. Como en matemáticas. etc. etc. peso.

x.y): Verifica si existe un arista del nodo x al nodo y.x. add(G. si no existe alguno. y el contenido de la matriz indica si existe o no un arista asociado con esa fila y columna. El algoritmo FordFulkerson se usa para encontrar el flujo máximo desde la raíz hasta el fondo de un grafo. donde cada arista tiene una capacidad y recibe un flujo.Cetys Universidad – ICC – Análisis y Diseño de Algoritmos Aplicación para Manipular y Visualizar Grafos Dirigidos (2011-1) Algoritmos Los algoritmos de los grafos son un campo muy interesante en las ciencias computacionales. si existe. add(G. neighbors(G. Matriz de adyacencia: Una matriz bidimensional booleana en la que las filas y columnas representan los vértices fuente y destino. Lista de incidencia: Una variante de la lista de adyacencia que incluye el peso (valor) de cada arista. con una lista de nodos de destino para cada nodo fuente. • • • • Luis Pulido Díaz (19365) Página 6 de 26 .y): Agrega a G un arista de x a y. delete(G.x. Las operaciones típicas de alto nivel asociadas con los grafos son: • Encontrar el camino entre dos nodos o Algoritmo depth-first search (profundidad) o Algoritmo depth-first search (amplitud) Encontrar la ruta más corta entre un nodo y otro o Algoritmo Dijkstra o Algoritmo Floyd-Warshall • Un grafo dirigido también se puede ver como una red de flujo. Operaciones Las operaciones básicas provistas por una estructura de datos de grafo G usualmente incluyen: • • • • • adjacent(G. Matriz de incidencia: Una matriz bidimensional booleana en la que las filas representan los nodos y las columnas los aristas. El contenido de la matriz indica si ambos están relacionados.x): Enlista todos los nodos y a los que apunta el nodo x. Representaciones Hay diferentes estructuras de datos que se usan en la práctica para representar grafos: • Lista de adyacencia: La lista de adyacencia se implementa como un arreglo de listas. el contenido del arreglo bidimensional es el valor de cada arista.x.value): Agrega a G un arista de x a y con el valor value. si existe. Matriz de pesos: Es la matriz de adyacencia en donde en vez de contener valores booleanos. si no existe alguno.t): Elimina el arista de x a y en G.

'element'] * edges: [ ['example'.'node'. de alto nivel. this.nodes = new Array(). * targets: ["target1".'in'.node=undefined. Para optimizar el funcionamiento de los algoritmos de la estructura.edges = new Array().prototype = { Luis Pulido Díaz (19365) Página 7 de 26 . ['node'.Cetys Universidad – ICC – Análisis y Diseño de Algoritmos Aplicación para Manipular y Visualizar Grafos Dirigidos (2011-1) Borradores y Bosquejos Previos El diseño de la estructura de datos tipo grafo tuvo dos etapas en este proyecto. } } Edge.node=node : null.'in'] . } La estructura de las aristas era una lista de pares. Lenguajes El lenguaje de programación utilizado en este proyecto fue JavaScript. } DirectedGraph.targets=new Array().'each'] . se aprovecharon sus arreglos dinámicos que funcionan como listas enlazadas y su contenido puede variar en cuanto al tipo de dato. if(target&&value) this. this. else this."target2".addTargets(target).'each'. Gracias al poder de este lenguaje.value) else if(target){ if(typeof target == "object") this.prototype = { constructor:DirectedGraph. ['example'.value){ this.target. que contenían cada uno el nodo raíz y el nodo destino de cada arista.addTarget(target). se decidió cambiar la manera en que se guardan las aristas: /* * edge: { * node: "rootNode".'element'] ] */ function DirectedGraph(){ this.addTarget(target. un lenguaje dinámico. utilizado hoy en día en todos los navegadores y más recientemente en aplicaciones de escritorio y móviles. node ? this. El primero de ellos fue de dos listas dinámicas: una para guardar los nodos y otra para guardar las aristas. Esbozos El primer esbozo de la estructura (sin sus operaciones) fue como se muestra a continuación: /* * nodes: ['example'."target3"] * } */ function Edge(node.

6] ] }.co. [“a”. [“c”.12]. ["b".55]. quería decir que esa arista no contenía valor.”b”.55] ] }. y si éste no existía. El objeto creado guarda el nodo raíz y una lista de nodos a los que este nodo raíz conecta.”c”. se guardaban tripletas. siendo el índice 2 del arreglo la posición del valor de la arista.”b”. targets: [ ["b".html Diseño de la UI: o Lenguaje: CSS3 o Archivos:  _js/_main.”e”.2. [“c”. Estructura Su estructura final consta de tres capas: • Elementos de la UI: o Lenguaje: HTML5 o Archivo: index.”a].7] ] Segunda version: [ { node: "a". { node: "c".7] ] } ] Aplicación La aplicación llamada “jQuery Directed Graph” se encuentra en línea en la dirección http://directedgraph.css  _js/jq-alerts.cc.Cetys Universidad – ICC – Análisis y Diseño de Algoritmos Aplicación para Manipular y Visualizar Grafos Dirigidos (2011-1) constructor:Edge } En la optimización se creó una nueva estructura que representa a cada arista. en la primera versión en vez de pares. Primera versión: [ [“a”. targets: [ ["e". En este caso la estructura de nodos representa directamente la lista de adyacencia. { node: "b".css o Adicionales: Imágenes PNG • Luis Pulido Díaz (19365) Página 8 de 26 .6]. ["c". targets: [ "a". [“b”. Para guardar aristas valuados. y se incluyen en ella las instrucciones para su uso.12].2.

net/ o Archivos:  _js/dracula_algorithms.net/blog/2008/12/jquery-alertdialogs/ o Archivo: _js/jq-alerts.js Dracula Graph Library o URL: http://www.js jQuery User Interface o URL: http://jqueryui.js  _js/dracula_graph.js jQuery Notify Bar o URL: http://www.js SeedRandom o URL: http://goo.js  _js/_directedGraphCustom-stable.js  _js/dracula_graffle.1 o URL: http://goo.graphdracula.js  _js/__main.1.com o Archivo: _js/jq.0.js • • • • • • • Luis Pulido Díaz (19365) Página 9 de 26 .com o Archivo: _js/jq-ui.js Curry-1.Cetys Universidad – ICC – Análisis y Diseño de Algoritmos Aplicación para Manipular y Visualizar Grafos Dirigidos (2011-1) • Motor de ejecución: o Lenguaje: JavaScript o Plataformas: jQuery (para interacción entre la UI y el motor) o Archivos:  _js/Cookies.0.js Librerías Las librerías utilizadas fueron: • jQuery o URL: http://jquery.gl/QhR3N o Archivo: _js/seedrandom.gl/lKyxX o Archivo: _js/Curry-1.me/misc/notify/ o Archivo: _js/jq-notify.dmitri.js jQuery Alert Dialogs o URL: http://abeautifulsite.js Raphaël o URL: http://raphaeljs.com/ o Archivo: _js/raphael-min.

Cetys Universidad – ICC – Análisis y Diseño de Algoritmos Aplicación para Manipular y Visualizar Grafos Dirigidos (2011-1) Screenshots Cargando la aplicación Presentación Luis Pulido Díaz (19365) Página 10 de 26 .

Cetys Universidad – ICC – Análisis y Diseño de Algoritmos Aplicación para Manipular y Visualizar Grafos Dirigidos (2011-1) Agregando nodos Agregando nodos por voz Luis Pulido Díaz (19365) Página 11 de 26 .

Cetys Universidad – ICC – Análisis y Diseño de Algoritmos Aplicación para Manipular y Visualizar Grafos Dirigidos (2011-1) Menú de opciones (click derecho) Agregando aristas Luis Pulido Díaz (19365) Página 12 de 26 .

Cetys Universidad – ICC – Análisis y Diseño de Algoritmos Aplicación para Manipular y Visualizar Grafos Dirigidos (2011-1) Luis Pulido Díaz (19365) Página 13 de 26 .

Cetys Universidad – ICC – Análisis y Diseño de Algoritmos Aplicación para Manipular y Visualizar Grafos Dirigidos (2011-1) Grafo completo con aristas no valuados Grafo completo con aristas valuados Luis Pulido Díaz (19365) Página 14 de 26 .

Cetys Universidad – ICC – Análisis y Diseño de Algoritmos Aplicación para Manipular y Visualizar Grafos Dirigidos (2011-1) Eliminando una arista Luis Pulido Díaz (19365) Página 15 de 26 .

Cetys Universidad – ICC – Análisis y Diseño de Algoritmos Aplicación para Manipular y Visualizar Grafos Dirigidos (2011-1) Eliminando un nodo Luis Pulido Díaz (19365) Página 16 de 26 .

Cetys Universidad – ICC – Análisis y Diseño de Algoritmos Aplicación para Manipular y Visualizar Grafos Dirigidos (2011-1) Luis Pulido Díaz (19365) Página 17 de 26 .

Cetys Universidad – ICC – Análisis y Diseño de Algoritmos Aplicación para Manipular y Visualizar Grafos Dirigidos (2011-1) Guardando un grafo Recuperando un grafo Luis Pulido Díaz (19365) Página 18 de 26 .

Cetys Universidad – ICC – Análisis y Diseño de Algoritmos Aplicación para Manipular y Visualizar Grafos Dirigidos (2011-1) Luis Pulido Díaz (19365) Página 19 de 26 .

Cetys Universidad – ICC – Análisis y Diseño de Algoritmos Aplicación para Manipular y Visualizar Grafos Dirigidos (2011-1) Encontrando la ruta más corta Luis Pulido Díaz (19365) Página 20 de 26 .

Cetys Universidad – ICC – Análisis y Diseño de Algoritmos Aplicación para Manipular y Visualizar Grafos Dirigidos (2011-1) Matriz de pesos Luis Pulido Díaz (19365) Página 21 de 26 .

Cetys Universidad – ICC – Análisis y Diseño de Algoritmos Aplicación para Manipular y Visualizar Grafos Dirigidos (2011-1) Matriz de adyacencia Lista de adyacencia Luis Pulido Díaz (19365) Página 22 de 26 .

Cetys Universidad – ICC – Análisis y Diseño de Algoritmos Aplicación para Manipular y Visualizar Grafos Dirigidos (2011-1) Profundidad Debugging con Chrome Developer Tools Luis Pulido Díaz (19365) Página 23 de 26 .

Cetys Universidad – ICC – Análisis y Diseño de Algoritmos Aplicación para Manipular y Visualizar Grafos Dirigidos (2011-1) Desarrollo Luis Pulido Díaz (19365) Página 24 de 26 .

Gracias a ella y a la ayuda de dispositivos de alta capacidad. Luis Pulido Díaz (19365) Página 25 de 26 . la conectividad entre ellos y el Internet. Un ejemplo muy claro del poder que tienen los grafos dirigidos y los algoritmos para trabajar con esa estructura es Google Maps.Cetys Universidad – ICC – Análisis y Diseño de Algoritmos Aplicación para Manipular y Visualizar Grafos Dirigidos (2011-1) Conclusión La estructura de datos de grafo dirigido es una de las más útiles en las ciencias computacionales. hoy se puede sacar provecho de las estructuras y algoritmos que se han ido refinando con el paso del tiempo. La aplicación que aquí se presenta es un medio educativo para conocer de manera interactiva esta estructura de datos y puede ser utilizado como herramienta de aprendizaje. tomando en cuenta varios factores. no solo distancia entre los nodos. Esa aplicación tiene la capacidad de encontrar las mejores rutas entre varios puntos mediante miles de nodos y aristas que los conectan.

Princeton University. Monash University.Cetys Universidad – ICC – Análisis y Diseño de Algoritmos Aplicación para Manipular y Visualizar Grafos Dirigidos (2011-1) Referencias Directed Graphs Robert Sedgewick and Kevin Wayne. Math Departament. http://www. United States.edu.csse. United States.au/~lloyd/tildeAlgDS/Graph/Directed/ Graph Theory Tutorials Chris K.edu/~rs/AlgsDS07/13DirectedGraphs.pdf Path Problems in Directed Graphs Lloyd Allison. Algorithms and Data Structures Fall 2007. Australia. Caldwell.edu/departments/math/graph/ Luis Pulido Díaz (19365) Página 26 de 26 . http://www.monash. The University of Tennessee Martin. http://www. Algorithms and Data Structures Research & Reference Material Departament of Computer Science. Department of Computer Science.cs.utm.princeton.

Sign up to vote on this title
UsefulNot useful