バイオリンプロットライブラリ比較

'use client';
import dynamic from 'next/dynamic';
const Plot = dynamic(() => import('react-plotly.js'), { ssr: false });

const dataMap: Record<string, number[]> = {
  'グループA': [52,58,61,63,65,67,68,69,70,71,72,73,74,75,76,77,78,80,83,88],
  'グループB': [40,45,50,55,58,60,62,65,68,70,72,75,78,80,83,85,88,90,93,98],
  'グループC': [60,62,64,65,66,67,68,69,70,71,71,72,72,73,74,75,76,77,78,80],
};

const colors = ['#4f86c6', '#f59e0b', '#10b981'];

export function PlotlyViolin() {
  const traces = Object.entries(dataMap).map(([name, y], i) => ({
    type: 'violin' as const,
    name,
    y,
    box: { visible: true },
    meanline: { visible: true },
    points: 'none' as const,
    fillcolor: colors[i],
    line: { color: colors[i] },
    opacity: 0.7,
  }));

  return (
    <Plot
      data={traces}
      layout={{
        yaxis: { title: '値' },
        violingap: 0.3,
        violinmode: 'group',
        margin: { t: 20, b: 40, l: 50, r: 20 },
        height: 400,
        showlegend: true,
        paper_bgcolor: 'transparent',
        plot_bgcolor: 'transparent',
      }}
      config={{ displayModeBar: false }}
      style={{ width: '100%' }}
    />
  );
}

'use client';
import { useRef, useEffect } from 'react';
import * as d3 from 'd3';

const dataMap: Record<string, number[]> = {
  'グループA': [52,58,61,63,65,67,68,69,70,71,72,73,74,75,76,77,78,80,83,88],
  'グループB': [40,45,50,55,58,60,62,65,68,70,72,75,78,80,83,85,88,90,93,98],
  'グループC': [60,62,64,65,66,67,68,69,70,71,71,72,72,73,74,75,76,77,78,80],
};

const colors = ['#4f86c6', '#f59e0b', '#10b981'];

// エパネチニコフカーネル
function kernelEpanechnikov(bandwidth: number) {
  return (x: number) =>
    Math.abs(x /= bandwidth) <= 1 ? (0.75 * (1 - x * x)) / bandwidth : 0;
}

// カーネル密度推定（KDE）を自前で実装している
function kde(
  kernel: (x: number) => number,
  thresholds: number[],
  data: number[],
) {
  return thresholds.map(
    x => [x, d3.mean(data, d => kernel(x - d))] as [number, number],
  );
}

export function D3Violin() {
  const ref = useRef<SVGSVGElement>(null);

  useEffect(() => {
    if (!ref.current) return;
    const svg = d3.select(ref.current);
    svg.selectAll('*').remove();

    const margin = { top: 20, right: 30, bottom: 40, left: 50 };
    const width  = ref.current.clientWidth - margin.left - margin.right;
    const height = 360 - margin.top - margin.bottom;

    const g = svg
      .attr('width',  width  + margin.left + margin.right)
      .attr('height', height + margin.top  + margin.bottom)
      .append('g')
      .attr('transform', `translate(${margin.left},${margin.top})`);

    const groups = Object.keys(dataMap);
    const allValues = Object.values(dataMap).flat();

    const xScale = d3.scaleBand().domain(groups).range([0, width]).padding(0.3);
    const yScale = d3.scaleLinear()
      .domain([d3.min(allValues)! - 5, d3.max(allValues)! + 5])
      .range([height, 0]);

    g.append('g').attr('transform', `translate(0,${height})`).call(d3.axisBottom(xScale));
    g.append('g').call(d3.axisLeft(yScale));

    const bandwidth = 5;
    const kernel = kernelEpanechnikov(bandwidth);
    const thresholds = d3.range(
      d3.min(allValues)! - 10,
      d3.max(allValues)! + 10,
      1,
    );

    groups.forEach((group, i) => {
      const data = dataMap[group];
      const density = kde(kernel, thresholds, data);
      const maxDensity = d3.max(density, d => d[1])!;
      const halfWidth = (xScale.bandwidth() / 2) * 0.9;

      const xViolin = d3.scaleLinear()
        .domain([-maxDensity, maxDensity])
        .range([-halfWidth, halfWidth]);

      const area = d3.area<[number, number]>()
        .x0(d => xViolin(-d[1]))
        .x1(d => xViolin(d[1]))
        .y(d => yScale(d[0]))
        .curve(d3.curveCatmullRom);

      const cx = xScale(group)! + xScale.bandwidth() / 2;

      g.append('path')
        .datum(density)
        .attr('transform', `translate(${cx},0)`)
        .attr('d', area)
        .attr('fill', colors[i])
        .attr('opacity', 0.7)
        .attr('stroke', colors[i])
        .attr('stroke-width', 1);
    });
  }, []);

  return <svg ref={ref} style={{ width: '100%', height: 400 }} />;
}