Text Search / Filter

설명 / Description

텍스트 검색 / 필터는 사용자가 쿼리 문자열을 입력하여 레이블, 이름, 또는 기타 텍스트 속성이 쿼리와 일치하는 데이터 항목을 필터링하거나, 강조하거나, 이동해서 볼 수 있는 텍스트 입력 필드를 제공합니다. 사용자가 입력하는 동안 시각화가 실시간으로 갱신됩니다 — 일치하지 않는 항목을 숨기거나, 흐리게 하거나, 일치하는 항목에 초점을 맞추도록 스크롤/줌합니다. 말하자면 "데이터 시각화를 위한 Ctrl+F"입니다.

Text search / filter provides a text input field where users type a query string to filter, highlight, or navigate to data items whose labels, names, or other textual attributes match the query. As the user types, the visualization updates in real time — either hiding non-matching items, dimming them, or scrolling/zooming to bring matching items into focus. This is the "Ctrl+F for data visualization."

텍스트 검색은 사용자의 기존 지식과 시각적 디스플레이 사이의 간극을 잇는 가장 직접적인 방법 중 하나입니다. 누군가 코로플레스 맵에서 "California"를, 자동차 모델 산점도에서 "Toyota"를, 유전자 네트워크에서 "BRCA1"을 찾고 있다는 것을 안다면, 텍스트 검색은 아무리 많은 시각적 훑어보기보다도 빠릅니다. 이는 인식 과업(알려진 항목을 찾아 차트를 훑어보는 것)을 회상 과업(이름을 입력하는 것)으로 전환하며, 사용자가 이미 무엇을 찾는지 알고 있을 때 더 빠릅니다.

Text search is one of the most direct ways to bridge the gap between a user's existing knowledge and the visual display. If someone knows they are looking for "California" in a choropleth, "Toyota" in a scatterplot of car models, or "BRCA1" in a gene network, a text search is faster than any amount of visual scanning. It converts a recognition task (scanning the chart for a known item) into a recall task (typing its name), which is faster when the user already knows what they are looking for.

이 인터랙션은 시각적 검색만으로는 비현실적일 수백, 수천 개의 레이블이 붙은 항목을 가진 데이터셋에도 잘 확장됩니다. 특히 공간 레이아웃이 사용자가 특정 항목을 찾는 데 도움이 될 만한 알파벳순이나 범주순 정렬과 대응하지 않는 네트워크 다이어그램, 큰 산점도, 지도에서 매우 유용합니다. 대부분의 구현은 부분 일치나 오탈자가 있는 쿼리를 처리하기 위해 부분 문자열 매칭에 더해 선택적으로 퍼지 매칭이나 자동완성 제안을 사용합니다.

The interaction scales well to datasets with hundreds or thousands of labeled items where visual search alone would be impractical. It is especially valuable in network diagrams, large scatterplots, and geographic maps where the spatial layout does not correspond to any alphabetical or categorical ordering the user might use to locate a specific item. Most implementations use substring matching with optional fuzzy matching or autocomplete suggestions to handle partial or misspelled queries.

Text Search / Filter — try it yourself

언제 사용하나 / When to Use

데이터셋에 명명된 개체(국가, 회사, 유전자, 사람)가 있고 사용자가 특정 항목을 자주 검색할 때.
When the dataset has named entities (countries, companies, genes, people) and users will often search for specific ones.
시각화에 레이블 붙은 항목이 너무 많아 시각적 훑어보기가 비현실적일 때.
When the visualization has too many labeled items for visual scanning to be practical.
공간 레이아웃이 사용자가 알려진 항목을 찾는 데 도움이 될 정렬과 대응하지 않을 때.
When the spatial layout does not correspond to any ordering that would help users locate a known item.
시각적 탐색을 보완할 때 — 사용자가 패턴을 발견한 뒤 특정 항목을 검색해 그것이 패턴에 포함되는지 확인할 때.
As a complement to visual exploration — the user spots a pattern, then searches for specific items to check if they are part of it.
사용자가 같은 항목을 자주 다시 확인하는 대시보드에서.
In dashboards where users frequently return to check on the same items.

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

데이터에 검색할 의미 있는 텍스트 레이블이 없을 때(순수한 수치 데이터).
When the data has no meaningful text labels to search against (purely numerical data).
데이터셋이 충분히 작아서(20개 미만) 모든 레이블이 이미 보이고 훑어볼 수 있을 때.
When the dataset is small enough (under 20 items) that all labels are already visible and scannable.
사용자가 무엇을 검색할지 모를 때 — 텍스트 검색은 항목 이름에 대한 사전 지식을 필요로 합니다.
When the user does not know what to search for — text search requires prior knowledge of the item name.
주된 인터랙션이 명목적(명명된 항목 찾기)이 아니라 공간적(영역 브러싱)이어야 할 때.
When the primary interaction should be spatial (brushing regions) rather than nominal (finding named items).

작동 방식 / How It Works

텍스트 입력 필드가 시각화 위, 옆, 또는 그 위에 오버레이되어 배치됩니다.

A text input field is placed above, beside, or overlaid on the visualization.

사용자가 입력하는 동안 시스템이 어떤 데이터 항목이 쿼리와 일치하는지 계산합니다(부분 문자열 일치, 접두사 일치, 또는 퍼지 일치).

As the user types, the system computes which data items match the query (substring match, prefix match, or fuzzy match).

일치하는 항목이 시각화에서 강조됩니다 — 해당 마크가 완전한 불투명도, 밝은 테두리, 또는 애니메이션 펄스를 얻고, 일치하지 않는 항목은 흐려집니다.

Matching items are highlighted in the visualization — their marks gain full opacity, a bright stroke, or an animated pulse, while non-matching items are dimmed.

선택적으로 뷰가 첫 번째 일치 항목을 중심으로 이동하거나 확대되며, 특히 큰 지도나 네트워크에서 유용합니다.

Optionally, the view pans or zooms to center on the first matching item, especially useful in large maps or networks.

입력 아래에 자동완성 드롭다운이 나타나 일치하는 항목 이름을 보여주고 사용자가 하나를 선택할 수 있게 할 수 있습니다.

An autocomplete dropdown may appear below the input, showing matching item names and allowing the user to select one.

입력을 지우면 시각화가 모든 항목이 보이는 기본 상태로 돌아갑니다.

Clearing the input restores the visualization to its default state with all items visible.

변형 / Variations

강조 모드: 모든 항목이 계속 보이지만 일치하는 항목이 시각적으로 강조됩니다. 맥락 속에서 일치 항목을 보여주는 데 좋습니다.
Highlight mode: All items remain visible but matching items are visually emphasized. Good for showing the matching items in context.
필터 모드: 일치하지 않는 항목이 완전히 제거되어 데이터셋이 일치 항목만 남습니다. 작은 하위 집합으로 좁히는 데 좋습니다.
Filter mode: Non-matching items are removed entirely, reducing the dataset to only matches. Good for narrowing down to a small subset.
퍼지 검색: 레벤슈타인 거리나 Fuse.js 같은 알고리즘을 사용해 오탈자와 부분 일치를 허용합니다. 더 관대하지만 무관한 일치가 나타날 수 있습니다.
Fuzzy search: Tolerates typos and partial matches using algorithms like Levenshtein distance or Fuse.js. More forgiving but may surface irrelevant matches.
다중 필드 검색: 쿼리가 주요 레이블뿐 아니라 여러 속성(이름, 카테고리, 설명)에 대해 매칭됩니다.
Multi-field search: The query is matched against multiple attributes (name, category, description), not just the primary label.
미리보기 있는 자동완성: 사용자가 입력하는 동안 일치하는 항목이 드롭다운에 나열되는 동시에 차트에서도 강조되어, 선택을 확정하기 전에 미리보기를 제공합니다.
Autocomplete with preview: As the user types, matching items are listed in a dropdown and simultaneously highlighted in the chart, giving a preview before committing to a selection.
정규식 검색: 파워 유저는 패턴 기반 매칭을 위해 정규 표현식을 입력할 수 있습니다(예: ^New로 "New"로 시작하는 모든 항목 찾기).
Regex search: Power users can type regular expressions for pattern-based matching (e.g., ^New to find all items starting with "New").

코드 레퍼런스 / Code Reference

// Text search with live highlighting on a D3 scatterplot
const searchInput = d3.select("#search-input");

searchInput.on("input", function () {
  const query = this.value.toLowerCase().trim();
  svg.selectAll("circle")
    .transition().duration(200)
    .style("opacity", d =>
      !query || d.name.toLowerCase().includes(query) ? 1 : 0.08
    )
    .attr("r", d =>
      query && d.name.toLowerCase().includes(query) ? 8 : 4
    );
});