Letter frequencies sprout into a Huffman tree drawn as a botanical plate.
Each symbol in the text becomes a seed weighted by its count, and the two lightest seeds keep fusing until one is left: the root of a Huffman tree. That seed sprouts into a plant laid out as a fan, with distance from the ground set by depth and branch thickness by weight, so frequent letters sit on broad leaves near the trunk and rare ones hang as berries at the tips of long twigs. Every twig is labelled 0 or 1, so the path to a leaf spells its codeword. A reading head walks the text, sending sap up each codeword path while the bits pour out below, and the header compares the total against 8-bit text and the entropy bound.
Try it. Click the plate and type to edit the text: the plant morphs as frequencies change. Hover a leaf to see its code, click a leaf to sow more of that letter, Enter plants the next text and Esc clears. Left alone, it replants a new text every so often.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a Huffman coding visualizer with JavaScript and the HTML canvas element, drawn as a plant growing out of the ground. 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 paper color and draw a ground line near the bottom.
- Hold a sample sentence in a string. Count how often each character appears.
- Build the Huffman tree: put every character in a list as a node weighted by its count, then repeatedly sort the list, remove the two lightest nodes, and push a new node whose weight is their sum and whose children are those two. The last node is the root. Break ties consistently so the tree is the same on every run.
- Walk the tree to assign codes: going to the left child adds a 0, going right adds a 1.
- Draw it upside down from the usual textbook picture: the root sits just above the ground, and each level climbs higher. Space the leaves left to right in tree order and put each internal node above the middle of its children. Connect parents to children with curves (bezierCurveTo), thicker for heavier nodes, and write the 0 or 1 beside each branch.
- Draw each leaf as a leaf shape sized by its count, with its character on it, and show the total bits used versus 8 bits per character.
Once that works, make it beautiful:
- Let the canvas take keyboard focus (tabindex) and rebuild the tree as you type, with Backspace to delete.
- Animate growth: branches extend from the root level by level, and leaves unfurl when their branch arrives.
- Highlight the path to a leaf on hover and show its code in a small label.
- Add a reading head that walks the text, lights the path for each character, and prints the bits it emits.
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 laying the tree out as a fan, comparing the total against the entropy of the text, or decoding a bitstream by walking the tree.
