Faceted Filter

설명 / Description

패싯 필터링은 일련의 범주형 차원을 제시합니다 — 각 차원의 가능한 값들은 체크박스, 토글, 필, 또는 클릭 가능한 칩으로 표시되며, 사용자는 이를 조합하여 시각화에 표시되는 데이터를 점진적으로 좁혀갈 수 있습니다. Category 아래 "Electronics"와 "Books"를 체크하고 Year 아래 "2020-2024"를 체크하면, 차트는 해당 연도의 전자제품과 도서 항목만 보여주도록 필터링됩니다. 각 패싯은 독립적으로 작동하며, 그 결합 효과는 활성화된 모든 필터의 교집합(때로는 합집합)입니다.

Faceted filtering presents a set of categorical dimensions — each with its possible values displayed as checkboxes, toggles, pills, or clickable chips — that the user can combine to progressively narrow the data shown in the visualization. Checking "Electronics" and "Books" under Category, and "2020-2024" under Year, filters the chart to show only electronic and book items from those years. Each facet operates independently, and the combined effect is the intersection (or sometimes union) of all active filters.

이 패턴은 전자상거래와 도서관 카탈로그의 패싯 검색 인터페이스(Hearst, 2006)에서 유래했으며, 사용자는 브랜드, 가격대, 색상 같은 속성을 점진적으로 제약해가며 상품 공간을 탐색합니다. 데이터 시각화에서도 패싯 필터링은 동일한 목적을 수행합니다: 열린 탐색을 구조화되고 조합 가능한 제약 조건으로 바꾸어줍니다. 하나의 차원만 필터링하는 단일 드롭다운이나 라디오 버튼 그룹과 달리, 패싯 필터링은 사용자가 어떤 쿼리 언어도 작성하지 않고 복잡한 다차원 쿼리를 구성할 수 있게 해줍니다.

The pattern originates in faceted search interfaces for e-commerce and library catalogs (Hearst, 2006), where users browse a product space by progressively constraining attributes like brand, price range, and color. In data visualization, faceted filtering serves the same purpose: it transforms open-ended exploration into structured, combinable constraints. Unlike a single dropdown or radio button group that filters on one dimension, faceted filtering lets users build complex multi-dimensional queries without writing any query language.

잘 설계된 패싯 필터 패널은 각 값에 일치하는 항목의 개수를 보여주며(예: "Electronics (342)"), 다른 패싯이 적용될 때마다 이 개수를 동적으로 업데이트합니다. 이를 통해 사용자는 필터를 적용하기 전에 그 효과를 미리 확인할 수 있어, 값을 클릭했더니 빈 차트가 나타나는 답답한 경험을 방지합니다. 시각적 통합 방식은 다양합니다: 어떤 시스템은 필터 패널을 사이드바로 보여주고, 어떤 시스템은 차트 위에 필들을 가로로 나열하며, 어떤 시스템은 필터 컨트롤을 차트 범례에 직접 내장합니다.

A well-designed faceted filter panel shows the count of items matching each value (e.g., "Electronics (342)"), dynamically updating these counts as other facets are applied. This gives the user a preview of each filter's effect before they apply it, preventing the frustrating experience of clicking a value and seeing an empty chart. The visual integration varies: some systems show the filter panel as a sidebar, others as a horizontal bar of pills above the chart, and some embed filter controls directly into the chart legend.

Faceted Filter — try it yourself

언제 사용하나 / When to Use

데이터에 사용자가 조합해서 필터링하고 싶어하는 여러 범주형 차원(지역, 카테고리, 상태, 유형)이 있을 때.
When the data has multiple categorical dimensions (region, category, status, type) that users want to filter in combination.
사용자의 탐색적 질문이 "이 공간적 영역 안의 항목을 보여줘"가 아니라 "이 조건에 맞는 항목을 보여줘"일 때.
When the user's exploratory question is "show me items that match these criteria" rather than "show me items in this spatial region."
동일한 시각화가 서로 다른 하위 집합에 관심 있는 여러 대상에게 사용되는 대시보드 환경에서.
In dashboard contexts where the same visualization serves multiple audiences who care about different subsets.
패싯당 고유 값의 개수가 관리 가능한 수준(2~20개)일 때 — 값이 수백 개인 패싯은 패싯 내 검색 패턴이 필요합니다.
When the number of unique values per facet is manageable (2-20) — facets with hundreds of values need a search-within-facet pattern.
차원이 범주형이고 히스토그램을 브러싱하는 것보다 체크박스 인터페이스가 더 직관적일 때, 크로스필터링의 대안으로.
As an alternative to cross-filtering when the dimensions are categorical and a checkbox interface is more intuitive than brushing histograms.

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

데이터에 범주형 차원이 하나뿐일 때 — 단순한 드롭다운이나 토글로 충분합니다.
When the data has only one categorical dimension — a simple dropdown or toggle suffices.
패싯 값이 너무 많아서(수백 개의 카테고리) 필터 패널을 관리할 수 없게 될 때.
When facet values are so numerous (hundreds of categories) that the filter panel becomes unmanageable.
차원이 연속형일 때 — 이산적인 체크박스보다 슬라이더나 범위 브러시가 더 적합합니다.
When the dimensions are continuous — sliders or range brushes are more appropriate than discrete checkboxes.
사용자가 공간적 패턴을 탐색할 때 — 브러싱과 올가미 선택이 더 직접적입니다.
When the user is exploring spatial patterns — brushing and lasso selection are more direct.
필터를 적용했을 때 일치하는 항목이 0개가 되는 경우가 잦아 사용자를 답답하게 만들 때.
When applying filters would frequently result in zero matches, frustrating the user.

작동 방식 / How It Works

필터 패널이 시각화 옆에 렌더링되어, 각 범주형 차원(패싯)과 그 고유 값들을 나열합니다.
A filter panel is rendered alongside the visualization, listing each categorical dimension (facet) with its unique values.
각 값에는 일치하는 항목의 개수가 표시되어, 필터링 후 몇 개의 항목이 남을지 사용자가 미리 알 수 있게 해줍니다.
Each value shows a count of matching items, giving the user a preview of how many items will remain after filtering.
사용자가 값(체크박스, 필, 또는 칩)을 클릭하여 해당 필터를 활성화합니다. 같은 패싯 안의 여러 값들은 보통 OR로 결합됩니다(Electronics OR Books 표시).
The user clicks a value (checkbox, pill, or chip) to activate that filter. Multiple values within the same facet are typically OR-combined (show Electronics OR Books).
서로 다른 패싯에 걸친 필터들은 AND로 결합됩니다: Category = (Electronics OR Books) AND Year = (2020-2024).
Filters across different facets are AND-combined: Category = (Electronics OR Books) AND Year = (2020-2024).
시각화가 업데이트됩니다 — 필터링된 항목은 표시되고, 일치하지 않는 항목은 숨겨지거나 흐려집니다. 애니메이션 전환이 변화를 부드럽게 처리합니다.
The visualization updates — filtered items are shown, non-matching items are hidden or dimmed. Animated transitions smooth the change.
모든 패싯 값의 개수가 동적으로 업데이트되어 현재 활성화된 필터 조합을 반영합니다.
Counts on all facet values update dynamically to reflect the currently active filter combination.
"모두 지우기" 또는 "초기화" 버튼은 활성화된 모든 필터를 제거하고 전체 데이터셋을 복원합니다.
A "Clear all" or "Reset" button removes all active filters, restoring the full dataset.

변형 / Variations

체크박스 패싯: 각 값이 레이블이 붙은 체크박스로 표시됩니다. 가장 전통적인 형태로, 명확하고 접근성이 좋습니다.
Checkbox facets: Each value is a labeled checkbox. The most traditional form, clear and accessible.
필 / 칩 패싯: 값이 클릭 가능한 필이나 칩으로 표시되며, 흔히 색으로 구분됩니다. 더 조밀하고 시각적으로 매력적입니다.
Pill / chip facets: Values are displayed as clickable pills or chips, often color-coded. More compact and visually engaging.
계층적 패싯: 패싯 값이 중첩되어(예: 지역 > 국가 > 도시) 하나의 패싯 안에서 드릴다운이 가능합니다.
Hierarchical facets: Facet values are nested (e.g., Region > Country > City), allowing drill-down within a single facet.
범위 패싯: 순서형이거나 이산화된 수치형 차원의 경우, 패싯이 범위 구간을 보여줍니다(예: "$0-50", "$50-100").
Range facets: For ordinal or discretized numerical dimensions, the facet shows range buckets (e.g., "$0-50", "$50-100").
단일 선택 패싯: 패싯당 하나의 값만 활성화될 수 있어(라디오 버튼 방식) 필터 로직이 단순해집니다.
Single-select facets: Only one value can be active per facet (radio button behavior), simplifying the filter logic.
히스토그램이 있는 패싯: 각 패싯 값 옆에 개수를 보여주는 미니 막대 차트가 함께 표시되어 시각적인 분포 개요를 제공합니다.
Facets with histograms: Each facet value is accompanied by a mini bar chart showing the count, giving a visual distribution overview.
저장된 필터 세트: 사용자는 활성화된 패싯들의 조합을 이름이 붙은 필터 프리셋으로 저장하여 빠르게 다시 불러올 수 있습니다.
Saved filter sets: Users can save a combination of active facets as a named filter preset for quick recall.

코드 레퍼런스 / Code Reference

// Faceted filter with dynamic count updates
const facets = { category: new Set(), region: new Set() };

function applyFilters(data) {
  return data.filter(d =>
    (facets.category.size === 0 || facets.category.has(d.category)) &&
    (facets.region.size === 0 || facets.region.has(d.region))
  );
}

d3.selectAll(".facet-checkbox").on("change", function () {
  const { facet, value } = this.dataset;
  if (this.checked) facets[facet].add(value);
  else facets[facet].delete(value);

  const filtered = applyFilters(allData);
  updateChart(filtered);
  updateCounts(filtered); // refresh counts on all facet values
});