パラレル座標ライブラリ比較

'use client';
import { ResponsiveParallelCoordinates } from '@nivo/parallel-coordinates';

const data = [
  { product: 'A', sales: 85, cost: 42, profit: 43, satisfaction: 4.2 },
  { product: 'B', sales: 62, cost: 38, profit: 24, satisfaction: 3.8 },
  { product: 'C', sales: 91, cost: 55, profit: 36, satisfaction: 4.5 },
  { product: 'D', sales: 48, cost: 25, profit: 23, satisfaction: 3.5 },
  { product: 'E', sales: 75, cost: 48, profit: 27, satisfaction: 4.0 },
];

const variables = [
  { key: 'sales', type: 'linear' as const, min: 0, max: 100, ticksPosition: 'before' },
  { key: 'cost', type: 'linear' as const, min: 0, max: 70, ticksPosition: 'before' },
  { key: 'profit', type: 'linear' as const, min: 0, max: 60, ticksPosition: 'before' },
  { key: 'satisfaction', type: 'linear' as const, min: 1, max: 5, ticksPosition: 'before' },
];

export function NivoParallelCoordinates() {
  return (
    <div style={{ height: 300 }}>
      <ResponsiveParallelCoordinates
        data={data}
        variables={variables}
        margin={{ top: 50, right: 60, bottom: 50, left: 60 }}
        colors={{ scheme: 'category10' }}
        strokeWidth={2}
        lineOpacity={0.5}
        curve="monotoneX"
      />
    </div>
  );
}

'use client';
// D3.js カスタム平行座標プロット実装
const data = [
  { sales: 85, cost: 42, profit: 43, satisfaction: 4.2 },
  { sales: 62, cost: 38, profit: 24, satisfaction: 3.8 },
  { sales: 91, cost: 55, profit: 36, satisfaction: 4.5 },
  { sales: 48, cost: 25, profit: 23, satisfaction: 3.5 },
  { sales: 75, cost: 48, profit: 27, satisfaction: 4.0 },
];

const axes = [
  { key: 'sales', label: '売上', min: 0, max: 100 },
  { key: 'cost', label: 'コスト', min: 0, max: 70 },
  { key: 'profit', label: '利益', min: 0, max: 60 },
  { key: 'satisfaction', label: '満足度', min: 1, max: 5 },
];

const colors = ['#3b82f6', '#10b981', '#8b5cf6', '#f97316', '#ec4899'];

function normalize(value: number, min: number, max: number, height: number): number {
  return height - ((value - min) / (max - min)) * height;
}

export function D3ParallelCoordinates() {
  const width = 400, height = 220;
  const marginX = 40, marginY = 30;
  const chartW = width - marginX * 2;
  const chartH = height - marginY * 2;
  const step = chartW / (axes.length - 1);

  return (
    <svg viewBox={`0 0 ${width} ${height + marginY}`} className="w-full">
      <g transform={`translate(${marginX}, ${marginY})`}>
        {data.map((d, i) => {
          const points = axes.map((ax, j) =>
            `${j * step},${normalize((d as any)[ax.key], ax.min, ax.max, chartH)}`
          ).join(' ');
          return <polyline key={i} points={points} fill="none" stroke={colors[i]} strokeWidth={1.5} opacity={0.6} />;
        })}
        {axes.map((ax, j) => (
          <g key={ax.key} transform={`translate(${j * step}, 0)`}>
            <line y1={0} y2={chartH} stroke="#d1d5db" strokeWidth={1} />
            <text y={-8} textAnchor="middle" fontSize={10} fill="#374151">{ax.label}</text>
          </g>
        ))}
      </g>
    </svg>
  );
}

'use client';
// 外部依存ゼロのReact + SVGカスタム実装
const data = [
  { sales: 85, cost: 42, profit: 43, satisfaction: 4.2 },
  { sales: 62, cost: 38, profit: 24, satisfaction: 3.8 },
  { sales: 91, cost: 55, profit: 36, satisfaction: 4.5 },
  { sales: 48, cost: 25, profit: 23, satisfaction: 3.5 },
];

const axes = [
  { key: 'sales', label: '売上', min: 0, max: 100 },
  { key: 'cost', label: 'コスト', min: 0, max: 70 },
  { key: 'profit', label: '利益', min: 0, max: 60 },
  { key: 'satisfaction', label: '満足度', min: 1, max: 5 },
];

const colors = ['#3b82f6', '#10b981', '#8b5cf6', '#f97316'];

const normalize = (v: number, min: number, max: number, h: number) =>
  h - ((v - min) / (max - min)) * h;

export function CustomParallelCoordinates() {
  const w = 400, h = 200, mx = 40, my = 30;
  const chartW = w - mx * 2;
  const chartH = h - my * 2;
  const step = chartW / (axes.length - 1);

  return (
    <svg viewBox={`0 0 ${w} ${h + my}`} className="w-full">
      <g transform={`translate(${mx}, ${my})`}>
        {data.map((d, i) => (
          <polyline key={i}
            points={axes.map((ax, j) =>
              `${j * step},${normalize((d as any)[ax.key], ax.min, ax.max, chartH)}`
            ).join(' ')}
            fill="none" stroke={colors[i]} strokeWidth={2} opacity={0.7} />
        ))}
        {axes.map((ax, j) => (
          <g key={ax.key} transform={`translate(${j * step}, 0)`}>
            <line y1={0} y2={chartH} stroke="#9ca3af" />
            <text y={-6} textAnchor="middle" fontSize={10} fill="#374151">{ax.label}</text>
          </g>
        ))}
      </g>
    </svg>
  );
}