Violin Chart
Mirror kernel density plots to compare distributions and spot multi-modal behaviour.
Source
LLM docs
Package
npm install @plocks/chartsExamples
6
Properties
50
Playground
Basics
ViolinChart shows a data distribution with a mirrored density shape and summary statistics.
Loading demo…
import { ViolinChart } from '@plocks/charts';
import { SERIES } from './data';
export function Demo() {
return (
<ViolinChart
title="Delivery time distribution"
h={360}
series={SERIES}
samples={128}
bandwidth={3.5}
/>
);
}Delivery Times
Loading demo…
import { ViolinChart } from '@plocks/charts';
import { FULFILLMENT_CENTERS, SLA_WINDOW, STATS_MARKERS } from './data';
export function Demo() {
return (
<ViolinChart
title="Delivery time spread by fulfillment center"
subtitle="Distribution of hours from order capture to doorstep delivery"
h={460}
series={FULFILLMENT_CENTERS}
samples={96}
bandwidth={1.6}
violinWidthRatio={0.82}
statsMarkers={STATS_MARKERS}
valueBands={SLA_WINDOW}
yAxis={{ title: 'Hours to deliver', show: true, labelFormatter: (value) => `${value.toFixed(0)}h` }}
/>
);
}Experiment Metric Deltas
Loading demo…
import { ViolinChart } from '@plocks/charts';
import { EXPERIMENT_SERIES, STATS, VALUE_BANDS } from './data';
export function Demo() {
return (
<ViolinChart
title="Experiment metric deltas vs. control"
subtitle="Percent change in weekly activation compared to holdout"
h={460}
series={EXPERIMENT_SERIES}
samples={88}
bandwidth={1.5}
violinWidthRatio={0.68}
statsMarkers={STATS}
valueBands={VALUE_BANDS}
yAxis={{
title: 'Percent delta',
labelFormatter: (value) => `${value.toFixed(1)}%`,
}}
xAxis={{ show: true, title: 'Variant cohorts' }}
/>
);
}Model Prediction Errors
Loading demo…
import { ViolinChart } from '@plocks/charts';
import { ERROR_SERIES, STATS, VALUE_BANDS } from './data';
export function Demo() {
return (
<ViolinChart
title="Prediction error distribution per model version"
subtitle="Mean absolute error (percentage points) across validation folds"
h={460}
series={ERROR_SERIES}
samples={96}
bandwidth={0.9}
violinWidthRatio={0.78}
statsMarkers={STATS}
valueBands={VALUE_BANDS}
yAxis={{
title: 'MAE (%)',
labelFormatter: (value) => `${value.toFixed(2)}%`,
}}
/>
);
}Salary Distribution
Loading demo…
import { ViolinChart } from '@plocks/charts';
import { MARKET_RANGE, SALARY_SERIES, STATS } from './data';
export function Demo() {
return (
<ViolinChart
title="Total compensation distribution by department"
subtitle="Annual salary including bonus (USD thousands)"
h={480}
series={SALARY_SERIES}
samples={96}
bandwidth={2.8}
violinWidthRatio={0.74}
statsMarkers={STATS}
valueBands={MARKET_RANGE}
yAxis={{
title: 'Total compensation (k$)',
labelFormatter: (value) => `$${value.toFixed(0)}k`,
}}
/>
);
}Session Duration By Platform
Loading demo…
import { ViolinChart } from '@plocks/charts';
import { ENGAGEMENT_BANDS, SESSION_SERIES, STATS } from './data';
export function Demo() {
return (
<ViolinChart
title="Session duration distribution by platform"
subtitle="Minutes per active session across major surfaces"
h={440}
series={SESSION_SERIES}
samples={88}
bandwidth={1.9}
violinWidthRatio={0.7}
statsMarkers={STATS}
valueBands={ENGAGEMENT_BANDS}
yAxis={{
title: 'Minutes per session',
labelFormatter: (value) => `${value.toFixed(1)} min`,
}}
/>
);
}Related charts
Further reading
React Native design for iOS, Android, and Web.
Quick Links
Resources