Visualización animada de las estructuras de datos más conocidas

Conocer bien las estructuras de datos básicas (pilas, colas, listas, árboles, grafos,…) es una de las habilidades fundamentales de todo programador, y una de las que más te va a ayudar a NO reinventar la rueda cada vez que tengas manipular los datos de tu programa.

Ya lo decía Niklaus Wirth (uno de los pioneros de la ingeniería de software):

Algoritmos + Estructuras de datos = Programas

Y es que si escoges bien tus estructuras de datos, el código seguirá sólo. Eso sí, no basta con conocer la representación de cada estructura de datos, hay que dominar también los algoritmos básicos para manipularlas correcta y eficientemente. Los principales son los algoritmos de ordenación, recorrido y búsqueda pero luego cada estructura de datos tienes sus propios funciones específicas (ejemplo, la coloración de grafos).

Escoge bien tus estructuras de dato y el código seguirá sólo Click To Tweet

Para ayudaros en vuestro aprendizaje, os he seleccionado una serie de webs que os permiten ver las estructuras de datos en acción.  Y es que yo pienso que no hay nada como ver y “tocar” algo para aprenderlo bien. Estas webs os permitirán ver como los diferentes algoritmos se van ejecutando y modificando los datos de ejemplo. Como siempre si conocéis otras páginas similares avisad y las voy añadiendo.

Visualizadores de algoritmos

Empecemos con los dos recursos más completos. Las dos webs que os presentamos a continuación tienen un objetivo similar (y de hecho hasta se llaman de forma parecida): visualizar la ejecución de algoritmos conocidos, entre ellos, obviamente la inmensa mayoría tienen que ver con la manipulación de estructuras de datos.

VisuAlgo.net

VisuAlgo.net incluye 24 módulos. Cada módulo se centra bien en un tipo de estructura de datos bien en una familia de algoritmos de manipulación de datos. Está disponible en español.

Cada módulo viene con una serie de lecciones donde primero se explican los conceptos teóricos subyacentes para acabar con la presentación del código en sí y la animación de su ejecución sobre los datos de ejemplo.

Por ejemplo, esta imagen muestra como se busca un elemento en un árbol de búsqueda binario.

Algorithm Visualizer

Algorithm Visualizer tiene una interfaz más “cruda” que el anterior pero es más potente. Incluye más algoritmos y más variados (hay también algoritmos de criptografía).

Si no os asusta el código (¡espero que no!) os gustará. A un lado muestra la traza del algoritmo (es decir los valores actuales de la estructura de datos de ejemplo, los valores de las diferentes variables y del log) y al otro el código que está ejecutando. Puedes ir línea a línea e incluso avanzar y retroceder en la ejecución para entender a la perfección qué hace cada parte del código.

 

Aprendiendo teoría de grafos

Los grafos son la estructura de datos más compleja y como tal, hay recursos específicos para visualizar algoritmos de grafos y “jugar” con ellos. Os destacamos algunos.

Graph Playground

Como su nombre indica, Graph Playground permite crear grafos a medida y ejecutar sobre ellos un pequeño número algoritmos de grafos “clásicos” como Dijkstra, el cálculo de componentes conectados o la coloración de grafos que ilustra la cabecera de este post.

No está mal para empezar a jugar con grafos pero para cosas más serias mejor seguir con el siguiente recurso.

Graph online es parecido. Aparte de crear tus propios grafos tienen algunos ja predefinidos por si no quieres empezar de cero.

D3 Graph Theory

D3 Graph Theory es un curso interactivo para aprender teoría de grafos. Aunque la parte textual (es decir las explicaciones de las diferentes propiedades y algoritmos de grafos) tienen un peso muy importante en el curso, el hecho de cada noción venga acompañada con su representación visual interactiva (por ejemplo, puedes modificar la solución por defecto añadiendo nuevos vértices o arcos y ver como eso hace que la solución cambie) hace que haya decidido incluirlo en este post.

 

Animaciones comparando algoritmos de ordenación

Estos dos vídeos enseñan y comparan 15 algoritmos de ordenación (“sorting” en inglés) en poco más de 6 minutos. Más que para entender los detalles de cada algoritmo, son útiles para hacerse una idea de como cada algoritmo va ordenando poco a poco el conjunto de datos.

aunque para mi gusto, la web Sorting algorithm animations lo hace todavía mejor ya que permite animar los algoritmos de ordenación variando las condiciones iniciales. Así podéis ver como cambia el rendimiento de cada algoritmo en función de si el conjunto de entrada ya está parcialmente ordenado o es un verdadero desastre.

Eso sí, ninguno de ellos incluye el sleep sort en su animación, con lo que a mi me gusta 🙂

Estructuras de datos en JavaScript

Hoy en día todo lenguaje de programación viene con potentes librerías para que puedas empezar inmediatamente a utilizar las estructuras de datos sin tener que reimplementar nada. Pero nada mejor que tocar código para profundizar en el estudio de las estructuras de datos.

Sí quieres testear tus habilidades y jugar con tus propias implementaciones de algoritmos de ordenación, búsqueda, … sobre estructuras de datos, este repositorio de algoritmos en JavaScript te será muy útil. Incluye un gran número de implementaciones de estructuras de datos y una extensa colección de algoritmos para cada una de ellas. Además, para cada algoritmo incluye links a la explicación teórica del algoritmo, su coste computacional, ejemplos,….