Step 3 - Voronoi Scatterplot - Tooltip attached to circle

This scatterplot is step 3 of my blog on Using a D3 Voronoi grid to improve a chart's interactive experience in which the tooltip is attached to the circle while the event is triggered by an invisible Voronoi grid that lies over the scatterplot

You can find all of the steps here

forked from nbremer's block: 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 attached to circles</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