Skip to content
Get Pro
Relationships

Sankey

Flows between columns of thin bone bars, carried by ribbons that run as gradients from the source's grey to the target's.

$149 once · every Pro piece

Customize

Nodes fade in column by column, then the ribbons grow from source to target on the shared reveal curve. Point at a node or a ribbon, or walk them with the arrow keys, and every path through it heats end to end while unrelated ribbons drop to a tenth and unrelated nodes step back; % pills appear on the ribbons it touches and the readout rolls to its value and share. Options: flat ribbons, pills always on the wide ribbons, a node lit at rest, column captions, loading and empty states. The layout is relaxed in the component itself, and new data morphs into place on springs.

Install

npx shadcn@latest add @obsyde/sankey

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { Sankey } from '@/components/obsyde/ember/sankey/Sankey';

export function Example() {
  return (
    <Sankey />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

  • ember/sankey/Sankey.tsxcomponent
  • ember/sankey/sankey.cssstyles
  • ember/sankey/SankeyDemo.tsxdemo
  • ember/viz-kit/viz-kit.cssshared
  • ember/viz-kit/size.tsshared
  • ember/viz-kit/scale.tsshared
  • ember/viz-kit/patterns.tsxshared
  • ember/viz-kit/motion.tsshared
  • ember/shared/spring.tsshared
  • ember/shared/accent.tsshared
  • ember/viz-kit/demo.tsxshared
  • ember/viz-kit/demo.cssshared
  • ember/shared/RollingNumber.tsxshared
  • ember/shared/rolling-number.cssshared
  • ember/shared/ember.cssshared
  • ember/viz-kit/touch.tsshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
focusFocus'none' | 'alpha' | 'beta' | 'gamma' | 'delta' | 'stage-i' | 'stage-ii' | 'stage-iii' | 'out-a' | 'out-b' | 'out-c' | 'out-d''none'
ribbonsRibbons'gradient' | 'solid''gradient'
pillsPills'hover' | 'always' | 'none''hover'
captionsColumn captionsbooleantrue
heightHeightnumber320
statusStatus'ready' | 'loading' | 'empty''ready'
seedSeednumber5