| 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, 15 Oct 2025 15:35:50 GMT
etag: W/"68e952e4-cc58"
expires: Wed, 15 Oct 2025 15:45:49 GMT
last-modified: Fri, 10 Oct 2025 18:39:32 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: e150b1ecd074f8ffbdbed467e37e8a83c3b6fb38
x-github-request-id: B7FC:11D3C0:10121:12981:68EFBF54
x-origin-cache: HIT
x-proxy-cache: MISS
x-robots-tag: index
x-served-by: cache-bom-vanm7210021-BOM
x-timer: S1760542550.729164,VS0,VE291
x-vercel-cache: MISS
x-vercel-id: bom1::xcvnl-1760542549709-54458520d545
content-length: 9968
Histograms in JavaScript
Histograms in JavaScript
How to make a D3.js-based histogram in JavaScript. Seven examples of colored, horizontal, and normal histogram bar charts.
Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Try Plotly Studio now.
var x = [];
for (var i = 0; i < 500; i ++) {
x[i] = Math.random();
}
var trace = {
x: x,
type: 'histogram',
};
var data = [trace];
Plotly.newPlot('myDiv', data);
var y = [];
for (var i = 0; i < 500; i ++) {
y[i] = Math.random();
}
var data = [
{
y: y,
type: 'histogram',
marker: {
color: 'pink',
},
}
];
Plotly.newPlot('myDiv', data);
var x1 = [];
var x2 = [];
for (var i = 1; i < 500; i++)
{
k = Math.random();
x1.push(Math.random() + 1);
x2.push(Math.random() + 1.1);
}
var trace1 = {
x: x1,
type: "histogram",
opacity: 0.5,
marker: {
color: 'green',
},
};
var trace2 = {
x: x2,
type: "histogram",
opacity: 0.6,
marker: {
color: 'red',
},
};
var data = [trace1, trace2];
var layout = {barmode: "overlay"};
Plotly.newPlot('myDiv', data, layout);
var x1 = [];
var x2 = [];
for (var i = 0; i < 500; i ++) {
x1[i] = Math.random();
x2[i] = Math.random();
}
var trace1 = {
x: x1,
type: "histogram",
};
var trace2 = {
x: x2,
type: "histogram",
};
var data = [trace1, trace2];
var layout = {barmode: "stack"};
Plotly.newPlot('myDiv', data, layout);
var x1 = [];
var x2 = [];
var y1 = [];
var y2 = [];
for (var i = 1; i < 500; i++)
{
k = Math.random();
x1.push(k*5);
x2.push(k*10);
y1.push(k);
y2.push(k*2);
}
var trace1 = {
x: x1,
y: y1,
name: 'control',
autobinx: false,
histnorm: "count",
marker: {
color: "rgba(255, 100, 102, 0.7)",
line: {
color: "rgba(255, 100, 102, 1)",
width: 1
}
},
opacity: 0.5,
type: "histogram",
xbins: {
end: 2.8,
size: 0.06,
start: .5
}
};
var trace2 = {
x: x2,
y: y2,
autobinx: false,
marker: {
color: "rgba(100, 200, 102, 0.7)",
line: {
color: "rgba(100, 200, 102, 1)",
width: 1
}
},
name: "experimental",
opacity: 0.75,
type: "histogram",
xbins: {
end: 4,
size: 0.06,
start: -3.2
}
};
var data = [trace1, trace2];
var layout = {
bargap: 0.05,
bargroupgap: 0.2,
barmode: "overlay",
title: {
text: "Sampled Results"
},
xaxis: {
title: {
text: "Value"
}
},
yaxis: {
title: {
text: "Count"
}
}
};
Plotly.newPlot('myDiv', data, layout);
var x = [];
for (var i = 0; i < 500; i ++) {
x[i] = Math.random();
}
var trace = {
x: x,
type: 'histogram',
cumulative: {enabled: true}
};
var data = [trace];
Plotly.newPlot('myDiv', data);
var x = [];
for (var i = 0; i < 500; i ++) {
x[i] = Math.random();
}
var data = [
{
x: x,
type: 'histogram',
histnorm: 'probability',
marker: {
color: 'rgb(255,255,100)',
},
}
];
Plotly.newPlot('myDiv', data);
var x = ["Apples","Apples","Apples","Oranges", "Bananas"]
var y = ["5","10","3","10","5"]
var data = [
{
histfunc: "count",
y: y,
x: x,
type: "histogram",
name: "count"
},
{
histfunc: "sum",
y: y,
x: x,
type: "histogram",
name: "sum"
}
]
Plotly.newPlot('myDiv', data)