Coordinated Highlighting

설명 / Description

연동 하이라이팅은 한 뷰에서 데이터 항목을 호버, 클릭, 선택하면 다른 모든 연결된 뷰에서 동일 항목(또는 관련 항목)이 시각적으로 강조되는 다중 뷰 인터랙션 기법입니다. 사용자가 GDP 막대 차트에서 "일본"에 호버하면, 인접한 산점도의 해당 점, 히트맵의 셀, 지도상의 지역이 동시에 강조됩니다. 사용자는 동일한 개체를 여러 분석적 관점에서 한 번에 보게 됩니다.

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.

이 패턴은 브러시 앤 링크의 경량 버전이라 할 수 있습니다. 브러싱이 공간적 영역을 선택하여 그 안의 모든 항목을 강조하는 반면, 연동 하이라이팅은 공간적 근접성이 아니라 정체성(ID, 이름, 범주)으로 식별되는 개별 항목이나 작은 그룹에 대해 작동합니다. 인터랙션 비용은 최소한입니다 — 호버만으로 충분합니다 — 그리고 정보 이득은 큽니다: 사용자는 하나의 개체가 여러 뷰에 표현된 모든 차원에서 어떻게 위치하는지 즉시 볼 수 있습니다.

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.

연동 하이라이팅은 뷰 전반에 걸친 공유 데이터 모델에 의존합니다. 각 뷰는 호버된 항목의 정체성을 자신의 마크에 다시 매핑하는 방법을 알아야 합니다. 구현은 보통 호버된 항목의 ID를 모든 뷰에 방송하는 공유 상태 저장소(반응형 시그널, Redux 스토어, 또는 단순한 이벤트 버스)를 사용하며, 각 뷰는 일치하는 마크에 하이라이트 스타일(불투명도 증가, 굵은 선, 색 변경)을 적용하고 일치하지 않는 마크는 흐리게 만듭니다. 알버그와 슈나이더만(Ahlberg & Shneiderman)의 동적 쿼리 연구와 부자 외(Buja et al., 1996)의 인터랙티브 데이터 시각화 연구가 이 접근법의 이론적 토대를 확립했습니다.

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.
공통 데이터셋을 공유하는 2~6개의 연결된 차트가 있는 대시보드에서.
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.
사용자가 어떤 뷰에서든 마크를 호버(또는 클릭)합니다 — 시스템이 고유 ID나 키로 데이터 항목을 식별합니다.
The user hovers over (or clicks) a mark in any view — the system identifies the data item by its unique ID or key.
호버된 항목의 ID가 방송됩니다 — 공유 상태 메커니즘(이벤트 버스, 반응형 스토어, 콜백)을 통해 다른 모든 뷰로 전달됩니다.
The hovered item's ID is broadcast to all other views via a shared state mechanism (event bus, reactive store, or callback).
각 뷰가 강조된 ID를 받아 일치하는 마크에 시각적 강조를 적용합니다: 불투명도 증가, 밝은 선, 크기 확대, 또는 레이블 표시.
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.
클릭 트리거: 사용자가 클릭하여 하이라이트를 고정하며, 다른 곳을 클릭하거나 Escape를 누를 때까지 유지됩니다. 신중한 비교를 가능하게 합니다.
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.
양방향: 하이라이팅이 양방향으로 작동합니다 — 뷰 A에서 호버하면 뷰 B가 강조되고, 그 반대도 마찬가지입니다.
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));