Density chart

Smoothed distributions drawn as kernel density curves on shared axes, so the shapes of a few groups compare directly. Uses a Gaussian kernel with Silverman's bandwidth unless you set one.

Order value by channel
Group	Value
Web	$42
Web	$55
Web	$38
Web	$61
Web	$47
Web	$72
Web	$50
Web	$44
Web	$66
Web	$58
Web	$39
Web	$81
Web	$53
Web	$49
Web	$95
Web	$57
Web	$46
Web	$63
Web	$52
Web	$70
Web	$41
Web	$59
Web	$48
Web	$120
Web	$54
Mobile app	$28
Mobile app	$35
Mobile app	$31
Mobile app	$26
Mobile app	$40
Mobile app	$33
Mobile app	$29
Mobile app	$37
Mobile app	$24
Mobile app	$45
Mobile app	$32
Mobile app	$30
Mobile app	$27
Mobile app	$38
Mobile app	$34
Mobile app	$22
Mobile app	$41
Mobile app	$36
Mobile app	$29
Mobile app	$31
Mobile app	$55
Mobile app	$33
Mobile app	$27
Mobile app	$30
Mobile app	$35
Retail	$85
Retail	$110
Retail	$95
Retail	$130
Retail	$78
Retail	$102
Retail	$145
Retail	$90
Retail	$118
Retail	$99
Retail	$87
Retail	$125
Retail	$108
Retail	$160
Retail	$93
Retail	$115
Retail	$82
Retail	$105
Retail	$138
Retail	$97
Retail	$112
Retail	$88
Retail	$175
Retail	$101
Retail	$94

Usage

use hydroxy_leptos::density_chart::{DensityChart, Group};
use leptos::prelude::*;

#[component]
pub fn Demo() -> impl IntoView {
    let groups = vec![
        Group::new(
            "Web",
            [
                42.0, 55.0, 38.0, 61.0, 47.0, 72.0, 50.0, 44.0, 66.0, 58.0, 39.0, 81.0, 53.0, 49.0, 95.0, 57.0, 46.0,
                63.0, 52.0, 70.0, 41.0, 59.0, 48.0, 120.0, 54.0,
            ],
        ),
        Group::new(
            "Mobile app",
            [
                28.0, 35.0, 31.0, 26.0, 40.0, 33.0, 29.0, 37.0, 24.0, 45.0, 32.0, 30.0, 27.0, 38.0, 34.0, 22.0, 41.0,
                36.0, 29.0, 31.0, 55.0, 33.0, 27.0, 30.0, 35.0,
            ],
        ),
        Group::new(
            "Retail",
            [
                85.0, 110.0, 95.0, 130.0, 78.0, 102.0, 145.0, 90.0, 118.0, 99.0, 87.0, 125.0, 108.0, 160.0, 93.0,
                115.0, 82.0, 105.0, 138.0, 97.0, 112.0, 88.0, 175.0, 101.0, 94.0,
            ],
        ),
    ];

    view! { <DensityChart groups=groups label="Order value by channel" format=|v: f64| format!("${v:.0}") /> }
        
}

use dioxus::prelude::*;
use hydroxy_dioxus::density_chart::{DensityChart, Group};

#[component]
pub fn DensityChartDemo() -> Element {
    let groups = vec![
        Group::new(
            "Web",
            [
                42.0, 55.0, 38.0, 61.0, 47.0, 72.0, 50.0, 44.0, 66.0, 58.0, 39.0, 81.0, 53.0, 49.0, 95.0, 57.0, 46.0,
                63.0, 52.0, 70.0, 41.0, 59.0, 48.0, 120.0, 54.0,
            ],
        ),
        Group::new(
            "Mobile app",
            [
                28.0, 35.0, 31.0, 26.0, 40.0, 33.0, 29.0, 37.0, 24.0, 45.0, 32.0, 30.0, 27.0, 38.0, 34.0, 22.0, 41.0,
                36.0, 29.0, 31.0, 55.0, 33.0, 27.0, 30.0, 35.0,
            ],
        ),
        Group::new(
            "Retail",
            [
                85.0, 110.0, 95.0, 130.0, 78.0, 102.0, 145.0, 90.0, 118.0, 99.0, 87.0, 125.0, 108.0, 160.0, 93.0,
                115.0, 82.0, 105.0, 138.0, 97.0, 112.0, 88.0, 175.0, 101.0, 94.0,
            ],
        ),
    ];

    rsx! {
        DensityChart { groups, label: "Order value by channel", format: move |v: f64| format!("${v:.0}") }
    }
}

Anatomy

Component	data-part	Renders
`DensityChart`	root	figure with a screen-reader table of every observation
	overlay	Focusable plot; arrow keys move along the value axis
	area	Filled curve per group
	line	Curve outline
	tooltip	Every group's density at the active value
	annotation	Reference line, band or point

Keyboard

Key	Does
`ArrowRight / ArrowLeft`	Move along the value axis
`Home / End`	Lowest or highest value
`Escape`	Clear

Props

Prop	Type	Notes
`groups`	Vec<Group>	Required. Group::new(label, values); past six fold into Other
`label`	String	Required. What the chart shows; the accessible name
`bandwidth`	f64	Kernel bandwidth in data units. Default: Silverman's rule
`annotations`	Vec<Annotation>	X in data values, y in densities
`height`	u16	Plot height in px. Default 240
`format`	Fn(f64) -> String	Formats value 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