Scatter Plot
Points on the viz-kit chart with a free pointer.
$149 once · every Pro piece
Point anywhere and the nearest point gets a quiet bone ring and a panel with its values; drag a rectangle to brush and the points inside run hot while the rest fall back, with n of N rolling in the header. In zoom mode the brush becomes the view and the axes tween to it; a double-click zooms back out. The arrow keys walk points left to right. Options: groups with a legend that isolates, hides and locks, depth of field (inactive points blur), rings, luminance by height, a deterministic jitter strip, an opt-in free crosshair with a y value pill, a trend line, a reference band, dot backgrounds, and loading and empty states.
Install
npx shadcn@latest add @obsyde/scatter-plotNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { ScatterPlot } from '@/components/obsyde/ember/scatter-plot/ScatterPlot';
export function Example() {
return (
<ScatterPlot shape="clusters" blur />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/scatter-plot/ScatterPlot.tsxcomponentember/scatter-plot/scatter-plot.cssstylesember/scatter-plot/ScatterPlotDemo.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/Axis.tsxsharedember/viz-kit/annotations.tsxshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
shapeShape | 'cloud' | 'clusters' | 'strip' | 'cloud' |
pointsPoints | number | 300 |
markerMarker | 'dot' | 'ring' | 'dot' |
sizeDot size (0 = auto) | number | 0 |
yGradientY gradient | boolean | false |
blurBlur inactive | boolean | false |
brushModeBrush | 'select' | 'zoom' | 'select' |
brushedBrushed | boolean | false |
trendTrend | 'none' | 'dashed' | 'gradient' | 'none' |
bandReference band | boolean | false |
legendLegend | 'row' | 'none' | 'row' |
tooltipTooltip | 'panel' | 'none' | 'panel' |
crosshairCrosshair | 'none' | 'dashed' | 'none' |
backgroundBackground | 'grid' | 'dots' | 'none' | 'grid' |
statusStatus | 'ready' | 'loading' | 'empty' | 'ready' |
heightHeight | number | 320 |
labelLabel | string | 'Scatter' |
seedSeed | number | 5 |