Parallel Coordinates Chart — Free HTML CSS JS Snippet

A parallel coordinates chart plots several numeric dimensions as vertical axes placed side by side, and represents each data row as a single polyline that crosses every axis at its corresponding value. Unlike a scatter plot, which can only show two (or with size and color, four) dimensions at once, a parallel coordinates chart scales to many more dimensions in one static view — this snippet compares five laptop specs (price, battery life, weight, performance score, and screen size) across five products using nothing but hand-drawn inline SVG and vanilla JavaScript.

Independent scales per axis via min-max normalization

Each axis in AXES defines its own min and max — price ranges from 700 to 2600 dollars while screen size ranges from 12 to 17 inches, wildly different scales that would be meaningless plotted against a single shared y-axis. normalize(axis, value) converts any raw value into a 0-to-1 fraction of that axis's own range: (value - axis.min) / (axis.max - axis.min), clamped to [0, 1] in case a data point falls outside the configured bounds. valueY() then maps that 0-to-1 fraction onto the chart's actual pixel height, so every axis independently spans the same vertical pixel range regardless of its real-world units — this is what makes wildly different metrics visually comparable side by side.

Handling axes where "lower is better"

Weight is configured with invert: true, because for weight (unlike performance or battery life) a lower value is the more desirable one. normalize() checks this flag and flips the fraction (1 - t) before it's used, so the top of the weight axis always represents the *lightest* laptop rather than the heaviest — keeping the visual convention "up is good" consistent across every axis even though the underlying numeric direction differs per metric. draw()'s tick-label loop performs the same inversion in reverse when computing which raw value to print at each gridline position, so the printed numbers stay correct regardless of the flag.

Building each row's polyline

buildPath(row) walks the AXES array once per data row, computing an SVG path command for each axis in order — M (move-to) for the first point and L (line-to) for every subsequent one — using axisX(i) for the horizontal position (axes are evenly spaced by index) and valueY(axis, row[axis.key]) for the vertical position on that axis. The resulting path string, like M 46 120 L 195 80 L 344 210 ..., is assigned directly to an SVG <path>'s d attribute, producing one continuous line per data row that crosses every axis exactly once.

Hover-to-isolate interaction

With five overlapping semi-transparent lines, picking out one specific item's path across all axes is hard by eye alone. Each <path> and its matching legend entry share a mouseenter/mouseleave pair wired to a shared setActive(name) function: when a name is active, every other line and its axis dots gain a .dim class (dropping opacity to near-zero) while the hovered line gains .active (full opacity, thicker stroke), and the matching legend swatch highlights too. This turns an otherwise noisy tangle of lines into a chart where any single item's full profile across all five dimensions can be traced instantly by hovering either its line or its legend entry.

Per-axis tick labels and vertex tooltips

Three tick labels (min, midpoint, max) are printed beside each axis by reversing the normalization math for t = 0, 0.5, 1, so the actual units (dollars, hours, kilograms, and so on) stay readable next to each axis rather than requiring a separate legend for scale. Every vertex on every line additionally carries a small <circle> marker with a native SVG <title> tooltip reporting the exact row name, axis label, and value on hover, giving precise numbers on demand without cluttering the chart by default.