Violin chart

Each group's density mirrored about a centre line, with its median marked and an optional quartile box inside. Shows where values bunch up, which a box plot alone hides.

Deploy time by team
Group	Value
Platform	12 min
Platform	14 min
Platform	15 min
Platform	16 min
Platform	16 min
Platform	17 min
Platform	18 min
Platform	19 min
Platform	21 min
Platform	22 min
Platform	41 min
Platform	16 min
Platform	18 min
Platform	14 min
Platform	20 min
Payments	18 min
Payments	22 min
Payments	25 min
Payments	27 min
Payments	28 min
Payments	30 min
Payments	33 min
Payments	35 min
Payments	38 min
Payments	44 min
Payments	26 min
Payments	29 min
Payments	31 min
Payments	24 min
Payments	36 min
Search	8 min
Search	9 min
Search	10 min
Search	10 min
Search	11 min
Search	12 min
Search	12 min
Search	14 min
Search	15 min
Search	31 min
Search	10 min
Search	12 min
Search	9 min
Search	13 min
Search	10 min
Mobile	20 min
Mobile	26 min
Mobile	29 min
Mobile	31 min
Mobile	34 min
Mobile	36 min
Mobile	40 min
Mobile	47 min
Mobile	55 min
Mobile	33 min
Mobile	38 min
Mobile	28 min
Mobile	42 min
Mobile	35 min
Mobile	30 min

Usage

use hydroxy_leptos::violin_chart::{Annotation, Group, ViolinChart};
use leptos::prelude::*;

#[component]
pub fn Demo() -> impl IntoView {
    let groups = vec![
        Group::new(
            "Platform",
            [12.0, 14.0, 15.0, 15.5, 16.0, 17.0, 18.0, 19.0, 21.0, 22.0, 41.0, 16.5, 17.5, 14.5, 20.0],
        ),
        Group::new(
            "Payments",
            [18.0, 22.0, 25.0, 27.0, 28.0, 30.0, 33.0, 35.0, 38.0, 44.0, 26.0, 29.0, 31.0, 24.0, 36.0],
        ),
        Group::new("Search", [8.0, 9.0, 9.5, 10.0, 11.0, 12.0, 12.5, 14.0, 15.0, 31.0, 10.5, 11.5, 9.0, 13.0, 10.0]),
        Group::new(
            "Mobile",
            [20.0, 26.0, 29.0, 31.0, 34.0, 36.0, 40.0, 47.0, 55.0, 33.0, 38.0, 28.0, 42.0, 35.0, 30.0],
        ),
    ];

    view! {
        <ViolinChart
            groups=groups
            label="Deploy time by team"
            annotations=vec![Annotation::y_line(30.0, "Target")]
            format=|v: f64| format!("{v:.0} min")
        />
    }
}

use dioxus::prelude::*;
use hydroxy_dioxus::violin_chart::{Annotation, Group, ViolinChart};

#[component]
pub fn ViolinChartDemo() -> Element {
    let groups = vec![
        Group::new(
            "Platform",
            [12.0, 14.0, 15.0, 15.5, 16.0, 17.0, 18.0, 19.0, 21.0, 22.0, 41.0, 16.5, 17.5, 14.5, 20.0],
        ),
        Group::new(
            "Payments",
            [18.0, 22.0, 25.0, 27.0, 28.0, 30.0, 33.0, 35.0, 38.0, 44.0, 26.0, 29.0, 31.0, 24.0, 36.0],
        ),
        Group::new("Search", [8.0, 9.0, 9.5, 10.0, 11.0, 12.0, 12.5, 14.0, 15.0, 31.0, 10.5, 11.5, 9.0, 13.0, 10.0]),
        Group::new(
            "Mobile",
            [20.0, 26.0, 29.0, 31.0, 34.0, 36.0, 40.0, 47.0, 55.0, 33.0, 38.0, 28.0, 42.0, 35.0, 30.0],
        ),
    ];

    rsx! {
        ViolinChart {
            groups,
            label: "Deploy time by team",
            annotations: vec![Annotation::y_line(30.0, "Target")],
            format: move |v: f64| format!("{v:.0} min"),
        }
    }
}

Anatomy

Component	data-part	Renders
`ViolinChart`	root	figure with a screen-reader table of every observation
	overlay	Focusable plot; arrow keys move between groups
	area	Mirrored density per group
	box	First to third quartile (inner_box)
	whisker	Range within 1.5 IQR (inner_box)
	median	Dot at the median
	tooltip	Count, median, quartiles and bandwidth
	annotation	Reference line, band or point

Keyboard

Key	Does
`ArrowRight / ArrowLeft`	Next or previous group
`Home / End`	First or last group
`Escape`	Clear

Props

Prop	Type	Notes
`groups`	Vec<Group>	Required. Group::new(label, values), left to right
`label`	String	Required. What the chart shows; the accessible name
`inner_box`	bool	Draw the quartile box and whiskers. Default true
`bandwidth`	f64	Kernel bandwidth in data units. Default: Silverman's rule
`annotations`	Vec<Annotation>	Y in data values, x in group indices
`height`	u16	Plot height in px. Default 260
`format`	Fn(f64) -> String	Formats ticks, tooltip and table

Events

Prop	Type	Notes
`on_hover`	Callback<Option<Datum>>	The mark under the pointer or keyboard focus changes, or is left. Fires only on a change
`on_select`	Callback<Datum>	Click, tap or Enter on a mark