Hover Highlight

설명 / Description

호버 하이라이트는 빠르고 가역적인 인터랙션으로, 시스템이 커서 아래의 데이터 요소를 시각적으로 강조하는 동시에 다른 모든 요소를 (흐리게, 채도를 낮추거나, 축소하여) 약화시킵니다. 이는 즉각적인 도형-배경 분리를 만들어내어, 시청자가 명시적인 선택 동작 없이도 하나의 마크를 맥락에서 분리해 볼 수 있게 돕습니다.

Hover highlight is a rapid, reversible interaction in which the system visually emphasizes the data element under the cursor while simultaneously de-emphasizing (dimming, desaturating, or shrinking) all other elements. This creates an immediate figure-ground separation that helps the viewer isolate one mark from its context without any explicit selection action.

이 기법은 이 등(Yi et al., 2007)이 "선택(select)" 인터랙션 의도라고 부르는 것과 밀접하게 관련되어 있습니다 — 무언가를 흥미로운 것으로 표시하여 더 자세히 살펴볼 수 있게 하는 것입니다. 하지만 클릭 기반 선택과 달리, 호버 하이라이트는 완전히 일시적입니다: 커서가 벗어나는 순간 강조가 사라집니다. 이러한 제로 커밋 비용 덕분에 데이터셋을 훑어보는 가장 유연한 방법 중 하나가 되며, 시청자는 여러 초점을 빠르게 "시험해볼" 수 있습니다.

The technique is closely related to what Yi et al. (2007) call the "select" interaction intent — marking something as interesting so it can be examined more closely. But unlike a click-based selection, hover highlight is completely transient: the emphasis vanishes the moment the cursor moves away. This zero-commitment cost makes it one of the most fluid ways to scan through a dataset, letting the viewer rapidly "try on" different focal points.

호버 하이라이트는 연결 뷰와 결합될 때 특히 강력합니다. 한 차트의 막대에 호버하면 산점도의 해당 포인트와 표의 해당 행을 하이라이트할 수 있습니다. 가장 단순한 형태로는 "브러싱 앤 링킹"이라고도 불리는 이 크로스뷰 하이라이팅은 Brushing Scatterplots(Becker & Cleveland, 1987) 같은 시스템에서 처음 시도되었으며, 오늘날에도 연동된 다중 뷰의 핵심 요소로 남아 있습니다.

Hover highlight is especially powerful when combined with linked views. Hovering over a bar in one chart can highlight the corresponding points in a scatterplot and the corresponding row in a table. This cross-view highlighting, sometimes called "brushing and linking" in its simplest form, was pioneered in systems like Brushing Scatterplots (Becker & Cleveland, 1987) and remains a cornerstone of coordinated multiple views.

Hover Highlight — try it yourself

언제 사용하나 / When to Use

차트에 겹치거나 인접한 마크가 많아 시청자가 하나의 요소를 시각적으로 분리해야 할 때.
When the chart has many overlapping or adjacent marks and the viewer needs to visually isolate one element.
선이 교차하여 하나의 시리즈를 추적하기 어려운 다중 시리즈 선 차트에서.
In multi-series line charts where lines cross and it is hard to trace a single series.
한 뷰의 하이라이트가 다른 뷰로 전파되어야 하는 연동/조정된 뷰에서.
In linked/coordinated views where highlighting in one view should propagate to others.
네트워크 다이어그램에서 노드의 인접 이웃을 보여줄 때.
In network diagrams to show a node's immediate neighbors.
시청자가 전체 분포를 배경으로 하나의 요소를 비교해야 할 때.
When the viewer needs to compare one element against the backdrop of the full distribution.

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

호버를 사용할 수 없는 터치 전용 장치에서(대신 탭하여 선택을 사용하세요).
On touch-only devices where hover is unavailable (use tap-to-select instead).
모든 요소가 이미 시각적으로 뚜렷하여 호버 없이도 쉽게 식별할 수 있을 때.
When every element is already visually distinct and easy to identify without hover.
개별 마크 하이라이팅이 무의미한 매우 밀도 높은 디스플레이(예: 5만 개 포인트 산점도)에서 — 대신 브러시 선택을 사용하세요.
In very dense displays (e.g., 50,000-point scatterplots) where individual mark highlighting is meaningless — use brush selection instead.
호버되지 않은 요소를 약화시키는 것이 시청자가 유지해야 할 중요한 맥락을 가릴 때.
When the de-emphasis of non-hovered elements would obscure critical context the viewer needs to maintain.

작동 방식 / How It Works

사용자가 커서를 데이터 마크 위로 이동합니다(또는 범례 항목, 축 레이블, 기타 선택 가능한 요소 위로).
The user moves the cursor over a data mark (or a legend entry, axis label, or other selectable element).
시스템이 대상 마크와 관련된 마크(예: 같은 그룹이나 시리즈의 모든 마크)를 식별합니다.
The system identifies the target mark and any related marks (e.g., all marks in the same group or series).
대상 마크가 시각적으로 강조됩니다: 불투명도 증가, 더 밝은 채우기, 굵은 획, 크기 증가, 또는 외곽선 글로우.
The target mark is visually emphasized: increased opacity, a brighter fill, a bold stroke, a size increase, or an outline glow.
다른 모든 마크는 약화됩니다: 불투명도 감소(보통 0.1~0.3), 채도가 낮아진 색상, 또는 더 얇은 획.
All other marks are de-emphasized: reduced opacity (commonly to 0.1-0.3), desaturated color, or thinner stroke.
커서가 벗어나면 모든 마크가 기본 시각 상태로 돌아갑니다.
When the cursor moves away, all marks return to their default visual state.

약화 단계(때로는 "디밍" 또는 "포그"라고 불림)는 강조만큼이나 중요합니다. 이것이 없으면 밀도 높은 차트에서 하이라이트된 마크가 두드러지지 않습니다.

The de-emphasis step (sometimes called "dimming" or "fog") is as important as the emphasis. Without it, the highlighted mark does not stand out in a dense chart.

변형 / Variations

단일 마크 하이라이트: 호버된 마크만 변합니다. 가장 단순한 구현입니다.
Single-mark highlight: Only the hovered mark changes. Simplest implementation.
그룹 하이라이트: 하나의 마크에 호버하면 같은 범주나 시리즈의 모든 마크가 하이라이트됩니다. 그룹 막대 차트와 다중 선 차트에서 흔합니다.
Group highlight: Hovering one mark highlights all marks in the same category or series. Common in grouped bar charts and multi-line charts.
범례 기반 하이라이트: 범례 스와치에 호버하면 해당 시리즈 전체가 하이라이트됩니다.
Legend-driven highlight: Hovering over a legend swatch highlights the entire corresponding series.
연결 하이라이트: 네트워크나 계층 시각화에서 노드에 호버하면 그 엣지와 이웃이 하이라이트됩니다.
Connected highlight: In network or hierarchical visualizations, hovering a node highlights its edges and neighbors.
크로스뷰 하이라이트: 한 뷰에서 호버하면 연결된 모든 뷰에서 해당 요소가 하이라이트됩니다.
Cross-view highlight: Hovering in one view highlights corresponding elements in all linked views.
역방향 하이라이트(스포트라이트): 다른 요소를 흐리게 하는 대신, 호버된 영역을 제외한 전체 차트를 반투명 오버레이로 덮습니다.
Inverse highlight (spotlight): Instead of dimming others, a semi-transparent overlay covers the entire chart except the hovered region.

코드 레퍼런스 / Code Reference

// D3.js hover highlight with opacity dimming
svg.selectAll("circle")
  .on("mouseover", function (event, d) {
    svg.selectAll("circle")
      .transition().duration(100)
      .style("opacity", c => c.group === d.group ? 1 : 0.15);
  })
  .on("mouseout", () => {
    svg.selectAll("circle")
      .transition().duration(200)
      .style("opacity", 0.8);
  });