Plotly.js: Splom open items

[etpinard]

Follow-up from https://github.com/plotly/plotly.js/issues/2372, https://github.com/plotly/plotly.js/pull/2505 and https://github.com/plotly/plotly.js/pull/2527

Things that were left out

• [ ] Splom traces placed on overlaid axes are broken, see https://github.com/plotly/plotly.js/pull/2505#discussion_r181237788
• [ ] Multi-selection across subplot is disallowed. To do so, we would need to share selectedpoints info across multiple splom-generated subplots, see https://github.com/plotly/plotly.js/pull/2505#issuecomment-380855752
• [x] Relayout'ing grid style on hasOnlyLargeSploms: true with scattergl trace(s) fails to redraw scattergl trace(s), see https://github.com/plotly/plotly.js/issues/2562 FIXED in https://github.com/plotly/plotly.js/pull/3067

Things we could do, but would require some thought

• Add _sub-trace_ on the diagonal (e.g. with diagonal.mode: 'scattergl' || 'histogram' || 'box' || 'violin', see https://github.com/plotly/plotly.js/pull/2505#discussion_r177823962
• Add attribute in dimensions that could default the splom generated axes' style (e.g. dimensions[i].showgrid: false would remove grid lines from all axes corresponding to dimensions[i]). Edit: PR https://github.com/plotly/plotly.js/pull/2899 added dimensions[i].axis.type, it would be easy to add more attribute under that container.
• Make one single cartesian <g .draglayer> covering the whole plot area instead of multiple (12 I think) per subplot. This would speed up initial rendering (especially for splom, but also for all graphs with many subplots), make cross-subplot selections a little easier to manage, see https://github.com/plotly/plotly.js/pull/2505#discussion_r181237581
• optimize regl-line2d for grid data
• implement matching axes https://github.com/plotly/plotly.js/issues/1549
• Remove remaining O(n^2) SVG items. In addition to g.draglayer mentioned above, there are two categories I can see:
  
  
  
  • Subplot backgrounds rect.bg - These could be omitted entirely when plot_bgcolor matches paper_bgcolor (and both are fully opaque - which is true by default), otherwise perhaps we could move them into the WebGL canvas though @etpinard points out this may impact pan/zoom performance. UPDATE: optimized when plot and paper bgcolor match in https://github.com/plotly/plotly.js/pull/3057, possible future improvements in https://github.com/plotly/plotly.js/pull/3057#discussion_r222030211
  
  
  • Subplot groups .subplot.x<N>y<M> - normally only the ones with tick labels and titles have any visible content in them, but currently they all have some empty groups, an associated clipPath#clip<UID>x<N>y<M>plot, and a few <path d="M0,0"> elements, we should be able to avoid even creating the unused ones.
  
  

Related issues that would benefit splom performance:

• [x] faster axis autorange relayout: https://github.com/plotly/plotly.js/issues/2546
• [x] per-axis 'axrange' relayout: https://github.com/plotly/plotly.js/issues/2547
• [x] stash pts selections for pan: https://github.com/plotly/plotly.js/issues/2548
• speed up cartesian axis defaults: https://github.com/plotly/plotly.js/issues/2549
• [x] replacing getBoundingClientRect calls in Axes.doTicks https://github.com/plotly/plotly.js/issues/1988 - done in: https://github.com/plotly/plotly.js/pull/4165

[etpinard]

Pasting benchmarks from https://github.com/plotly/plotly.js/pull/2505#issuecomment-381665092 out for future reference:

---

Here are some first-render benchmarks with showupperhalf: false and diagonal.visible: false:

| # of dimensions | # of values per dimension | regl-line2d grid lines? | time [ms] |
| --------------------- | ---------------------------------- | -------------------- | ------------ |
| 10 | 20k | no | 400-500 |
| 20 | 5k | yes | 600-700 |
| 30 | 2k | yes | 900-1000 |
| 40 | 1k | yes | 1300-1400 |
| 50 | 800 | yes | 2000-2300 |

computed using:

var Nvars = /* fill this in */
var Nrows = /* fill this in */
var dims = []

for(var i = 0; i < Nvars; i++) {
  dims.push({values: []})

  for(var j = 0; j < Nrows; j++) {
     dims[i].values.push(Math.random())
  }
}

Plotly.purge(gd);

console.time('splom')
Plotly.newPlot(gd, [{
  type: 'splom',
  dimensions: dims,
  showupperhalf: false,
  diagonal: {visible: false},
}], {width: 2000, height: 2000})
console.timeEnd('splom')

[etpinard]

From @alexcjohnson 's https://github.com/plotly/plotly.js/pull/3057#discussion_r221411382, about speeding up lsInner:

overlappingDomain might itself be a heavy lift for a large number of subplots (am I reading this right that for NxN subplots this is O(N^4), ie O(N^2) tests per subplot???), all for the fairly unusual case of inset plots, or otherwise partially occluding subplots. Perhaps it would be worthwhile doing a faster check for whether overlappingDomain is even necessary to call, by looping over all x axes to see if any of their domains overlap, then the same over all y axes? That would only be O(N^2) to possibly (usually!) avoid O(N^4).

[sebastian-raubach]

Hi, I was wondering if there has been any progress on this issue since late 2018? Especially on the "Add sub-trace on the diagonal" functionality.
Thanks

[AniWar]

Hello , any updates for diagonal sub trace ? Would love to have this feature .