🌳 Binary Search Tree Visualizer

An interactive educational tool that transforms abstract Binary Search Tree concepts into vibrant, animated visualizations. Perfect for students, educators, and developers looking to master BST operations through visual learning.

Features

Basic Operations

• Create BST from user input
• Visualize operations:
  • Insert nodes
  • Delete nodes
  • Search for nodes
• Tree traversal animations:
  • In-order traversal
  • Pre-order traversal
  • Post-order traversal

Advanced Operations

• Height and depth calculation: Display the height of the tree and depth of each node
• Find min/max: Visualize finding the minimum and maximum values
• Ancestor/descendant finder: Find and highlight all ancestors or descendants of a selected node
• Subtree visualization: Focus on and visualize specific subtrees
• Range queries: Visualize finding all nodes within a specific range of values

Educational Features

• Time complexity display: Shows real-time operation complexity based on tree structure
• Step explanations: Provides textual explanations for each step of an algorithm
• Comparison counter: Counts and displays the number of comparisons made during operations
• Tutorial mode: Includes guided explanations of BST concepts
• Algorithm pseudocode: Displays the pseudocode alongside the visualization, highlighting current steps

Visualization Features

• Color-coded nodes:
  • Blue: Normal nodes
  • Pink: Highlighted/found nodes
  • Orange: Nodes in the search path
  • Green: Newly inserted nodes
  • Red: Nodes being deleted
• Path tracing: Show the search path with a different color
• Multiple tree layouts: Vertical, horizontal, and radial views
• Zoom and pan: Zoom in/out and pan across larger trees
• Animation controls:
  • Play/pause
  • Step-by-step execution
  • Speed control
  • Stop animation

Tech Stack

• Frontend: React with Vite, react-d3-tree for beautiful tree visualizations
• Backend: Express.js API for efficient BST operations
• State Management: React hooks for clean, functional component design

🚀 Project Structure

This project is organized into two main components:

bst-visualizer/
├── client/          # Frontend React application
└── server/          # Backend Express API

🛠️ Installation & Setup

Prerequisites

• Node.js (v14 or later)
• npm or yarn

1. Clone the Repository

git clone https://github.com/Khushishah224/TreeVision.git
cd TreeVision

2. Client Setup (Frontend)

1. Navigate to the client directory:

cd client

2. Install dependencies:

npm install

3. Create a .env file in the client directory with the following content:

#  create a file named .env and add this line Example:
VITE_API_URL=http://localhost:5000/api/bst

4. Start the development server:

npm run dev

The frontend will be available at http://localhost:5173

3. Server Setup (Backend)

1. Open a new terminal and navigate to the root directory, then to the server directory:

# If you're starting from the client directory, first go back to the root
cd ..
# Then go to the server directory
cd server

2. Install dependencies:

npm install

3. Create a .env file in the server directory with the following content:

# create a file named .env and add this line:
CLIENT_URL=http://localhost:5173

4. Start the development server:

npm start

The API will be available at http://localhost:5000

🎮 Usage Guide

Once both the client and server are running, you can start exploring BST operations:

Basic Tree Operations

1. 🌱 Create Your Tree: Enter comma-separated values (e.g., 50,25,75,12,37,62,87) in the "Create Tree" input field and watch your BST come to life!

2. ➕ Insert Nodes: Add new values to your tree and visualize how they find their proper place according to BST rules

3. 🔍 Search for Values: See the search algorithm trace its path through the tree, highlighting each comparison

4. ❌ Delete Nodes: Watch the sophisticated delete operation handle leaf nodes, nodes with one child, or nodes with two children

Traversal Algorithms

Explore different ways to visit every node in the tree:

• 📊 In-Order Traversal: Visit left subtree → current node → right subtree (gives sorted output!)
• 📈 Pre-Order Traversal: Visit current node → left subtree → right subtree (useful for copying trees)
• 📉 Post-Order Traversal: Visit left subtree → right subtree → current node (useful for deletion)

Animation Controls

• ⏯️ Play/Pause: Control the animation flow
• ⏪/⏩: Step backward or forward through operations
• 🔄 Speed Control: Adjust animation speed for detailed study or quick demonstrations
• 🛑 Reset: Clear all highlights and return to the base tree state

Learning Features

• 📝 Pseudocode Display: See the exact steps the algorithm is following
• 🔢 Comparison Counter: Track exactly how many operations each algorithm performs
• 📚 Tutorial Mode: Get guided explanations perfect for classroom settings

🎓 Educational Value

This visualizer transforms abstract BST concepts into tangible visual experiences:

• Conceptual Understanding: See the abstract data structure come to life
• Algorithm Analysis: Observe firsthand why BST operations are O(log n) in balanced trees
• Problem Solving: Build intuition about tree-based problems and solutions
• Debugging Practice: Watch each step of complex operations like deletion and rebalancing
• CS Education: Perfect teaching aid for data structures and algorithms courses

---

Happy Visualizing! 🌳