plotly.js

The open source JavaScript graphing library that powers Plotly

Show Sidebar Hide Sidebar
Plotly.js

2D Histogram Contour in plotly.js

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

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('graph', data); 
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('graph', data);
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('graph', data);
Still need help?
Contact Us

For guaranteed 24 hour response turnarounds, upgrade to a Developer Support Plan.