data-viz-2025

データビジュアライゼーション 2025：ビジュアルコミュニケーションの技と科学

Seaborn ユーザーにも、Tufte の読者にも、そしてすべての人に愛されるビジュアライゼーションを作成しましょう。NYT Graphics の厳密さに、MoMA の美学、Nike のエネルギー、On Kawara の精密さを融合させます。

このスキルを使う場面

✅ 次の場合に使用します：

• インタラクティブなチャート、ダッシュボード、データストーリーを構築する
• 複雑なビジュアライゼーション（コード図、サンキーフロー、ネットワークグラフ）を作成する
• アニメーション付きのリアルタイムデータ表示を作成する
• モバイル対応のデータコンポーネントを作成する
• 本番環境向けの、アクセシブルでテスト済みのビジュアライゼーションを作成する

❌ 次の場合には使用しません：

• インタラクションのない静的な PNG/SVG をエクスポートする（デザインツールを使用）
• 基本的な HTML テーブルを作成する（セマンティックマークアップを使用）
• 印刷専用のグラフィックを作成する（制約が異なります）
• シンプルなアイコン表示を作成する（アイコンライブラリを使用）

基本理念：3 つの柱

1. 明瞭さ（Tufte のデータ・インク比）

すべての視覚要素には、存在する理由が必要です。チャートのノイズを取り除き、信号対雑音比を最大化します。

2. 美しさ（美的基準）

ビジュアライゼーションはアートです。バネのような物理表現、思慮深い色使い、上質なデザインシステムを活用します。

3. 真実（グラフィックの完全性）

データの表現は誠実でなければなりません。厳密にテストし、前提条件を文書化し、文脈を保ちます。

クイック判断ツリー

What are you building?
├─ Exploratory analysis / many iterations
│  └─ → Observable Plot (grammar-of-graphics)
│
├─ Standard business charts (bars, lines, pies)
│  ├─ Simple React integration needed
│  │  └─ → Recharts (easiest, most popular)
│  └─ Premium aesthetics + theming
│     └─ → Nivo (beautiful out of the box)
│
├─ Custom, one-of-a-kind visualizations
│  ├─ Need low-level control
│  │  └─ → Visx (React + D3 primitives)
│  └─ Full D3 power
│     └─ → D3.js directly (steeper learning curve)
│
└─ Dashboard with Tailwind design system
   ├─ → Tremor (purpose-built for dashboards)
   └─ → shadcn-ui Charts (Recharts + shadcn styling)

データビジュアライゼーションの技術スタック（2025）

おすすめパッケージ

{
  "dependencies": {
    "@observablehq/plot": "^0.6.0",        // Exploratory, grammar-of-graphics
    "recharts": "^2.12.0",                  // React charts, simple & popular
    "@nivo/core": "^0.87.0",                // Beautiful, themeable charts
    "@visx/visx": "^3.10.0",                // Low-level D3 + React primitives
    "d3": "^7.9.0",                         // Direct D3 for custom work
    "@tremor/react": "^3.15.0",             // Tailwind dashboard components
    "framer-motion": "^11.0.0"              // Smooth animations
  },
  "devDependencies": {
    "@percy/cli": "^1.29.0",                // Visual regression testing
    "@testing-library/react": "^14.2.0",    // Component testing
    "@storybook/react": "^7.6.0"            // Component playground
  }
}

各ライブラリの使いどころ

Observable Plot - JavaScript で ggplot2/Vega-Lite を使いたい場合

• グラフィック文法に基づくアプローチ（マーク、スケール、変換）
• 迅速なプロトタイピングに最適
• ノートブックや探索的分析に最適

Recharts - React で「すぐに動く」ものを使いたい場合

• コンポーネントベース（すべてが <Component />）
• 優れたドキュメントとコミュニティ
• TypeScript のサポートを標準搭載
• 学習のハードルが最も低い

Nivo - 見た目に優れた結果を求める場合

• 美しいデフォルト設定を備えた 20 種類以上のチャート
• Canvas、SVG、HTML によるレンダリング
• サーバーサイドレンダリングに対応（独自の機能）
• props による幅広いカスタマイズ

Visx - React のパターンを使って最大限に制御したい場合

• 低レベルのプリミティブ（スケール、軸、シェイプ）
• 独自のチャートタイプを組み合わせて作成
• Airbnb の D3 + React ツールキット
• 独創的なビジュアライゼーションに最適

D3.js - 無限の可能性（と責任）を求める場合

• すべてのピクセルを完全に制御
• 学習のハードルが最も高い
• 高度でカスタムな制作に最適
• React では useEffect と useRef を使用

Tufte チェックリスト

ビジュアライゼーションを公開する前に、次の項目を確認します。

• データ・インク比を最大化 - グリッド線、装飾、3D 効果、影を取り除く
• グラフィックの完全性 - 視覚表現をデータ値に比例させる
• 明確なラベル - データに直接ラベルを付ける（色を照合する凡例に頼らない）
• チャートのノイズを排除 - 不要な装飾やモアレによるちらつきをなくす
• 情報を階層化 - 情報を詰め込みすぎた単一のチャートではなく、スモールマルチプルを使用する
• デザインの変化ではなく、データの変動を示す - 視覚的な表現方法を一貫させる

詳しくは references/tufte-principles.md をお読みください。

NYT Graphics のワークフロー

New York Times のグラフィックスチームのプロセス：

1. チャートを 500 個作る → 最も情報をうまく伝えるものを選ぶ
2. 適切な範囲でシンプルにする → ノイズや煩雑さを取り除く
3. 洞察を注釈で示す → 言葉でデータを説明するだけでなく、パターンを際立たせる
4. 実際のユーザーでテストする → 操作の様子を観察し、混乱する箇所を特定する
5. デフォルトでレスポンシブにする → モバイルファーストで、段階的に機能を強化する

事例については references/nyt-workflow.md をお読みください。

アニメーションとマイクロインタラクション

データビジュアライゼーションは静的ではありません。動きが情報を伝えます。

アニメーションを使う場面

• 状態の遷移 - データの更新、フィルターの変更
• 注意を引く - 洞察を強調し、視線を誘導する
• 関係性を示す - ビュー間の変形によって構造を明らかにする
• 楽しさを添える - 思慮深い動きが上質な印象を生む

アニメーションの原則

// Use spring physics, not linear easing
const springConfig = {
  type: "spring",
  stiffness: 300,
  damping: 30
};

// Stagger for multiple elements
const staggerChildren = {
  delayChildren: 0.1,
  staggerChildren: 0.05
};

// Respect prefers-reduced-motion
const shouldAnimate = !window.matchMedia('(prefers-reduced-motion: reduce)').matches;

パターンライブラリの全容については references/animation-patterns.md をお読みください。

色：虹のその先へ

セマンティックカラーシステム

// Qualitative (categorical data)
const categorical = [
  "#d97706", "#7c3aed", "#059669", "#dc2626", "#2563eb"
];

// Sequential (ordered data, low to high)
const sequential = [
  "#fef3c7", "#fcd34d", "#f59e0b", "#d97706", "#92400e"
];

// Diverging (data with meaningful center)
const diverging = [
  "#dc2626", "#f87171", "#fef2f2", "#c7d2fe", "#6366f1"
];

アクセシビリティ要件

• コントラスト比 ≥4.5:1 テキストと背景の間
• 色だけに頼らない - 形状、パターン、ラベルを使用する
• 色覚多様性に配慮したパレット - シミュレーターでテストする
• ダークモードを考慮する - どちらのテーマでも色が適切に見える必要があります

データビジュアライゼーションのテスト

ビジュアルリグレッションテスト

# Percy - Automated visual testing
npx percy snapshot ./storybook-static

# Chromatic - For Storybook
npx chromatic --project-token=<token>

データ精度テスト

// Verify rendered elements match data
test('bar chart renders correct number of bars', () => {
  const data = [{ x: 'A', y: 10 }, { x: 'B', y: 20 }];
  render(<BarChart data={data} />);

  const bars = screen.getAllByTestId('bar');
  expect(bars).toHaveLength(2);
});

// Verify scale accuracy
test('bar heights proportional to values', () => {
  const data = [{ x: 'A', y: 10 }, { x: 'B', y: 20 }];
  render(<BarChart data={data} />);

  const bars = screen.getAllByTestId('bar');
  const heights = bars.map(b => parseInt(b.style.height));
  expect(heights[1]).toBe(heights[0] * 2); // B is 2x A
});

包括的なテストスイートについては、references/testing-strategies.md をお読みください。

レスポンシブデザインのパターン

モバイルファーストのアプローチ

// Desktop: Show everything
// Tablet: Simplify axes, reduce labels
// Mobile: Minimal chart, key insights only

const ChartResponsive = ({ data }: Props) => {
  const isMobile = useMediaQuery('(max-width: 640px)');

  return (
    <ResponsiveContainer width="100%" height={isMobile ? 200 : 400}>
      <LineChart data={data}>
        {!isMobile && <CartesianGrid strokeDasharray="3 3" />}
        <XAxis
          dataKey="date"
          tick={isMobile ? { fontSize: 10 } : undefined}
          interval={isMobile ? 'preserveStartEnd' : 'auto'}
        />
        <YAxis tick={isMobile ? false : undefined} />
        <Tooltip />
        <Line type="monotone" dataKey="value" stroke="#d97706" />
      </LineChart>
    </ResponsiveContainer>
  );
};

タッチ操作に適したインタラクション

• タッチターゲットの最小サイズ：44×44px - ツールチップ、ボタン、インタラクティブな要素
• スワイプ操作 - 時系列データを操作する、表示を切り替える
• ピンチズーム - 密集したチャート向け（慎重に使用）
• 長押しコンテキストメニュー - 高度な操作

データストーリーテリング

すべてのビジュアライゼーションは物語を伝えます。次のストーリー展開に従ってください。

1. 導入 - 意外な洞察は何ですか？
2. 背景 - なぜ気にかけるべきなのでしょうか？
3. 根拠 - データを明確に示す
4. 結論 - 何をすべきでしょうか？

ナラティブの手法

• スクロリーテリング - ユーザーのスクロールに合わせてチャートをアニメーション表示する
• 段階的な情報開示 - シンプルな状態から始め、徐々に複雑さを加える
• 注釈 - ユーザーに探させず、洞察を示す
• 比較 - 前後、こちらとあちら、予測値と実績値を示す

ナラティブのフレームワークについては、references/data-storytelling.md をお読みください。

よくあるアンチパターン

❌ 「レインボーゲロ」の円グラフ

問題： 色が12色あり、扇形が小さく、凡例が脇にある 解決策： カテゴリーは最大5つにし、直接ラベルを付け、代わりに棒グラフを検討する

❌ 「誤解を招く軸」の棒グラフ

問題： Y軸がゼロから始まらず、差を誇張している 解決策： 棒グラフでは必ずゼロから始める（折れ線グラフでは変更できます）

❌ 「二軸による混乱」を招く折れ線グラフ

問題： 異なる尺度の2つのY軸が、見る人を誤解させる 解決策： 別々のチャートを使うか、同じ尺度に正規化する

❌ 「3Dパースペクティブ」による誤り

問題： 3D効果がデータの認識を歪める 解決策： 2Dにとどめ、3つ目の次元には色やサイズを使う

❌ 「死のスピナー」ローディング状態

問題： 2秒以上、スピナーだけが表示される空の画面 解決策： チャートの構造をすぐに表示するスケルトンローディングを使う

網羅的な一覧については、references/antipatterns.md をお読みください。

実装ワークフロー

1. データを調べる

# Use Observable Plot for rapid iteration
npm install @observablehq/plot

# Create throwaway prototypes, iterate fast
# When you find the right chart, implement in production library

2. 本番用コンポーネントを構築する

// Use Recharts for standard charts
// Use Nivo for beautiful, themeable charts
// Use Visx/D3 for custom visualizations

// Always wrap in error boundaries
// Always show skeleton loading state
// Always handle empty/loading/error states

3. 徹底的にテストする

# Visual regression testing
npx percy snapshot

# Component testing
npm test -- --coverage

# Accessibility testing
npx axe-core src/components/charts

4. ドキュメントを作成してデプロイする

// Storybook for component playground
// Props documentation with TypeScript
// Usage examples for each chart type

AIで強化するビジュアライゼーション

Claude/Haikuを使用する場面

• 動的な注釈 - データから洞察を生成する
• カラーパレットの提案 - AIを活用した色彩調和
• チャートタイプの推奨 - 「これを示す最適な方法は何ですか？」
• アクセシビリティの説明 - altテキストを自動生成する

例：AIによる注釈

const generateInsight = async (data: DataPoint[]) => {
  const response = await fetch('/api/claude', {
    method: 'POST',
    body: JSON.stringify({
      model: 'claude-haiku',
      prompt: `Analyze this data and provide ONE key insight (max 15 words): ${JSON.stringify(data)}`
    })
  });

  return response.text(); // "Sales peaked in Q3, driven by mobile conversions"
};

インスピレーションギャラリー

定期的に以下をチェックしてください：

• ObservableHQの注目ノートブック
• Information is Beautiful Awards
• TwitterのNYT Graphics
• FlowingData
• Datawrapper River
• The Pudding

パフォーマンスの最適化

バンドルサイズの管理

// ❌ DON'T import entire library
import { LineChart } from 'recharts';

// ✅ DO tree-shake where possible
import LineChart from 'recharts/lib/chart/LineChart';

// Use dynamic imports for heavy charts
const HeavyChart = dynamic(() => import('./HeavyChart'), {
  loading: () => <ChartSkeleton />,
  ssr: false // Disable SSR for client-only charts
});

CanvasとSVG

• SVG - データポイントが< 1000の場合、アクセシビリティが高く、どの倍率でも鮮明
• Canvas - データポイントが> 1000の場合、アニメーションやパフォーマンスに適している
• WebGL - データポイントが> 10,000の場合、3Dやゲーム級のパフォーマンスに最適

仮想化

大規模なデータセットでは、表示範囲内の部分だけを描画します。

// Use react-window or react-virtualized for long lists
// Aggregate/sample data for chart display
// Store full dataset separately for export

アクセシビリティ基準（WCAG AA）

要件

• キーボード操作 - すべてのインタラクティブ要素に Tab キーでアクセスできます
• スクリーンリーダー対応 - 代替手段としてデータテーブルを用意します
• フォーカスインジケーター - インタラクティブ要素のフォーカス状態を視覚的に示します
• カラーコントラスト - 小さい文字は 4.5:1 以上、大きい文字は 3:1 以上
• モーションの軽減 - prefers-reduced-motion: reduce を尊重します

実装

<figure role="img" aria-labelledby="chart-title chart-desc">
  <h2 id="chart-title">Sales Over Time</h2>
  <p id="chart-desc">
    Line chart showing sales increased 45% from Q1 to Q4,
    peaking in November at $2.3M.
  </p>

  <LineChart data={data} />

  {/* Provide data table alternative */}
  <details>
    <summary>View data table</summary>
    <table>...</table>
  </details>
</figure>

参考資料

このスキルには、以下の包括的な参考ドキュメントが含まれています。

• references/tufte-principles.md - Edward Tufte のデータビジュアライゼーションの原則と例
• references/library-comparison.md - Observable Plot、Recharts、Nivo、Visx、D3 の詳細な比較
• references/testing-strategies.md - ビジュアルリグレッション、コンポーネントテスト、アクセシビリティテスト
• references/animation-patterns.md - チャートのモーションデザインパターン
• references/data-storytelling.md - ナラティブ手法とスクロール連動型の表現パターン
• references/antipatterns.md - よくある間違いとその回避方法
• references/nyt-workflow.md - New York Times のグラフィックスチームによるベストプラクティス

ユーティリティスクリプト

• scripts/data-transform.ts - 一般的なデータ変換（rollup、pivot、normalize）
• scripts/chart-test-helpers.ts - チャートの精度を検証するテストユーティリティ
• scripts/color-palette-generator.ts - アクセシブルなカラーパレットを生成します
• scripts/performance-benchmark.ts - チャートの描画パフォーマンスをベンチマークします

クイックスタート：最初のチャートを作成する

// 1. Install dependencies
// npm install recharts framer-motion

// 2. Create a simple line chart
import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';
import { motion } from 'framer-motion';

const data = [
  { month: 'Jan', value: 400 },
  { month: 'Feb', value: 300 },
  { month: 'Mar', value: 600 },
];

export const SalesChart = () => (
  <motion.div
    initial={{ opacity: 0, y: 20 }}
    animate={{ opacity: 1, y: 0 }}
    transition={{ duration: 0.5 }}
  >
    <ResponsiveContainer width="100%" height={300}>
      <LineChart data={data}>
        <XAxis dataKey="month" />
        <YAxis />
        <Tooltip />
        <Line
          type="monotone"
          dataKey="value"
          stroke="#d97706"
          strokeWidth={2}
          dot={{ fill: '#d97706', r: 4 }}
        />
      </LineChart>
    </ResponsiveContainer>
  </motion.div>
);

// 3. Test it
// 4. Ship it with confidence

---

覚えておいてください： 最適なビジュアライゼーションとは、洞察をひと目で明らかにするものです。迷ったときはシンプルにしましょう。判断に迷ったら、10 種類の案をプロトタイプにしましょう。公開するときは、徹底的にテストしましょう。

このスキルでは、チャートの選択 | ライブラリの統合 | テスト戦略 | アニメーションパターン | アクセシビリティ要件への準拠 | パフォーマンスの最適化を扱います