2D Histograms in Nodejs

How to make a 2D histogram in nodejs. A 2D histogram is a visualization of a bivariate distribution.

2D Histogram of a Bivariate Normal Distribution

// Learn about API authentication here: https://plotly.com/nodejs/getting-started
// Find your api_key here: https://plotly.com/settings/api

var x = [];
var y = [];

for (var i = 0; i &lt; 500; i ++) {
	x[i] = Math.random();
	y[i] = Math.random() + 1;
}

require('plotly')(username, api_key);

var data = [
  {
    x: x,
    y: y,
    type: "histogram2d"
  }
];
var graphOptions = {filename: "2d-histogram", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});

2D Histogram Binning and Styling Options

// Learn about API authentication here: https://plotly.com/nodejs/getting-started
// Find your api_key here: https://plotly.com/settings/api

var x = [];
var y = [];

for (var i = 0; i &lt; 500; i ++) {
	x[i] = Math.random();
	y[i] = Math.random() + 1;
}

require('plotly')(username, api_key);

var data = [
  {
    x: x,
    y: y,
    histnorm: "probability",
    autobinx: false,
    xbins: {
      start: -3,
      end: 3,
      size: 0.1
    },
    autobiny: false,
    ybins: {
      start: -2.5,
      end: 4,
      size: 0.1
    },
    colorscale: [["0", "rgb(12,51,131)"], ["0.25", "rgb(10,136,186)"], ["0.5", "rgb(242,211,56)"], ["0.75", "rgb(242,143,56)"], ["1", "rgb(217,30,30)"]],
    type: "histogram2d"
  }
];
var graphOptions = {filename: "2d-histogram-options", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});

2D Histogram Overlaid with a Scatter Chart

// Learn about API authentication here: https://plotly.com/nodejs/getting-started
// Find your api_key here: https://plotly.com/settings/api

var x0 = [];
var y0 = [];
var x1 = [];
var y1 = [];

for (var i = 0; i &lt; 500; i ++) {
	x0[i] = Math.random() / 5 * 0.5;
	y0[i] = Math.random() / 5 * 0.5;
}

for (var i = 0; i &lt; 50; i ++) {
	x1[i] = Math.random();
	y1[i] = Math.random() + 1;
}

var x = [x0, x1]
var y = [y0, y1]

require('plotly')(username, api_key);

var trace1 = {
  x: x0,
  y: y0,
  mode: "markers",
  marker: {
    symbol: "circle",
    opacity: 0.7
  },
  type: "scatter"
};
var trace2 = {
  x: x1,
  y: y1,
  mode: "markers",
  marker: {
    symbol: "square",
    opacity: 0.7
  },
  type: "scatter"
};
var trace3 = {
  x: x,
  y: y,
  type: "histogram2d"
};
var data = [trace1, trace2, trace3];
var graphOptions = {filename: "2d-histogram-scatter", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});