Violin Chart | the D3 Graph Gallery

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.

Violin chart

Here a smoothing function is used to transformed the mirror histogram in a violin plot.

Variation: no smoothing

A variation of the previous chart without any smoothing

Variation: show steps

Here the curveStep function is used to interpolate values: it reveals the underlying histogram structure.

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.

Most basic

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

Going further

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

Violin with jitter

Half of the violin is removed to show the single observations. Jittering is used to avoid dots overlap.

Selection of blocks

Violin Chart

Short code building a violin chart from 3 dummy arrays.

Violin + boxplot

Implementation by Andrew Sielen, with button to understand how to custom each part of the char.