Canvas scatterplot with quadtree

Canvas scatterplot w/ quadtree for point picking on hover, per: https://twitter.com/mbostock/status/733317794419212288

If you don't want the full Voronoi effect because your chart has some big dead zones, you could add a distance threshold and only trigger the highlighting when the nearest point is within that distance.

If you need behavior that more closely mimics mouse/touch because your shapes have significant dimensions or their layer order matters, you could try colorpicking instead.

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  margin: 0;
  padding: 0;
  font: 12px sans-serif;
}

path,
line {
  shape-rendering: crispEdges;
}

div,
svg,
canvas {
  position: absolute;
}

svg {
  pointer-events: none;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  stroke-width: 1px;
}

circle {
  stroke-width: 4px;
  stroke: #000;
  fill: none;
}

.hidden {
  display: none;
}

</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script>

var margin = {top: 20, right: 10, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var svg = d3.select("body").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + " " + margin.top + ")");

var factory = d3.geom.quadtree()
  .extent([
    [0, 0],
    [width, height]
  ]);

var x = d3.scale.linear()
  .range([0, width]);

var y = d3.scale.linear()
  .range([height, 0]);

var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom");

var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left");

var xg = svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")");

var yg = svg.append("g")
  .attr("class", "y axis");

var chartArea = d3.select("body").append("div")
  .style("left", margin.left + "px")
  .style("top", margin.top + "px");

var canvas = chartArea.append("canvas")
  .attr("width", width)
  .attr("height", height);

var context = canvas.node().getContext("2d");

context.fillStyle = "#f0f";

// Layer on top of canvas, example of selection details
var highlight = chartArea.append("svg")
  .attr("width", width)
  .attr("height", height)
    .append("circle")
      .attr("r", 7)
      .classed("hidden", true);

redraw();

function redraw() {

// Randomize the scale
  var scale = 1 + Math.floor(Math.random() * 10);

// Redraw axes
  x.domain([0, scale]);
  y.domain([0, scale]);
  xg.call(xAxis);
  yg.call(yAxis);

var points = randomPoints(scale);

var tree = factory(points);

// Update canvas
  context.clearRect(0, 0, width, height);

points.forEach(function(p,i){

context.beginPath();
    context.arc(x(p[0]), y(p[1]), 5, 0, 2 * Math.PI);
    context.fill();

});

canvas.on("mousemove",function(){

var mouse = d3.mouse(this),
        closest = tree.find([x.invert(mouse[0]), y.invert(mouse[1])]);

highlight.attr("cx", x(closest[0]))
      .attr("cy", y(closest[1]));

});

canvas.on("mouseover",function(){
    highlight.classed("hidden", false);
  });

canvas.on("mouseout",function(){
    highlight.classed("hidden", true);
  });

}

function randomPoints(scale) {

// Get points
  return d3.range(1000).map(function(d){

return [
      Math.random() * scale,
      Math.random() * scale
    ];

});

}

</script>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js