coordinated-data-views

Files (1)

• SKILL.md

SKILL.md (first lines)

# Coordinated Data Views

Some data has more than one natural representation. A set of locations has both a map and a list. A dependency network has both a diagram and a node table. A dataset has both a chart and a raw table. When both representations are genuinely useful for different tasks, show them simultaneously and keep them synchronized — this is called a coordinated view.

The core rule: **any selection or highlight made in one view is immediately reflected in the other.**

---

## When to Use Coordinated Views

Use coordinated views when:

1. The two representations serve different tasks — the table is for finding/scanning; the visual view is for understanding arrangement or relationships
2. Users will frequently move between the two — not just glance at one occasionally
3. The dataset is large enough that the visual view alone doesn't identify individual items, and the table alone doesn't communicate how they relate

Do not add a coordinated view purely for visual richness. If users only ever look at the table and ignore the visual view, it adds complexity without benefit.

---

## The Synchronized Selection Model

Selection state is owned by a single shared store, not by either view. Both views read from and write to the same state.

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

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

**What synchronization covers:**

| Interaction | Effect in table | Effect in visual view |
|---|---|---|
| Click row | Row highlights | Corresponding element highlighted |
| Click visual element | Corresponding row highlighted, scrolled into view | Element highlighted |
| Hover row | Subtle row highlight | Subtle element highlight |
| Hover visual element | Subtle row highlight | Subtle element highlight |
| Clear selection | Row returns to default | Element returns to default |

**Scroll-into-view:** When a visual element is clicked, the table must scroll to bring the corresponding row into view. A row that is highlighted but off-screen is useless.

---

## Consistent Colour Coding

Colour meaning must be identical in both views. If a category is orange in the table badge, it is orange in the visual view. Never use different colour assignments for the same data in different representations.

Define colours centrally:

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

Both renderers import from the same source. A shared legend appears once in the layout, not in each view.

**Colour encodes state, the label encodes identity.** When every item already shows its own name, give all items of one kind the same colour and spend colour on state alone: planned, partly used, free, unavailable. Tints of one hue read as magnitude, not as different things, and a grey item collides with the grey that means empty. Show that one item recurs by highlighting all its occurrences on hover or selection. The legend then explains states and never lists items, because the labels already do.

---

## Layout

The split between views depends on which is primary:

**Table-primary (exploration, data management):** Table takes 60–70% of the width; visual view is a companion panel on the right or bottom.

**Visual-primary (understanding arrangement and relationships):** Visual view takes 60–70%; table is a supporting panel.

**Equal weight:** A 50/50 split with a draggable divider. Persist the user's preferred split.

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

On mobile, show one view at a time with a tab or toggle to switch. Do not attempt to show both on a small screen.

### Timelines and Calendar Grids

Place every mark on a time axis by the time it covers, never by a count of units. When units per day vary, give each day the same width and divide the day among the units it actually has, so a mark that ends with the day's last unit ends on the day seam. A width derived from a share of the unit count drifts as soon as days hold different numbers, and the bar then contradicts the grid beside it, so the reader trusts neither.

Build a calendar or matrix from one unit, a square cell plus one gap, and put every row on that pitch, labels included. When the window changes, change how many columns show, not the size of the cell. Keep the grid packed against its row labels and leave the spare width at the far end; a flexible label column on a wide screen pushes the grid away from what it names.

---

## Visual View Controls

Controls that affect only the visual representation belong in the visual view panel, not in the table area.

Common visual-specific controls:
- **Zoom / pan** — navigation (usually handled by the rendering library)
- **Layer opacity** — reveal overlapping regions on a dense map or diagram
- **Layer toggle** — show/hide categories or types
- **Reset view** — fit all elements into view; extent reset for maps

These controls do not affect the table. Do not put them in the table toolbar.

Controls that affect the shared data (filters, time range, category selection) belong outside both views, above or beside the layout, since they affect what appears in both.

---

## Highlighting vs. Selection

These are distinct states:

**Highlight (hover):** Transient, shown while the pointer is over an element. Does not persist. Both views show a subtle version (e.g. 50% opacity overlay, or a faint row background). No interaction required to clear it — moving the pointer clears it.

**Selection (click):** Persistent until explicitly cleared. Both views show a strong, unambiguous visual (e.g. bright border, saturated colour, selected row background). Cleared by clicking elsewhere or pressing Escape.

Do not conflate these. A hover highlight that persists after the pointer leaves is confusing.

---

From dembrandt/dembrandt-skills, MIT.

More from dembrandt/dembrandt-skills