PhiaUi.Components.ViolinPlot (phia_ui v0.1.17)

Copy Markdown View Source

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

violin_plot(assigns)

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 to nil.
  • show_box (:boolean) - Show inner box plot overlay (median + Q1-Q3 rect). Defaults to true.
  • resolution (:integer) - Number of KDE evaluation points. Defaults to 50.
  • show_grid (:boolean) - Show Y-axis grid lines. Defaults to true.
  • show_labels (:boolean) - Show axis tick labels. Defaults to true.
  • animate (:boolean) - Enable entrance animations. Defaults to true.
  • animation_duration (:integer) - Animation duration in ms. Defaults to 600.
  • theme (:map) - Chart theme overrides (see ChartTheme). Defaults to %{}.
  • id (:string) - Unique ID for the chart (auto-generated if not provided). Defaults to nil.
  • title (:string) - Chart title rendered above the visualization. Defaults to nil.
  • description (:string) - Chart description for context (rendered below title). Defaults to nil.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.