data-visualization

データ可視化スキル

自由度：混在。 グラフの種類とエンコーディングは［高い自由度］、 既存ライブラリ／トークンの調査とアクセシビリティのフォールバックは［低い自由度 — 正確に実行］です。

推論の進め方

1. 確認 — 既存のグラフライブラリ、トークン、データの形状
2. 解釈 — コンポーネントを再利用するか、新しいグラフの種類を使うか
3. 分類 — 折れ線／棒／面／ドーナツ／スパークライン／テーブルへのフォールバック
4. 重要度 — アクセシビリティに配慮されていないグラフや空状態がないグラフは、グラデーションの不足より優先度が高いです

実例

確認： package.json に recharts があり、src/components/charts はありません。トークンには --primary が定義されています。 解釈： D3 ではなく、Recharts とトークンを再利用します。 分類： ResponsiveContainer の折れ線グラフと sr-only テーブルを使います。読み込み中はスケルトンを表示します。 検証： リサイズに対応し、スクリーンリーダー用のテーブルがあり、2つ目のグラフライブラリはありません。

報告前のセルフチェック

• 既存ライブラリ — package.json を検索し、2つ目のグラフライブラリを追加していません
• アクセシビリティ — sr-only テーブルまたはテキストによる代替情報があります
• 状態 — 読み込み中と空の状態に対応しています
• 適切な担当 — イベントの分類体系は audit-analytics、空／読み込み中のフレームは audit-ui-states です

ダッシュボードやレポート向けに、美しく、アクセシブルで、インタラクティブなデータ可視化を作成します。

プロダクトイベントの網羅性（「適切なイベントを追跡できていますか？」）は、このスキルではなく audit-analytics の対象です。グラフの空／読み込み中のフレームは audit-ui-states の対象です。

まず既存のものを確認する ［低い自由度 — 正確に実行］

可視化を作成する前に、必ず次を確認します。

1. 既存のグラフライブラリを確認します：

cat package.json | grep -i "recharts\|chart\|d3\|visx\|nivo\|tremor"
rg "LineChart|BarChart|PieChart" --type tsx -l | head -10

2. 既存のグラフコンポーネントを確認します：

ls -la src/components/charts/ src/components/dashboard/ 2>/dev/null
rg "ResponsiveContainer|Chart" --type tsx | head -10

3. デザイントークンを確認します：

cat tailwind.config.* | grep -A10 "chart\|colors"

理由： 既存のグラフライブラリとスタイルの規約を使用します。

Recharts（React に推奨） ［高い自由度］

• すべてのグラフを ResponsiveContainer width="100%" で囲み、固定の height を設定します。
• トークンでスタイルを指定します：hsl(var(--primary))、fill-muted-foreground、stroke-muted を使い、16進数の色はハードコードしません。
• 軸線と目盛り線を非表示にし（tickLine={false} axisLine={false}）、Y軸の目盛りをフォーマットします（$、%）。
• カスタム Tooltip の内容には bg-background border rounded-lg を使い、テーマに合わせます。
• グラフの種類：折れ線（時間経過による傾向）、棒（radius={[4,4,0,0]} を指定し、最新の Cell を強調）、面（グラデーションの <defs> 塗りつぶし）、ドーナツ（innerRadius／outerRadius と、合計を示す中央の Label）。

'use client'
import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts'

export function RevenueChart({ data }: { data: { month: string; revenue: number }[] }) {
  return (
    <ResponsiveContainer width="100%" height={350}>
      <LineChart data={data}>
        <XAxis dataKey="month" tickLine={false} axisLine={false} className="text-xs fill-muted-foreground" />
        <YAxis tickLine={false} axisLine={false} tickFormatter={(v) => `$${v}`} />
        <Tooltip cursor={{ stroke: 'hsl(var(--muted))' }} />
        <Line type="monotone" dataKey="revenue" stroke="hsl(var(--primary))" strokeWidth={2} activeDot={{ r: 6 }} />
      </LineChart>
    </ResponsiveContainer>
  )
}

カスタムツールチップ付きの折れ線グラフ、棒グラフ、面グラデーション、ドーナツの各コンポーネント全体：references/recharts.md §折れ線グラフ、§棒グラフ、§面グラフ、§円グラフ／ドーナツグラフ。

スパークライン（ミニグラフ） ［高い自由度］

• Line を1つだけ使った LineChart を作成し、dot={false}、strokeWidth={1.5} を指定します。軸は表示せず、高さは約40にします。
• コンポーネント内で number[] を { index, value } に変換し、呼び出し元からは通常の配列を渡せるようにします。
• 統計値の横にある w-20 の領域に配置し、独立したカードにはしません。

Sparkline コンポーネントと統計カードでの使用方法：references/recharts.md §スパークライン。

傾向を示す統計カード ［高い自由度］

• rounded-xl border bg-card p-6 を使用します。タイトルは text-muted-foreground、値は text-3xl font-semibold にします。
• 傾向を示す矢印と Math.abs(change)% を表示します。上昇は緑、下降は赤にし、スパークラインにも同じ色を渡します。
• sparklineData は省略可能です。データがある場合のみスパークラインを表示します。

StatCard コンポーネント：references/recharts.md §傾向を示す統計カード。

リアルタイムのデータ更新 ［高い自由度］

• setData(prev => [...prev, point].slice(-N)) でデータを追加し、ウィンドウを一定の範囲（約20ポイント）に保ちます。
• isAnimationActive={false} と固定の YAxis domain を指定し、ティックごとにグラフが跳ねないようにします。
• エフェクトのクリーンアップで、インターバルまたはソケットのサブスクリプションを解除します。

RealtimeChart コンポーネント：references/recharts.md §リアルタイムのデータ更新。

カスタムビジュアライゼーション向けの D3.js [自由度：高]

• Recharts ではマークを表現できない場合に限り D3 を使用し、既存のチャートライブラリと併用しないでください。
• ref を設定した <svg> に useEffect から描画します。データ変更時に再描画する前に svg.selectAll('*').remove() を実行してください。
• カテゴリーには scaleBand、値には scaleLinear().nice() を使用します。サイズは clientWidth／clientHeight から取得し、余白を設けてください。
• ベースラインから .transition().duration(750) でアニメーションさせ、色には同じ hsl(var(--primary)) トークンを使用してください。

D3 の棒グラフコンポーネントの全例：references/d3-and-accessibility.md §D3.js custom bar chart。

アクセシビリティ [自由度：低 — 正確に実行]

• グラフを <div role="img" aria-label="..."> で囲み、グラフの内容と範囲を説明してください。
• SVG グラフに aria-hidden="true" を設定し、データは <caption> を含む sr-only の <table> で提供してください。
• 色だけで情報を表さないでください。ラベル、マーカー、凡例を組み合わせてください。

<div role="img" aria-label="Revenue chart showing monthly data from January to December">
  <ResponsiveContainer><LineChart data={data} aria-hidden="true">{/* ... */}</LineChart></ResponsiveContainer>
  <table className="sr-only">
    <caption>Monthly Revenue Data</caption>
    <thead><tr><th>Month</th><th>Revenue</th></tr></thead>
    <tbody>{data.map((d) => <tr key={d.month}><td>{d.month}</td><td>${d.revenue}</td></tr>)}</tbody>
  </table>
</div>

アクセシビリティブロックの全例：references/d3-and-accessibility.md §Accessibility。

検証 [自由度：低 — 省略しないこと]

ビジュアライゼーションを作成した後、次の項目を確認してください。

1. レスポンシブ → あらゆる画面サイズでグラフが適切にリサイズされる
2. アクセシビリティ → スクリーンリーダー向けの代替手段が用意されている
3. パフォーマンス → 大規模なデータセットには仮想化／サンプリングを使用する
4. 読み込み状態 → データの読み込み中にスケルトンを表示する
5. 空の状態 → データがない場合に意味のあるメッセージを表示する
6. 色のコントラスト → WCAG ガイドラインに準拠する
7. ツールチップ → ホバー時に詳細なデータを表示する