block by Fil f49b5cf943a0210212994aa5860ac4a8

Nadieh Bremer's Scatterplot with Voronoi - ported to d3.v4, and no SVG overlay

Full Screen

This is a D3.v4 port by Philippe Rivière of Nadieh Bremer‘s block: Step 6 - Final - Voronoi (Distance Limited Tooltip) Scatterplot.

In addition, we use d3.voronoi.find(x,y,radius) to locate the point, instead of relying on a SVG overlay of clipped circles.

This gives:

1) lazy computation of the Voronoi 2) other objects are allowed capture the mouse before svg.

—— 8X ——–


This scatterplot is part of the extension of my blog on Using a D3 Voronoi grid to improve a chart’s interactive experience. After writing that blog Franck Lebeau came with another version which uses large circles to define the tooltip region. I thought this was a great idea! But I made this variation on his code, because I felt that the extra code used in this example (versus the previous version 4) is more in line with the rest of the code.

The tooltip now reacts when you hover over an invisible large circular region around each circle.

You can find all of the steps here

forked from Fil‘s block: Step 6 - d3.v4 [UNLISTED]