Step 4 - Voronoi Scatterplot - Extra interactions

This scatterplot is step 4 of my blog on Using a D3 Voronoi grid to improve a chart's interactive experience in which the tooltip is attached to the circles while the event is triggered by an invisible Voronoi grid that lies over the scatterplot. It also has some other features such as a filtering function when clicking on a region in the legend

You can find all of the steps here

forked from nbremer's block: Step 4 - Voronoi Scatterplot - Extra interactions

<!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;
		}
		
		.legendCircle {
			stroke-width:1;
			stroke:#999;
			stroke-dasharray:2 2;
			fill:none;
		}

.legendLine {
			stroke-width: 1;
			stroke: #D1D1D1;
			shape-rendering: crispEdges;
		}

.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 - Final</h6>
			<div class="col-sm-9">
				<div id="chart"></div>
			</div>
			<div id = "legend" class="col-sm-3" style="padding-right: 0px; padding-left: 0px;">
				<div class="legendTitle" style="font-size: 12px;">REGION</div>
				<div class="legendText" style="font-size: 11px; color: #BABABA;">click to select all countries within a 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