DSA View View añade visualizaciones paso a paso para Trapping Rain Water, Top‑K Frequent y Selection Sort
El autor de DSA View View publica una nueva entrega que muestra la ejecución de tres algoritmos clásicos con animaciones interactivas y explicaciones detalladas.
El ingeniero frontend @nyaomaru ha ampliado DSA View View con tres nuevas visualizaciones: Trapping Rain Water, Top K Frequent Elements y Selection Sort. Cada módulo permite ver cómo los valores de variables cambian en tiempo real, facilitando la comprensión del flujo de datos y de las decisiones del algoritmo.
En la visualización de Trapping Rain Water se muestra el clásico enfoque de dos punteros. El código recorre el arreglo desde ambos extremos, mantiene leftMax y rightMax y acumula el agua atrapada sin necesidad de volver a calcular los máximos en cada posición. La herramienta dibuja los muros y el agua acumulada, y resalta por qué se procesa siempre el lado más bajo: el límite del agua está determinado por el máximo más bajo visto hasta el momento.
Para Top K Frequent Elements el algoritmo cuenta la frecuencia de cada elemento, ordena los contadores y selecciona los k valores más comunes. La animación ilustra cómo se construye el mapa de frecuencias y cómo se extraen los mayores mediante un heap o un bucket sort, según la implementación elegida.
La visualización de Selection Sort recorre el arreglo, busca el elemento mínimo y lo intercambia con la posición actual. Cada iteración muestra los índices i y j, el valor mínimo encontrado y el estado del arreglo después del swap, dejando claro por qué el algoritmo necesita O(n²) comparaciones.
Todas las demostraciones están disponibles en la versión online de DSA View View y el código fuente se encuentra en el repositorio de GitHub dsa‑view‑view. La interfaz permite pausar, avanzar paso a paso o ejecutar la animación completa, lo que resulta útil tanto para estudiantes como para profesionales que quieren depurar su propia implementación.
Esta actualización refuerza la propuesta de la herramienta: no basta con leer código, hay que observar su comportamiento. Al exponer explícitamente variables como left, right, leftMax o rightMax, se reducen los errores de lógica comunes y se acelera el proceso de aprendizaje. Queda por ver si el autor añadirá más problemas de la lista clásica de DSA y si la comunidad adoptará la visualización como parte de los flujos de revisión de código.
