Beeswarm
A deterministic swarm plot: every sample is a dot on the value axis, nudged up or down just enough not to touch its neighbours, so the outline of each swarm is the distribution and every point can still be pointed at.
$149 once · every Pro piece
Switch the grouping (all, by region, by tier) and each dot flies to its new swarm on its own spring, leaving in value order so the population visibly re-sorts. The pointer snaps to the nearest dot rather than the nearest x: it lifts and lights in the accent while the other groups step back, optionally blurring out of focus. Dashed median ticks cross each swarm; the legend isolates and hides groups; ←/→ walk the dots in value order.
Install
npx shadcn@latest add @obsyde/beeswarmNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { Beeswarm } from '@/components/obsyde/ember/beeswarm/Beeswarm';
export function Example() {
return (
<Beeswarm by="group" />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/beeswarm/Beeswarm.tsxcomponentember/beeswarm/beeswarm.cssstylesember/beeswarm/BeeswarmDemo.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' |
byGroup by | 'group' | 'tier' | 'none' | 'group' |
pointsPoints | number | 220 |
radiusRadius | number | 4 |
blurBlur inactive | boolean | false |
medianMedians | boolean | true |
legendLegend | 'row' | 'none' | 'row' |
tooltipTooltip | 'panel' | 'none' | 'panel' |
backgroundBackground | 'grid' | 'dots' | 'hatch' | 'none' | 'grid' |
revealReveal | 'sweep' | 'none' | 'sweep' |
statusStatus | 'ready' | 'loading' | 'empty' | 'ready' |
heightHeight | number | 300 |
seedSeed | number | 5 |