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.

Basic Histogram

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

Horizontal Histogram

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

Overlaid Histogram

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

Stacked Histograms

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

Colored and Styled Histograms

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

Cumulative Histogram

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

Normalized Histogram

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

Specify Binning Function

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)