Binary Search Tree Visualizer

---

Project Overview

I built an interactive web tool to help students visualize how Binary Search Trees work. It uses real-time animations to show exactly what happens when you insert, delete, or search for nodes, making abstract data structures easier to understand.

Key Features

• Real-Time Visualization: Watch tree structures build and modify dynamically
• Core Operations: Full support for Node Insertion, Deletion, and Search.
• Traversal Modes: Step-by-step visualizations for In-order, Pre-order, and Post-order.
• Step-by-Step Mode: Control animation speed to follow algorithm logic
• Custom Input: Build trees with user-defined values

Technical Implementation

• Vanilla: Logic and BST algorithms built from scratch without external libraries.
• HTML5 Canvas: Used for high-performance, responsive rendering of the tree layout.
• Algorithm Logic: Recursive implementations for tree height calculation, balancing checks, and node positioning.

My Contributions

• Algorithm Development: Wrote the core logic for BST operations and tree traversals.
• UI/UX Design: Built the control panel and integrated the Canvas API for the main display.
• Animation Engine: Created a custom system to handle timing and state changes.
• Optimization: Ensured the tree remains readable and performs well even with many nodes.

Learning Outcomes

• Data Structures: Gained a deep "under-the-hood" understanding of tree-based algorithms.
• User Experience: Focused on making complex technical concepts intuitive for beginners.