data-viz

データビジュアライゼーションは、見栄えを良くするのではなく、理解を助けるために作成します。目標は、データを印象的に見せることではありません。ユーザーがパターンを理解し、値を比較し、意思決定できるようにすることです。

チャートの種類の選び方、レスポンシブなパターン、アクセシブルなデータテーブル、色覚に配慮したパレット、インタラクション設計については、データビジュアライゼーションのリファレンスを参照してください。 意味状態、チャートのパレット、カテゴリの色を色覚特性にかかわらず見分けられるようにする必要がある場合は、色覚多様性に配慮した UXのリファレンスを参照してください。 データテーブルがチャートより適切、またはチャートを補完する表示方法である場合は、複雑なテーブルの UXのリファレンスを参照してください。

必須の準備

frontend-designを読み、コンテキスト収集プロトコルに従ってください。利用可能なコンテキストを再利用し、重大な不足点についてのみ質問してください。さらに、ユーザーがデータを使って答えようとしている問い、対象者、データがリアルタイムで更新されるか静的かを確認してください。

ビジュアライゼーションのニーズを評価する

チャートを選ぶ前に、データが伝える内容を把握してください。

1. ユーザーは何を理解しようとしていますか？

   • カテゴリ間の比較（棒グラフ）
   • 時間の経過に伴う傾向（折れ線グラフ）
   • 全体に占める割合（積み上げ棒グラフまたはツリーマップ。円グラフはまれに使用）
   • 分布や範囲（ヒストグラム、箱ひげ図、散布図）
   • 階層構造（ツリーマップ、サンバースト）

2. データの形状はどのようなものですか？

   • データポイントの数（少数の値か、数千か）
   • 系列またはカテゴリの数（単一系列か、複数系列か）
   • 時間の粒度（日次、月次、年次）
   • データが連続値かカテゴリ値か

3. コンテキストはどのようなものですか？

   • ダッシュボード（一目でわかる要約）か、探索的分析（詳細なインタラクション）か

• 想定されるビューポートの範囲、必要な情報密度、主な入力方法
  • リアルタイム更新か、静的なレポートか
  • アクセシビリティ要件（スクリーンリーダー、色覚特性）

ビジュアライゼーションの各要素

チャートの選択

見た目の好みではなく、データの関係性に合ったチャートを選んでください。

棒グラフは、カテゴリ間の値を比較する場合に使用します。カテゴリ名が長い場合は横棒グラフを使用します。値の軸はゼロから開始します。

折れ線グラフは、時間の経過に伴う傾向を示す場合に使用します。線は約5本までに抑えます。可能であれば、各線の終端に直接ラベルを付けます。

散布図は、2つの変数間の関係を示す場合に使用します。相関が実際にある場合にのみ近似線を追加します。注目すべき外れ値にはラベルを付けます。

ヒストグラムは、度数分布を示す場合に使用します。データの形状（集まり、ばらつき、偏り）が重要な場合に使います。

ツリーマップは、多数のカテゴリを含む階層的な全体に占める割合を示す場合に使用します。

円グラフは避けてください。カテゴリがごく少数で、1つの項目が明らかに大きな割合を占める場合を除きます。その場合でも、ドーナツグラフまたは積み上げ棒グラフを優先してください。

アクセシブルなデータ表示

すべてのチャートには、アクセシブルな代替手段を用意する必要があります。

• ビジュアライゼーションの前に、主な洞察をテキストで要約します
• フォールバックとして、適切にマークアップされたデータテーブル（<caption>、<th scope="...">）を含めます
• aria-describedbyを使用して、チャートとその要約を関連付けます
• データポイント間をキーボードで移動できるようにし、値を音声で通知します
• 色だけに頼らず、パターン、テクスチャ、または直接のラベルを使用します

色の使い方

データビジュアライゼーションでは、意図を持って色を使用します。

• シーケンシャルスケール：大きさ（密度、量）を表すため、単一の色相で明度を変化させます
• ダイバージングスケール：中心からの偏差（分散、損益）を表すため、中間に中立色を置き、2つの色相を使用します
• カテゴリスケール：グループを区別するため、明度を揃えた、できるだけ異なる色相を使用します
• 赤と緑の組み合わせを避け、代わりに青とオレンジ、または紫と黄色を使用します
• 色覚シミュレーターでパレットをテストします

レスポンシブ動作

グラフは、ビューポートのサイズにかかわらず読みやすく保つ必要があります。

• 中程度のレイアウトでは、凡例を簡素化し、ラベルを回転させます
• 狭いレイアウトでは、グラフの種類を切り替えることを検討します（縦棒ではなく横棒にするなど）
• 操作機能で補います。ズームコントロール、値の明示的な表示、デフォルトでの概要表示などを用意します
• 最小幅での切り捨てや折り返しの動作をテストします

インタラクション設計

• 凡例項目を操作して、系列の表示を切り替えられるようにします
• ホバーまたはフォーカスで系列を強調し、ほかの系列を薄く表示します
• ブラシまたはドラッグで時間範囲を選択してズームできるようにします
• データポイントをクリックすると、パネルまたは隣接するビューに詳細を表示します
• フィルタリングやズームの後に「表示をリセット」するオプションを用意します
• リアルタイムグラフは全体を再描画せずに更新し、変更された要素のみをアニメーション表示します

ダッシュボードの設計

ダッシュボードでは複数の可視化を組み合わせ、ひと目で把握できる画面を作ります。

レイアウトの原則：

• 最も重要な指標は左上に配置します（左から右に読む場合）
• 関連するグラフは、近接させ、サイズを統一して視覚的にまとめます
• 同じカテゴリには、すべてのグラフで一貫した色分けを使用します
• 余白を確保します。情報を詰め込みすぎたダッシュボードは、情報を伝えるどころか圧倒してしまいます

インタラクティブ性：

• グローバルフィルター（日付範囲、カテゴリ）を変更すると、すべてのグラフが同時に更新されるようにします
• グラフの要素をクリックすると、詳細パネルまたは関連するグラフが更新されるようにします
• 明確な表示なしにダッシュボードを自動更新することは避け、「最終更新」タイムスタンプを表示します

アンチパターン

• チャートジャンク：装飾的な3D、グラデーション、影、不要な目盛線はデータを見えにくくします
• 2軸のy軸：誤解を招く比較につながります。代わりに並べて表示するグラフを使います
• 切り詰められたy軸：ゼロより上から始めると差が誇張され、視覚的に誤解を招きます
• データ系列が多すぎる：10本以上の線があるグラフは読みにくくなります。グループ化、フィルタリング、または分割します
• スライスが多い円グラフ：人間は角度を正確に認識するのが苦手です
• 説明のない欠損データ：欠損はゼロ値と視覚的に区別できるようにします
• パターンによる補助のない色：色だけで系列を区別すると、色覚異常のあるユーザーには判別できません
• 静的な代替手段のないアニメーション付きグラフ：自動再生されるアニメーションは、安定した参照点を必要とするユーザーを困らせます
• 唯一のデータ源としてのツールチップ：粗いポインターを使うユーザーや、運動機能に障害のあるユーザーは、ツールチップを表示させるのが難しい場合があります
• 文脈のないグラフ：比較対象、基準値、単位のない数値には意味がありません

可視化の品質を確認する

リリース前に、次の点を確認します。

• グラフの種類が、示すデータの関係性に合っている
• 棒グラフのy軸がゼロから始まっている
• 色覚特性にかかわらず色を見分けられる
• 代替手段として、アクセシブルなデータテーブルを利用できる
• 主な洞察をまとめたテキストが用意されている
• 狭いビューポート幅でもグラフが読みやすい
• インタラクティブ機能が、キーボード、粗いポインター、精密なポインターで動作する
• ツールチップが、単なる繰り返しではなく精度を高めている
• リアルタイム更新によってユーザーが混乱しない
• 可視化が、具体的なユーザーの質問に答えている