Voronoi Scatterplot

An ES2015 fork of Step 2 - Voronoi Scatterplot - Tooltip attached to Voronoi grid from @NadiehBremer

babel script tag that allows us to use ES2015 syntax from ES2015 Sequences Sunburst

<script src="https://npmcdn.com/babel-core@5.8.34/browser.min.js"></script>

the nice voronoi path highlight-on-mouseover effect is inspired by martgnz‘s bl.ock Chatty Map

in script.js:

voronoiGroup.selectAll('path')
  // ...
  .on('mouseover', showTooltip)
  .on('mouseout', removeTooltip);

then

function showTooltip(d) {
  // ...

  // highlight the border of the current voronoi cell
    d3.select(`path.${d.CountryCode}`)
      .style('stroke', 'black')
      .style('stroke-opacity', 0.5)
      .style('stroke-width', 2);
}

and

function removeTooltip(d) {
  // ...

  // restore the border of the cell to its original color
  d3.select(`path.${d.CountryCode}`)
    .style('stroke', '#2074A0')
    .style('stroke-opacity', 0.3)
    .style('stroke-width', 1);
}

Original README.md from @NadiehBremer

This scatterplot is part of my blog on Using a D3 Voronoi grid to improve a chart’s interactive experience in which the tooltip and the event are both triggered by an invisible Voronoi grid that lies over the scatterplot. This is used to illustrate the fact that you still need one more step, and that is to attach the tooltip to the circle that represents the seed of each Voronoi cell, which you can see in the next example