EDIT: I’ve updated this tutorial in August 2016 when Franck Lebeau came with a great improvement on the final step
In this tutorial, I’ll show you how you can add an invisible Voronoi grid over a scatterplot which will improve the experience of the viewer when hovering over the plot.
I’ve taken a dataset from the Worldbank database that contains the total GDP & GDP per capita (current US $) and the life expectancy at birth for all countries in the World. I choose these indicators because they are known for most countries in the world. I just needed a dataset with a few hundred datapoints to have a nicely filled scatterplot, so using something with countries suffices (just as a note, the numbers are from 2010).
In the example below you can see the end result that we are after: a scatterplot with a tooltip visible on a hover or mouseover event. There are also some extra elements that are not truly necessary but make the scatterplot easier to play with: lines attached to the hovered over circle & selecting a region by hovering over the legend (the legend is only visible for non-mobile viewers, sorry).
Notice how your mouse does not necessarily need to be placed over a circle to see a tooltip. As soon as your mouse comes reasonably close to one of the circles, there will already be a tooltip associated with the country that is closest to the mouse.