Benchmark: ScatterGL_new - MeasureThat.net

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.");

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
10051
100051

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's dive into the explanation.

The provided benchmark measures the performance of the Plotly library, specifically its scattergl chart feature. The test case creates multiple plots with different numbers of points and checks how long it takes to render them.

**Options being compared:**

1. **Number of points**: Two test cases are compared: one with 100 points (npoints = 100) and another with 1000 points (npoints = 1000). This test case evaluates the performance impact of increasing the number of data points on rendering time.
2. **Chart count**: A single chart is created in both test cases, with a chart count of 1. However, there are two test cases: one with a chart count of 5 (seriesCount = 5) and another with a chart count of 1 (chartCount = 1). This test case evaluates the performance impact of increasing the number of charts on rendering time.

**Pros and cons of each approach:**

* Increasing the number of points:
	+ Pros: More realistic data sets for users, potentially revealing optimization opportunities.
	+ Cons: May require more computational resources and increase rendering time.
* Increasing the chart count:
	+ Pros: Evaluates performance under heavy charting conditions.
	+ Cons: Can lead to overwhelming rendering times if too many charts are created.

**Other considerations:**

* The use of `createPlot` function with a loop, which creates multiple plots sequentially. This could potentially lead to cumulative overhead and affect overall performance.
* The `useMulticolor` option is set to `true` in both test cases. This might impact performance due to additional color calculations or rendering complexity.

**Browser-specific results:**

The latest benchmark result shows two tests for Chrome 56 browser, with different numbers of points (100 and 1000) and chart counts (5 and 1). The execution times are significantly lower for the larger dataset (npoints = 1000) but still relatively consistent between chart counts. This suggests that Plotly can handle larger datasets while maintaining performance.

Keep in mind that this is a simplified analysis, and actual performance may depend on various factors such as system configuration, hardware capabilities, and other optimization strategies employed by the Plotly library or the application using it.

Related benchmarks:

ScatterGL_new (version: 0)

Comparing performance of: 10051 vs 100051

Created: 9 years ago by: Registered User

Jump to the latest result

10051

100051

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

ScatterGL_new (version: 0)

Comparing performance of: 100*5*1 vs 1000*5*1

Created: 9 years ago by: Registered User

Jump to the latest result

100*5*1

1000*5*1

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Comparing performance of: 10051 vs 100051

10051

100051