Improving SVG chart interactivity with Voronoi diagrams

Scatter plots are a fun way to visualize data, showing both the relationship between two variables and the distribution of data points. And they're reasonably trivial to create in web-friendly SVG (especially if you get a library like D3.js involved). One issue, though, is hover interactions.

I've made so many graphs that include hover-triggered tooltips, and the sheer precision required to target those points with a cursor can be infuriating. You can solve this UX problem by making the points (and thus the hover-targets) bigger, but that inteferes with the design of the chart as a whole. For charts with complex datasets, it's often not feasible to make the points big enough to be easily targeted.

When I'm building charts like these I'm using SVG, so there are plenty of options to try. One approach is to really dive into the "hitbox" analogy from video-games. The visual part of the datapoint doesn't have to be the only part you can target with the mouse!

In video games, hitbox is a term used to describe the area in which a character can be hit by an attack. While a character's appearance can be a complex shape, the hitbox is often much simpler; a primitive circle or rectangle that roughly covers the area of the character.

Leave a Comment