Plotly is free for unlimited public use.

Sensitive data? Upgrade to a paid plan

Show Sidebar Hide Sidebar

# 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://plot.ly/nodejs/getting-started
// Find your api_key here: https://plot.ly/settings/api

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: "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://plot.ly/nodejs/getting-started
// Find your api_key here: https://plot.ly/settings/api

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,
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://plot.ly/nodejs/getting-started
// Find your api_key here: https://plot.ly/settings/api

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

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

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

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

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);
});
``````