Violin
Kernel-density violins per group: each body is the distribution's shape mirrored about its axis, with a box inside (IQR bar, whiskers, a punched-out median) or dashed quartile rules, and an optional strip of the raw samples.
$149 once · every Pro piece
Two series split every violin down the middle, with a legend that isolates and toggles a half. Point at a violin and a hot chord cuts across it at your height, exactly as wide as the density there, while the panel reads the value, the density and its percentile; ↑/↓ move that slice from the keyboard. Violins unfold from their axis as the reveal passes and morph when the data or bandwidth changes.
Install
npx shadcn@latest add @obsyde/violinNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { Violin } from '@/components/obsyde/ember/violin/Violin';
export function Example() {
return (
<Violin inner="box" />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/violin/Violin.tsxcomponentember/violin/violin.cssstylesember/violin/ViolinDemo.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/States.tsxsharedember/viz-kit/shape.tssharedember/viz-kit/Legend.tsxsharedember/viz-kit/Grid.tsxsharedember/viz-kit/demo.tsxsharedember/viz-kit/demo.csssharedember/viz-kit/Axis.tsxshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
splitSplit | boolean | false |
innerInner | 'box' | 'quartiles' | 'none' | 'box' |
stripSample strip | boolean | false |
bandwidthBandwidth | number | 1 |
groupsGroups | number | 5 |
tooltipTooltip | 'panel' | 'none' | 'panel' |
sliceSlice | 'quiet' | 'hot' | 'quiet' |
crosshairCrosshair | 'none' | 'dashed' | 'none' |
patternPattern | 'none' | 'diagonal-up' | 'diagonal-down' | 'dots' | 'vertical' | 'crosshatch' | 'none' |
backgroundBackground | 'grid' | 'dots' | 'hatch' | 'none' | 'grid' |
revealReveal | 'sweep' | 'cool' | 'rise' | 'fade' | 'none' | 'sweep' |
statusStatus | 'ready' | 'loading' | 'empty' | 'ready' |
heightHeight | number | 300 |
seedSeed | number | 3 |