| CARVIEW |
Select Language
HTTP/2 200
accept-ranges: bytes
access-control-allow-origin: *
age: 0
cache-control: max-age=600
content-encoding: gzip
content-type: text/html; charset=utf-8
date: Wed, 30 Jul 2025 10:48:26 GMT
etag: W/"687e6266-9531"
expires: Wed, 30 Jul 2025 10:58:26 GMT
last-modified: Mon, 21 Jul 2025 15:53:10 GMT
server: Vercel
strict-transport-security: max-age=63072000
vary: Accept-Encoding
via: 1.1 varnish
x-cache: MISS
x-cache-hits: 0
x-fastly-request-id: 964e527c816ccef3914343f620a34cccc63a8603
x-github-request-id: 4C71:10D6FF:16D47A:1AB54F:6889F879
x-origin-cache: HIT
x-proxy-cache: MISS
x-robots-tag: index
x-served-by: cache-bom-vanm7210047-BOM
x-timer: S1753872506.310720,VS0,VE261
x-vercel-cache: MISS
x-vercel-id: bom1::zj9b4-1753872506295-b9ab5e4c65c5
content-length: 8859
2d histograms in JavaScript
2D Histograms in JavaScript
How to make a D3.js-based 2D histogram in javascript. A 2D histogram is a visualization of a bivariate distribution.
Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Sign up for early access now.
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'
}
];
Plotly.newPlot('myDiv', 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,
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'
}
];
Plotly.newPlot('myDiv', data);
var x0 = [];
var y0 = [];
var x1 = [];
var y1 = [];
var x2 = [];
var y2 = [];
for (var i = 0; i < 500; i ++)
{
x0[i] = Math.random() + 1;
y0[i] = Math.random() + 1.5;
}
for (var i = 0; i < 100; i ++)
{
x1[i] = Math.random();
y1[i] = Math.random() + 1;
}
for (var i = 0; i < 500; i ++)
{
x2[i] = Math.random()*2;
y2[i] = Math.random()*3;
}
var trace1 = {
x: x0,
y: y0,
mode: 'markers',
marker: {
symbol: 'circle',
opacity: 0.7,
color:'rgb(200,111,200)',
},
type: 'scatter',
};
var trace2 = {
x: x1,
y: y1,
mode: 'markers',
marker: {
symbol: 'square',
opacity: 0.7,
color:'cyan',
},
type: 'scatter'
};
var trace3 = {
x: x2,
y: y2,
type: 'histogram2d',
colorscale : [['0' , 'rgb(0,225,100)'],['1', 'rgb(100,0,200)']],
};
var data = [trace1, trace2, trace3];
Plotly.newPlot('myDiv', data);