Violin Plot Chart — Free HTML CSS JS Snippet

A violin plot shows the full shape of a numeric distribution for each group, not just a handful of summary numbers — the width of the "violin" at any height represents how common values near that height actually were in the underlying data. This snippet renders four such shapes for simulated server response-time samples across regions, computing every curve directly from raw data with a kernel density estimate (KDE), and overlays a compact quartile box and median line inside each violin for a quick numeric read alongside the full shape.

Why a violin plot beats a bar of averages

A bar chart of average response time per region collapses an entire distribution — which might be tightly clustered, widely spread, or skewed with a long tail of slow outliers — into one number, hiding exactly the information that matters for diagnosing performance issues. A box plot improves on this by showing quartiles and a median, but still only draws a handful of summary lines. A violin plot shows the *entire* density curve, so a bimodal distribution (two separate clusters of typical values), a long tail, or a sharp single peak are all immediately visible as shape differences, not just numbers a viewer has to interpret.

Kernel density estimation from raw samples

kde(samples, points, bandwidth) computes, for each candidate value along the y-axis, a smoothed estimate of how densely the raw samples cluster near that value. For every point being evaluated, it sums a Gaussian kernel (Math.exp(-0.5 * u * u), the bell-curve shape) centered on every individual sample, where u is the distance from the evaluation point to that sample scaled by the bandwidth, then normalizes the sum by the sample count and bandwidth so the result behaves like a proper probability density. A larger bandwidth smooths the curve more aggressively (blurring together nearby bumps); a smaller one hugs the raw data more tightly and can look noisier. The bandwidth here is derived per-group from that group's own value range ((max - min) / 9), so groups with wider spreads automatically get proportionally wider smoothing.

Turning a density curve into a symmetric violin outline

For each group, the code evaluates kde() at 60 evenly-spaced y-values spanning the shared y-axis range, then for each evaluated point computes a horizontal half-width proportional to that point's density relative to the group's own peak density (density[i] / maxDensity). Mirroring that half-width to the left and right of the group's center x-position, at every y-value, produces two point lists; joining the left list top-to-bottom, then the reversed right list bottom-to-top, and closing the path, draws one continuous, symmetric outline — the classic violin silhouette — as a single SVG <path> with fill-opacity for a soft, layered look.

Overlaying a box plot for exact quartiles

Because a density curve alone doesn't make it easy to read exact numbers, a small rectangle and a bold median line are drawn on top of each violin. quantile(sorted, q) implements linear-interpolation quantile calculation on the group's pre-sorted sample array — finding the fractional index for a given quantile q and interpolating between the two nearest actual samples — to compute the 25th percentile (q1), 75th percentile (q3), and 50th percentile (the median). The rectangle spans from q1 to q3 (the interquartile range, where the middle 50% of samples fall), and a short bold horizontal bar marks the exact median position, giving a precise numeric anchor inside the more qualitative violin shape.

Simulated data via a Box-Muller transform

Because the chart needs realistic-looking distributions rather than a flat uniform spread to be meaningful, gen() generates each group's 260 samples using a Box-Muller transform (Math.sqrt(-2 * ln(u)) * cos(2π * v) from two uniform random numbers u and v) to produce approximately normally-distributed random values, then adds a positive skew term so the resulting distribution has a realistic long tail toward slower response times, matching the shape real latency data usually takes.