Coordinated Highlighting

Description

Coordinated highlighting is a multi-view interaction technique in which hovering over, clicking, or selecting a data item in one view causes the same item (or related items) to be visually emphasized in all other linked views. If the user hovers over “Japan” in a bar chart of GDP, the corresponding point in an adjacent scatterplot, the cell in a heatmap, and the region on a map all highlight simultaneously. The user sees the same entity from multiple analytical perspectives at once.

This pattern is the lightweight sibling of brush-and-link. Where brushing selects a spatial region and highlights all items within it, coordinated highlighting operates on individual items or small groups identified by identity (an ID, a name, a category) rather than by spatial proximity. The interaction cost is minimal — a hover is sufficient — and the information gain is high: the user immediately sees how one entity is positioned across all dimensions represented in the different views.

Coordinated highlighting relies on a shared data model across views. Each view must know how to map a hovered item’s identity back to its own marks. The implementation typically uses a shared state store (a reactive signal, a Redux store, or a simple event bus) that broadcasts the hovered item’s ID to all views, which then apply a highlight style (increased opacity, bold stroke, color change) to matching marks and dim non-matching ones. Ahlberg and Shneiderman’s work on dynamic queries and Buja et al.’s work on interactive data visualization (1996) established the theoretical foundation for this approach.

Coordinated Highlighting — try it yourself

When to Use

When multiple views of the same data are displayed side-by-side and the user needs to trace an item across views.
When the analytical question is “where does this item fall in each dimension?” — coordinated highlighting answers this instantly.
In dashboards with 2-6 linked charts that share a common dataset.
As a lightweight complement to brush-and-link — for item-level exploration rather than region-level selection.
When the views use different chart types (bar, scatter, map) and the user needs a visual anchor to connect them.

When NOT to Use

When only a single view is displayed — there is nothing to coordinate with.
When the views do not share a common data identity (different datasets, different granularities) — highlighting would be meaningless.
When the user’s task is to select a spatial region rather than identify specific items — brush-and-link is more appropriate.
When there are too many items (thousands) and hover-based highlighting produces distracting flicker as the user moves across marks.
When the views are on separate pages or tabs — the user cannot see the coordinated effect.

How It Works

Multiple views are rendered from the same dataset, each showing different dimensions or chart types.
The user hovers over (or clicks) a mark in any view — the system identifies the data item by its unique ID or key.
The hovered item’s ID is broadcast to all other views via a shared state mechanism (event bus, reactive store, or callback).
Each view receives the highlighted ID and applies a visual emphasis to the matching mark: increased opacity, bright stroke, enlarged size, or label reveal.
Non-matching marks are dimmed (reduced opacity, gray color) to create contrast.
When the user moves to a different mark, the highlight updates across all views in real time.
When the user leaves all marks (moves the cursor off the chart), all views return to their default state.

Variations

Hover-triggered: The lightest form. Hovering in any view highlights across all views. No click required.
Click-triggered: The user clicks to lock a highlight, which persists until they click elsewhere or press Escape. Allows careful comparison.
Multi-item highlighting: Hovering over a category label highlights all items in that category across views, not just one item.
Bi-directional: Highlighting works in both directions — hovering in view A highlights in view B, and vice versa.
Color-linked: Instead of binary highlight/dim, the highlighted item’s color in the source view is propagated to other views, maintaining color consistency.
Highlight with detail panel: The coordinated highlight also populates a shared detail panel showing the item’s full attributes.
Fade-and-focus: Non-highlighted items fade to near-invisible, creating an extreme focus effect.

Code Reference

// Coordinated highlighting across two D3 views using a shared signal
const highlightedId = { value: null };

function setHighlight(id) {
  highlightedId.value = id;
  updateHighlights();
}

function updateHighlights() {
  const id = highlightedId.value;
  // Update scatterplot
  scatter.selectAll("circle")
    .transition().duration(80)
    .style("opacity", d => !id || d.id === id ? 1 : 0.1)
    .attr("stroke-width", d => d.id === id ? 2.5 : 0.5);
  // Update bar chart
  bars.selectAll("rect")
    .transition().duration(80)
    .style("opacity", d => !id || d.id === id ? 1 : 0.1);
}

// Attach to both views
scatter.selectAll("circle")
  .on("mouseover", (_, d) => setHighlight(d.id))
  .on("mouseout", () => setHighlight(null));
bars.selectAll("rect")
  .on("mouseover", (_, d) => setHighlight(d.id))
  .on("mouseout", () => setHighlight(null));