Plotly ScatterGL (Big Data)

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: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 testChart = document.getElementById('testChart');

var npoints = 30000;
var y = [];
for (var i = 0, l = npoints; i < l; i++) {
    y.push(Math.random())
};

var x = [];
for (var i = 0, l = npoints; i < l; i++) {
    x.push(i);
};

var t0 = performance.now();
Plotly.plot( 
	testChart, 
  [{
		type: 'scattergl',
    mode: 'markers',
    marker: { size: 1 },
    x: x,
    y: y 
  }], 
  { 
    margin: { t: 0 } 
  } 
);
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.");