title: D3.js mouseovers on html5 canvas scatter plot
body: <p>Let's say we draw our scatter plot not with SVG but with canvas.</p>
  
  <p>So something like:</p>
  
  <pre><code>    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),
          colors = {};
  
      // Update canvas
      context.clearRect(0, 0, width, height);
      picker.clearRect(0, 0, width, height);
  
      points.forEach(function(p,i){
  
        // Space out the colors a bit
        var color = getColor(i * 1000 + 1);
        colors[color] = p;
        picker.fillStyle = "rgb(" + color + ")";
  
        context.beginPath();
        picker.beginPath();
  
        context.arc(x(p[0]), y(p[1]), 10, 0, 2 * Math.PI);
        picker.arc(x(p[0]), y(p[1]), 5, 0, 2 * Math.PI);
  
        context.fill();
        picker.fill();
  
      });
  </code></pre>
  
  <p>Now how would we pass data into a mouseover event, say, to draw a tooltip?</p>
  
  <p>The examples I've seen for tooltips all take for granted that you are handling an event with data bound to an element moused-over. </p>
  
  <p>But what about for canvas?</p>
  
  <p>I assume you'll need to use <code>d3.bisector</code> or something similar based on the x y coordinates of the mouse event.</p>