Huffman coding visualiser

Problem

Huffman coding is usually taught as a finished tree in a textbook diagram. The part that actually explains the algorithm — the order in which nodes merge — is exactly the part a static diagram cannot show, and the part people got stuck on when I tried to talk them through it. The comparison between coders has the same problem: it arrives as a finished table, which settles the question without explaining it.

Approach

Everything is computed in the browser and rebuilt on every keystroke, so the input is the control rather than a form to submit. The tree can be read by depth or flattened; beside it the codebook lists every symbol with its count, share, assigned code and bit length. A row of statistics puts the encoded size against fixed width, the average code length and the entropy of the source, so “is this any good?” is answered on the page instead of on paper. Huffman, Shannon–Fano, arithmetic, LZW, LZ77 and RLE all run against the same text, and the sample phrases are picked to expose where they diverge: a skewed distribution, an even split, long runs, DNA.

Result

A single page that turns any phrase into its encoding, the structure that produced it and the numbers that justify it, with nothing to install. Building the explanation rather than repeating it is usually the better trade: it scales past the one conversation.

Walkthrough