Bloom Filter Visualizer — Free HTML CSS JS Snippet

A Bloom filter is almost always explained with the caveat "it can have false positives" tacked on as an afterthought, as if that were a minor footnote rather than the entire reason the data structure exists. This snippet does not just claim a false positive is possible — it seeds the filter with three specific words, chosen because they provably collide with a fourth word that was never added, so checking that fourth word produces a real, reproducible false positive every single time you load the page.

The bit array: 32 boxes, all starting at zero

The filter's entire state is a plain JavaScript array, bits = new Array(32).fill(0), rendered as 32 small boxes in an 8-column grid. Nothing else backs the filter — no list of added words is consulted when answering "might this be in the set," only these 32 bits. (A separate addedWords Set does exist in the code, but it is used only to label results for teaching purposes — a real Bloom filter has no such ground truth to check against, which is exactly why false positives are invisible to the filter itself.)

Three small, genuinely distinct hash functions

hash1 sums each character code multiplied by 7 and takes the result mod 32 on every step. hash2 is a djb2-style rolling hash (h = h * 33 + charCode, mod 32 each iteration to keep numbers small). hash3 multiplies the running total by 131 and adds both the character code and its index, mod 32. Because each function combines character codes differently — different multiplier, different accumulation order, one of them index-sensitive — they produce different-looking bit positions for the same word, which is the entire point of using more than one hash function: three independent chances to distinguish two different words, instead of one.

Adding a word: three bits, flipped one at a time

addWord(word) computes all three hash positions up front, then flips each corresponding bit from 0 to 1 with a short pulse animation and a 260ms pause between them, so you can watch each hash function fire in sequence rather than all three positions lighting up simultaneously. Once a bit is set to 1 it never goes back to 0 in this snippet — standard Bloom filters cannot support deletion without additional structure (like a counting Bloom filter), because a single bit can be shared by multiple words' hash positions, and this snippet's bit array makes that sharing directly visible.

Checking a word: all three must be 1, or it's a guaranteed no

checkWord(word) computes the same three hash positions and checks each one's current bit value in order, stopping the moment it finds a 0. If any of the three positions is unset, the result is "definitely NOT in the set" — a Bloom filter can say this with total certainty, because a word that was genuinely added would have set all three of its bits, and bits are never cleared. If all three positions are 1, the result is only "possibly in the set," never "definitely" — and this snippet distinguishes the two ways that can happen: the word really was added (checked against the internal addedWords set purely for the demo's benefit), or it was never added and just happens to hash to three positions that other words already filled in.

The guaranteed false positive: apple, banana, cherry, and mango

On load, this snippet automatically adds three words — apple, banana, cherry — which between them set bit positions 30, 23, 20, 7, 6, 24, 27, 18, and 12. The word "mango" was deliberately chosen because, run through the exact same three hash functions, it also lands on positions 30, 23, and 20 — precisely the three bits that "apple" already set. Check "mango" and every one of its three required bits reads 1, so the filter reports "possibly in the set," even though mango was never added. This is not a scripted animation faking a false positive; it is the real output of the real hash functions on real input, which is why checking "kiwi" (hash positions 12, 25, 26) correctly returns "definitely NOT in the set" instead — position 12 is set from "cherry," but 25 and 26 are still zero, and one unset bit is all it takes to rule a word out with certainty.