smushed-voronoi
Three charts show how weighted Voronoi diagrams change pointer hitboxes for scatterplots. Each chart’s Voronoi cells, colored by series, respond to a slider that adjusts the X-to-Y distance ratio between 1 and 100. The code uses `d3.voronoi()` to compute cells, `d3.drag()` for moving points, and a custom `calcXY` function to weight dimensions. The interaction updates cell geometry and highlights the nearest point to the cursor in real time.
AI-generated descriptionWhile reading the documentation for plot's new pointer feature, I noticed an fun trick:
“One-dimensional” is a slight misnomer: the pointerX and pointerY transforms consider distance in both dimensions, but the distance along the non-dominant dimension is divided by 100.
Adjust the slider to see how different weights change the hitbox. With the default weight of 100, this turns into an almost lexicographic sort — on the Weight X chart, multiple points share the same X position, so the Y position is used as a tiebreaker. When the points aren't aligned, like on the Weight Y chart, selecting a given point can be fiddly. Using a weight of 100 instead of a strict lexicographic sort makes it possible to still select a point by mousing directly over it.
Note: Voronoi diagrams look cool but are almost never the most efficient way of adding a hover effect.