I feel like a scatterplot highlight should be the easiest god damn thing ever. The fact that it's this complicated seems like a clear indicator that something is broken, but I'm not sure what exactly. I might be inclined to blame the architecture of HTML/DOM?
But honestly, I don't see how those 2 lines
.on('mouseover', this.rolloverOn(args))
.on('mouseout', this.rolloverOff(args));
could be made easier. What is above is "simply" the construction of the underlying voronoi diagramFor a charting library, yes I would expect this to be easy. But to be fair, D3js is not a charting library. The OP here is showing their version of a charting library based off of D3js.
Remember, D3 = Data Driven Documents, which can be leveraged for extremely fast interactive visualizations
For further clarification here is the goal/definition from D3js.org:
"D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. For example, you can use D3 to generate an HTML table from an array of numbers. Or, use the same data to create an interactive SVG bar chart with smooth transitions and interaction."
A charting library wouldn't give you the flexibility to do this: http://bl.ocks.org/mbostock/d8e15a0ab7f85818a5bd or this: http://bost.ocks.org/mike/shuffle/
Edit: a must see are the creations from the man himself. Mike Bostock http://bl.ocks.org/mbostock
For both they are using D3's built-in voronoi function which will generate the appropriate interaction regions when given a list of points. These polygonal regions surround the given points and fill the graph, acting as large unmissable mouseover targets instead of the tiny points. It's really useful. https://github.com/mbostock/d3/wiki/Voronoi-Geom
More on voronoi tessalation http://en.wikipedia.org/wiki/Voronoi_diagram
1) building a Voronoi tessellation from the given points
2) at each mouse movement perform point-in-polygon queries on all polygons until found
3) rebuild Voronoi as data changes
or 1) at each mouse movement calculate distance-to-point for each point
2) select the shortestk-d trees sound closer to what you'd want to do cursor coordinates to scatter plot point lookups.
Multi-Line Graph https://github.com/mozilla/metrics-graphics/blob/master/js/m...
Point Graph (Scatterplot) https://github.com/mozilla/metrics-graphics/blob/master/js/m...