Three pastel hotels, three hash tables: linear probing, Robin Hood and cuckoo.
The same stream of guests (keys) checks into three hotels, each a real hash table whose rooms are slots, numbered up the building in a zigzag so the next slot is always the next door along the balcony or up the stairs. At the Linear Probing Inn guests walk on from their hashed room until one is free, and clusters grow; at the Robin Hood Hotel a guest further from home takes the room of a richer occupant, who moves on, so the worst walks shrink; at the Cuckoo Twin Towers every guest has one room in each tower, newcomers evict whoever is in their first-tower room, evictees hop to their other room, and an eviction loop forces a rehash with new hash functions. Every probe leaves footprints on the balcony, deletions use backward shifting instead of tombstones, and tables double past their load limit and halve when nearly empty. The tables update instantly and the animation is a timetable of walks, stair climbs, elevator rides and hops, with live load bars and probe-length histograms above each hotel.
Try it. Use + and - (or the arrow keys) to set how many guests to aim for, or Rush hour to add eight; click a lit window to check that guest out of all three hotels, and click the sky to bring in a few more. Fixed size (F) turns off resizing so you can push the load toward 100 percent and watch linear probing clusters merge. Hover a room to see its guest, their hashed room and lookup cost. A returns to autopilot, Space closes the front desk and left and right change the speed. On a phone one hotel fills the screen at a time: tap a card to switch.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build an animated comparison of hash table collision strategies with JavaScript and the HTML canvas element, drawn as a hotel where rooms are slots and guests are keys. 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.
- Draw two rows of 16 rooms, each a rounded rectangle with a door. The top row is a linear probing table and the bottom row a Robin Hood table.
- Every half second, hash a random key (1 to 999) with a small integer mixing function and insert it into both tables. In linear probing, step right from the hashed room (wrapping around) until a room is empty. In Robin Hood, do the same, but if the guest you are carrying is further from its home than the room's occupant, swap them and carry the occupant on instead.
- Draw each guest as a little colored figure walking from the hashed room to its final room, and leave a fading footprint in front of every room it checks.
- Show each table's load factor and average and worst probe length. Fill to about 90 percent, then remove random guests.
Once that works, make it beautiful:
- Add a third row for cuckoo hashing with two tables and two hash functions, where a newcomer evicts the occupant, who hops in an arc to their room in the other table.
- Turn the rows into isometric buildings, one floor per row, with balconies, windows that light up when a guest is inside, and a rooftop sign.
- Use backward-shift deletion instead of tombstones, and double the table when it passes its load limit.
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 probe length histograms, a fixed-size mode that pushes load toward 100 percent, or rehashing with new hash functions when cuckoo evictions loop.
