Question 1

How does the BST visualizer work?

Accepted Answer

Every operation (insert, delete, search, traversal) is implemented as a JavaScript generator function that yields a Step object on each comparison, link update, or visit. Each step carries a full snapshot of the tree structure (as a serializable node list with parent / left / right links), the active comparison node, and the running output sequence — so the UI can step forward and backward without re-running. The play head animates through the steps at your chosen speed, color-coding the active comparison path, successor / predecessor nodes, and traversal order.

Question 2

What are the three deletion cases and how are they animated?

Accepted Answer

(1) Leaf node — simply unlink from its parent. (2) One child — splice the child up into the deleted node's slot, preserving the BST property. (3) Two children — find the in-order successor (leftmost node of the right subtree), copy its value into the deleted node's slot, then recursively delete the successor (which falls into case 1 or 2). The visualizer walks the comparison path down, highlights the successor in amber, then animates the splice / copy / unlink.

Question 3

How is balance factor computed and why does it matter?

Accepted Answer

Balance factor = height(left subtree) − height(right subtree). A BST is balanced when every node's balance factor is in {-1, 0, 1}. When you insert sorted input (1, 2, 3, 4, 5…), each new node lands on the right spine and the tree degenerates into a linked list — O(n) height, O(n) lookup. The visualizer flags a degenerate tree with a warning banner, and every node displays its balance factor so you can see exactly where the imbalance lives. This motivates self-balancing trees like AVL and Red-Black.

Question 4

Can I bulk-insert values and what about duplicates?

Accepted Answer

Yes — paste a comma / space / newline separated list into the bulk-insert box and click Insert. The tool parses integers, ignores invalid tokens, and animates each insert in sequence. Duplicate keys are silently skipped (standard BST policy) and the info panel reports how many were skipped. You can also randomize a fresh tree (10 / 25 / 50 nodes) or load a sorted-input preset to see degeneration.

Question 5

What extra features does this tool have versus other BST visualizers?

Accepted Answer

(1) Insert / delete / search with animated comparison path. (2) All 3 deletion cases animated with successor highlighting. (3) All 4 traversals (in / pre / post / level-order) with synchronized node highlighting and output sequence. (4) Live height, node count, and per-node balance factor. (5) Degenerate-tree warning for sorted input. (6) Bulk insert from a list. (7) Reingold-Tilford-style tree layout (proper x / y coordinates). (8) SVG rendering with comparison-path and successor highlights. (9) Step / play / pause / speed controls with reverse-step fidelity. (10) Random-tree and sorted-tree presets. (11) History (localStorage, last 20). (12) Shareable URL encoding the entire tree state. (13) Color legend. (14) Export traversal output as text. 100% client-side — no uploads, no ads.

Binary Search Tree (BST) Visualizer

7 nodes · height 2balanced

Operation details

How to use

7 nodes · height 2balanced

Operation details