liveBook · Manning

Violin plot

As explained in D3.js in Action, Third Edition

A violin plot is a distribution chart that uses a mirrored, smoothed density shape to show where numeric observations are concentrated.

A violin plot compares numeric distributions with mirrored curved areas. Its shape widens where a bin contains many observations and narrows where few occur, encoding more of the distribution than a box plot’s minimum, maximum, median, and quartiles. section 6.5 section 6.6

Build one violin per category by isolating its numeric values, calculating a mean, grouping values into bins, and calculating quartiles. A point scale positions categories, a linear y-scale positions values, and another linear scale converts bin counts into half-widths. section 6.5 section 6.5

Construct the shape progressively:

  • Draw a histogram for each category first, using each bin’s value boundaries for height and its observation count for width. section 6.5
  • Generate a half-violin area through the histogram-bar tips, using a smooth curve. section 6.5
  • Mirror the area around the category’s center position to form the complete violin. section 6.5
  • Add an interquartile-range line and a mean dot; a median marker is also a valid alternative. section 6.5 section 6.6

Comparing salaries by role

Five data-visualization roles—analyst, developer, designer, scientist, and leadership—are arranged along the x-axis. Each violin shows that role’s salary distribution, with a line from the first to third quartile and a dot at average salary. Roles with too few observations are excluded. section 6.5

Figure 6.17 Violin plots of the salary distribution of the five leading data visualization roles. Each plot is combined with a gray line extending from the first to the third quartile and a white dot positioned at the mean value.
figure

Inspect the completed comparison to see how the violin silhouette, interquartile-range line, and mean dot work together. section 6.5

How D3.js in Action, Third Edition covers it

How deep it goes
Builds violins step by step from filtered values, bins, scales, histogram bars, smoothed areas, and summary markers.
Examples
Uses salary distributions for analyst, developer, designer, scientist, and leadership roles.
What you can do after
Build it from scratch with D3 by converting category bins into mirrored smoothed areas and adding summary markers.
How it connects
Connects violin plots to histograms, box plots, bins, quartiles, means, point scales, and area generators.

Also explained in

Compare how 3 books explain violin plot →

Related concepts

This explainer was generated by Manning's knowledge graph from the text of D3.js in Action, Third Edition. The section links point to the parts of the book it draws on.