let count = 500000;

let x = [];
let y = [];
let colors = [];
let sourceColors = ['rgb(255, 50, 50)', 'rgb(50, 255, 50)', 'rgb(50, 50, 255)', 'rgb(155, 50, 50)', 'rgb(50, 155, 50)', 'rgb(50, 50, 155)', 'rgb(255, 50, 255)', 'rgb(255, 255, 50)', 'rgb(50, 255, 255)'];
let ncolors = 8;

//assign a color to each marker
for (let i = 0; i < count; i++) {
  x.push(i);
  y.push(Math.random());
  colors.push(sourceColors[Math.floor(ncolors*i/count)]);
}

let traces = [{
  x: x,
  y: y,
  marker: {
    color: colors
  },
  type: 'scattergl',
  mode: 'markers'
}];

let time = new Date().getTime();
Plotly.react('plot', traces).then(alert(new Date().getTime() - time));

traces = [];
counter = 0;

//create a trace for each color
for (let i = 0; i < ncolors; i++) {
  let trace = {};
  x = [];
  y = [];
  for (; counter < (1 + i)*count / ncolors; counter++) {
    x.push(counter);
    y.push(Math.random());
  }
  trace.x = x;
  trace.y = y;
  trace.type = 'scattergl';
  trace.mode = 'markers';
  trace.marker = { color: sourceColors[i] };
  traces.push(trace);
}

time = new Date().getTime();
Plotly.react('plot2', traces, { showlegend: false }).then(alert(new Date().getTime() - time));