Plotly Multi ScatterGL (Big Data, Size , Color)

by brian428

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>
<h3>Using plotly-latest (v1.33.0). Select points and look in console to see length undefined error</h3>
<div id="testChart" style="width:100%; height:100%;"></div>

JavaScript

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: [],
  customData: []
};

var npoints = 100000;
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() * 20)]);
    data.size.push(6);
    data.symbol.push('x');
    data.customData.push({id:i});
};


var t0 = performance.now();
var createPlot = function( divId, data ) {
	var plotElement = document.getElementById(divId);
  
	Plotly.plot( 
    plotElement, 
    [{
      type: 'scattergl',
      mode: 'markers',
      marker: { 
        symbol: data.symbol,
        size: data.size,
        color: data.color
      },
      x: data.x,
      y: data.y,
      customdata: data.customData,
    }], 
    { 
      margin: { t: 40, b:50, l:75, r:30 },
      xaxis: {
        rangeslider: {}
      }
    } 
  );
  
  plotElement.on(
      "plotly_selected",
      function ( eventData ) {
      	let pointArray = eventData.points.map( function(point) { return point.customdata; } );
				console.log( "Plotly points selected:", pointArray );
      } );
  
}

createPlot( "testChart", data );