Histogram — HTML CSS JS SVG Histogram (No Library)

A histogram answers "how is this data distributed?" — it bins a set of raw measurements into ranges and shows how many values fall in each, revealing the shape (normal, skewed, bimodal) that a list of numbers hides. This snippet builds a real histogram in plain HTML, CSS, SVG, and vanilla JavaScript: it bins raw data itself, lets you change the bin count live, and draws adjoining bars with hover tooltips — no charting library.

Binning is the actual work

Unlike a bar chart (where you supply pre-aggregated values), a histogram takes *raw* numbers and computes the buckets. bin(count) finds the data's min and max, divides that range into equal-width bins, then drops each value into its bin by index (floor((v − min) / width)), with the maximum value clamped into the last bin so the top edge isn't lost. The output is an array of { lo, hi, n } — the frequency per range. This binning logic is what makes it a histogram rather than a bar chart, and it's the part people get subtly wrong (off-by-one at the upper edge).

Adjustable bin count

The number of bins dramatically changes a histogram's story — too few hides structure, too many turns it into noise. A selector lets you switch between 8, 12, and 20 bins and re-bins live, so you can find the resolution that reveals the distribution's real shape. Re-binning recomputes everything from the raw data, so the bars, scaling, and axis all update together.

Adjoining bars, scaled to the tallest bin

Histogram bars touch (unlike a categorical bar chart's gapped bars) because the x-axis is a continuous range, not discrete categories — the snippet draws them edge-to-edge with only a hairline separation. Each bar's height is its count as a fraction of the busiest bin, drawn as an SVG rect from the baseline up, with gridlines behind for reading frequencies.

Tooltips with the range and count

Hovering a bar shows its value range and exact count ("165–172ms: 9"), positioned at the cursor via getBoundingClientRect, with one delegated mousemove listener on the SVG. The range labels come from the bin edges, so the reader sees exactly which values each bar represents — essential for a histogram, where the bar's position encodes a range rather than a single label.

Data-driven and drop-in

Point it at any array of raw numbers — response times, ages, scores, prices — and it bins and draws the distribution. Because it's dependency-free SVG, it's crisp at any size and a clear reference for the binning algorithm and frequency scaling that underpin every histogram and distribution chart. One thing worth noting if your raw values include outliers: equal-width binning (used here) puts a handful of extreme values into mostly-empty bins out at the edges, stretching the range and squashing the interesting part of the distribution into fewer bins — for heavily skewed data, computing bin edges over a clipped percentile range instead of the true min/max usually tells a clearer story.