coordinated-data-views

連動ビュー

データによっては、自然な表現方法が複数あります。場所の集合には、地図とリストがあります。依存関係ネットワークには、図とノードの表があります。データセットには、グラフと未加工データの表があります。異なるタスクで両方の表現が本当に役立つ場合は、同時に表示し、同期させます。これを連動ビューと呼びます。

基本ルール：一方のビューで選択またはハイライトすると、もう一方のビューにもすぐに反映されます。

---

連動ビューを使用する場面

次の場合に連動ビューを使用します。

1. 2つの表現が異なるタスクに役立つ場合 — 表は項目の検索や一覧表示に、ビジュアルビューは配置や関係性の理解に適しています
2. ユーザーが2つのビューを頻繁に行き来する場合 — たまに一方を見るだけではありません
3. データセットが、ビジュアルビューだけでは個々の項目を特定できず、表だけでは項目間の関係が伝わらないほど大きい場合

見た目を豊かにすることだけを目的に、連動ビューを追加してはいけません。ユーザーが表だけを見てビジュアルビューを使わないのであれば、メリットがないまま複雑さが増します。

---

選択状態の同期モデル

選択状態は、どちらかのビューではなく、単一の共有ストアが管理します。両方のビューは、同じ状態を読み書きします。

Table row clicked → shared highlight state updated → both views re-render

Visual element clicked → shared highlight state updated → both views re-render

同期の対象：

操作	表での効果	ビジュアルビューでの効果
行をクリック	行がハイライトされる	対応する要素がハイライトされる
ビジュアル要素をクリック	対応する行がハイライトされ、表示範囲までスクロールする	要素がハイライトされる
行にマウスカーソルを合わせる	行が控えめにハイライトされる	要素が控えめにハイライトされる
ビジュアル要素にマウスカーソルを合わせる	行が控えめにハイライトされる	要素が控えめにハイライトされる
選択を解除	行がデフォルトの状態に戻る	要素がデフォルトの状態に戻る

表示範囲までスクロール： ビジュアル要素をクリックしたとき、表をスクロールして対応する行を表示する必要があります。ハイライトされていても画面外にある行には意味がありません。

---

一貫した色分け

色の意味は、両方のビューで同一でなければなりません。表のバッジでカテゴリがオレンジなら、ビジュアルビューでもオレンジにします。異なる表現で同じデータに異なる色を割り当ててはいけません。

色は一元管理します。

const CATEGORY_COLORS = {
  groupA: 'hsl(24, 80%, 55%)',
  groupB: 'hsl(210, 70%, 55%)',
} as const;

両方のレンダラーで同じソースを読み込みます。共通の凡例は各ビューに表示するのではなく、レイアウト内に1つだけ表示します。

色で状態を示し、ラベルで識別します。 すべての項目にすでに名前が表示されている場合は、同じ種類の項目すべてに同じ色を付け、色は状態だけに使います。予定、一部使用、空き、利用不可などです。同じ色相の濃淡は異なる種類ではなく量の違いとして認識され、灰色の項目は「空」を意味する灰色と混同されます。1つの項目が繰り返し登場することは、ホバーまたは選択時にそのすべての出現箇所をハイライトして示します。凡例では状態を説明し、項目は列挙しません。項目名はすでに表示されているためです。

---

レイアウト

どちらのビューを主とするかによって、ビューの表示領域の配分が変わります。

表が主（データの探索、管理）： 表に幅の60～70％を割り当て、右または下にビジュアルビューを補助パネルとして配置します。

ビジュアルビューが主（配置や関係性の理解）： ビジュアルビューに幅の60～70％を割り当て、表を補助パネルとして配置します。

均等な配分： ドラッグ可能な仕切りで50/50に分割します。ユーザーが設定した分割比率を保存します。

┌─────────────────────┬────────────────┐
│                     │                │
│   Table (primary)   │  Visual view   │
│                     │                │
└─────────────────────┴────────────────┘

モバイルでは、一度に1つのビューだけを表示し、タブまたは切り替えボタンで切り替えられるようにします。小さな画面で両方を同時に表示しようとしてはいけません。

タイムラインとカレンダーグリッド

各マークは、単位数ではなく、そのマークが占める時間に基づいて時間軸上に配置します。1日あたりの単位数が異なる場合は、各日の幅を同じにし、実際に含まれる単位数に応じて日を分割します。これにより、日の最後の単位で終わるマークは、その日の境界で終わります。単位数の割合から幅を割り出すと、日ごとの単位数が異なる時点でずれが生じ、バーと隣接するグリッドが矛盾するため、読者はどちらも信頼できなくなります。

カレンダーやマトリックスは、1単位分の幅（正方形のセルに間隔を加えた幅）を基準に作成し、ラベルも含め、すべての行でこの間隔を統一します。表示範囲が変わったときは、セルのサイズではなく、表示する列数を変更します。グリッドは行ラベルにぴったり寄せ、余った幅は端に残します。画面が広いときにラベル列の幅を柔軟に変えると、グリッドが対応するラベルから離れてしまいます。

---

ビジュアルビューのコントロール

ビジュアル表現だけに影響するコントロールは、テーブル領域ではなく、ビジュアルビューパネルに配置します。

ビジュアル専用コントロールの例：

• ズーム／パン — ナビゲーション（通常はレンダリングライブラリが処理します）
• レイヤーの不透明度 — 高密度のマップや図で、重なり合う領域を見えるようにします
• レイヤーの切り替え — カテゴリーや種類の表示／非表示を切り替えます
• 表示のリセット — すべての要素が表示範囲に収まるようにします。マップの場合は表示範囲をリセットします

これらのコントロールはテーブルに影響しません。テーブルツールバーには配置しないでください。

共有データに影響するコントロール（フィルター、時間範囲、カテゴリーの選択）は、どちらのビューにも影響するため、レイアウトの上または横など、両方のビューの外側に配置します。

---

ハイライトと選択

これらは異なる状態です。

ハイライト（ホバー）： 一時的な状態で、ポインターが要素の上にある間だけ表示されます。状態は保持されません。両方のビューで控えめに表示します（例：不透明度50％のオーバーレイ、または薄い行の背景色）。解除するための操作は不要です。ポインターを移動すると解除されます。

選択（クリック）： 明示的に解除されるまで保持されます。両方のビューで、はっきりと区別できる強い視覚表現を使います（例：明るい境界線、鮮やかな色、選択行の背景色）。別の場所をクリックするか、Escape キーを押すと解除されます。

この2つを混同しないでください。ポインターが離れた後もホバーによるハイライトが残ると、混乱を招きます。

---

データの横に表示する分析

画面上のデータを説明または要約するパネルは、ダイアログではなく、連動ビューです。テーブルの横に、モーダルではない形で開き、ページは引き続きスクロールできるようにします。ユーザーは、各主張を、その根拠となった行と照らし合わせます。モーダルでは、まさにその行が隠れてしまいます。

---

パフォーマンスに関する考慮事項

連動ビューは、慎重に管理しないと、負荷の高い再レンダリングを引き起こすことがあります。

• ホバーによるハイライトにはデバウンスを適用します。ポインター移動イベントのたびに更新するのではなく、対象の要素が変わったときだけ更新します
• 項目には安定した識別情報（一貫した ID）を使用し、React（または同等の仕組み）が要素を再作成せずに照合できるようにします
• 大規模なデータセット（1000 件以上）では、ビジュアルビューに関係なく、テーブルを仮想化します
• Canvas または WebGL でレンダリングするビューでは、ハイライトのたびに要素を再作成せず、既存の要素のスタイルプロパティを更新します

---

レビューチェックリスト

• 選択状態は重複して管理されず、単一のストアを通じて両方のビューで共有されていますか？
• 行をクリックすると対応するビジュアル要素がハイライトされ、その逆も同様ですか？
• ビジュアル要素をクリックすると、テーブルが対応する行までスクロールしますか？
• 色の割り当ては両方のビューで同一で、単一の情報源から定義されていますか？
• 共有の凡例はビューごとに重複せず、1か所だけに表示されていますか？
• ビジュアル専用コントロール（ズーム、透明度、レイヤーの切り替え）は、テーブルではなくビジュアルパネルに配置されていますか？
• 分析パネルまたは要約パネルはデータの横に、モーダルではない形で配置され、ページは引き続きスクロールできますか？
• ホバーによるハイライトとクリックによる選択は、視覚的に異なる状態として表示されていますか？
• モバイルでは、ビューを切り替える方法が明確に用意されていますか？
• 不要な再レンダリングを避けるため、ホバーイベントにデバウンスが適用されていますか？