Violin plot showing kernel density estimation distributions — pure SVG, zero JS.
Each violin is a mirrored KDE curve rendered as an SVG path. An optional inner box plot overlay shows median, Q1, and Q3. The density curve is computed using a Gaussian kernel with Silverman's rule of thumb for bandwidth selection.
Examples
<.violin_plot data={[
%{label: "Group A", values: [12, 15, 18, 22, 25, 28, 30, 35, 45]},
%{label: "Group B", values: [5, 10, 15, 20, 25, 30, 35, 40]}
]} />
<.violin_plot
data={violin_data}
show_box={true}
resolution={80}
bandwidth={2.5}
/>
Summary
Functions
Attributes
data(:list) - Distribution data:[%{label, values: [numbers]}]. Defaults to[].colors(:list) - Override default palette. CSS color strings. Defaults to[].bandwidth(:any) - Override KDE bandwidth (Silverman default if nil). Defaults tonil.show_box(:boolean) - Show inner box plot overlay (median + Q1-Q3 rect). Defaults totrue.resolution(:integer) - Number of KDE evaluation points. Defaults to50.show_grid(:boolean) - Show Y-axis grid lines. Defaults totrue.show_labels(:boolean) - Show axis tick labels. Defaults totrue.animate(:boolean) - Enable entrance animations. Defaults totrue.animation_duration(:integer) - Animation duration in ms. Defaults to600.theme(:map) - Chart theme overrides (see ChartTheme). Defaults to%{}.id(:string) - Unique ID for the chart (auto-generated if not provided). Defaults tonil.title(:string) - Chart title rendered above the visualization. Defaults tonil.description(:string) - Chart description for context (rendered below title). Defaults tonil.class(:string) - Defaults tonil.- Global attributes are accepted.