Outlier slows down zooming in scattergl

説明

I have large data sets, which have a fat tail, i.e. looks like having an outlier.
I use scattergl aiming for fast zooming. As shown in https://plotly.com/javascript/webgl-vs-svg
or in the example below, one million points can be done. However, if one point is set as an outlier, then zooming becomes very
slow. I don't understand this, and spent quite some time to pin down the problem.

https://jsfiddle.net/fasmu943

<!DOCTYPE html>
<html>
<div id="plotly-div1"></div>
<div id="plotly-div2"></div>

<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
<script>
function gaussianRand() {
    var rand = 0
    for (var i=0; i < 3; ++i) {
        rand += Math.random()
    }
    return (rand / 3) - 0.5
}

function plot(y, divnum){
   trace1 = {
      type: "scattergl",
      y: y,
   }
   layout = {
      height: 250,
      margin: {l: 40, r: 10, b: 30, t: 10}
   }
   Plotly.plot('plotly-div'+divnum, {
      data: [trace1],
      layout: layout,
   })
}

Y = []
for (var i=0; i < 1000000; i++) {
    Y.push(gaussianRand())
}

plot(Y, 1)

Y[800000] = 100.   // adding an outlier slows down zoom

plot(Y, 2)

delete Y

</script>
</html>

はじめの一歩

issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。

着手することを issue にコメントします — 二人が同じ作業をするのを防げます。

リポジトリをフォークし、ブランチを切って変更します。

issue 番号を参照したプルリクエストを送ります。

調査の方向性

まず、リンクされた JSFiddle の再現例を実行し、100万点の scattergl データについて、単一の外れ値がある場合とない場合のズームを比較します。例によって示唆される scattergl のズーム経路と WebGL の動作を調査します。外れ値が1つ存在してもズームのパフォーマンスが大幅に低下しなくなれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック

javascript

領域

data-visualization, performance

issue の種類

バグ

難易度

4/5

見積もり時間

3〜5日

活発さ

停滞

明瞭さ

おおむね明確

初心者へのやさしさ

35/100

説明

コントリビューションガイド

はじめの一歩

調査の方向性

評価

新しい issue をメールで受け取る