data-viz

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

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

必須の準備

ユーザーは /data-viz でこのワークフローを開始します。このスキルが有効になったら、$frontend-design を読み込んでください。これには、デザイン原則、アンチパターン、コンテキスト収集プロトコルが含まれています。先に進む前に、このプロトコルに従ってください。デザインのコンテキストがまだ存在しない場合は、必ず最初に $setup を読み込んでください。さらに、ユーザーがデータから何を明らかにしようとしているのか、対象者は誰か、データがリアルタイムで更新されるのか静的なのかを確認してください。

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

グラフを選ぶ前に、データから何を伝えるのかを理解してください。

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

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

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

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

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

   • ダッシュボード（概要をひと目で把握）か、探索的分析（詳細な操作）か
   • モバイルファーストか、デスクトップファーストの対象者か
   • リアルタイム更新か、静的なレポートか
   • アクセシビリティ要件（スクリーンリーダー、色覚特性）

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

グラフの選択

見た目の好みではなく、データの関係性に合わせてグラフを選びます。

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

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

散布図は2つの変数間の関係を示す場合に使います。相関が実際にある場合に限り、トレンドラインを追加します。注目すべき外れ値にはラベルを付けます。

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

ツリーマップは、多数のカテゴリがある階層的な構成比を示す場合に使います。

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

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

すべてのグラフに、アクセシブルな代替手段を用意する必要があります。

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

色の戦略

データビジュアライゼーションでは、意図的に色を使います。

• 順次スケール：量（密度、ボリューム）を表すため、単一の色相の明度を変化させます
• 発散スケール：中心からの偏差（分散、損益）を表すため、中立色を中間にして2つの色相を使います
• カテゴリスケール：異なるグループを区別するため、輝度をそろえた、互いに明確に異なる色相を使います
• 赤と緑の組み合わせは避け、代わりに青とオレンジ、または紫と黄色を使います
• 色覚シミュレーターでパレットをテストします

レスポンシブな動作

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

• 中程度の幅のレイアウトでは、凡例を簡素化し、ラベルを回転させます
• 幅の狭いレイアウトでは、グラフの種類を切り替えることを検討します（縦棒ではなく横棒にするなど）
• インタラクションで補います。ピンチによるズーム、正確な値を表示するタップ、デフォルトのサマリービューなどを利用します
• 最小幅での切り詰めと折り返しの動作をテストします

インタラクション設計

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

ダッシュボード設計

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

レイアウトの原則：

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

インタラクティブ性：

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

アンチパターン

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

可視化の品質を確認する

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

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