Slope Chart — HTML CSS JS Slopegraph (No Library)

A slope chart (or slopegraph, popularised by Edward Tufte) compares two points in time by drawing a line for each category between its before and after value on two parallel axes. The slope of each line — up, down, steep, flat — instantly communicates the direction and size of change, and crossings show rank shifts. This snippet builds it in plain HTML, CSS, SVG, and vanilla JavaScript, with labelled endpoints and hover focus — no charting library.

Two axes, one line per category

The chart has two vertical axes — left for the "before" period, right for "after" — and each category is a single line connecting its two values, with a dot at each end. A line that climbs rose; one that falls dropped; a steep line changed a lot. This direct encoding of change as slope is what a slopegraph does better than a grouped bar chart or two pies: the eye reads the trend without comparing bar heights across a gap.

A shared scale for honest slopes

Both axes share one scale computed from the combined min and max of all values, so a slope's steepness genuinely reflects the magnitude of change and lines are comparable across categories. The y() function maps each value to a pixel position on that shared range (inverted for SVG). Using one scale for both columns is essential — separate scales would make the slopes meaningless.

Endpoints labelled on both sides

Each line is labelled at both ends: the category name and its before value on the left, its after value and name on the right. Labelling both endpoints (rather than relying on a legend) lets the reader follow any line across without losing track of which is which — the convention that makes a slopegraph readable even with crossing lines.

Hover to focus

Hovering a line dims all the others and thickens the focused one, with a tooltip showing the exact change in points. This focus-and-dim interaction is what tames a busy slope chart: when several lines cross, hovering isolates the one you care about so you can trace it cleanly. The whole row (line, dots, labels) is one SVG group, so it highlights together.

Data-driven and drop-in

It renders from a DATA array of { name, before, after, color }. Swap in any two-period comparison — market share, rankings, prices, survey results across two years — and the slopes, scale, and labels follow. It is a clear, dependency-free reference for slopegraph construction: shared-scale endpoints, connecting lines, and focus interaction. A slope chart only scales gracefully to a dozen or so categories before the left and right labels start overlapping vertically — past that point, either label only the lines a viewer is most likely to care about (the biggest movers) and let the rest go unlabeled until hovered, or switch to small multiples grouping related categories into separate, less crowded slope charts.