Plotly ScatterGL (Big Data, Size , Color)

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<p>
    Here's a simple Plotly plot - 
    <a href="http://bit.ly/1Or9igj">plotly.js documentation</a>
</p>

<!-- Plots go in blank <div> elements. 
    You can size them in the plot layout,
    or give the div a size as shown here.
<div id="testChart" style="width:100vw; height:calc(100vh - 100px);"></div>
-->
<div id="testChart" style="width:100%; height:100%;"></div>
<div id="testChart2" style="width:100%; height:100%;"></div>
<div id="testChart3" style="width:100%; height:100%;"></div>

JavaScript

// Some docs examples: https://plot.ly/javascript/line-and-scatter/
// More complex example: https://plot.ly/~chris/17389.embed

/* Speed results: (point count: first render, redraw, redraw 2):
500 points: 350ms, 38ms, 22ms
5000 points: 330ms, 66ms, 20ms
50000 points: 570ms, 75ms, 60ms
500000 points: 900ms, 400ms, 325ms
*/
var colorList = [
	"#006385", "#F06E75", "#90ed7d", "#f7a35c", "#8085e9",
  "#f15c80", "#e4d354", "#2b908f", "#f45b5b", "#91e8e1",
  "#5DA5DA", "#F06E75", "#F15854", "#B2912F", "#B276B2",
  "#DECF3F", "#FAA43A", "#4D4D4D", "#F17CB0", "#60BD68"
];

var testChart = document.getElementById('testChart');
var data = {
	x: [],
  y: [],
  color: [],
  symbol: [],
  size: []
};

var npoints = 8000000;
for (var i = 0, l = npoints; i < l; i++) {
    data.y.push(Math.random() * 5000)
    data.x.push(i);
    data.color.push(colorList[Math.floor(Math.random() * 11)]);
    data.size.push(5);    
    data.symbol.push('x');
};


var t0 = performance.now();
var createPlot = function( divId, xData, yData ) {
	Plotly.plot( 
    document.getElementById(divId), 
    [{
      type: 'scattergl',
      mode: 'markers',
      marker: { 
        symbol: data.symbol,
        //size: 1,
        //color: '#00BBBB'
        // Comment out size and color above, and comment in below to see WebGL errors.
        size: data.size,
        color: data.color
      },
      x: xData,
      y: yData 
    }], 
    { 
      margin: { t: 40, b:50, l:75, r:30 } 
    } 
  );
}

createPlot( "testChart", data.x, data.y );
//createPlot( "testChart2", data.x, data.y );

var t1 = performance.now();
console.log("Initial render took " + (t1 - t0) + " milliseconds.");

var t0 = performance.now();
//Plotly.redraw(testChart);

var t1 = performance.now();
//console.log("Call to redraw took " + (t1 - t0) + " milliseconds.");

var t0 = performance.now();
//Plotly.redraw(testChart);

var t1 = performance.now();
//console.log("Call 2 to redraw took " + (t1 - t0) + " milliseconds.");