visualizing-data

データ可視化コンポーネントライブラリ

効果的なデータ可視化を選択・実装するための体系的なガイダンスです。データの特性に適した可視化の種類を選び、明瞭さ、アクセシビリティ、インパクトを確保します。

概要

データ可視化は、生データを視覚的な表現に変換し、パターン、傾向、洞察を明らかにします。このスキルでは、以下を提供します。

1. 選択フレームワーク：データ型と目的からグラフの種類を導く体系的な決定木
2. 24種類以上の可視化手法：分析目的別に整理
3. アクセシビリティのパターン：WCAG 2.1 AA 準拠、色覚多様性に配慮したパレット
4. パフォーマンス戦略：データセットの規模（<1000～>100K ポイント）に応じた最適化
5. 複数言語のサポート：JavaScript/TypeScript（主要言語）、Python、Rust、Go

---

クイックスタートのワークフロー

ステップ 1：データを評価する

What type? [categorical | continuous | temporal | spatial | hierarchical]
How many dimensions? [1D | 2D | multivariate]
How many points? [<100 | 100-1K | 1K-10K | >10K]

ステップ 2：目的を決める

What story to tell? [comparison | trend | distribution | relationship | composition | flow | hierarchy | geographic]

ステップ 3：グラフの種類を選択する

クイック選択：

• 5～10 個のカテゴリを比較する → 棒グラフ
• 12 か月間の売上を示す → 折れ線グラフ
• 年齢の分布を表示する → ヒストグラムまたはバイオリンプロット
• 相関関係を調べる → 散布図
• 予算の内訳を示す → ツリーマップまたは積み上げ棒グラフ

決定木の全体版： references/selection-matrix.md を参照してください。

ステップ 4：実装する

推奨ライブラリについては、以下の言語別セクションを参照してください。

ステップ 5：アクセシビリティを適用する

• テキストによる代替説明を追加する（aria-label）
• 最低 3:1 のカラーコントラストを確保する
• 色覚多様性に配慮したパレットを使用する
• データテーブルによる代替表示を用意する

ステップ 6：パフォーマンスを最適化する

• <1000 ポイント：標準的な SVG 描画

• 1000 ポイント：サンプリングまたは Canvas 描画

• 非常に大規模な場合：サーバー側で集計

---

目的優先の選択

分析目的に合ったグラフの種類を選択します。

目的	グラフの種類
値を比較する	棒グラフ、ロリポップチャート
傾向を示す	折れ線グラフ、面グラフ
分布を明らかにする	ヒストグラム、バイオリンプロット、箱ひげ図
関係性を調べる	散布図、バブルチャート
構成を説明する	ツリーマップ、積み上げ棒グラフ、円グラフ（6 区分未満）
流れを可視化する	サンキーダイアグラム、コードダイアグラム
階層を表示する	サンバースト、樹形図、ツリーマップ
地理情報を示す	コロプレスマップ、シンボルマップ

---

可視化カタログ

ティア 1：基本的なプリミティブ

幅広い読者向けの、わかりやすいデータストーリー：

• 棒グラフ：カテゴリを比較する
• 折れ線グラフ：時間の経過に伴う傾向を示す
• 散布図：関係性を調べる
• 円グラフ：全体に対する部分を示す（最大 5～6 区分）
• 面グラフ：時間の経過に伴う規模を強調する

ティア 2：目的に特化したグラフ

特定の分析的な洞察に適したグラフ：

• 比較：グループ化棒グラフ、ロリポップチャート、ブレットチャート
• 傾向：ストリームグラフ、スロープグラフ、スパークライン
• 分布：バイオリンプロット、箱ひげ図、ヒストグラム
• 関係性：バブルチャート、ヘクスビンプロット
• 構成：ツリーマップ、サンバースト、ウォーターフォール
• 流れ：サンキーダイアグラム、コードダイアグラム

ティア 3：高度なグラフ

複雑なデータや、より高度な知識を持つ読者向け：

• 多次元：平行座標プロット、レーダーチャート、スモールマルチプル
• 時間：ガントチャート、カレンダーヒートマップ、ローソク足チャート
• ネットワーク：力学モデルによるグラフ、隣接行列

詳細な説明： references/chart-catalog.md を参照してください。

---

アクセシビリティ要件（WCAG 2.1 AA）

テキストによる代替説明

<figure role="img" aria-label="Sales increased 15% from Q3 to Q4">
  <svg>...</svg>
</figure>

色に関する要件

• テキスト以外の UI 要素：最低 3:1 のコントラスト
• テキスト：最低 4.5:1（大きなテキスト ≥24px の場合は 3:1）
• 色だけに頼らず、パターンやテクスチャとラベルを併用する

色覚多様性に配慮したパレット

IBM パレット（推奨）：

#648FFF (Blue), #785EF0 (Purple), #DC267F (Magenta),
#FE6100 (Orange), #FFB000 (Yellow)

避ける色の組み合わせ： 赤と緑（男性の 8% は赤緑色覚特性があります）

キーボード操作

• Tab キーでインタラクティブ要素間を移動する
• Enter／Space キーでツールチップを表示する
• 矢印キーでデータポイント間を移動する

アクセシビリティガイドの全体版： references/accessibility.md を参照してください。

データ量別のパフォーマンス

行数	戦略	実装
<1,000	直接レンダリング	標準ライブラリ（SVG）
1K-10K	サンプリング／集計	約500ポイントにダウンサンプリング
10K-100K	Canvas レンダリング	SVG から Canvas に切り替え
>100K	サーバー側集計	バックエンド処理

---

JavaScript/TypeScript の実装

Recharts（ビジネスダッシュボード）

組み合わせ可能な React コンポーネント、宣言型 API、デフォルトでレスポンシブです。

npm install recharts

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

const data = [
  { month: 'Jan', sales: 4000 },
  { month: 'Feb', sales: 3000 },
  { month: 'Mar', sales: 5000 },
];

export function SalesChart() {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <LineChart data={data}>
        <XAxis dataKey="month" />
        <YAxis />
        <Tooltip />
        <Line type="monotone" dataKey="sales" stroke="#8884d8" />
      </LineChart>
    </ResponsiveContainer>
  );
}

D3.js（カスタム可視化）

最大限の柔軟性を備えた業界標準で、あらゆる種類のチャートを作成できます。

npm install d3

Plotly（科学・インタラクティブ）

3D 可視化、統計チャート、標準でインタラクティブに対応しています。

npm install react-plotly.js plotly.js

詳細な例： references/javascript/ を参照してください。

---

Python の実装

一般的なライブラリ：

• Plotly - インタラクティブなチャート（JavaScript と同じ API）
• Matplotlib - 出版品質の静的プロット
• Seaborn - 統計的な可視化
• Altair - 宣言型の可視化文法

Python の実装を構築する場合：

1. 上記の汎用パターンに従います
2. RESEARCH_GUIDE.md を使用してライブラリを調査します
3. references/python/ に追加します

---

デザイントークンとの統合

テーマ設定には design-tokens スキルを参照してください。

--chart-color-primary
--chart-color-1 through --chart-color-10
--chart-axis-color
--chart-grid-color
--chart-tooltip-bg

<Line stroke="var(--chart-color-primary)" />

ライト／ダーク／ハイコントラストのテーマは、デザイントークンによって自動的に機能します。

---

避けるべきよくある間違い

1. チャート優先の考え方 - 見た目ではなく、データと目的に基づいて選択します
2. カテゴリが6個を超える場合の円グラフ - 代わりに並べ替えた棒グラフを使用します
3. 二軸チャート - 誤解を招くことが多いため、小分割チャートを使用します
4. 2D で十分な場合の3D - 複雑さが増し、明瞭さが低下します
5. 虹色のカラースケール - 知覚的に均一ではなく、色覚多様性にも配慮されていません
6. 途中で切れた y 軸 - 明確に示すか、ゼロから開始します
7. 色数が多すぎる - 区別できるカテゴリを6～8個に制限します
8. コンテキストの欠如 - 軸には必ずラベルを付け、単位を含めます

---

クイック判断ツリー

START: What is your data?

Categorical (categories/groups)
  ├─ Compare values → Bar Chart
  ├─ Show composition → Treemap or Pie Chart (<6 slices)
  └─ Show flow → Sankey Diagram

Continuous (numbers)
  ├─ Single variable → Histogram, Violin Plot
  └─ Two variables → Scatter Plot

Temporal (time series)
  ├─ Single metric → Line Chart
  ├─ Multiple metrics → Small Multiples
  └─ Daily patterns → Calendar Heatmap

Hierarchical (nested)
  ├─ Proportions → Treemap
  └─ Show depth → Sunburst, Dendrogram

Geographic (locations)
  ├─ Regional aggregates → Choropleth Map
  └─ Point locations → Symbol Map

---

参考資料

選択ガイド：

• references/chart-catalog.md - 24種類以上のすべての可視化タイプ
• references/selection-matrix.md - 完全な判断ツリー

技術ガイド：

• references/accessibility.md - WCAG 2.1 AA のパターン
• references/color-systems.md - 色覚多様性に配慮したパレット
• references/performance.md - データ量別の最適化

言語別：

• references/javascript/ - React、D3.js、Plotly の例
• references/python/ - Plotly、Matplotlib、Seaborn

アセット：

• assets/color-palettes/ - アクセシブルなカラースキーム
• assets/example-datasets/ - テスト用のサンプルデータ

---

例

動作するコード例：

• examples/javascript/bar-chart.tsx
• examples/javascript/line-chart.tsx
• examples/javascript/scatter-plot.tsx
• examples/javascript/accessible-chart.tsx

cd examples/javascript && npm install && npm start

---

検証

# Validate accessibility
scripts/validate_accessibility.py <chart-html>

# Test colorblind
# Use browser DevTools color vision deficiency emulator

---

段階的な情報開示： この SKILL.md では概要とクイックスタートを提供します。詳細なドキュメント、コード例、言語別の実装は、references/ と examples/ ディレクトリにあります。