AVL Tree Visualizer
Step-by-step visualization of self-balancing AVL tree operations — insert, delete, search, and in-order traversal — with live per-node balance factor badges, automatic imbalance detection, and the four rotations (LL, RR, LR, RL) animated as labeled steps. Double rotations (LR / RL) are split into their two single-rotation phases so you can follow each move. Side-by-side height comparison vs a plain BST on identical input, rotation-count statistics, cascading deletion rebalance, bulk insert, and shareable tree-state URLs. 100% client-side.
About AVL Tree Visualizer
Step-by-step visualization of self-balancing AVL tree operations — insert, delete, search, and in-order traversal — with live per-node balance factor badges, automatic imbalance detection, and the four rotations (LL, RR, LR, RL) animated as labeled steps. Double rotations (LR / RL) are split into their two single-rotation phases so you can follow each move. Side-by-side height comparison vs a plain BST on identical input, rotation-count statistics, cascading deletion rebalance, bulk insert, and shareable tree-state URLs. 100% client-side. Everything runs locally in your browser — your data never leaves your device.
How to use
- Enter your input in the tool above.
- Adjust any options to your preference.
- Use the Copy or Download buttons to save the result.
- Everything happens locally — your data never leaves your browser.
FAQ
How does the AVL tree visualizer work?
Every operation (insert, delete, search, traversal) is a JavaScript generator that yields a Step object on each comparison, height update, imbalance detection, or rotation. Each step carries a full snapshot of the tree, the active pivot node, balance factors for every node, the rotation type label (LL / RR / LR / RL), and running comparison + rotation counts — 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 comparison path, the imbalance pivot, and the rotation phases.
What are the four AVL rotation cases and how are they animated?
(1) LL — left-heavy with left-heavy child: one right rotation around the pivot. (2) RR — right-heavy with right-heavy child: one left rotation. (3) LR — left-heavy with right-heavy child: left-rotate the child first, then right-rotate the pivot (split into 2 phases). (4) RL — right-heavy with left-heavy child: right-rotate the child first, then left-rotate the pivot (split into 2 phases). The visualizer labels each phase so you can follow double rotations as two single rotations, just like in a textbook.
How is balance factor computed and what does it tell me?
Balance factor = height(left subtree) − height(right subtree). An AVL tree requires every node's balance factor to be in {−1, 0, +1}. When an insert or delete pushes a node's factor to ±2, the tree is imbalanced and the visualizer flags the pivot in red, shows its current factor, then applies the matching rotation. Every node displays its factor live so you can watch the imbalance propagate up the tree during cascading deletions.
How does AVL compare to a plain BST and to Red-Black trees?
On sorted input (1, 2, 3, 4, 5…), a plain BST degenerates into a linked list — O(n) height and O(n) lookup. AVL keeps the tree strictly balanced (|bf| ≤ 1), guaranteeing O(log n) operations. AVL is more rigidly balanced than Red-Black (which only guarantees no path is more than twice as long as another), so AVL does slightly more rotations on insert but offers faster lookups; RB does fewer rotations and is preferred for write-heavy workloads. The visualizer's sorted-input preset lets you watch AVL absorb a degenerate sequence cleanly.
What extra features does this tool have versus other AVL visualizers?
(1) Insert / delete / search / in-order traversal with animated comparison path. (2) All four rotations (LL / RR / LR / RL) animated and labeled, with double rotations split into their two phases. (3) Live per-node balance factor badges. (4) Imbalance detection with pivot highlighted in red. (5) Cascading deletion rebalance (walks up to root). (6) Rotation-count statistics per operation. (7) Bulk insert from a list. (8) Random-tree and sorted-input presets. (9) Reingold-Tilford-style SVG layout. (10) Step / play / pause / speed controls with reverse-step fidelity. (11) Side-by-side comparison vs plain BST (height / node count). (12) History (localStorage, last 20). (13) Shareable URL encoding the entire tree state. (14) Color legend. (15) Export step log as text. 100% client-side — no uploads, no ads.
Related tools
.bashrc / .zshrc Alias & Config Manager
Build shell aliases, functions, exports, and PATH edits in a visual editor, then export a clean, commented .aliases file sourced from both .bashrc and .zshrc — with shadowing detection against shell builtins and common CLI tools, function suggestions when args are needed, starter packs (git, docker, kubectl, navigation, safety, ls, dev, devops, data science), import of existing rc files, dedupe, history (localStorage), and shareable URL. 100% client-side.
Add / Subtract Date Calculator
Add or subtract years, months, weeks, days, hours, minutes and seconds from a starting date/time. Calendar-day or business-day mode with custom weekend + holiday list. Month-end policy toggle (clamp to last day vs overflow). Repeat/series mode (e.g. every 2 weeks x 10) with CSV export. Shareable URL. 100% client-side.
Age Calculator
Calculate exact age from a birth date in calendar years/months/days (no negative-day bugs) plus totals in months/weeks/days/hours/minutes/seconds. Next-birthday countdown with weekday. Feb-29 birthday policy toggle. Milestones (1,000 days, 10,000 days, 1 billion seconds). Zodiac sign + Chinese zodiac. Age gap comparison. Shareable URL. 100% client-side.