Linked Views

설명 / Description

연결 뷰(또는 연동 다중 뷰, CMV)는 동일하거나 관련된 데이터셋의 여러 시각화를 서로 연결하여, 한 뷰에서의 사용자 행동이 다른 모든 뷰로 전파되게 하는 인터랙션 아키텍처입니다. 사용자가 어느 한 뷰에서 호버, 선택, 브러시, 필터링을 하면, 해당 데이터 항목이 연결된 모든 뷰에서 하이라이트, 선택, 또는 필터링됩니다. 이러한 조정은 독립적인 차트들의 집합을 하나의 통합된 분석 환경으로 바꿔놓습니다.

Linked views (or coordinated multiple views, CMV) is an interaction architecture in which multiple visualizations of the same (or related) datasets are connected so that user actions in one view propagate to all others. When the user hovers, selects, brushes, or filters in any single view, the corresponding data items are highlighted, selected, or filtered in every linked view. This coordination transforms a set of independent charts into an integrated analytical environment.

연동 다중 뷰에 대한 이론적 프레임워크는 로버츠(Roberts, 2007)에 의해 확립되었고 위버(Weaver, 2004)에 의해 정교화되었으며, 베커와 클리블랜드(Becker & Cleveland)의 브러싱 산점도와 같은 이전 시스템 연구를 기반으로 합니다. 핵심 원칙은 서로 다른 시각적 인코딩이 다차원 데이터의 서로 다른 측면을 드러낸다는 것입니다 — 산점도는 두 변수 간 관계를, 막대 차트는 단변량 분포를, 지도는 공간적 패턴을 보여줍니다 — 이러한 뷰들을 조정하면 사용자는 한 차원의 패턴이 다른 차원의 패턴과 어떻게 관련되는지 볼 수 있습니다. 이것이 바로 CMV가 태블로(Tableau)부터 Vega-Lite까지 탐색적 데이터 분석 도구의 표준 아키텍처인 이유입니다.

The theoretical framework for coordinated multiple views was established by Roberts (2007) and refined by Weaver (2004), building on earlier work in systems like Becker and Cleveland's brushing scatterplots. The core principle is that different visual encodings reveal different aspects of multidimensional data — a scatterplot shows bivariate relationships, a bar chart shows univariate distributions, a map shows spatial patterns — and coordinating these views lets the user see how a pattern in one dimension relates to patterns in others. This is why CMV is the standard architecture for exploratory data analysis tools from Tableau to Vega-Lite.

조정을 위한 설계 공간은 무엇을 공유할지(선택, 필터, 하이라이트, 내비게이션), 어떻게 공유할지(단방향 또는 양방향), 어떤 뷰가 참여할지를 포함합니다. 모든 뷰가 모든 상호작용에 반응할 필요는 없습니다 — 잘 설계된 시스템은 분석가가 어떤 뷰를 연결할지, 어떻게 연결할지를 설정할 수 있게 합니다. 구현은 보통 상호작용 이벤트를 참여하는 모든 뷰에 전달하는 공유 상태 저장소(이벤트 버스, 반응형 상태, 또는 공유 데이터 모델)를 포함합니다.

The design space for coordination includes what is shared (selection, filter, highlight, navigation), how it is shared (unidirectional or bidirectional), and which views participate. Not every view needs to respond to every interaction — a well-designed system lets the analyst configure which views are linked and how. The implementation typically involves a shared state store (event bus, reactive state, or shared data model) that dispatches interaction events to all participating views.

Linked Views — try it yourself

언제 사용하나 / When to Use

데이터셋이 여러 차원을 가지고 있어 서로 다른 시각적 인코딩을 동시에 보여주는 것이 유리할 때.
When the dataset has multiple dimensions that benefit from different visual encodings shown simultaneously.
분석 과제가 다변량 관계를 이해하는 것을 포함할 때(예: "GDP가 높은 국가는 기대수명도 높은가?").
When the analytical task involves understanding multivariate relationships (e.g., "do the high-GDP countries also have high life expectancy?").
단일 차트 유형만으로는 데이터의 복잡성을 충분히 표현할 수 없을 때.
When a single chart type cannot adequately represent the complexity of the data.
여러 지표가 표시되고 사용자가 그 연관성을 조사해야 하는 대시보드 스타일 인터페이스에서.
In dashboard-style interfaces where multiple metrics are displayed and the user needs to investigate their connections.
데이터를 탐색하는 데 상당한 시간을 들일 분석가가 사용자층에 포함되어 있을 때.
When the user population includes analysts who will spend significant time exploring the data.

이럴 땐 피하세요 / When NOT to Use

단일 뷰로 분석 과제가 충분할 때 — 연결 뷰를 추가하면 분석적 이득 없이 시각적 복잡성만 늘어납니다.
When a single view is sufficient for the analytical task — adding linked views introduces visual complexity without analytical benefit.
화면이 너무 작아 여러 뷰를 알아볼 수 있게 표시하기 어려울 때(모바일 기기, 좁은 위젯).
When the screen is too small to display multiple views legibly (mobile devices, narrow widgets).
서로 다른 뷰의 데이터셋이 관련이 없을 때 — 연결하면 잘못된 연관성을 만들어냅니다.
When the datasets in different views are unrelated — linking them would create false associations.
청중이 주로 내러티브(설명 모드)를 소비하고 있어 탐색적 다중 뷰 도구가 필요하지 않을 때.
When the audience is primarily consuming a narrative (explanatory mode) and does not need exploratory multi-view tools.
성능 제약으로 인해 뷰 간 실시간 동기화가 어려울 때(대규모 데이터셋, 느린 렌더링).
When performance constraints prevent real-time synchronization across views (large datasets, slow rendering).

작동 방식 / How It Works

여러 뷰가 렌더링됩니다. 각 뷰는 동일하거나 관련된 데이터셋의 서로 다른 시각적 인코딩을 보여줍니다. 예: (소득, 건강)의 산점도, 지역별 막대 차트, 국가 위치를 보여주는 지도.
Multiple views are rendered, each showing a different visual encoding of the same dataset or related data. For example: a scatterplot of (income, health), a bar chart of region, and a map of country locations.
공유 상태 관리자(이벤트 버스, 반응형 스토어, 또는 공유 선택 모델)가 모든 뷰를 연결합니다.
A shared state manager (event bus, reactive store, or shared selection model) connects all views.
사용자가 한 뷰에서 상호작용하면(점에 호버하거나, 영역을 브러시하거나, 막대를 클릭하면) 해당 뷰는 영향을 받은 데이터 항목을 설명하는 이벤트를 발생시킵니다.
When the user interacts in one view (hovers over a point, brushes a region, clicks a bar), the view emits an event describing the affected data items.
다른 모든 뷰가 이 이벤트를 수신하여 이를 시각적으로 반영합니다 — 해당 마크를 하이라이팅하거나, 일치하는 데이터만 보이도록 필터링하거나, 요약 통계를 업데이트합니다.
All other views receive the event and visually reflect it — highlighting the corresponding marks, filtering to show only matching data, or updating summary statistics.
이 조정은 양방향입니다 — 사용자는 어떤 뷰에서든 상호작용을 시작할 수 있고, 다른 모든 뷰가 이에 반응합니다.
The coordination is bidirectional — the user can initiate interactions in any view, and all others respond.
선택적으로 뷰의 연결을 해제하거나, 뷰가 많은 복잡한 대시보드를 위해 조정 세트로 그룹화할 수 있습니다.
Optionally, views can be un-linked or grouped into coordination sets for complex dashboards with many views.

변형 / Variations

하이라이트 연동: 한 뷰에서 호버하거나 선택하면 다른 뷰에서 해당 마크가 하이라이트됩니다. 가장 가벼운 조정 방식 — 데이터가 필터링되지는 않습니다.
Highlight linking: Hovering or selecting in one view highlights corresponding marks in others. Lightest coordination — no data is filtered.
필터 연동: 한 뷰에서 브러시하거나 필터링하면 다른 모든 뷰의 데이터가 필터링됩니다. 보이는 데이터셋을 줄이는 더 강한 조정 방식입니다.
Filter linking: Brushing or filtering in one view filters the data in all others. Stronger coordination that reduces the visible dataset.
내비게이션 연동: 한 뷰에서 확대/축소하거나 이동하면 다른 뷰의 뷰포트가 동기화됩니다(예: 서로 다른 변수를 같은 줌 레벨로 보여주는 두 개의 지도).
Navigation linking: Zooming or panning in one view synchronizes the viewport of others (e.g., two maps showing different variables at the same zoom level).
인코딩 연동: 한 뷰에서 시각적 인코딩 매개변수(색상 스케일, 축)를 변경하면 일관성을 위해 다른 뷰에도 전파됩니다.
Encoding linking: Changing a visual encoding parameter (color scale, axis) in one view propagates to others for consistency.
비대칭 연동: 상호작용이 한 방향으로만 흐릅니다 — "드라이버" 뷰가 "피드리븐" 뷰를 제어하지만, 그 반대는 성립하지 않습니다.
Asymmetric linking: Interactions flow one direction — the "driver" view controls the "driven" views, but not vice versa.
패싯 연동: 스몰 멀티플은 동일한 인코딩을 공유하지만 서로 다른 데이터 부분집합을 보여줍니다. 한 패싯에서 호버하면 모든 패싯에서 동일한 데이터 포인트가 하이라이트됩니다.
Faceted linking: Small multiples share the same encoding but show different data subsets. Hovering in one facet highlights the same data point across all facets.

코드 레퍼런스 / Code Reference

// Shared selection state linking a bar chart and scatterplot
const state = { selected: null };

// Bar chart: on hover, set selected category
barChart.selectAll("rect").on("mouseover", (e, d) => {
  state.selected = d.category;
  updateAll();
});

// Scatterplot responds to shared state
function updateAll() {
  scatter.selectAll("circle")
    .style("opacity", d =>
      !state.selected || d.category === state.selected ? 1 : 0.1
    );
  barChart.selectAll("rect")
    .style("opacity", d =>
      !state.selected || d.category === state.selected ? 1 : 0.2
    );
}