data-visualization について
data-visualizationは、チャートやグラフ、ダッシュボードを作る開発者やデータ担当者向けの設計スキルです。視覚表現、チャート選択、レイアウト、描画、操作性、アクセシビリティを扱い、既存のライブラリやアルゴリズムも案内します。
主な機能
- 01視覚表現とチャート選択
- 02操作性と注釈のパターン
- 03グラフレイアウト用ライブラリの指針
- 04描画と性能の基準
- 05アクセシビリティと配色の指針
活用シーン
- 01データや問いに合うチャートの選択
- 02操作可能なグラフやダッシュボードの設計
- 03可視化の性能とアクセシビリティの改善
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/data-visualizationを入力して読み込まれたか確認します。
詳細
データビジュアライゼーション
ビジュアライゼーションはコミュニケーションです。すべての視覚要素は、理解を助けるものでなければなりません。
重要なルール
🚨 確立されたアルゴリズムを使ってください。 グラフレイアウト、ツリーレイアウト、空間インデックスなどの問題は、すでに解決されています。独自に実装する前に、dagre、d3-force、ELK.js を確認してください。
🚨 知覚精度に基づいてエンコーディングを選んでください。 位置は長さより、長さは角度より、角度は面積より、面積は色より正確です。バブルチャートより円グラフを、円グラフより棒グラフを優先してください。
🚨 色だけに頼らないでください。 男性の8％は色覚異常があります。補助的なエンコーディングとして、形状、パターン、ラベルを使ってください。
🚨 スケールに合わせてレンダリング方法を選んでください。 要素数が1000未満なら SVG、1000～10000なら Canvas、10000を超えるなら WebGL を使ってください。
1. 視覚的エンコーディング
マークとチャネル
マークは、データを表す幾何学的な基本要素です。
- 点（散布図、ドットプロット）
- 線（折れ線グラフ、ネットワークのエッジ）
- 面（棒グラフ、面グラフ、地図）
チャネルは、マークに適用される視覚的な特性です。
- 位置（x、y 座標）
- 大きさ（長さ、面積、体積）
- 色（色相、彩度、明度）
- 形状（円、四角形、三角形）
- 向き（角度、傾き）
Cleveland と McGill の階層（1984年）
知覚精度の高い順に並べた視覚的エンコーディング：
- 共通スケール上の位置（最も正確）
- 揃っていないスケール上の位置
- 長さ
- 角度／傾き
- 面積
- 体積
- 色の彩度／色相（最も不正確）
示唆： 棒グラフ（位置）> 円グラフ（角度）> バブルチャート（面積）
前注意的属性
意識せずに250ミリ秒未満で処理される特性：
- 色（色相、彩度）
- 形態（向き、長さ、幅、大きさ、形状）
- 空間的位置
- 動き
最も重要なデータには前注意的属性を使ってください。自動的に「目立つ」ようになります。
データ型ごとのチャネルの有効性
| データ型 | 最適なチャネル |
|---|---|
| 定量 | 位置、長さ、角度、面積 |
| 順序 | 位置、密度、彩度 |
| カテゴリ | 形状、色相、空間領域 |
2. インタラクション設計
シュナイダーマンのマントラ（1996年）
「まず全体像を示し、ズームとフィルターを使い、その後、必要に応じて詳細を表示する」
- 全体像 — データセット全体を表示し、文脈を示す
- ズームとフィルター — 複雑さを抑え、対象を絞り込む
- 必要に応じた詳細表示 — ツールチップ、クリックして展開、ドリルダウン
インタラクションパターン
| パターン | 使用例 |
|---|---|
| ブラッシングと連動 | 連携したビュー間で相互にハイライト表示する |
| フォーカス＋コンテキスト | 魚眼レンズ、必要に応じた詳細表示パネル |
| 直接操作 | ノードをドラッグする、要素のサイズを変更する、並べ替える |
| アニメーション付き遷移 | 状態間の変化をユーザーが追えるようにする |
| パンとズーム | 大規模なビジュアライゼーションを移動する |
| フィルタリング | データを関連するサブセットに絞り込む |
| 選択 | 特定のデータポイントをハイライト表示する |
3. チャートの選択
質問の種類に応じた選択
| 質問 | チャートの種類 | 理由 |
|---|---|---|
| 値を比較するには？ | 棒グラフ | 位置によるエンコーディングが最も正確 |
| 時間とともにどう変化したか？ | 折れ線グラフ | 傾向を示し、多数の点を扱える |
| 分布はどうなっているか？ | ヒストグラム、箱ひげ図 | 広がり、外れ値、形状を示す |
| 関係性はどうなっているか？ | 散布図 | 相関やクラスターを明らかにする |
| 全体に占める割合はどうなっているか？ | 積み上げ棒グラフ、ツリーマップ | 構成を示す |
| つながりはどうなっているか？ | ネットワークグラフ、サンキーダイアグラム | 関係性やフローを示す |
| 階層構造はどうなっているか？ | ツリー、サンバースト、ツリーマップ | 親子関係を示す |
| どこにあるか？ | コロプレス図、シンボルマップ | 地理的な文脈を示す |
データ量に応じた選択
| データ量 | 方法 |
|---|---|
| 20点未満 | シンプルなチャート、直接ラベル付け |
| 20～500 | 標準的なビジュアライゼーション |
| 500～5000 | 集約やフィルタリングを検討 |
| 5000以上 | 集約が必須。そうでなければ Canvas／WebGL |
よくあるアンチパターン
- ❌ 5区分を超える円グラフ（棒グラフを使ってください）
- ❌ 十分な根拠のない3Dチャート
- ❌ 関連性のないスケールを使った二重軸（誤解を招きます）
- ❌ 棒グラフでゼロ以外を基準とすること（知覚を歪めます）
- ❌ 明確な表示のない切り詰められた軸
4. 色
パレットの種類
| 種類 | 用途 | 例 |
|---|---|---|
| シーケンシャル | 低い値から高い値 | ブルー、グリーン、Viridis |
| ダイバージング | 中央値から両方向に分かれる値 | RdBu、BrBG、Spectral |
| カテゴリカル | 個別のカテゴリ | Set2、Tableau10、Category10 |
色覚多様性への配慮
- 男性の8％、女性の0.5％に色覚異常があります
- 色だけに頼らないでください。形状、パターン、ラベルも使用してください
- 安全なシーケンシャルパレット：viridis、cividis、plasma
- 安全なカテゴリカルパレット：ColorBrewerの色覚多様性に配慮したオプション
- テストツール：Coblis、Sim Daltonism、Chrome DevTools
知覚的な均一性
- レインボーカラーマップ（jet）は避けてください。知覚される色の変化が不均一です
- シーケンシャルデータにはviridis、parula、cividisを使用してください
- これらを使うと、値の間の知覚上の距離が均等になります
色のガイドライン
- テキストのコントラスト比は4.5:1（WCAG AA）
- UIコンポーネントのコントラスト比は3:1
- 明確に区別できるカテゴリカルカラーは最大7～10色
- 強調には彩度や明度の変化を使用してください
5. レイアウトアルゴリズム
🚨 レイアウトアルゴリズムを実装する前に、必ず既存のライブラリを確認してください。
アルゴリズムとライブラリの対応
| 問題 | アルゴリズム | ライブラリ |
|---|---|---|
| 階層型／DAGグラフ | Sugiyama（1981） | dagre、ELK.js |
| 力指向ネットワーク | Fruchterman-Reingold（1991） | d3-force、Cytoscape.js |
| ツリーレイアウト | Reingold-Tilford（1981） | d3-hierarchy |
| ツリーマップ | Squarified（2000） | d3-hierarchy、ECharts |
| 円形パッキング | Wang（2006） | d3-hierarchy |
| サンキーダイアグラム | — | d3-sankey |
| コードダイアグラム | — | d3-chord |
| 大規模グラフ（1万以上） | WebGL＋空間インデックス | Sigma.js、G6、deck.gl |
| 空間クエリ | クアッドツリー、Rツリー | d3-quadtree、rbush |
| エッジ交差の最小化 | Barth（2002） | dagre／ELKに組み込み |
各レイアウトの用途
| レイアウト | 最適な用途 |
|---|---|
| Sugiyama（dagre） | フローチャート、依存関係グラフ、方向性のあるDAG |
| 力指向 | ソーシャルネットワーク、自然な関係性、探索 |
| ツリー | 各ノードが単一の親を持つ階層 |
| ツリーマップ | 定量的な値を持つ階層 |
| 円形 | 中心的なノードやリング構造の強調 |
| マトリックス | エッジが重なり合うような密なグラフ |
これらの問題はすでに解決されています。ゼロから実装しないでください。
6. レンダリングとパフォーマンス
レンダリング技術のしきい値
<1000 elements → SVG
- DOM events work naturally
- Accessibility (ARIA) supported
- Crisp at any zoom level
- CSS styling
1000-10000 → Canvas
- Batch rendering
- Manual hit testing required
- Lower memory footprint
- requestAnimationFrame for animation
>10000 → WebGL
- GPU acceleration
- Sigma.js, deck.gl, regl
- Complex setup
- Limited text rendering
パフォーマンスパターン
| パターン | 使用する場面 |
|---|---|
| Web Workers | レイアウト計算（メインスレッドをブロックしない） |
| 空間インデックス | クアッドツリー／Rツリーを使ったヒット検出 |
| 詳細度制御 | 遠方または小さな要素を簡略化する |
| ビューポートカリング | 表示中の要素だけをレンダリングする |
| デバウンス | 負荷の大きい操作（ズーム、フィルター） |
| 仮想化 | グラフコンポーネントの長いリスト |
| 集約 | 個別にレンダリングするにはデータポイントが多すぎる場合 |
アンチパターン
- ❌ SVGノードを5000個使用する（Canvasを使用してください）
- ❌ メインスレッドでレイアウトを計算する
- ❌ 空間インデックスを使わずにヒットテストを行う
- ❌ 画面外の要素をレンダリングする
- ❌ 数千個の要素を個別にアニメーションさせる
7. ライブラリ
グラフレイアウト
| ライブラリ | 最適な用途 | 備考 |
|---|---|---|
| dagre | 階層型DAG、フローチャート | Sugiyamaアルゴリズム、適切なデフォルト設定 |
| dagre-d3 | dagreとD3によるレンダリング | SVG出力 |
| ELK.js | 複雑なレイアウト、複合グラフ | Eclipse Layout Kernel、高度に設定可能 |
| d3-force | 自然なネットワーク | Fruchterman-Reingold、カスタマイズ可能な力 |
| Cytoscape.js | グラフ分析と可視化 | 豊富なアルゴリズムライブラリ |
| Sigma.js | 大規模グラフ（1万以上） | WebGLレンダリング |
| G6/AntV | エンタープライズグラフ | 多機能、中国語圏のエコシステム |
| vis-network | 素早いプロトタイプ | 使いやすいAPI、カスタマイズ性は限定的 |
チャート作成
| ライブラリ | 最適な用途 | 備考 |
|---|---|---|
| D3.js | カスタムで高いインタラクティブ性が必要な場合 | 低レベルで、最大限の制御が可能 |
| Observable Plot | すばやい探索 | D3チームによるライブラリで、優れたデフォルト設定 |
| Recharts | Reactとの連携 | 宣言的で、組み合わせやすい |
| Victory | Reactとの連携 | アニメーションに対応 |
| ECharts | 機能豊富なダッシュボード | モバイルに適しており、大規模なデータセットに対応 |
| Vega-Lite | グラフィックの文法 | 宣言的なJSON仕様 |
| Chart.js | シンプルなチャート | 導入が簡単で、カスタマイズ性は限定的 |
| Plotly | 科学的な可視化 | 3Dに対応し、インタラクティブ性が高い |
D3と高レベルライブラリの使い分け
D3を使う場合：
- 描画を完全に制御する必要がある
- 独自の、またはカスタムの可視化を構築する
- 既存のSVG／Canvasコードと統合する
- カスタム最適化が必要な、パフォーマンス重視の用途
高レベルライブラリを使う場合：
- 標準的なチャートタイプで十分である
- 開発時間の短縮が重要である
- チームのD3経験が浅い
- 組み込みのレスポンシブ対応やアニメーションが必要である
8. 構成とレイアウト
プロジェクトの構成（ダッシュボードレベル）
- 視覚的階層 — 最も重要な情報に最初に目が向くようにする
- グリッドシステム — 要素を整列させ、統一感を持たせる
- グループ化 — 関連する可視化をまとめる
- 余白 — 無駄なスペースではなく、ゆとりを持たせる
- 読み進める流れ — 欧米の読者にはZパターンまたはFパターンを用いる
チャートの構成（単一のチャート）
| 要素 | ガイドライン |
|---|---|
| タイトル | 明確で説明的なものにし、左上または上部中央に配置する |
| サブタイトル | タイトルの下に小さく表示し、追加の文脈を示す |
| 軸 | 単位を付けてラベルを表示し、意味のある間隔で目盛りを付ける |
| 凡例 | 可能であればチャート内に配置し、複雑な場合は外部に配置する |
| アスペクト比 | 傾きの知覚に影響する。傾向を示す場合は45°になるよう調整する |
| 余白 | ラベル用の十分なスペースを確保し、チャート間で統一する |
アスペクト比のガイドライン
- 折れ線グラフ： 傾向を示す場合は約16:9（傾きが45°になるよう調整）
- 棒グラフ： 棒の数によって異なる
- 散布図： 相関を示す場合は正方形（1:1）が一般的
- 地図： 地理的な比率を保つ
9. 注釈
注釈の種類
| 種類 | 目的 |
|---|---|
| タイトル | 「何を」示すか。可視化の対象を明らかにする |
| サブタイトル | 追加の文脈やデータソースを示す |
| キャプション | 「それが何を意味するか」。重要な洞察や要点を示す |
| 軸ラベル | 変数名と単位を示す |
| 凡例 | 色、形、サイズの対応関係を説明する |
| コールアウト | 特定のデータポイントを強調する |
| 基準線 | ベンチマーク、目標、平均を示す |
| 出典 | データの来歴を示す |
ベストプラクティス
- データだけでなく洞察に注釈を付ける — 単に「時間経過による売上」ではなく、「売上は第3四半期にピークを迎えた」とする
- コールアウトは控えめに使う — 重要なポイントを最大1～3個強調する
- 直接ラベルを付ける — 可能であれば凡例を別に設けず、チャート内にラベルを埋め込む
- 文脈を示す — ベンチマーク、過去の参照値、目標を提示する
- 情報を階層化する — 概要を常に表示し、詳細は操作に応じて表示する
テキストの階層
- タイトル（最大サイズ、最も太い文字）
- サブタイトル／キャプション
- 軸タイトル
- 目盛りラベル
- 注釈
- 出典（最小サイズ）
10. アクセシビリティ
WCAG要件
- AAを最低基準とする（AAAが望ましい）
- 通常のテキストではコントラスト比4.5:1
- 大きなテキストとUIコンポーネントではコントラスト比3:1
- 色だけで情報を伝えない
キーボード操作
- Tabキーでインタラクティブ要素間を移動する
- 矢印キーでデータポイント間を移動する
- Enter／Spaceキーで選択する
- Escapeキーでキャンセル／閉じる
スクリーンリーダーへの対応
<svg role="img" aria-labelledby="chart-title chart-desc">
<title id="chart-title">Monthly Sales 2024</title>
<desc id="chart-desc">Bar chart showing sales increasing from $10M in January to $15M in December</desc>
</svg>
- ARIAのラベルとロールを使用する
- テキストによる代替情報を提供する
- ライブリージョンを使って動的な更新を通知する
- 論理的な読み上げ順になるよう構成する
代替表現
- データテーブル — すべてのチャートに代替手段として用意する
- テキストによる要約 — 重要な洞察を説明する
- 音響化 — 時系列データを音声で表現する
- 触覚グラフィックス — 触覚によるアクセシビリティのために用意する
11. アンチパターンのまとめ
デザインのアンチパターン
| アンチパターン | 問題点 | 対処法 |
|---|---|---|
| 3D グラフ | 認識を歪めます | 2D を使用します |
| 5 区分を超える円グラフ | 比較が困難です | 棒グラフを使用します |
| 関連性のない 2 つの軸 | 誤解を招く相関関係を示します | グラフを分けます |
| 0 以外の基準線 | 差を誇張します | 0 から始めます |
| 虹色のカラーマップ | 知覚上の均一性に欠けます | viridis を使用します |
| 色だけによる表現 | 色覚障害のある人を排除します | 形状やパターンを追加します |
| グラフの装飾過多 | データから注意をそらします | 装飾を取り除きます |
| 点の過剰な重なり | データ密度が見えなくなります | 集約するか、ジッターを加えます |
実装のアンチパターン
| アンチパターン | 問題点 | 対処法 |
|---|---|---|
| 独自のグラフレイアウト | 解決済みの問題を再発明しています | dagre/ELK を使用します |
| 5000 個の SVG ノード | パフォーマンスが低下します | Canvas を使用します |
| メインスレッドでのレイアウト処理 | UI をブロックします | Web Worker を使用します |
| 空間インデックスなし | ヒット検出が遅くなります | クアッドツリーを使用します |
| 画面外の要素をレンダリング | 計算が無駄になります | ビューポートカリングを行います |
12. 学術的基盤
先駆的な論文
| 論文 | 年 | 貢献 |
|---|---|---|
| Cleveland & McGill「Graphical Perception」 | 1984 | 視覚表現の階層 |
| Shneiderman「The Eyes Have It」 | 1996 | 概観・ズーム・フィルター・詳細のマントラ |
| Gansner et al.「Drawing Directed Graphs」 | 1993 | dagre の基盤 |
| Fruchterman & Reingold「Force-directed Placement」 | 1991 | d3-force の基盤 |
| Sugiyama et al.「Hierarchical Systems」 | 1981 | 階層型グラフレイアウト |
| Barth et al.「Bilayer Cross Counting」 | 2002 | エッジ交差の最小化 |
| Brewer「Color Use Guidelines」 | 1994 | ColorBrewer のパレット |
重要なリソース
| リソース | 種類 | 対象 |
|---|---|---|
| ColorBrewer (colorbrewer2.org) | ツール | アクセシブルなカラーパレット |
| From Data to Viz (data-to-viz.com) | ガイド | グラフ選択の判断ツリー |
| Visualization Analysis & Design (Munzner) | 教科書 | 包括的な理論 |
| Data Visualisation (Kirk) | 教科書 | 実践者向けガイド |
| Visual Display of Quantitative Information (Tufte) | 教科書 | データインク比、グラフの装飾過多 |
| D3 Gallery (observablehq.com/@d3/gallery) | 例 | 実装パターン |
まとめ
🚨 可視化を実装する前に：
- どんな問いに答えようとしていますか？ → グラフの種類を選択します
- データ量はどのくらいですか？ → レンダリング技術を選択します
- 確立されたアルゴリズムはありますか？ → ライブラリを使用します
- アクセシブルですか？ → 色、キーボード、スクリーンリーダーを確認します
- 知覚に関するベストプラクティスに従っていますか？ → 表現の階層を確認します
コメント
Markdown 対応