2D Histogram Contour in JavaScript

How to make D3.js-based 2D Histogram Contour plots in Plotly.js.

Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Sign up for early access now.

Basic 2D Histogram Contour

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

var data = [
  {
    x: x,
    y: y,
    type: 'histogram2dcontour'
  }
];
Plotly.newPlot('myDiv', data);

2D Histogram Contour Colorscale

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

var data = [
  {
    x: x,
    y: y,
    colorscale: 'Blues',
    type: 'histogram2dcontour'
  }
];
Plotly.newPlot('myDiv', data);

Styled 2D Histogram Contour

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

var data = [
  {
    x: x,
    y: y,
    colorscale: 'Blues',
    type: 'histogram2dcontour',
    contours: {
      showlabels: true,
      labelfont: {
        family: 'Raleway',
        color: 'white'
      }
    },
    hoverlabel: {
      bgcolor: 'white',
      bordercolor: 'black',
      font: {
        family: 'Raleway',
        color: 'black'
      }
    }
  }
];
Plotly.newPlot('myDiv', data);