Step 2 - Voronoi Scatterplot - Tooltip attached to Voronoi grid

This scatterplot is step 2 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

You can find all of the steps here

<!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 attached to Voronoi cells</h6>
			<div class="col-sm-9">
				<div id="chart"></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>

Modified http://d3js.org/d3.v3.js to a secure url

Modified http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js to a secure url

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