Show Sidebar Hide Sidebar
Plotly.js

WebGL vs SVG in JavaScript

Implement WebGL for increased speed, improved interactivity, and the ability to plot even more data!

function gaussianRand() {
  var rand = 0;
  for (var i = 0; i < 6; i += 1) {
    rand += Math.random();
  }
  return (rand / 6)-0.5;
}

var X = [],
    Y = [],
    n = 100000,
    i;

for (i = 0; i < n; i += 1) {
  X.push(gaussianRand());
  Y.push(gaussianRand());
}

var data = [{
    type: "scattergl",
    mode: "markers",
    marker: {
        line: {
            width: 1,
            color: '#404040'}
    },
    x: X,
    y: Y
}]

Plotly.newPlot('myDiv', data)
function gaussianRand() {
  var rand = 0;
  for (var i = 0; i < 6; i += 1) {
    rand += Math.random();
  }
  return (rand / 6)-0.5;
}

var X = [],
    Y = [],
    n = 1000000,
    i;

for (i = 0; i < n; i += 1) {
  X.push(gaussianRand());
  Y.push(gaussianRand());
}

var data = [{
	type: "scattergl",
    mode: "markers",
    marker: {
		color : 'rgb(152, 0, 0)',
		line: {
			width: 1,
			color: 'rgb(0,0,0)'}
	},
    x: X,
    y: Y
}]

Plotly.newPlot('myDiv', data)
function gaussianRand() {
  var rand = 0;
  for (var i = 0; i < 6; i += 1) {
    rand += Math.random();
  }
  return (rand / 6)-0.5;
}


var start_value = 0,
     stop_value = 1,
     point_num = 5000,
     trace_num = 10;
var curr_value = start_value;
var step = (stop_value - start_value) / (point_num - 1);

var data = [];
for (var j = 0; j < trace_num; j++) {
    var X = [],
         Y = [];
    for (var i = 0; i < point_num; i++) {
        X.push(curr_value + (step * i));
        Y.push((gaussianRand()*8)+(j*5));
    }
    data.push({
        type: "scattergl",
        mode: "line",
        x: X,
        y: Y
    })
}
var layout = {showlegend: false}
Plotly.newPlot('myDiv', data = data, layout = layout)

plotly.js runs on all SVG-compatible browsers