Click to Select

설명 / Description

클릭 선택은 영속적인 선택 메커니즘입니다: 사용자가 데이터 마크를 클릭(또는 탭)하면, 그 마크는 명시적으로 선택 해제될 때까지 시각적으로 구분된 상태를 유지합니다. 마우스아웃 시 사라지는 일시적인 호버 하이라이트와 달리, 클릭 기반 선택은 시청자의 주의를 확정 짓고 비교, 필터링, 주석, 데이터 내보내기와 같은 후속 작업을 가능하게 합니다.

Click-to-select is a persistent selection mechanism: the user clicks (or taps) a data mark, and that mark remains visually distinguished until it is explicitly deselected. Unlike hover highlight, which is transient and disappears on mouseout, a click-based selection commits the viewer's attention and enables downstream operations such as comparison, filtering, annotation, or data export.

브레머와 문츠너(Brehmer and Munzner, 2013)의 다층위 작업 유형론에서, 선택은 데이터나 시각적 인코딩을 바꾸지 않고 시각화 상태만 변경하는 기초적인 "조작(manipulate)" 행동입니다. 이는 대부분의 분석 워크플로우로 들어가는 관문입니다: 무언가를 선택한 다음, 그것에 대해 행동합니다. 이것이 단순한 막대 차트 대시보드부터 복잡한 지리공간 분석 플랫폼에 이르기까지 선택 어포던스가 거의 보편적으로 존재하는 이유입니다.

In Brehmer and Munzner's (2013) multi-level task typology, selection is a foundational "manipulate" action that modifies the visualization state without changing the data or the visual encoding. It is the gateway to most analytical workflows: you select something, then you act on it. This is why selection affordances are nearly universal across visualization tools — from simple bar chart dashboards to complex geospatial analysis platforms.

다중 선택(Shift 또는 Ctrl/Cmd를 누른 채)은 자연스러운 확장으로, 사용자가 관심 있는 항목의 집합을 구축할 수 있게 합니다. 이렇게 구성된 집합은 이후 비교되거나, 연결 뷰 전반에 걸쳐 하이라이트되거나, 필터의 입력으로 사용될 수 있습니다. 핵심 디자인 원칙은 선택이 시각적으로 모호하지 않아야 한다는 것입니다 — 사용자는 밀집된 화면에서도 어떤 항목이 선택되었고 어떤 항목이 선택되지 않았는지 항상 구분할 수 있어야 합니다.

Multi-select (holding Shift or Ctrl/Cmd) is a natural extension, allowing the user to build up a set of items of interest. This set can then be compared, highlighted across linked views, or used as input to a filter. The key design principle is that selection must be visually unambiguous — the user must always be able to tell which items are selected and which are not, even in dense displays.

Click To Select — try it yourself

언제 사용하나 / When to Use

사용자가 비교나 자세한 검토를 위해 항목을 영속적으로 표시해야 할 때.
When the user needs to persistently mark items for comparison or closer inspection.
선택된 항목이 여러 연결 뷰 전반에 전파되어야 할 때.
When selected items should propagate across multiple linked views.
선택 집합이 다른 작업(필터링, 내보내기, 주석)의 입력으로 사용될 때.
When the selection set will be used as input to another operation (filter, export, annotate).
차트가 개별 마크를 안정적으로 클릭할 수 있을 만큼 성긴 경우.
When the chart is sparse enough that individual marks can be reliably clicked.
호버 기반 인터랙션의 모바일/터치 대안으로서.
As the mobile/touch alternative to hover-based interactions.

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

시청자가 값을 잠깐 훑어보기만 하면 될 때 — 툴팁이 더 저비용입니다.
When all the viewer needs is a quick glance at a value — a tooltip is lower-cost.
개별 마크를 클릭하는 것이 비현실적일 만큼 극도로 밀집된 플롯(수만 개의 겹치는 점)에서는 — 대신 브러시 선택을 사용하세요.
In extremely dense plots (tens of thousands of overlapping points) where clicking individual marks is impractical — use brush selection instead.
선택된 항목에 대해 후속 작업이 전혀 없어 선택 상태가 시청자를 혼란스럽게 할 때.
When selection state would confuse the viewer because no downstream action is available for selected items.
시청자가 아닌 저자가 초점을 통제하는 가이드형/서사형 시각화에서.
In guided/narrative visualizations where the author controls focus rather than the viewer.

작동 방식 / How It Works

사용자가 데이터 마크를 클릭합니다. 마크는 "선택됨" 상태로 전환되며, 굵은 테두리, 더 밝은 채우기, 윤곽 링, 체크 배지 등 시각적 변화로 표시됩니다.
The user clicks on a data mark. The mark enters the "selected" state, indicated by a visual change (bold stroke, brighter fill, an outline ring, or a check badge).
선택되지 않은 마크는 시각적으로 약화되어(불투명도 감소 또는 채도 저하) 도형-배경 대비를 만듭니다.
Non-selected marks are de-emphasized (reduced opacity or desaturated color) to create figure-ground contrast.
선택적으로 상세 패널이나 툴팁이 열린 채로 고정되어 선택된 항목에 대한 전체 정보를 보여줍니다.
Optionally, a detail panel or tooltip locks open showing full information about the selected item(s).
다중 선택의 경우, 사용자가 Shift(또는 Ctrl/Cmd)를 누른 채 추가 마크를 클릭합니다. 새로 클릭한 마크마다 선택 집합에 추가됩니다.
For multi-select, the user holds Shift (or Ctrl/Cmd) while clicking additional marks. Each newly clicked mark joins the selection set.
선택 해제하려면, 사용자가 선택된 마크를 다시 클릭하거나(토글) 차트 배경을 클릭해 모든 선택을 지웁니다.
To deselect, the user clicks a selected mark again (toggle) or clicks on the chart background to clear all selections.
연결 뷰에서는 선택 상태가 공유됩니다 — 막대 차트에서 막대를 선택하면 산점도의 해당 점이 하이라이트됩니다.
In linked views, selection state is shared — selecting a bar in a bar chart highlights the corresponding points in a scatterplot.

변형 / Variations

토글 선택: 마크를 클릭하면 선택 집합에 추가되거나 제외됩니다. 가장 흔한 패턴입니다.
Toggle select: Clicking a mark toggles it in/out of the selection set. Most common pattern.
단일 선택: 한 번에 하나의 마크만 선택할 수 있습니다. 새로 클릭하면 이전 선택을 대체합니다.
Single select: Only one mark can be selected at a time. A new click replaces the previous selection.
올가미 선택: 자유형 드로잉으로 여러 마크를 한 번에 선택합니다. 개별 항목을 추가하기 위해 클릭 선택과 함께 쓰이는 경우가 많습니다.
Lasso select: Free-form drawing to select multiple marks at once. Often combined with click-to-select for individual additions.
범례 선택: 범례 항목을 클릭하면 전체 범주나 시리즈가 선택/해제됩니다.
Legend select: Clicking a legend item selects/deselects an entire category or series.
클릭 고정 툴팁: 클릭하면 툴팁이 제자리에 고정됩니다; 이후 클릭할 때마다 비교를 위한 고정 툴팁이 추가됩니다.
Click-to-lock tooltip: Click pins a tooltip in place; subsequent clicks add more pinned tooltips for comparison.
클릭 드릴다운: 마크를 클릭하면 단순히 선택하는 대신 해당 범주로 드릴다운됩니다.
Click-to-drill: Clicking a mark triggers a drill-down into that category rather than just selecting it.

코드 레퍼런스 / Code Reference

// D3.js click-to-select with toggle and visual feedback
const selected = new Set();

svg.selectAll("circle")
  .on("click", function (event, d) {
    if (selected.has(d.id)) selected.delete(d.id);
    else selected.add(d.id);

    svg.selectAll("circle")
      .attr("stroke", c => selected.has(c.id) ? "#e63946" : "none")
      .attr("stroke-width", c => selected.has(c.id) ? 2.5 : 0)
      .style("opacity", c =>
        selected.size === 0 ? 0.8 : selected.has(c.id) ? 1 : 0.15
      );
  });