## plotly.js

The open source JavaScript graphing library that powers Plotly

Show Sidebar Hide Sidebar

# 2d Density Plots in plotly.js

How to make a D3.js-based 2d density plot in JavaScript. Examples of density plots with kernel density estimations, custom color-scales, and smoothing.

#### 2D Histogram Contour Plot with Histogram Subplots

``````// from http://bl.ocks.org/mbostock/4349187
// Sample from a normal distribution with mean 0, stddev 1.

function normal() {
var x = 0,
y = 0,
rds, c;
do {
x = Math.random() * 2 - 1;
y = Math.random() * 2 - 1;
rds = x * x + y * y;
} while (rds == 0 || rds > 1);
c = Math.sqrt(-2 * Math.log(rds) / rds); // Box-Muller transform
return x * c; // throw away extra sample y * c
}

var N = 2000,
a = -1,
b = 1.2;

var step = (b - a) / (N - 1);
var t = new Array(N), x = new Array(N), y = new Array(N);

for(var i = 0; i < N; i++){
t[i] = a + step * i;
x[i] = (Math.pow(t[i], 3)) + (0.3 * normal() );
y[i] = (Math.pow(t[i], 6)) + (0.3 * normal() );
}

var trace1 = {
x: x,
y: y,
mode: 'markers',
name: 'points',
marker: {
color: 'rgb(102,0,0)',
size: 2,
opacity: 0.4
},
type: 'scatter'
};
var trace2 = {
x: x,
y: y,
name: 'density',
ncontours: 20,
colorscale: 'Hot',
reversescale: true,
showscale: false,
type: 'histogram2dcontour'
};
var trace3 = {
x: x,
name: 'x density',
marker: {color: 'rgb(102,0,0)'},
yaxis: 'y2',
type: 'histogram'
};
var trace4 = {
y: y,
name: 'y density',
marker: {color: 'rgb(102,0,0)'},
xaxis: 'x2',
type: 'histogram'
};
var data = [trace1, trace2, trace3, trace4];
var layout = {
showlegend: false,
autosize: false,
width: 600,
height: 550,
margin: {t: 50},
hovermode: 'closest',
bargap: 0,
xaxis: {
domain: [0, 0.85],
showgrid: false,
zeroline: false
},
yaxis: {
domain: [0, 0.85],
showgrid: false,
zeroline: false
},
xaxis2: {
domain: [0.85, 1],
showgrid: false,
zeroline: false
},
yaxis2: {
domain: [0.85, 1],
showgrid: false,
zeroline: false
}
};
Plotly.newPlot('myDiv', data, layout);
``````

#### 2D Histogram Contour Plot with Slider Control

``````Add slider controls to 2d-density-plot plots with the postMessage API.

See the code on JSFiddle.

Watch the 5 second video of how it works.
``````

plotly.js runs on all SVG-compatible browsers

Still need help?