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

</script>\n</head>\n\n<body>\n\t<div id='myDiv'></div>\n</body>","js":"var x1 = [];\nvar x2 = [];\nvar y1 = [];\nvar y2 = [];\nfor (var i = 1; i < 500; i++)\n{\n k = Math.random();\n x1.push(k*5);\n x2.push(k*10);\n y1.push(k);\n y2.push(k*2);\n}\nvar trace1 = {\n x: x1,\n y: y1,\n name: 'control',\n autobinx: false,\n histnorm: \"count\",\n marker: {\n color: \"rgba(255, 100, 102, 0.7)\",\n line: {\n color: \"rgba(255, 100, 102, 1)\",\n width: 1\n }\n },\n opacity: 0.5,\n type: \"histogram\",\n xbins: {\n end: 2.8,\n size: 0.06,\n start: .5\n }\n};\nvar trace2 = {\n x: x2,\n y: y2,\n autobinx: false,\n marker: {\n color: \"rgba(100, 200, 102, 0.7)\",\n line: {\n color: \"rgba(100, 200, 102, 1)\",\n width: 1\n }\n },\n name: \"experimental\",\n opacity: 0.75,\n type: \"histogram\",\n xbins: {\n end: 4,\n size: 0.06,\n start: -3.2\n\n }\n};\nvar data = [trace1, trace2];\nvar layout = {\n bargap: 0.05,\n bargroupgap: 0.2,\n barmode: \"overlay\",\n title: {\n text: \"Sampled Results\"\n },\n xaxis: {\n title: {\n text: \"Value\"\n }\n },\n yaxis: {\n title: {\n text: \"Count\"\n }\n }\n};\nPlotly.newPlot('myDiv', data, layout);\n"}">

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)