Lasso Selection

설명 / Description

올가미 선택은 사용자가 선택하려는 데이터 포인트 주위에 임의의 닫힌 다각형을 그릴 수 있게 하는 자유 형태 드로잉 인터랙션입니다. 선택을 축 정렬된 영역으로 제한하는 사각형 브러시와 달리, 올가미는 커서 경로를 그대로 따라가므로 사용자가 불규칙한 형태의 군집, 곡선 경계, 또는 단순한 사각형 형태로는 담을 수 없지만 개념적으로 연관된 흩어진 마크 그룹을 포착할 수 있습니다.

Lasso selection is a freeform drawing interaction that lets users trace an arbitrary closed polygon around the data points they want to select. Unlike a rectangular brush, which constrains selection to axis-aligned regions, a lasso follows the cursor path exactly, allowing the user to capture irregularly shaped clusters, curved boundaries, or scattered groups of marks that share a conceptual relationship but not a simple rectangular footprint.

이 기법은 그래픽 편집 소프트웨어에서 유래했으며(포토샵의 올가미 도구는 1990년대 초로 거슬러 올라갑니다), 데이터 군집이 축에 정렬되지 않는 시각화 시스템에서 채택되었습니다. 여러 그룹이 겹치는 산점도에서 사각형 브러시는 군집 경계에서 원치 않는 점을 포함하거나 원하는 점을 제외할 수밖에 없습니다. 올가미는 사용자에게 완전한 기하학적 제어권을 부여함으로써 이 문제를 해결합니다. Tableau, Vega-Lite(선택 파라미터를 통해), 그리고 커스텀 D3 구현 모두 올가미 선택을 지원합니다.

The technique originates in graphics editing software (Photoshop's lasso tool dates to the early 1990s) and was adopted by visualization systems where data clusters are not axis-aligned. In a scatterplot with multiple overlapping groups, a rectangular brush inevitably includes unwanted points or excludes desired ones at cluster boundaries. A lasso solves this by giving the user full geometric control. Systems like Tableau, Vega-Lite (via selection parameters), and custom D3 implementations all support lasso selection.

인지적 관점에서 올가미 선택은 사용자가 그룹 경계를 시각적으로 지각하는 방식과 밀접하게 대응합니다. 점들의 군집을 볼 때 사람은 볼록하거나 오목한 외곽선을 지각하는데, 올가미는 그 지각된 경계를 직접 따라 그릴 수 있게 해줍니다. 그 대가는 단순한 드래그 브러시에 비해 더 높은 동작 노력이 필요하다는 점이며, 결과로 생기는 다각형은 완벽하게 재현되지 않을 수도 있습니다. 이런 이유로 올가미는 보통 사각형 브러시와 함께 대안적인 선택 모드로 제공되며, 수정 키나 툴바 토글로 활성화됩니다.

From a cognitive standpoint, lasso selection maps closely to the user's visual perception of group boundaries. When someone sees a cluster of points, they perceive a convex or concave hull — and the lasso lets them directly trace that perceived boundary. The cost is higher motor effort compared to a simple drag-to-brush, and the resulting polygon may not be perfectly reproducible. For this reason, lasso is typically offered alongside rectangular brush as an alternative selection mode, activated by a modifier key or toolbar toggle.

Lasso Selection — try it yourself

언제 사용하나 / When to Use

데이터 군집이 불규칙한 형태이고 사각형 브러시로는 너무 많거나 너무 적은 점이 선택될 때.
When data clusters are irregularly shaped and a rectangular brush would select too many or too few points.
사용자가 비볼록 영역을 분리해야 하는 산점도나 지도에서.
In scatterplots or geographic maps where the user needs to isolate non-convex regions.
선택이 축 정렬된 범위가 아니라 시각적으로 지각된 경계를 따라야 할 때.
When the selection needs to follow a visually perceived boundary rather than an axis-aligned range.
다중 뷰 탐색적 분석 도구에서 사각형 브러시를 보완하는 용도로.
As a complement to rectangular brush in multi-view exploratory analysis tools.
분석 질문이 "X와 Y의 이 범위는 어떻게 되는가?"가 아니라 "이 특정 점들은 어떤가?"일 때.
When the analytical question is "what about these specific points?" rather than "what about this range of X and Y?"

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

사각형 브러시로 충분할 때 — 군집이 축에 정렬되어 있다면 올가미는 이점 없이 동작 노력만 추가합니다.
When a rectangular brush suffices — lasso adds motor effort for no benefit if clusters are axis-aligned.
손가락으로 정밀한 자유 드로잉이 어려운 작은 모바일 화면에서.
On small mobile screens where precise freeform drawing is difficult with a finger.
시각화에 마크가 매우 적을 때(10개 미만) — Shift를 이용한 클릭 선택이 더 간단합니다.
When the visualization has very few marks (under 10) — click-to-select with shift is simpler.
재현성이 중요할 때 — 올가미 형태는 정확히 지정하고 공유하기 어렵습니다.
When reproducibility matters — lasso shapes are hard to specify exactly and share.
사용자가 선택하려는 마크에 의해 경로가 가려지는 밀집된 뷰에서.
In dense views where the path would be occluded by the marks the user is trying to select.

작동 방식 / How It Works

사용자가 올가미 모드를 활성화합니다 — 수정 키(예: Shift)를 누르거나, 툴바 아이콘을 클릭하거나, 기본 선택 제스처로 활성화됩니다.

The user activates lasso mode — either by holding a modifier key (e.g., Shift), clicking a toolbar icon, or as the default selection gesture.

사용자가 차트 위에서 누르고 드래그하여 커서를 따라가는 자유 형태 경로를 그립니다.

The user presses and drags across the chart, drawing a freeform path that follows the cursor.

눈에 보이는 선이 커서를 따라가며 그려지는 형태에 대한 실시간 피드백을 제공합니다.

A visible stroke follows the cursor, giving real-time feedback on the shape being drawn.

마우스를 놓으면 경로가 닫힙니다 — 시작점과 끝점을 직선으로 연결하여 닫힌 다각형을 만듭니다.

On mouse-up, the path is closed — a straight line connects the start and end points to form a closed polygon.

시스템은 모든 데이터 마크에 대해 점-다각형 포함 판정을 수행하여 각각을 올가미 안팎으로 분류합니다.

The system performs point-in-polygon testing for every data mark, classifying each as inside or outside the lasso.

선택된 마크는 강조되고, 선택되지 않은 마크는 흐려집니다. 연결된 뷰에서는 동일한 데이터 항목이 함께 강조됩니다.

Selected marks are highlighted; non-selected marks are dimmed. In linked views, the same data items are highlighted.

사용자는 새 올가미를 그려 현재 선택을 대체하거나, 수정 키를 눌러 선택에 더하거나 뺄 수 있습니다.

The user can draw a new lasso to replace the current selection, or hold a modifier key to add to / subtract from it.

변형 / Variations

단순 올가미: 마우스를 놓으면 닫히는 자유 형태 드로잉. 가장 일반적인 형태입니다.
Simple lasso: Freeform drawing that closes on mouse-up. The most common form.
다각형 올가미: 클릭으로 꼭짓점을 배치하여 점 단위로 다각형을 만듭니다. 더 정밀하지만 덜 유연합니다.
Polygon lasso: Click-to-place vertices, building a polygon point by point. More precise, less fluid.
마그네틱 올가미: 경로가 지각된 군집 경계나 밀도 등고선에 달라붙습니다. 데이터 시각화에서는 드물지만 이미지 편집에서 사용됩니다.
Magnetic lasso: The path snaps to perceived cluster boundaries or density contours. Rare in data visualization but used in image editing.
추가/제외 올가미: Shift를 눌러 선택에 새 영역을 추가하거나, Alt/Option을 눌러 제외합니다. 복잡한 다중 영역 선택이 가능합니다.
Additive/subtractive lasso: Hold Shift to add a new region to the selection, or Alt/Option to subtract. Enables complex multi-region selections.
볼록 외곽선 스냅 올가미: 그려진 형태가 선택된 점들의 볼록 외곽선으로 단순화되어, 부정확한 드로잉을 정리합니다.
Lasso with convex hull snap: The drawn shape is simplified to the convex hull of the selected points, cleaning up imprecise drawing.

코드 레퍼런스 / Code Reference

// D3.js lasso selection on a scatterplot
const lasso = [];
let isDrawing = false;

svg.on("mousedown", (event) => {
  isDrawing = true;
  lasso.length = 0;
  lasso.push(d3.pointer(event));
});

svg.on("mousemove", (event) => {
  if (!isDrawing) return;
  lasso.push(d3.pointer(event));
  lassoPath.attr("d", d3.line()(lasso) + "Z");
});

svg.on("mouseup", () => {
  isDrawing = false;
  // Point-in-polygon test for each data mark
  svg.selectAll("circle").style("opacity", d =>
    pointInPolygon([x(d.xVal), y(d.yVal)], lasso) ? 1 : 0.1
  );
});

function pointInPolygon([px, py], polygon) {
  let inside = false;
  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
    const [xi, yi] = polygon[i], [xj, yj] = polygon[j];
    if ((yi > py) !== (yj > py) &&
        px < ((xj - xi) * (py - yi)) / (yj - yi) + xi)
      inside = !inside;
  }
  return inside;
}