Violin plots allow to visualize the distribution of a numeric variable for one or several groups. They are very well adapted for large dataset, as stated in data-to-viz.com. Note that 2 approaches exist to build them in d3.js, the first computing a __kernel density estimate__, the second building a high resolution __histogram__.

Using Binning with

`d3.histogram()`

The `d3.histogram()`

takes a numeric variable, split it into __bins__ and count the number of value per bin. See the histogram section for basic examples. It is possible to represent the histogram with a __mirror effect__ for each group and using a curving function for __smoothing__: it makes the violin plots below.

Using Kernel density estimation

Another way to build a violin plot is to compute a __kernel density estimate__. This is what is done in the density plot and ridgeline plot sections. As you can see, the result is slightly different compared to above.

Going further

A few examples expanding the concepts described above to build custom violin charts.

Selection of blocks