HomeAlgorithms & AIAVL Tree Rotations Explained

🌳 AVL Tree Rotations Explained

Interactive self-balancing binary search tree rendered in 3D that rotates nodes as values are inserted or deleted, with controls to insert random keys and watch left, right and left-right rotations trigger to keep the tree balanced.

Algorithms & AI3DModerate60 FPS
avl-tree-explained-lab ↗ Open standalone

A self-balancing binary search tree rendered in 3D: every node's color reflects its live balance factor, and inserting or deleting a key triggers left, right or left-right/right-left rotations that visibly re-arrange the tree to keep it balanced.

🔬 What It Demonstrates

Each node tracks the height difference between its left and right subtrees (its balance factor). When an insert or delete pushes that value past ±1, the tree rotates nodes around the offending pivot, and the rotation log records exactly which rotation ran and where.

🎮 How to Use

Click "Insert random" or "Delete random" to modify the tree one key at a time, or switch on Auto-build to watch a continuous stream of insertions and deletions rebalance the tree on its own. Drag to orbit, scroll to zoom.

💡 Did You Know?

AVL trees, published in 1962 by Adelson-Velsky and Landis, were the first self-balancing binary search tree — guaranteeing O(log n) operations regardless of insertion order, decades before red-black trees became the default in most standard libraries.

⚙ Under the hood

Interactive self-balancing binary search tree rendered in 3D that rotates nodes as values are inserted or deleted, with controls to insert random keys and watch left, right and left-right rotations trigger to keep the tree balanced.

avl-treebinary-search-treeself-balancing-treesrotationsdata-structuresalgorithms

3D · Three.js / WebGL renderer · 60 FPS target · runs fully client-side, no install

What did you find?

Add reproduction steps (optional)