7 ms·

https://github.com/mozilla/metrics-graphics/blob/master/js/metricsgraphics.js#L1264 https://github.com/mozilla/metrics-graphics/blob/master/js/m... possibly

forrestthewoods 12y ago
Geez. I've been trying to learn d3 for a blog post and holy shit is it impossible to analyze. So much obfuscation. I might liken raw HTML SVG info to machine code and d3js to assembly. It's pretty nasty. 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?
- Gmo 12y ago
  yes d3.js is kind of an assembly for visualization and it's fine like that. 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 diagram
- bengali3 12y ago
  > I feel like a scatterplot highlight should be the easiest god damn thing ever. For 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 http://bl.ocks.org/mbostock/d8e15a0ab7f85818a5bd or this: http://bost.ocks.org/mike/shuffle/ http://bost.ocks.org/mike/shuffle/ Edit: a must see are the creations from the man himself. Mike Bostock http://bl.ocks.org/mbostock http://bl.ocks.org/mbostock
beauSD 12y ago
This does look like where they are generating the mouseover/highlight regions for the multi-line graphs. And the highlight regions for the scatterplot are being done here https://github.com/mozilla/metrics-graphics/blob/master/js/metricsgraphics.js#L1768 https://github.com/mozilla/metrics-graphics/blob/master/js/m... 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 https://github.com/mbostock/d3/wiki/Voronoi-Geom More on voronoi tessalation http://en.wikipedia.org/wiki/Voronoi_diagram http://en.wikipedia.org/wiki/Voronoi_diagram
- hamilton 12y ago
  Hi - author here. Yes, we use Voronoi + clipPaths to make these kinds of rollovers possible.
- jamesrom 12y ago
  It would be interesting to see the performance characteristics between 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 shortest
  - beauSD 12y ago
    Not sure if I'm misreading your step 2 description for the first strategy, but one of the great things about using this type of mouseover region is that each polygon is already tied to a single point - so there's no need to do any query for contained points on mouseover. The lookup time for contained points is constant.
    - alecbenzer 12y ago
      How do go from cursor coordinates to a polygon? Once you've done that, finding the the associated point in the scatter plot should be constant, but mapping from cursor to polygons in faster than linear time seems non-trivial. k-d trees sound closer to what you'd want to do cursor coordinates to scatter plot point lookups.

forrestthewoods 12y ago

Geez. I've been trying to learn d3 for a blog post and holy shit is it impossible to analyze. So much obfuscation. I might liken raw HTML SVG info to machine code and d3js to assembly. It's pretty nasty. 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?

Gmo 12y ago
yes d3.js is kind of an assembly for visualization and it's fine like that. 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 diagram
bengali3 12y ago
> I feel like a scatterplot highlight should be the easiest god damn thing ever. For 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 http://bl.ocks.org/mbostock/d8e15a0ab7f85818a5bd or this: http://bost.ocks.org/mike/shuffle/ http://bost.ocks.org/mike/shuffle/ Edit: a must see are the creations from the man himself. Mike Bostock http://bl.ocks.org/mbostock http://bl.ocks.org/mbostock

beauSD 12y ago

This does look like where they are generating the mouseover/highlight regions for the multi-line graphs. And the highlight regions for the scatterplot are being done here https://github.com/mozilla/metrics-graphics/blob/master/js/metricsgraphics.js#L1768 https://github.com/mozilla/metrics-graphics/blob/master/js/m... 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 https://github.com/mbostock/d3/wiki/Voronoi-Geom More on voronoi tessalation http://en.wikipedia.org/wiki/Voronoi_diagram http://en.wikipedia.org/wiki/Voronoi_diagram

hamilton 12y ago
Hi - author here. Yes, we use Voronoi + clipPaths to make these kinds of rollovers possible.
jamesrom 12y ago
It would be interesting to see the performance characteristics between 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 shortest
- beauSD 12y ago
  Not sure if I'm misreading your step 2 description for the first strategy, but one of the great things about using this type of mouseover region is that each polygon is already tied to a single point - so there's no need to do any query for contained points on mouseover. The lookup time for contained points is constant.
  - alecbenzer 12y ago
    How do go from cursor coordinates to a polygon? Once you've done that, finding the the associated point in the scatter plot should be constant, but mapping from cursor to polygons in faster than linear time seems non-trivial. k-d trees sound closer to what you'd want to do cursor coordinates to scatter plot point lookups.