A web app for learning algorithms through interactive visualizations. Built because I kept forgetting how AVL rotations work and figured others might have the same problem.
Ever tried to understand how merge sort actually splits and merges arrays? Or why AVL trees need all those rotations? This project visualizes algorithms step-by-step so you can see exactly what's happening under the hood.
Tree Algorithms:
- AVL Trees with rotation animations (finally makes sense!)
- Red-Black trees with color changes
- Basic BST operations
Sorting:
- Merge sort with the divide-and-conquer tree
- Quick sort showing partitions
- All the classics: bubble, selection, insertion, shell, heap
- Non-comparison sorts: counting, radix, bucket
Searching:
- Binary search that picks good examples
- Linear search (because sometimes you need the basics)
- Interpolation search
Controls:
- Play/pause animations
- Step through manually
- Adjust speed
- See operation counts
npm install
npm run devOpen http://localhost:3000 and start exploring.
- Next.js 15 (React 19)
- TypeScript
- D3.js for the tree visualizations
- Tailwind CSS
- Zustand for state management
/src/algorithms/- Original basic implementations/src/lib/algorithms/- Enhanced versions with visualization steps/src/components/- All the React components/src/types/- TypeScript definitions/src/data/syllabus.json- Algorithm metadata
- Create the step-by-step implementation in
/src/lib/algorithms/ - Add it to the switch statement in
AlgorithmVisualizer.tsx - Update the syllabus if needed
The visualization system is pretty flexible - you can use array bars, trees, buckets, or search spaces depending on what makes sense for your algorithm.
Started as a way to finally understand AVL tree rotations. Kept adding more algorithms because the visualization approach actually helped me learn them better. Turns out seeing the step-by-step process makes a huge difference compared to just reading about it.
PRs welcome! The codebase is pretty straightforward - each algorithm generates an array of visualization steps that get rendered by the appropriate component.
MIT - do whatever you want with it.