SVG — Interactive Data-Driven Chart

Real SVG power: shapes generated from a JS data array, with hover tooltips and click handling. The trick is mapping screen pixels back into SVG user coordinates.

a chart built from data

Each bar is a <rect> created from one number in the array. Hover for a tooltip, click a bar to randomize that value, or shuffle all of them.

move over the chart…

The screen → user coordinate trick

const pt = svg.createSVGPoint();
pt.x = event.clientX; pt.y = event.clientY;
// invert the screen CTM to get USER coordinates
const u = pt.matrixTransform(svg.getScreenCTM().inverse());
// now u.x / u.y are in viewBox units, not pixels

Without this inverse-matrix step, your hit-testing breaks the moment the SVG is scaled by CSS — a classic bug. The readout above shows live user coordinates.