A red-black or AVL tree hangs as a spring-physics mobile while a plain BST droops.
Each node is a weighted disc on a wire bar, with its left subtree hanging from one end and its right subtree from the other, and every bar tilts toward its heavier side, so balance is something you can see. The tree is a real red-black tree (every CLRS insertion and deletion case) or AVL tree (single and double rotations, rebalancing all the way up after deletes), written as generators that pause on each probe, recolor and rotation. Discs are damped springs hanging from their parents' bar ends and bars are torsion springs, so when a rotation reparents a subtree it gets a kick around the pivot and swings into its new place, while bar lengths come from subtree contours so branches never collide once they settle. Beside it, a plain BST receives the same keys and, fed them in order, droops into a long diagonal chain.
Try it. Click empty space to insert a key that belongs at that horizontal position, or click a disc to delete it. T switches between red-black and AVL, C toggles the plain BST comparison, O cycles the key order (ascending, random, zigzag), Space pauses the stream and the arrow keys change speed.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a self-balancing binary search tree visualizer with JavaScript and the HTML canvas element, drawn as a hanging mobile sculpture. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Make a canvas that fills the window, stays sharp on high-DPI screens (scale by devicePixelRatio), and resizes with the window. Paint it a warm off-white like a gallery wall.
- Implement an AVL tree with parent pointers: insert, height tracking, and left and right rotations, including the double rotation cases.
- Draw each node as a colored disc with its key, a thin horizontal wire bar through it, and its children hanging on strings from the two ends of the bar. Make each bar long enough for its two subtrees not to overlap (simplest version: half the width of the subtree times a spacing constant).
- Insert the keys 1, 2, 3 and so on, one every second. The tree stays balanced instead of becoming a chain.
- Instead of placing discs directly, give every disc a position and velocity and pull it toward its target with a damped spring, so the mobile swings when a rotation moves things.
Once that works, make it beautiful:
- Tilt each bar toward its heavier side based on the subtree sizes, so imbalance is visible as a lean.
- Show a plain unbalanced BST beside it receiving the same keys, and watch it droop into a long diagonal chain.
- Make the insertion step by step with a generator that yields after each probe and each rotation, and show a caption like 'rotate left at 12'.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as a red-black tree with recoloring, deletion with rebalancing, or a faint breeze and soft shadows on the wall.
