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.
Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Sign up for early access now.
// 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);
Add slider controls to 2d-density-plot plots with the <a href="https://github.com/plotly/postMessage-API" target="_blank">postMessage API</a>.
See the <a href="https://jsfiddle.net/plotlygraphs/y9sdy76h/4/" target="_blank">code on JSFiddle</a>.
Watch <a href="https://raw.githubusercontent.com/plotly/documentation/gh-pages/all_static/images/flight_conflicts.gif" target="_blank">the 5 second video</a> of how it works.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4