Chord chart

Flows between groups from a square matrix. Each arc is sized by what its group sends, and each ribbon is as wide at each end as the flow that way. Hover a group to see only its chords.

Accounts moving between plans
From → To	Free	Starter	Team	Business	Enterprise
Free	0	420	160	30	4
Starter	180	0	310	60	8
Team	40	95	0	140	22
Business	6	12	48	0	35
Enterprise	0	2	5	14	0

Usage

use hydroxy_leptos::chord_chart::*;
use leptos::prelude::*;

pub fn demo() -> AnyView {
    let plans: Vec<String> =
        ["Free", "Starter", "Team", "Business", "Enterprise"].iter().map(|s| (*s).to_string()).collect();
    // Accounts moving between plans over the year: row = from, column = to.
    let moves = vec![
        vec![0.0, 420.0, 160.0, 30.0, 4.0],
        vec![180.0, 0.0, 310.0, 60.0, 8.0],
        vec![40.0, 95.0, 0.0, 140.0, 22.0],
        vec![6.0, 12.0, 48.0, 0.0, 35.0],
        vec![0.0, 2.0, 5.0, 14.0, 0.0],
    ];

    view! { <ChordChart names=plans matrix=moves label="Accounts moving between plans" /> }.into_any()
}

use dioxus::prelude::*;
use hydroxy_dioxus::chord_chart::ChordChart;

#[component]
pub fn ChordChartDemo() -> Element {
    let plans: Vec<String> =
        ["Free", "Starter", "Team", "Business", "Enterprise"].iter().map(|s| (*s).to_string()).collect();
    // Accounts moving between plans over the year: row = from, column = to.
    let moves = vec![
        vec![0.0, 420.0, 160.0, 30.0, 4.0],
        vec![180.0, 0.0, 310.0, 60.0, 8.0],
        vec![40.0, 95.0, 0.0, 140.0, 22.0],
        vec![6.0, 12.0, 48.0, 0.0, 35.0],
        vec![0.0, 2.0, 5.0, 14.0, 0.0],
    ];

    rsx! {
        ChordChart { names: plans, matrix: moves, label: "Accounts moving between plans" }
    }
}

Anatomy

Component	data-part	Renders
`ChordChart`	root	figure; `data-active` while a group or ribbon is picked out
	group	Arc for one group, sized by its row total; `data-dim` when another group is active
	ribbon	Flow between two groups, coloured by the side that sends more; `data-dim` when it isn't part of the active group
	tooltip	Sends and receives for a group, or the flow each way for a ribbon
	sr-table	The full matrix, for screen readers and CSV export

Keyboard

Key	Does
`Arrow keys`	Step through groups
`Home / End`	First or last group
`Escape`	Clear the active group

Props

Prop	Type	Notes
`names`	Vec<String>	Required. One name per group, in matrix order
`matrix`	Vec<Vec<f64>>	Required. matrix[i][j] is the flow from group i to group j
`label`	String	Required. What the chart shows; the accessible name
`pad`	f64	Gap between groups in radians. Default 0.04
`format`	Fn(f64) -> String	Formats values in the tooltip, readout 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