Welcome in the density plot section of the gallery. If you want to know more about this kind of chart, visit data-to-viz.com. If you're looking for a simple way to implement it in d3.js, pick an example below.
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
Plot several groups
Plotting several variables together allows to compare their
Here is how to do.
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.
A selection of highly customized charts to see how to go further with density plots.