ストリームグラフライブラリ比較

'use client';
// ApexStreamgraph.tsx（apexcharts 8.7 / react-apexcharts 2.2。ページ側では next/dynamic の ssr: false で読み込む）
import { useState } from 'react';
import Chart from 'react-apexcharts';
import type { ApexOptions } from 'apexcharts';
// v8 からストリームグラフは既定のバンドルに入っていない。この import が無いと、警告が出て何も描かれない
import 'apexcharts/features/streamgraph';

// サンプルデータ：音楽配信サービスのジャンル別の月間再生数（万回）、2024年1月〜2025年12月。並びは上に積まれる順
const MONTHS = Array.from({ length: 24 }, (_, i) => `${2024 + Math.floor(i / 12)}/${String((i % 12) + 1).padStart(2, '0')}`);
const GENRES = [
  { name: 'J-POP', color: '#3987e5', data: [260, 263, 266, 269, 272, 275, 278, 281, 284, 287, 296, 338, 302, 299, 302, 305, 308, 311, 314, 317, 320, 323, 335, 399] },
  { name: 'ヒップホップ', color: '#d95926', data: [50, 53, 56, 59, 62, 65, 68, 71, 74, 77, 80, 83, 86, 91, 106, 143, 199, 231, 205, 155, 124, 115, 116, 119] },
  { name: 'クリスマスソング', color: '#199e70', data: [5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 13, 215, 13, 5, 5, 5, 5, 5, 5, 5, 5, 5, 12, 195] },
  { name: 'ロック', color: '#c98500', data: [100, 100, 100, 100, 100, 111, 198, 219, 120, 100, 100, 100, 100, 100, 100, 100, 100, 109, 184, 202, 117, 100, 100, 100] },
  { name: 'アニメソング', color: '#d55181', data: [139, 134, 139, 253, 322, 229, 163, 134, 115, 139, 132, 115, 139, 132, 115, 139, 132, 115, 139, 132, 115, 139, 132, 111] },
  { name: 'K-POP', color: '#008300', data: [60, 64, 67, 71, 74, 78, 81, 85, 88, 92, 95, 99, 102, 106, 109, 113, 116, 120, 126, 144, 190, 245, 248, 200] },
];
// 目盛りは半年ごと（1月と7月）だけ。ツールチップの見出しは「2025年2月」
const tick = (m: string) => (m.endsWith('/01') ? `${m.slice(0, 4)}年1月` : m.endsWith('/07') ? '7月' : '');
const monthLabel = (m: string) => `${m.slice(0, 4)}年${Number(m.slice(5))}月`;

export default function ApexStreamgraph() {
  const [mode, setMode] = useState<'stream' | 'stacked'>('stream');

  const options: ApexOptions = {
    chart: { type: 'streamgraph', toolbar: { show: false } },
    // offset：'wiggle' がストリーム、'zero' が通常の積み上げ面。帯の並び（order）は既定の 'inside-out'
    plotOptions: { streamgraph: { offset: mode === 'stream' ? 'wiggle' : 'zero' } },
    colors: GENRES.map((g) => g.color),
    // 帯の境目に、背景と同じ色の細い線を引く（ストリームの既定は線なし）
    stroke: { width: 1, colors: ['#ffffff'] },
    // 左端の目盛りのラベルが切れないよう、左右に余白を取る
    grid: { padding: { left: 28, right: 16 } },
    xaxis: {
      categories: MONTHS,
      labels: { formatter: (v: string) => tick(v), rotate: 0, hideOverlappingLabels: false },
      tooltip: { enabled: false },
    },
    // ストリームの縦の位置は基線からのずれで、値として読めないので、y 軸は積み上げ面のときだけ出す
    yaxis: { show: mode === 'stacked', title: { text: '再生数（万回）' }, labels: { formatter: (v: number) => `${Math.round(v)}` } },
    legend: { position: 'top' },
    tooltip: {
      x: { formatter: (_: number, o?: { dataPointIndex: number }) => (o ? monthLabel(MONTHS[o.dataPointIndex]) : '') },
      y: { formatter: (v: number) => `${v} 万回` },
    },
  };

  return (
    <div>
      {(['stream', 'stacked'] as const).map((m) => (
        <button key={m} type="button" onClick={() => setMode(m)} style={{ marginRight: 4, fontWeight: mode === m ? 700 : 400 }}>{m === 'stream' ? 'ストリーム' : '積み上げ面'}</button>
      ))}
      {/* react-apexcharts の型の type に streamgraph が無いので、値は渡したうえで型だけ外す */}
      <Chart
        type={'streamgraph' as never}
        series={GENRES.map(({ name, data }) => ({ name, data }))}
        options={options}
        height={340}
      />
    </div>
  );
}

'use client';
// MantineStreamgraph.tsx（@mantine/core・@mantine/charts 9.7 / recharts 3.10）
import { useState } from 'react';
import { MantineProvider } from '@mantine/core';
import { AreaChart } from '@mantine/charts';
import '@mantine/core/styles.css';
import '@mantine/charts/styles.css';

// サンプルデータ：音楽配信サービスのジャンル別の月間再生数（万回）、2024年1月〜2025年12月。並びは上に積まれる順
const MONTHS = Array.from({ length: 24 }, (_, i) => `${2024 + Math.floor(i / 12)}/${String((i % 12) + 1).padStart(2, '0')}`);
const GENRES = [
  { name: 'J-POP', color: '#3987e5', data: [260, 263, 266, 269, 272, 275, 278, 281, 284, 287, 296, 338, 302, 299, 302, 305, 308, 311, 314, 317, 320, 323, 335, 399] },
  { name: 'ヒップホップ', color: '#d95926', data: [50, 53, 56, 59, 62, 65, 68, 71, 74, 77, 80, 83, 86, 91, 106, 143, 199, 231, 205, 155, 124, 115, 116, 119] },
  { name: 'クリスマスソング', color: '#199e70', data: [5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 13, 215, 13, 5, 5, 5, 5, 5, 5, 5, 5, 5, 12, 195] },
  { name: 'ロック', color: '#c98500', data: [100, 100, 100, 100, 100, 111, 198, 219, 120, 100, 100, 100, 100, 100, 100, 100, 100, 109, 184, 202, 117, 100, 100, 100] },
  { name: 'アニメソング', color: '#d55181', data: [139, 134, 139, 253, 322, 229, 163, 134, 115, 139, 132, 115, 139, 132, 115, 139, 132, 115, 139, 132, 115, 139, 132, 111] },
  { name: 'K-POP', color: '#008300', data: [60, 64, 67, 71, 74, 78, 81, 85, 88, 92, 95, 99, 102, 106, 109, 113, 116, 120, 126, 144, 190, 245, 248, 200] },
];
// 目盛りは半年ごと（1月と7月）だけ。ツールチップの見出しは「2025年2月」
const tick = (m: string) => (m.endsWith('/01') ? `${m.slice(0, 4)}年1月` : m.endsWith('/07') ? '7月' : '');
const monthLabel = (m: string) => `${m.slice(0, 4)}年${Number(m.slice(5))}月`;
// AreaChart の data は、月ごとの行（{ month: '2024/01', 'J-POP': 260, ... }）
const ROWS = MONTHS.map((month, i) => ({ month, ...Object.fromEntries(GENRES.map((g) => [g.name, g.data[i]])) }));

export default function MantineStreamgraph() {
  const [mode, setMode] = useState<'stream' | 'stacked'>('stream');

  return (
    <MantineProvider>
      {(['stream', 'stacked'] as const).map((m) => (
        <button key={m} type="button" onClick={() => setMode(m)} style={{ marginRight: 4, fontWeight: mode === m ? 700 : 400 }}>{m === 'stream' ? 'ストリーム' : '積み上げ面'}</button>
      ))}
      <AreaChart
        h={340}
        data={ROWS}
        dataKey="month"
        // type="stream" で Recharts の stackOffset="wiggle" になる。"stacked" は通常の積み上げ面
        type={mode}
        series={GENRES.map(({ name, color }) => ({ name, color }))}
        curveType="monotone"
        // 塗りを不透明にする（既定は半透明のグラデーション）。線の色は変えない（凡例とツールチップの色見本が線の色になる）
        withGradient={false}
        fillOpacity={1}
        strokeWidth={1}
        withDots={false}
        withLegend
        // 凡例は既定で名前順（Recharts の itemSorter）なので null で series の順に。幅は既定でグラフの幅から左右の margin を引いたぶんなので全幅に広げる
        legendProps={{ verticalAlign: 'top', itemSorter: null, wrapperStyle: { left: 0, width: '100%' } }}
        valueFormatter={(v) => `${v} 万回`}
        // y 軸は type="stream" のとき既定で消える。積み上げ面では出し、目盛りは数字だけにする
        yAxisLabel={mode === 'stacked' ? '再生数（万回）' : undefined}
        yAxisProps={{ tickFormatter: (v: number) => String(v) }}
        gridAxis={mode === 'stacked' ? 'x' : 'none'}
        // 狭い画面では目盛りを等間隔に間引く（積み上げ面は y 軸のぶん狭くなり、ラベルがくっつく）
        xAxisProps={{ ticks: MONTHS.filter((m) => tick(m)), interval: 'equidistantPreserveStart', tickFormatter: tick }}
        // 帯の並び順の設定（inside-out など）が無く、series の順に積む。series は上に積む順なので、
        // reverseStackOrder で先頭を上に積ませる（margin は左端の目盛りのラベルが切れないように）
        areaChartProps={{ reverseStackOrder: true, margin: { left: 24, right: 16 } }}
        tooltipProps={{ labelFormatter: (l) => (MONTHS.includes(String(l)) ? monthLabel(String(l)) : l) }}
        styles={{ tooltipItemName: { whiteSpace: 'nowrap' }, tooltipItemData: { whiteSpace: 'nowrap' } }}
      />
    </MantineProvider>
  );
}

'use client';
// NivoStreamgraph.tsx（@nivo/stream・@nivo/tooltip 0.99）
import { useMemo, useState } from 'react';
import { ResponsiveStream, type StreamCustomLayerProps, type StreamSliceData } from '@nivo/stream';
import { useTooltip } from '@nivo/tooltip';

// サンプルデータ：音楽配信サービスのジャンル別の月間再生数（万回）、2024年1月〜2025年12月。並びは上に積まれる順
const MONTHS = Array.from({ length: 24 }, (_, i) => `${2024 + Math.floor(i / 12)}/${String((i % 12) + 1).padStart(2, '0')}`);
const GENRES = [
  { name: 'J-POP', color: '#3987e5', data: [260, 263, 266, 269, 272, 275, 278, 281, 284, 287, 296, 338, 302, 299, 302, 305, 308, 311, 314, 317, 320, 323, 335, 399] },
  { name: 'ヒップホップ', color: '#d95926', data: [50, 53, 56, 59, 62, 65, 68, 71, 74, 77, 80, 83, 86, 91, 106, 143, 199, 231, 205, 155, 124, 115, 116, 119] },
  { name: 'クリスマスソング', color: '#199e70', data: [5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 13, 215, 13, 5, 5, 5, 5, 5, 5, 5, 5, 5, 12, 195] },
  { name: 'ロック', color: '#c98500', data: [100, 100, 100, 100, 100, 111, 198, 219, 120, 100, 100, 100, 100, 100, 100, 100, 100, 109, 184, 202, 117, 100, 100, 100] },
  { name: 'アニメソング', color: '#d55181', data: [139, 134, 139, 253, 322, 229, 163, 134, 115, 139, 132, 115, 139, 132, 115, 139, 132, 115, 139, 132, 115, 139, 132, 111] },
  { name: 'K-POP', color: '#008300', data: [60, 64, 67, 71, 74, 78, 81, 85, 88, 92, 95, 99, 102, 106, 109, 113, 116, 120, 126, 144, 190, 245, 248, 200] },
];
// 目盛りは半年ごと（1月と7月）だけ。ツールチップの見出しは「2025年2月」
const tick = (m: string) => (m.endsWith('/01') ? `${m.slice(0, 4)}年1月` : m.endsWith('/07') ? '7月' : '');
const monthLabel = (m: string) => `${m.slice(0, 4)}年${Number(m.slice(5))}月`;
const ROWS = MONTHS.map((_, i) => Object.fromEntries(GENRES.map((g) => [g.name, g.data[i]])));
const TIP_W = 200; // ツールチップの幅（px）。収まる位置を計算するので固定する

// hover で出す表（月の見出しつき。並びは画面の上の帯から）
const Table = ({ s }: { s: StreamSliceData }) => (
  <div style={{ width: TIP_W, background: '#fff', border: '1px solid #e5e7eb', padding: '6px 10px', fontSize: 12 }}>
    <strong>{monthLabel(MONTHS[s.index])}</strong>
    {s.stack.map((d) => (
      <div key={d.layerId} style={{ display: 'flex', gap: 6 }}><span style={{ color: d.color }}>■</span>{d.layerLabel}<span style={{ marginLeft: 'auto' }}>{d.formattedValue}</span></div>
    ))}
  </div>
);

export default function NivoStreamgraph() {
  const [mode, setMode] = useState<'stream' | 'stacked'>('stream');
  const margin = useMemo(() => ({ top: 8, right: 20, bottom: 28, left: mode === 'stacked' ? 60 : 28 }), [mode]);

  // 既定の slices レイヤーの代わり。既定は表をポインターの左右に出すだけで、狭い画面でははみ出すので、収まる位置へずらす
  const HoverLayer = useMemo(() => function HoverLayer({ slices, xScale, yScale }: StreamCustomLayerProps) {
    const { showTooltipAt, hideTooltip } = useTooltip();
    const [innerW, innerH, step] = [xScale.range()[1], yScale.range()[0], xScale.step()];
    const outerW = margin.left + innerW + margin.right;
    const show = (s: StreamSliceData) => {
      const cx = margin.left + s.x;
      const left = cx + 14 + TIP_W <= outerW ? cx + 14 : cx - 14 - TIP_W >= 0 ? cx - 14 - TIP_W : cx < outerW / 2 ? outerW - TIP_W : 0;
      // anchor 'right' は、渡した位置の 14px 右に、縦の中央を合わせて出す
      showTooltipAt(<Table s={s} />, [left - 14, margin.top + innerH / 2], 'right');
    };
    return <g>{slices.map((s) => (
      <rect key={s.index} x={s.x - step / 2} width={step} height={innerH} fill="transparent"
        onMouseEnter={() => show(s)} onMouseMove={() => show(s)} onMouseLeave={hideTooltip} />
    ))}</g>;
  }, [margin]);

  return (
    <div>
      {(['stream', 'stacked'] as const).map((m) => (
        <button key={m} type="button" onClick={() => setMode(m)} style={{ marginRight: 4, fontWeight: mode === m ? 700 : 400 }}>{m === 'stream' ? 'ストリーム' : '積み上げ面'}</button>
      ))}
      <div style={{ height: 340 }}>
        <ResponsiveStream
          data={ROWS}
          keys={GENRES.map((g) => g.name)}
          // offsetType：'wiggle' がストリーム、'none' が通常の積み上げ面。order は山の早いジャンルほど中に置く
          offsetType={mode === 'stream' ? 'wiggle' : 'none'}
          order="insideOut"
          curve="monotoneX"
          colors={({ id }) => GENRES.find((g) => g.name === id)!.color}
          borderWidth={1}
          borderColor="#ffffff"
          margin={margin}
          animate={false} // margin が変わると、目盛りのアニメーションで transform が壊れてエラーが出るため切る
          // ストリームの縦の位置は値として読めないので、y 軸は積み上げ面のときだけ出す
          axisLeft={mode === 'stacked' ? { legend: '再生数（万回）', legendOffset: -50, legendPosition: 'middle' } : null}
          axisBottom={{ tickValues: MONTHS.flatMap((m, i) => (tick(m) ? [i] : [])), format: (i) => tick(MONTHS[Number(i)]) }}
          enableGridY={mode === 'stacked'}
          valueFormat={(v) => `${v} 万回`}
          layers={['grid', 'axes', 'layers', HoverLayer]} // 既定の 'slices' の代わりに HoverLayer を重ねる
        />
      </div>
    </div>
  );
}

'use client';
// D3Streamgraph.tsx（d3-shape 3.2 / d3-scale 4.0）
import { useMemo, useState } from 'react';
import { area, curveMonotoneX, stack, stackOffsetNone, stackOffsetWiggle, stackOrderInsideOut, type SeriesPoint } from 'd3-shape';
import { scaleLinear } from 'd3-scale';

// サンプルデータ：音楽配信サービスのジャンル別の月間再生数（万回）、2024年1月〜2025年12月。並びは上に積まれる順
const MONTHS = Array.from({ length: 24 }, (_, i) => `${2024 + Math.floor(i / 12)}/${String((i % 12) + 1).padStart(2, '0')}`);
const GENRES = [
  { name: 'J-POP', color: '#3987e5', data: [260, 263, 266, 269, 272, 275, 278, 281, 284, 287, 296, 338, 302, 299, 302, 305, 308, 311, 314, 317, 320, 323, 335, 399] },
  { name: 'ヒップホップ', color: '#d95926', data: [50, 53, 56, 59, 62, 65, 68, 71, 74, 77, 80, 83, 86, 91, 106, 143, 199, 231, 205, 155, 124, 115, 116, 119] },
  { name: 'クリスマスソング', color: '#199e70', data: [5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 13, 215, 13, 5, 5, 5, 5, 5, 5, 5, 5, 5, 12, 195] },
  { name: 'ロック', color: '#c98500', data: [100, 100, 100, 100, 100, 111, 198, 219, 120, 100, 100, 100, 100, 100, 100, 100, 100, 109, 184, 202, 117, 100, 100, 100] },
  { name: 'アニメソング', color: '#d55181', data: [139, 134, 139, 253, 322, 229, 163, 134, 115, 139, 132, 115, 139, 132, 115, 139, 132, 115, 139, 132, 115, 139, 132, 111] },
  { name: 'K-POP', color: '#008300', data: [60, 64, 67, 71, 74, 78, 81, 85, 88, 92, 95, 99, 102, 106, 109, 113, 116, 120, 126, 144, 190, 245, 248, 200] },
];
// 目盛りは半年ごと（1月と7月）だけ。ツールチップの見出しは「2025年2月」
const tick = (m: string) => (m.endsWith('/01') ? `${m.slice(0, 4)}年1月` : m.endsWith('/07') ? '7月' : '');
const monthLabel = (m: string) => `${m.slice(0, 4)}年${Number(m.slice(5))}月`;
const ROWS = MONTHS.map((_, i) => Object.fromEntries(GENRES.map((g) => [g.name, g.data[i]])));
const [W, H] = [640, 320]; // viewBox の大きさ。表示の幅に合わせて拡大・縮小される
const M = { top: 8, right: 20, bottom: 28, left: 48 };

export default function D3Streamgraph() {
  const [mode, setMode] = useState<'stream' | 'stacked'>('stream');
  const [hover, setHover] = useState<{ i: number; name: string | null } | null>(null);

  // stack() で帯の下端・上端を計算する。offset を差し替えるだけで、積み上げ面とストリームが切り替わる
  const series = useMemo(() => stack<Record<string, number>>()
    .keys(GENRES.map((g) => g.name))
    .order(stackOrderInsideOut) // 山の早いジャンルほど中に置く
    .offset(mode === 'stream' ? stackOffsetWiggle : stackOffsetNone)(ROWS), [mode]);
  const x = scaleLinear().domain([0, MONTHS.length - 1]).range([M.left, W - M.right]);
  const y = scaleLinear()
    .domain([Math.min(...series.flat().map((d) => d[0])), Math.max(...series.flat().map((d) => d[1]))])
    .range([H - M.bottom, M.top])
    .nice();
  const path = area<SeriesPoint<Record<string, number>>>().x((_, i) => x(i)).y0((d) => y(d[0])).y1((d) => y(d[1])).curve(curveMonotoneX);

  // ポインターに近い月と、その月でポインターの下にある帯を探す（位置は viewBox の単位に直す）
  const onMove = (e: React.PointerEvent<SVGSVGElement>) => {
    const box = e.currentTarget.getBoundingClientRect();
    const i = Math.max(0, Math.min(MONTHS.length - 1, Math.round(x.invert(((e.clientX - box.left) / box.width) * W))));
    const v = y.invert(((e.clientY - box.top) / box.height) * H);
    setHover({ i, name: series.find((s) => s[i][0] <= v && v <= s[i][1])?.key ?? null });
  };

  return (
    <div style={{ position: 'relative' }}>
      {(['stream', 'stacked'] as const).map((m) => (
        <button key={m} type="button" onClick={() => setMode(m)} style={{ marginRight: 4, fontWeight: mode === m ? 700 : 400 }}>{m === 'stream' ? 'ストリーム' : '積み上げ面'}</button>
      ))}
      <svg viewBox={`0 0 ${W} ${H}`} width="100%" onPointerMove={onMove} onPointerLeave={() => setHover(null)}>
        {/* 積み上げ面のときだけ、y 軸の目盛りと横線を出す（ストリームの縦の位置は値として読めない） */}
        {mode === 'stacked' && y.ticks(5).map((t) => (
          <g key={t}>
            <line x1={M.left} x2={W - M.right} y1={y(t)} y2={y(t)} stroke="#e5e7eb" />
            <text x={M.left - 8} y={y(t)} dy="0.32em" textAnchor="end" fontSize={11}>{t}</text>
          </g>
        ))}
        {/* 帯の境目は白い線で区切り、hover 中はポインターの下の帯以外を薄くする */}
        {series.map((s) => (
          <path key={s.key} d={path(s) ?? ''} fill={GENRES.find((g) => g.name === s.key)!.color} stroke="#fff"
            opacity={hover?.name && hover.name !== s.key ? 0.35 : 1} />
        ))}
        {MONTHS.map((m, i) => tick(m) && <text key={m} x={x(i)} y={H - 8} textAnchor="middle" fontSize={11}>{tick(m)}</text>)}
        {hover && <line x1={x(hover.i)} x2={x(hover.i)} y1={M.top} y2={H - M.bottom} stroke="#000" strokeOpacity={0.4} />}
      </svg>
      {/* ツールチップは、ポインターと反対側の上の隅に出す（狭い画面でもはみ出さない） */}
      {hover && (
        <div style={{ position: 'absolute', top: 32, [x(hover.i) > W / 2 ? 'left' : 'right']: 8, background: '#fff', border: '1px solid #e5e7eb', padding: '6px 10px', fontSize: 12, pointerEvents: 'none' }}>
          <strong>{monthLabel(MONTHS[hover.i])}</strong>
          {GENRES.map((g) => (
            <div key={g.name} style={{ display: 'flex', gap: 6, fontWeight: g.name === hover.name ? 700 : 400 }}>
              <span style={{ color: g.color }}>■</span>{g.name}<span style={{ marginLeft: 'auto', paddingLeft: 12 }}>{g.data[hover.i]} 万回</span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}