Brush and Link

설명 / Description

브러시 앤 링크는 사용자가 차트 위에 사각형(또는 때로는 자유형) 영역을 드래그로 지정하여 그 영역 안에 있는 모든 데이터 마크를 선택하는 연동 선택 기법입니다. 선택된 데이터 집합은 현재 뷰에서 강조되고, 결정적으로 동일한 기반 데이터를 공유하는 모든 연결된 뷰에서도 강조됩니다. 한 뷰에서의 브러싱과 다른 뷰에서의 강조 표시 사이의 이러한 긴밀한 결합은 멀티 뷰 시각화에서 가장 강력한 기법 중 하나입니다.

Brush and link is a coordinated selection technique in which the user drags to define a rectangular (or sometimes free-form) region on a chart, selecting all data marks that fall within that region. The selected set is then highlighted in the current view and, critically, in all linked views that share the same underlying data. This tight coupling between brushing in one view and highlighting in another is one of the most powerful techniques in multi-view visualization.

이 개념은 베커와 클리블랜드(Becker & Cleveland, 1987)의 "산점도 브러싱(brushing scatterplots)" 연구로 거슬러 올라가며, XGobi와 GGobi 같은 시스템에서 정형화되었습니다. 핵심 통찰은 데이터의 한 투영에서는 보이지 않던 패턴이 사용자가 다른 투영에서 브러싱을 통해 부분집합을 분리해내면 종종 드러난다는 것입니다. 예를 들어, (x1, x2) 산점도에서 클러스터를 브러싱하면 그 점들이 모든 차원을 담은 평행 좌표 플롯에서 뚜렷한 띠를 이룬다는 사실이 드러날 수 있습니다.

The concept traces back to the work of Becker and Cleveland (1987) on "brushing scatterplots" and was formalized in systems like XGobi and GGobi. The key insight is that patterns invisible in one projection of the data often become visible when the user isolates a subset via brushing in another projection. For example, brushing a cluster in a scatterplot of (x1, x2) might reveal that those points form a distinct band in a parallel coordinates plot of all dimensions.

브러싱은 개별 마크가 아니라 공간적 영역에 대해 작동한다는 점에서 클릭 선택과 근본적으로 다릅니다. 그래서 사용자의 분석적 질문이 "이 특정 지점에 대해 알려줘"가 아니라 "이 범위에서는 무슨 일이 일어나는가?"인 연속적인 데이터 공간(산점도, 시계열)에 자연스럽게 어울립니다. D3.js는 모든 포인터 이벤트 관리를 처리하는 1급 브러시 모듈(d3-brush)을 제공하며, 대부분의 현대 시각화 라이브러리도 이에 상응하는 프리미티브를 제공합니다.

Brushing is fundamentally different from click-to-select because it operates on spatial regions rather than individual marks. This makes it natural for continuous data spaces (scatterplots, time series) where the user's analytical question is "what happens in this range?" rather than "tell me about this specific point." D3.js provides a first-class brush module (d3-brush) that handles all the pointer event management, and most modern visualization libraries offer equivalent primitives.

Brush And Link — try it yourself

언제 사용하나 / When to Use

사용자가 산점도, 시계열, 히스토그램에서 연속된 점들의 부분집합을 선택해야 할 때.
When the user needs to select a contiguous subset of points in a scatterplot, time series, or histogram.
연동된 뷰들이 있고, 한 뷰의 부분집합이 다른 뷰에 어떻게 대응하는지 확인하는 데서 분석적 가치가 나올 때.
When coordinated views are available and the analytical value comes from seeing how a subset in one view maps to other views.
데이터가 연속적이고, 자연스러운 선택 단위가 개별 항목이 아니라 (시간이나 값의) 범위일 때.
When the data is continuous and the natural selection unit is a range (of time, of values) rather than individual items.
사용자가 어떤 부분집합이 흥미로운지 미리 알지 못하는 탐색적 데이터 분석 작업에서.
For exploratory data analysis tasks where the user does not know in advance which subsets are interesting.
선택된 부분집합에 대해 요약 통계를 계산하거나, 모델을 적합시키거나, 데이터를 내보내기 전 단계로서.
As a precursor to computing summary statistics, fitting models, or exporting data for a selected subset.

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

차트에 마크가 매우 적을 때(10~15개 미만) — 클릭 선택이 더 단순하고 정확합니다.
When the chart has very few marks (under 10-15) — click-to-select is simpler and more precise.
데이터가 순전히 범주형이어서 브러싱할 의미 있는 공간적 순서가 없을 때.
When the data is purely categorical with no meaningful spatial ordering to brush over.
작은 모바일 화면에서 드래그 제스처가 스크롤이나 팬과 충돌할 가능성이 높을 때.
On small mobile screens where a drag gesture is likely to conflict with scroll or pan.
차트의 시각적 밀도 때문에 브러시 영역이 항상 전부 아니면 전무를 선택하게 될 때.
When the brush region would always select all-or-nothing due to the chart's visual density.

작동 방식 / How It Works

사용자가 차트 표면을 누르고 드래그하여 눈에 보이는 사각형 오버레이("브러시 범위")를 생성합니다.
The user presses and drags on the chart surface, creating a visible rectangular overlay (the "brush extent").
시스템이 히트 테스트를 수행하여 어떤 데이터 마크가 브러시 범위 안에 있는지(또는 교차하는지) 판단합니다.
The system performs hit-testing to determine which data marks fall within (or intersect) the brush extent.
선택된 마크는 시각적으로 강조되고(완전한 불투명도, 굵은 테두리), 선택되지 않은 마크는 흐려집니다.
Selected marks are visually emphasized (full opacity, bold stroke); non-selected marks are dimmed.
연결된 뷰에서는 공간적 위치가 다르더라도 동일한 데이터 항목이 강조됩니다.
In linked views, the same data items are highlighted, even though their spatial positions differ.
사용자는 브러시의 가장자리나 내부를 드래그하여 크기를 조정하거나 이동시킬 수 있습니다. 선택 내용은 실시간으로 업데이트됩니다.
The user can resize or move the brush by dragging its edges or interior. The selection updates in real time.
브러시를 놓으면(또는 바깥을 클릭하면) 구현 방식에 따라 선택이 유지되거나 지워질 수 있습니다.
Releasing the brush (or clicking outside it) may either persist the selection or clear it, depending on the implementation.

변형 / Variations

1D 브러시: 하나의 축을 따라 범위를 선택하는 수평 또는 수직 브러시. 시계열 차트와 히스토그램에서 흔히 사용됩니다.
1D brush: A horizontal or vertical brush that selects a range along one axis. Common on time-series charts and histograms.
2D 브러시: 두 축에서 동시에 선택하는 사각형 브러시. 산점도의 표준 방식입니다.
2D brush: A rectangular brush that selects on both axes simultaneously. Standard for scatterplots.
올가미 브러시: 자유형 드로잉으로 불규칙한 영역을 선택합니다. 더 표현력이 풍부하지만 조정하기는 더 어렵습니다.
Lasso brush: Free-form drawing to select an irregular region. More expressive but harder to adjust.
멀티 브러시: 여러 브러시 영역이 공존할 수 있으며, 포함된 데이터의 합집합(또는 교집합)을 선택합니다.
Multi-brush: Multiple brush regions can coexist, selecting the union (or intersection) of covered data.
스냅 브러시: 브러시가 임의의 픽셀 위치가 아니라 구간 경계(예: 히스토그램 막대)에 맞춰 정렬됩니다.
Snap brush: The brush snaps to bin boundaries (e.g., histogram bars) rather than arbitrary pixel positions.
일시적 브러시: 마우스를 놓으면 브러시가 사라지고 선택 내용이 필터로 적용됩니다.
Transient brush: The brush disappears on mouse-up and the selection is applied as a filter.

코드 레퍼런스 / Code Reference

// D3.js 2D brush on a scatterplot with linked highlighting
const brush = d3.brush()
  .extent([[0, 0], [width, height]])
  .on("brush end", ({ selection }) => {
    if (!selection) {
      svg.selectAll("circle").style("opacity", 0.8);
      return;
    }
    const [[x0, y0], [x1, y1]] = selection;
    svg.selectAll("circle").style("opacity", d =>
      x(d.xVal) >= x0 && x(d.xVal) <= x1 &&
      y(d.yVal) >= y0 && y(d.yVal) <= y1 ? 1 : 0.1
    );
  });

svg.append("g").call(brush);