KDE로 데이터 분포를 부드럽게 시각화하기

/**
 * Silverman의 경험적 규칙을 사용해 최적의 bandwidth 계산
 * h = 0.9 * min(σ, IQR / 1.34) * n^(-1/5)
 */
export const calculateBandwidth = (data: number[]): number => {
  if (data.length < 2) return 1;

  const n = data.length;
  const stdDev = calculateStdDev(data);
  const iqr = calculateIQR(data);

  // 표준편차와 정규화된 IQR 중 더 작은 값을 사용해
  // 이상치에 강건한 scale 값 계산
  const scale = Math.min(stdDev, iqr / 1.34);

  // 모든 값이 동일하여 scale이 0인 경우
  if (scale === 0) {
    const mean = data.reduce((sum, val) => sum + val, 0) / n;
    return mean * 0.1 || 1;
  }

  // Silverman의 경험적 규칙 적용
  return 0.9 * scale * Math.pow(n, -0.2);
};

/**
 * Gaussian 커널 함수
 * K(x) = (1 / √(2π)) * e^(-x² / 2)
 */
export const gaussianKernel = (x: number): number => {
  return Math.exp(-0.5 * x * x) / Math.sqrt(2 * Math.PI);
};

export const calculateKDE = (
  data: number[],
  bandwidth?: number,
  samplePoints: number = 100,
): KDEPoint[] => {
  if (data.length === 0) return [];

  const h = bandwidth ?? calculateBandwidth(data);
  const n = data.length;

  // x 축 범위 설정: 최소/최대값 기준으로 ± 3 * bandwidth 만큼 확장
  const minVal = Math.min(...data);
  const maxVal = Math.max(...data);
  const padding = h * 3;
  const xMin = Math.max(0, minVal - padding);
  const xMax = maxVal + padding;

  // 샘플 포인트 생성
  const step = (xMax - xMin) / samplePoints;
  const result: KDEPoint[] = [];

  for (let i = 0; i <= samplePoints; i++) {
    const x = xMin + i * step;

    // 해당 x 지점에서의 밀도 계산
    let density = 0;
    for (const dataPoint of data) {
      const u = (x - dataPoint) / h;
      density += gaussianKernel(u);
    }
    density /= n * h;

    result.push({ x, density });
  }

  return result;
};

export const calculateBandwidthFromStats = (
  stdDev: number,
  p25: number,
  p75: number,
  n: number,
  mean: number,
): number => {
  if (n < 2) return 1;

  const iqr = p75 - p25;
  const scale = Math.min(stdDev, iqr / 1.34);

  if (scale === 0) {
    return mean * 0.1 || 1;
  }

  return 0.9 * scale * Math.pow(n, -0.2);
};

const DensityChart = ({ data, stats, height = 200 }: Props) => {
  const { kdeData, isEmpty, hasInsufficientData } = useKDE(data, stats);

  if (isEmpty) {
    return <div>데이터가 없습니다.</div>;
  }

  if (hasInsufficientData) {
    return <div>분포를 표시하기에 데이터가 부족합니다.</div>;
  }

  return (
    <ResponsiveContainer width="100%" height={height}>
      <AreaChart data={kdeData}>
        <defs>
          <linearGradient id="densityGradient" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#4f46e5" stopOpacity={0.4} />
            <stop offset="100%" stopColor="#4f46e5" stopOpacity={0.05} />
          </linearGradient>
        </defs>
        <Area
          type="monotone"
          dataKey="density"
          stroke="#4f46e5"
          fill="url(#densityGradient)"
        />
      </AreaChart>
    </ResponsiveContainer>
  );
};

const useKDE = (
  data: number[],
  precomputedStats?: Stats,
  samplePoints: number = 100,
) => {
  return useMemo(() => {
    const validData = data.filter(
      v => typeof v === 'number' && !isNaN(v) && v >= 0,
    );

    if (validData.length === 0) {
      return { kdeData: [], isEmpty: true, hasInsufficientData: true };
    }

    // 사전 계산된 통계값이 있으면 활용
    let bandwidth: number | undefined;
    if (precomputedStats) {
      bandwidth = calculateBandwidthFromStats(
        precomputedStats.stdDev,
        precomputedStats.p25,
        precomputedStats.p75,
        validData.length,
        precomputedStats.mean,
      );
    }

    const kdeData = calculateKDE(validData, bandwidth, samplePoints);

    return {
      kdeData,
      isEmpty: false,
      hasInsufficientData: validData.length < 5,
    };
  }, [data, precomputedStats, samplePoints]);
};

const MiniBoxPlot = ({ min, max, p25, p75, median }: Props) => {
  const range = max - min;
  const getPosition = (val: number) => ((val - min) / range) * 100;

  return (
    <div className="relative mx-4 h-8">
      {/* 전체 범위 (Min ~ Max) */}
      <div className="absolute top-1/2 h-1 w-full -translate-y-1/2 rounded bg-gray-200" />
      {/* IQR 박스 (Q1 ~ Q3) */}
      <div
        className="absolute top-1/2 h-4 -translate-y-1/2 rounded bg-indigo-200"
        style={{
          left: `${getPosition(p25)}%`,
          width: `${getPosition(p75) - getPosition(p25)}%`,
        }}
      />
      {/* 중앙값 마커 */}
      <div
        className="absolute top-1/2 h-5 w-0.5 -translate-y-1/2 rounded bg-indigo-700"
        style={{ left: `${getPosition(median)}%` }}
      />
    </div>
  );
};