Histogram | the D3 Graph Gallery

Step by step

Learn how to build a basic histogram and how to apply a few customizations to it. Starts easy with only one data series and gets harder with several, color highlighting, mirroring and more.

Most basic

The most basic histogram you can do in d3.js. Keeping only the core code.

Color a specific part

Use a simple if - else statement to color a part of the histogram.

Also show how to add a vertical bar annotation.

Double histogram

A double histogram can be handy to compare the distribution of 2 variables.

Good to see how the filter() function works.

Interactive

Interactivity on histograms can be interesting for 2 main reasons. First, playing with the bin size is an important step: the distribution can look very different depending on the value as explained here. Second, adding a tooltip to display bar threshold and exact number of values can be a plus.

Button to control bin size

Add a button that controls bin size. Good example to learn how to create an update function that also update an axis.

Add tooltip

Useful to get the threshold of each bar range. Needs to be improved though.