Back to Projects
ActiveLLM Project

Binary Tree Visualizer

Visualize Binary Search Tree (BST) insertions and standard DFS/BFS traversals step-by-step on SVG-rendered layouts.

Target Learning Outcome

Deconstruct parent-child node relationships and dynamic search trees traversals.

Active Lab TerminalRUNNING LIVE
Symmetric BST Layout
Tree is empty. Add a root node to begin.
Node Value
Traversal Simulations
Execution trace
Tree initialized. Add nodes to populate.
01. Problem it solves

Abstract Hierarchic Traversals

Trees are recursive structures that are difficult to debug using text prints alone. Memorizing the differences between preorder, inorder, and postorder traversals is common, but visualizing which nodes are visited at each recursion step is rarely shown.

This visualizer solves this by dynamically rendering the BST as SVG circles and highlighting node visitation transitions in real time.

02. Concept it teaches

Tree DFS and BFS Sequences

This sandbox teaches core hierarchic concepts:

  • Hierarchic node structures (Parent/Child pointers)
  • Binary Search Tree (BST) sorted insertion logic
  • Preorder (NLR), Inorder (LNR), and Postorder (LRN) traversals
  • Breadth First Search (BFS) level-order traversal queue logic
  • Leaf nodes vs. internal nodes coordinates
03. What I built

SVG BST Coordinate Grid

An interactive BST visualizer featuring:

  • Dynamic SVG Tree builder plotting nodes and line edges automatically.
  • Interactive BST insertion form adding nodes to correct branches.
  • Clear Tree control to reset the SVG container.
  • DFS traversal path highlighting animations with step timers.
  • BFS Level Order traversal animation using queue state trace logs.
04. Architecture

Tree Rendering Flow

TreeNode state coordinates
SVG canvas recursive edges builder
DFS highlight trace logs
05. Tech Stack

Built With

React 19TypeScriptTailwind CSSSVG APIGitHub
06 & 07. Links

Source & Deploy

GitHub Repository:landing
08. Interview Explanation

Defending the Design

Interview Defense Strategy

I implemented the Binary Tree Visualizer to show how recursion stacks visit node hierarchies. By seeing DFS and BFS traversals highlight nodes in active order, developers can instantly understand NLR, LNR, and LRN sequence differences.
09. Future Improvements

Roadmap Extensions

  • Implement AVL Tree self-balancing rotation visualizers.
  • Add Red-Black Tree node coloring transition steps.
  • Include depth and balance metrics panel.