Run results for: ScatterGL_new

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

Browser: Chrome 56

Operating system: Windows

Device Platform: Other

Date tested: 7 years ago

Test name	Executions per second
10051	2.3 Ops/sec
100051	0.8 Ops/sec

HTML Preparation code:

<script src="https://cdn.rawgit.com/plotly/plotly.js/gl-scatter2d-sdf/dist/plotly.min.js"></script>
<div id="testChart0" style="width:100%; height:100%;"></div>
<div id="testChart1" style="width:100%; height:100%;"></div>
<div id="testChart2" style="width:100%; height:100%;"></div>
<div id="testChart3" style="width:100%; height:100%;"></div>
<div id="testChart4" style="width:100%; height:100%;"></div>
<div id="testChart5" style="width:100%; height:100%;"></div>

Script Preparation code:

// setup

var colorList = [
	"#006385", "#F06E75", "#90ed7d", "#f7a35c", "#8085e9",
  "#f15c80", "#e4d354", "#2b908f", "#f45b5b", "#91e8e1",
  "#5DA5DA", "#F06E75", "#F15854", "#B2912F", "#B276B2",
  "#DECF3F", "#FAA43A", "#4D4D4D", "#F17CB0", "#60BD68"
];

var createData = function( colorIndex, npoints ) {
  var data = {
    x: [],
    y: [],
    color: [],
    symbol: [],
    size: []
  };
  
  for (var i = 0, l = npoints; i < l; i++) {
      data.y.push( Math.random() * 5000 );
      data.x.push(i);
      data.color.push( colorList[ colorIndex ] );
      data.size.push( 2 );
      data.symbol.push('x');
  };
  
  return data;
};

var createTrace = function( traceIndex, npoints, useMulticolor ) {
  var data = createData( traceIndex, npoints );
  
  var trace = {
    type: 'scattergl',
    mode: 'markers',
    marker: { 
      symbol: 'circle',
      size: useMulticolor ? data.size : 1,
      color: useMulticolor ? data.color : '#00BBBB'
    },
    x: data.x,
    y: data.y 
  };
  
  return trace;
};

var plotDivs = [];

var createPlot = function( divId, npoints, useMulticolor, chartCount, seriesCount, doRedraw ) {
  
  var traces = [];
  for (var i = 0, l = seriesCount; i < l; i++) {
    traces.push( createTrace( i, npoints, useMulticolor ) );
  };
  
  var plotDiv = document.getElementById(divId);
  Plotly.plot( 
    plotDiv, 
    traces, 
    { 
      margin: { t: 40, b:50, l:75, r:30 } 
    } 
  );
  
  //plotDivs.push( plotDiv );
};

Tests:

100*5*1
var npoints = 100; var seriesCount = 5; var chartCount = 1; var useMulticolor = true; var doRedraw = false; var t0 = performance.now(); for (var i = 0, l = chartCount; i < l; i++) { var chartDomId = "testChart" + i; createPlot( "testChart" + i, npoints, useMulticolor, chartCount, seriesCount, doRedraw ); }; var t1 = performance.now(); console.log( npoints + "*" + seriesCount + "*" + chartCount + "(" +( npoints*seriesCount ) + " points): " + (t1 - t0) + "ms.");
1000*5*1
var npoints = 1000; var seriesCount = 5; var chartCount = 1; var useMulticolor = true; var doRedraw = false; var t0 = performance.now(); for (var i = 0, l = chartCount; i < l; i++) { var chartDomId = "testChart" + i; createPlot( "testChart" + i, npoints, useMulticolor, chartCount, seriesCount, doRedraw ); }; var t1 = performance.now(); console.log( npoints + "*" + seriesCount + "*" + chartCount + "(" +( npoints*seriesCount ) + " points): " + (t1 - t0) + "ms.");

Run results for: ScatterGL_new

100*5*1

1000*5*1

10051

100051