distance-limited Voronoi Interaction

This block is based on Step 3 - Voronoi Scatterplot - Tooltip attached to circle from @NadiehBremer

The Voronoi technics (used to improve interactive experience) is something I like. But I'm quite confused when the mouse is far away from points/subjectsOfMatter. In the original example, this situation arises in the viz's top-left and bottom-right corners.

This block attempts to overcome this issue by:

still using the Voronoi partition to identifiy the closest point/subjectOfMmatter when they are close to each others
and, checking if the distance from the point to the mouse is close enought (max distance checking)

For the sake of illustration, interactive areas appear in (very) light blue. Voronoï cells and interactive zones would not be rendered in the final viz.

The implementation in this block is javascript-based (cf. function 'mousemoved'). Other ways could be:

clip each Voronoï cell with a circle shape (cf. this block)
produce adequate path for each limited Voronoï cell (adequate path = path corresponding to (voronoï cell INTERSECT max-distance-from-point circle); cf. this block)

Acknowledgments to:

D3.js (v4-beta)
blockbuilder.org
Step 3 - Voronoi Scatterplot - Tooltip attached to circle

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<title>Scatterplot with Voronoi</title>

<script src="https://d3js.org/d3.v3.js"></script>

<script src="pym.min.js"></script>
	
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
	
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
	
	
	<link href='https://fonts.googleapis.com/css?family=Open+Sans:700,400,300' rel='stylesheet' type='text/css'>
	  <style>
		body {
		  font-family: 'Open Sans', sans-serif;
		  font-size: 12px;
		  font-weight: 400;
		  color: #525252;
		  text-align: center;
		}
		
		html, body { 
			width:auto; 
			height:auto; 
		}
		
		.axis path,
		.axis line {
			fill: none;
			stroke: #B3B3B3;
			shape-rendering: crispEdges;
		}
		.axis text {
			font-size: 10px;
			fill: #6B6B6B;
		}
		
		.popover {
			pointer-events: none;
		}

.legendTitle {
			fill: #1A1A1A;
			color: #1A1A1A;
			text-anchor: middle;
			font-size: 10px;
		}

.legendText {
			fill: #949494;
			text-anchor: start;
			font-size: 9px;
		}
		
		@media (min-width: 500px) {
		  .col-sm-3, .col-sm-9 {
			float: left;
		  }
		  .col-sm-9 {
			width: 75%;
		  }
		  .col-sm-3 {
			width: 25%;
		  }
		}
	  </style>
  </head>
  <body>

<div id="cont" class="container-fluid text-center">
		<div class="row scatter">
			<h5 style="color: #3B3B3B;">Life expectancy versus GDP per Capita</h5>
			<h6 style="color: #A6A6A6;">Voronoi - tooltip shown only if mouse is close enougth</h6>
			<div class="col-sm-9">
				<div id="chart">
          <svg>
            <defs>
              <clippath id="global-cut-off">
              </clippath>
            </defs>
          </svg>
        </div>
			</div>
			<div id = "legend" class="col-sm-3">
				<div class="legendTitle" style="font-size: 12px;">REGION</div>
				<div id="legend"></div>
			</div>
		</div>
	</div>

https://d3js.org/d3.v3.js

https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js