A ridgeline (joy) plot that stacks overlapping smoothed distributions, one per group, so you can compare shapes like seasonal temperatures or response times at a glance; hover lifts a ridge to read its quartiles and switching datasets morphs every curve.
"use client";
import Ridgeline, { type RidgelineSeries } from "@/components/ui/ridgeline";
const MONTHS = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
];
const MEANS = [-2, 0, 5, 10, 15, 19, 22, 21, 17, 11, 4, 0];
function gaussian(seed: number) {
let state = seed;
return () => {
state = (state * 1103515245 + 12345) % 2147483648;
const u = state / 2147483648;
state = (state * 1103515245 + 12345) % 2147483648;
const v = state / 2147483648;
return Math.sqrt(-2 * Math.log(u || 1e-9)) * Math.cos(2 * Math.PI * v);
};
}
const series: RidgelineSeries[] = MONTHS.map((label, index) => {
const next = gaussian(index * 97 + 11);
const values = Array.from({ length: 60 }, () => MEANS[index] + next() * 3.4);
return { id: label, label, values };
});
export default function RidgelineDemo() {
return (
<div className="w-full max-w-xl p-6">
<Ridgeline
series={series}
label="Daily high temperatures in Zurich by month"
unit="°"
/>
</div>
);
}