Density Chart | the D3 Graph Gallery

Step by step

A density plot shows the distribution of a numeric variable. In the following examples, a kernel density estimation is always used. The result can then be plotted using the d3.line() function.

Most basic

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

Plot several groups

Plotting several variables together allows to compare their distribution.

Here is how to do.

Back to back density plot

The mirror or back to back density plot is a variation allowing to compare the distribution of 2 groups.

Interactivity

Playing with the bandwidth argument of your density plot is a crucial step to avoid over or under-smoothing. Thus, adding a slider that controls this value can be a great use of interactivity. Of course, interactivity can also be used to filter or change input dataset.

Slider to control bandwidth

Slider update the bandwidth used for kernel density estimation with a smooth transition.

Dropdown to filter data

Dropdown allows to filter data, keeping one group or the other.

Selection of blocks

A selection of highly customized charts to see how to go further with density plots.

Density and Histogram

A block by Mike Bostock showing how to combine histogram and density plot.