Density Plot
Smooth kernel-density curves, overlaid on one baseline or stacked as ridges that occlude the row behind.
$149 once · every Pro piece
The area under each curve is an ordered dither whose ink is the density itself: the peak is near-solid, the tails thin to scattered dots, and there are no edge lines. Gradient and pattern fills are there too. Each curve carries its median and interquartile range on its baseline, the crosshair reads the share of samples below the pointer, and a narrow / auto / wide bandwidth switch morphs every curve over 500ms. The legend isolates and toggles curves; the y range tweens to what is left.
Install
npx shadcn@latest add @obsyde/density-plotNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { DensityPlot } from '@/components/obsyde/ember/density-plot/DensityPlot';
export function Example() {
return (
<DensityPlot mode="overlay" shading="dither" />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/density-plot/DensityPlot.tsxcomponentember/density-plot/density-plot.cssstylesember/density-plot/DensityPlotDemo.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' |
modeMode | 'overlay' | 'ridge' | 'overlay' |
shadingShading | 'dither' | 'gradient' | 'pattern' | 'none' | 'dither' |
bandwidthBandwidth | number | 1 |
markersMedian & IQR | boolean | true |
seriesSeries | number | 3 |
legendLegend | 'row' | 'none' | 'row' |
tooltipTooltip | 'panel' | 'none' | 'panel' |
crosshairCrosshair | 'none' | 'solid' | 'dashed' | 'gradient' | 'none' |
backgroundBackground | 'grid' | 'dots' | 'hatch' | 'none' | 'grid' |
revealReveal | 'sweep' | 'cool' | 'rise' | 'fade' | 'none' | 'sweep' |
statusStatus | 'ready' | 'loading' | 'empty' | 'ready' |
heightHeight | number | 280 |
seedSeed | number | 2 |