Está en la página 1de 26

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 ................................................................................................................. 24 Conclusión ................... 22 Profundidad ............................................................................................ 21 Matriz de adyacencia ..................................... 22 Lista de adyacencia .................................................... 25 Referencias ............................................................. 26 Luis Pulido Díaz (19365) Página 3 de 26 ........ 20 Matriz de pesos.................................. 23 Debugging con Chrome Developer Tools ....... 23 Desarrollo ........................................................................................................................................................................................................

Aplicaciones Los grafos dirigidos se encuentran en los modelos más ubicuos. En 1852 Francis Guthrie planteó el problema de los cuatro colores que plantea si es posible. Antes de mostrar la aplicación y describir su funcionamiento. se remonta a 1736. 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. Este problema. y ejecutar sus operaciones básicas y algunas avanzadas. tanto en las estructuras naturales como en las creadas por el hombre. 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. Si usted ya conoce sobre este tema.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). utilizando solamente cuatro colores. cuando Leonhard Euler plantea un problema de lógica llamado “problema de los siete puentes de Königsberg”. 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. Al tratar de resolverlo. Teoría de Grafos En los campos de matemáticas y ciencias computacionales. que no fue resuelto hasta un siglo después por Kenneth Appel y Wolfgang Haken. El proyecto consta de una aplicación para crear. 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. los matemáticos definieron términos y conceptos teóricos fundamentales de los grafos. es necesario definir ciertos conceptos que ayudarán al usuario que no tiene conocimiento del tema a familiarizarse con ellos. puede ser considerado como el nacimiento de la teoría de grafos. 
 En 1845. puede omitir su lectura.

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. o explorar mecanismos de difusión. Como en matemáticas. El desarrollo de algoritmos para manipular grafos es de gran interés en las ciencias computacionales. organización de datos. Varios problemas de interés práctico pueden ser representados por grafos. La teoría de grafos también es usada para estudiar moléculas en las ciencias química y física. longitud. Una estructura de datos tipo grafo también puede asociar cada arista con un valor.y) se dice que va de x a y. Una aproximación parecida se puede tomar de los problemas de viajes. Un ejemplo práctico: la estructura de vínculos de un sitio Web puede representarse mediante un grafo dirigido. etc. biológicos y sociales. llamados aristas o arcos. Esta estructura de datos consiste en un conjunto finito (y si es posible mutable) de pares ordenados. notablemente mediante el uso de software de análisis de redes sociales. diseño de chips de computadoras. ya sea una etiqueta simbólica o un atributo numérico (costo. Esta teoría también es usada ampliamente en la sociología. 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 muchos otros campos de estudio. para medir el prestigio de un actor.). En ciencias de la computación. biología. Grafo Un grafo es una estructura de datos abstracta con la que se pretende implementar los conceptos de grafo e hipergrafo de matemáticas. Luis Pulido Díaz (19365) Página 5 de 26 . flujo computacional. Los nodos (o vértices) representan páginas disponibles en el sitio Web. los grafos son usados para representar redes de comunicación. dispositivos computacionales. de las entidades llamadas nodos o vértices. capacidad. un arista (x. Los nodos pueden ser parte de la estructura de datos. etc. o pueden ser entidades externas representadas por índices enteros o referencias. peso. En física de materiales condensados.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. por ejemplo.

El contenido de la matriz indica si ambos están relacionados. si existe. add(G.value): Agrega a G un arista de x a y con el valor value.x. el contenido del arreglo bidimensional es el valor de cada arista.t): Elimina el arista de x a y en G.x): Enlista todos los nodos y a los que apunta el nodo x. delete(G. 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. 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. add(G.x.y): Agrega a G un arista de x a y. Matriz de incidencia: Una matriz bidimensional booleana en la que las filas representan los nodos y las columnas los aristas.x. con una lista de nodos de destino para cada nodo fuente. El algoritmo FordFulkerson se usa para encontrar el flujo máximo desde la raíz hasta el fondo de un grafo.x. Matriz de pesos: Es la matriz de adyacencia en donde en vez de contener valores booleanos. • • • • Luis Pulido Díaz (19365) Página 6 de 26 . neighbors(G. Operaciones Las operaciones básicas provistas por una estructura de datos de grafo G usualmente incluyen: • • • • • adjacent(G.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. Matriz de adyacencia: Una matriz bidimensional booleana en la que las filas y columnas representan los vértices fuente y destino. donde cada arista tiene una capacidad y recibe un flujo. si no existe alguno. si no existe alguno.y): Verifica si existe un arista del nodo x al nodo y. si existe. y el contenido de la matriz indica si existe o no un arista asociado con esa fila y columna. Lista de incidencia: Una variante de la lista de adyacencia que incluye el peso (valor) de cada arista.

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

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

com o Archivo: _js/jq.js  _js/_directedGraphCustom-stable.js  _js/dracula_graffle.gl/QhR3N o Archivo: _js/seedrandom.js jQuery User Interface o URL: http://jqueryui.js SeedRandom o URL: http://goo.com o Archivo: _js/jq-ui.js Curry-1.js  _js/dracula_graph.me/misc/notify/ o Archivo: _js/jq-notify.js Raphaël o URL: http://raphaeljs.js jQuery Notify Bar o URL: http://www.gl/lKyxX o Archivo: _js/Curry-1.js Dracula Graph Library o URL: http://www.js • • • • • • • Luis Pulido Díaz (19365) Página 9 de 26 .js jQuery Alert Dialogs o URL: http://abeautifulsite.js  _js/__main.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.1.0.0.net/blog/2008/12/jquery-alertdialogs/ o Archivo: _js/jq-alerts.net/ o Archivos:  _js/dracula_algorithms.1 o URL: http://goo.dmitri.com/ o Archivo: _js/raphael-min.graphdracula.js Librerías Las librerías utilizadas fueron: • jQuery o URL: http://jquery.

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. 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. no solo distancia entre los nodos. tomando en cuenta varios factores. hoy se puede sacar provecho de las estructuras y algoritmos que se han ido refinando con el paso del tiempo. Luis Pulido Díaz (19365) Página 25 de 26 .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. Un ejemplo muy claro del poder que tienen los grafos dirigidos y los algoritmos para trabajar con esa estructura es Google Maps. la conectividad entre ellos y el Internet. Esa aplicación tiene la capacidad de encontrar las mejores rutas entre varios puntos mediante miles de nodos y aristas que los conectan.

http://www. Caldwell. Math Departament. http://www.edu/~rs/AlgsDS07/13DirectedGraphs. The University of Tennessee Martin. Algorithms and Data Structures Fall 2007.cs. Algorithms and Data Structures Research & Reference Material Departament of Computer Science.princeton. Monash University. United States.edu/departments/math/graph/ Luis Pulido Díaz (19365) Página 26 de 26 .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. Department of Computer Science. United States. Australia.csse.pdf Path Problems in Directed Graphs Lloyd Allison. Princeton University.utm.edu. http://www.au/~lloyd/tildeAlgDS/Graph/Directed/ Graph Theory Tutorials Chris K.monash.