Chord Diagram
Flows between groups around a circle. Each group is an arc sized by what it sends, ringed by a fine instrument scale of ticks; chords join every pair, shaded along the grey ladder from the source's tone to the target's.
$149 once · every Pro piece
On mount the ring sweeps in clockwise and the chords rise after it. Hover a group and only its chords stay while the rest fall to a tenth; hover a chord and that one flow runs hot, with both directions in the panel. The legend is linked both ways: a click folds a group away and the whole layout re-flows from a tweened matrix. Tab in and use the arrow keys to step through the groups.
Install
npx shadcn@latest add @obsyde/chord-diagramNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { ChordDiagram } from '@/components/obsyde/ember/chord-diagram/ChordDiagram';
export function Example() {
return (
<ChordDiagram groups={5} />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/chord-diagram/ChordDiagram.tsxcomponentember/chord-diagram/chord-diagram.cssstylesember/chord-diagram/ChordDiagramDemo.tsxdemoember/viz-kit/viz-kit.csssharedember/viz-kit/Tooltip.tsxsharedember/viz-kit/focus.tssharedember/viz-kit/patterns.tsxsharedember/viz-kit/roll.tssharedember/shared/rolling-number.csssharedember/shared/spring.tssharedember/shared/accent.tssharedember/viz-kit/scale.tssharedember/viz-kit/motion.tssharedember/viz-kit/chart.tsxsharedember/shared/ember.csssharedember/viz-kit/touch.tssharedember/viz-kit/keyboard.tssharedember/viz-kit/size.tssharedember/viz-kit/state-messages.tsxsharedember/viz-kit/stage.tsxsharedember/viz-kit/stage.csssharedember/viz-kit/shape.tssharedember/viz-kit/Legend.tsxsharedember/viz-kit/demo.tsxsharedember/viz-kit/demo.cssshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
groupsGroups | number | 5 |
gapGap | number | 6 |
ticksTick ring | boolean | true |
chordsChord fill | 'gradient' | 'source' | 'gradient' |
selfFlowFlow within groups | boolean | false |
legendLegend | 'row' | 'none' | 'row' |
tooltipTooltip | 'panel' | 'none' | 'panel' |
statusStatus | 'ready' | 'loading' | 'empty' | 'ready' |
seedSeed | number | 8 |