Arc Diagram
Nodes on one line and their links as arcs above it, each as thick as its weight.
$149 once · every Pro piece
Hover a node and it runs hot while its arcs re-draw outward from it and its neighbours stay lit; everything else fades back. Hover an arc for that one link and its two ends. Re-sort by group, degree or name and the nodes spring to their new places with every arc stretching after them. Split mode keeps links inside a group above the line and sends links across groups below it. The legend keys the groups: hover lights a group's links, a click folds its nodes away and the line re-spaces. Tab in and use the arrow keys to walk the nodes.
Install
npx shadcn@latest add @obsyde/arc-diagramNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { ArcDiagram } from '@/components/obsyde/ember/arc-diagram/ArcDiagram';
export function Example() {
return (
<ArcDiagram nodes={18} groups={4} sort="group" />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/arc-diagram/ArcDiagram.tsxcomponentember/arc-diagram/arc-diagram.cssstylesember/arc-diagram/ArcDiagramDemo.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/Legend.tsxsharedember/viz-kit/demo.tsxsharedember/viz-kit/demo.cssshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
nodesNodes | number | 18 |
groupsGroups | number | 4 |
densityLinks per node | number | 1.6 |
sortSort | 'group' | 'degree' | 'name' | 'group' |
layoutLayout | 'above' | 'split' | 'above' |
maxWidthMax stroke | number | 6 |
legendLegend | 'row' | 'none' | 'row' |
tooltipTooltip | 'panel' | 'none' | 'panel' |
statusStatus | 'ready' | 'loading' | 'empty' | 'ready' |
heightHeight | number | 320 |
seedSeed | number | 11 |