Canvas scatterplot w/ colorpicking for mouse events. Renders lots of dots on a <canvas> for speed, but uses a hidden canvas with a color-to-data dictionary to get the value under a mouse event. Hover over some dots.
Using nonrectangular shapes creates the chance of weirdness from antialiasing when triggered on the very edge of a shape. If you wanted to prevent them entirely you could verify that the resulting data center point is within r pixels of the current mouse position or you could sample additional pixels near the event.
This approach handles layer order and weird shapes, but if your points are all tiny dots, a quadtree approach is probably faster and more effective.
See also: Needles, Haystacks, and the Canvas API, WebGL Beginner’s Guide - Picking