karthik.dev
Back to projects
Open Source

DSA Algorithm Visualizer

Interactive step-by-step visualizations of sorting, graph, and tree algorithms

React.jsTypeScriptCanvas APIFramer MotionTailwind CSS

Overview

An interactive web application animating 20+ data structure and algorithm implementations step-by-step — sorting algorithms, graph traversals, tree operations, and dynamic programming — with speed controls and live pseudocode highlighting.

Problem

Most DSA learners struggle to build intuition for algorithms because static explanations don't convey the temporal sequence of operations.

Solution

A React application where each algorithm runs as a generator function yielding visualization frames. The UI renders each frame with controlled animation speed and highlights the active pseudocode line.

Architecture

  1. 1Algorithm implementations as JavaScript generator functions yielding state snapshots
  2. 2React state machine consuming generator frames at configurable playback speed
  3. 3Canvas-based rendering for graph and tree visualizations
  4. 4Framer Motion for array/bar animations in sorting algorithms
  5. 5Pseudocode panel with line highlighting synchronized to algorithm state

Technical Challenges

  • Representing arbitrary algorithm state as a serializable snapshot for frame-by-frame playback.
  • Laying out graph nodes automatically for visually clean BFS/DFS animations.

Results

  • 20+ algorithms visualized including QuickSort, MergeSort, Dijkstra, BFS, DFS, AVL rotations, and DP table fills.
  • Open-sourced as a learning resource for DSA students.