D3 Examples - distance-limited Voronoi Interaction

distance-limited Voronoi Interaction

this iteration offers a few improvements and developer comforts:

convert to ES2015

lint, convert to Airbnb style

store data as json

name data file data.json

convert to d3v4

remove pym.js dependency

use d3-tip tooltips

remove jQuery dependency

abstract out dataset-specific variable names into configuration block

derive color domain from the data

in a future iteration, I'd like to:

hide Voronoi paths

add arrow to tooltip div

make tooltip snap to point

package this resuable chart as an npm module

Original README.md

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. Interactive zones would not be rendered in the final viz.

The implementation in this block uses a plugin I made (see d3-distanceLimitedVoronoi Github project) that computes the adequate interactive area around each point. The adequate path is: voronoï-cell INTERSECT max-distance-from-point. Others ways could be:

clip each Voronoi cell with a circle shape (cf. this block)

use JS to determine if the pointer is close enought to display the tooltip (cf. this block)

This third implementation of distance-limited voronoi cell is simpler than the 2 others because:

compared to the clipPath way, it doesn't requires extra clipPathes (dedicated definition, and bindings to each cell)

compared to the JS-based way, mouse interaction is easier (only mouseenter and mouseout, no mousemoved), and less intensive (no mousemove); nevertheless, it comes with the cost of computing the adequate path of each cell.

Acknowledgments to:

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html;charset=utf-8'/>
<title>Scatterplot with Distance-Limited Voronoi</title>
<script src='https://d3js.org/d3.v4.min.js'></script>
<script src='https://cdn.jsdelivr.net/gh/kcnarf/d3-distancelimitedvoronoi/d3v4/distance-limited-voronoi.js'></script>
<script src='d3-tip.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.10.3/babel.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;
    }
    .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;'>Distance-limited Voronoi - tooltip shown only if mouse is close enougth</h6>
            <div class='col-sm-9'>
                <div id='chart'>
          <svg></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>
  <script src='script.js' lang='babel' type='text/babel'></script>
</body>
</html>
    