D3 Examples - Step 1 - Voronoi Scatterplot - Simple scatterplot with no Voronoi

Step 1 - Voronoi Scatterplot - Simple scatterplot with no Voronoi

This scatterplot is step 1 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 the actual circles, no Voronoi is attached in the starting example. This is used to illustrate the fact that it's actually rather hard to mouse over each of the small circles. In the next examples, an invisible Voronoi grid is used to trigger the event that improves UX. You can see the final result here

You can find all of the steps here

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>Scatterplot with Voronoi</title>
​
    <!-- D3.js -->  
    <script src="https://d3js.org/d3.v3.js"></script>
    
    <!-- Pym.js - iframe height handler for the Blog -->
    <script src="pym.min.js"></script>
    
    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    
    <!-- Open Sans & CSS -->
    <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;">No 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>
​
    <script src="worldbank.js"></script>
    <script src="script.js"></script>
    
  </body>
</html>
    