How to use the visualizer

The four tree types

Binary search tree — the plain one. Every value goes left if it is smaller than the node and right if it is larger, until it reaches an empty spot. Fast when the values arrive jumbled; when they arrive sorted the tree becomes a stick and searching it is no better than scanning a list. That problem is why the other three exist.
AVL tree — stores a height on every node and keeps every subtree height-balanced. When an insertion pushes a node's balance to ±2, one rotation (or two, when the unbalanced node and its child lean opposite ways) puts it right.
Red-black tree — colours the nodes instead of measuring them. A new node arrives red; if that puts two reds in a row, the tree either recolours or rotates, depending on the colour of the parent's sibling.
2-3 tree — allows a node to hold two values and three children, so it never has to rotate. A full leaf splits and pushes its median up to the parent, which is how every leaf stays on the same level.

Running an insertion

Pick a tree type on the landing page — each opens its own page with just that type's controls and course examples, and a link back to choose another.
Type a value and insert it, or paste a whole comma-separated list to insert one after another. The course's own worked sequences load with one click.
Each insertion becomes a series of steps you can play, pause, step through, and scrub backwards — the comparisons on the way down, then the rebalancing, each with a sentence saying what is happening and why.
The plain binary search tree also supports removal: a leaf just goes, a node with one child is replaced by that child, and a node with two children is replaced by its inorder successor.
On the binary search tree you can also traverse it — pre-order, in-order, post-order, or level-order (breadth-first). Each walk lights the nodes up in the order it visits them and prints them in a strip under the tree; in-order, notably, prints a search tree's values in sorted order.

Scope

Insertion is the focus, because that is where balancing is decided. Removal from the AVL, red-black, and 2-3 trees is left to the course notes, as are the proofs of their height bounds.
Your values never leave the browser — see About & privacy.

The course notes behind this

Four tree types means four chapters. These are the pages this app draws, in the order the course teaches them — read them alongside it, since a picture of a rotation is not an argument for why the rotation is correct.

Introduction to trees — node, root, subtree, leaf, depth, height — the words every readout here uses without stopping to define them.
Introduction to BST — the ordering property, insertion and removal, and the four traversals. That is the whole BST half of this app, and its worked example loads here.
Introduction to augmented data structures — why balance is worth paying for: sorted input degenerates a BST into a stick and search falls to O(n). The sorted example here does exactly that, on screen.
Tree balance — perfectly balanced against height balanced, and the branch rule red-black trees keep. These are the definitions behind the balance factor on every AVL node.
AVL trees — the single and double rotations, worked. Loadable here as that page's example.
Red-black trees — the colour rules and the recolour-or-rotate fix-up. Loadable here as that page's example.
2-3 trees — splitting a full leaf and promoting the median upward. Loadable here as that page's example.