Toggle View

설명 / Description

뷰 전환은 기저의 데이터는 그대로 유지하면서 차트 유형이나 레이아웃 전체를 전환하게 해주는 인터랙션입니다. 버튼 바에서 "막대," "선," "표" 옵션을 제공할 수 있고, 하나를 클릭하면 시각화가 해당 표현으로 변환됩니다. 그룹 막대 차트로 나타났던 동일한 데이터셋이 이제 누적 막대, 선 차트, 또는 히트맵으로 나타나며, 각각 데이터의 다른 측면을 강조합니다.

Toggle view is an interaction that lets users switch the entire chart type or layout while keeping the underlying data the same. A button bar might offer "Bar," "Line," and "Table" options; clicking one transforms the visualization into that representation. The same dataset that appeared as a grouped bar chart now appears as a stacked bar, a line chart, or a heatmap, each emphasizing different aspects of the data.

이 패턴은 모든 분석 과제에 최적인 단일 차트 유형은 없다는 사실을 인정합니다. 막대 차트는 범주 간 크기 비교에 뛰어나고, 선 차트는 시간적 추세를 드러내며, 누적 영역 차트는 시간에 따른 부분-전체 구성을 보여주고, 표는 정확한 값을 제공합니다. 간단한 토글 뒤에 여러 표현을 제공함으로써, 설계자는 각 뷰마다 별도의 대시보드나 페이지를 요구하지 않으면서 사용자가 현재 질문에 가장 적합한 렌즈를 선택할 수 있게 합니다.

This pattern acknowledges that no single chart type is optimal for all analytical tasks. A bar chart excels at comparing magnitudes across categories, a line chart reveals temporal trends, a stacked area chart shows part-to-whole composition over time, and a table provides exact values. By offering multiple representations behind a simple toggle, the designer lets the user choose the lens best suited to their current question without requiring separate dashboards or pages for each view.

토글은 밀접하게 관련된 차트 유형 간 전환(그룹 막대 ↔ 누적 막대 ↔ 정규화된 누적 막대)부터 근본적으로 다른 표현 간 전환(지도 ↔ 표 ↔ 차트)까지 다양할 수 있습니다. 뷰 사이의 애니메이션 전환은 매우 중요합니다: 막대가 선으로 변형되거나 원이 격자로 재배열될 때, 애니메이션은 사용자가 동일한 데이터를 새로운 형태로 보고 있다는 것을 이해하도록 돕습니다. 애니메이션이 없으면, 토글은 동일한 정보를 다시 보는 것이 아니라 다른 페이지로 이동하는 것처럼 느껴집니다.

The toggle can range from switching between closely related chart types (grouped bar ↔ stacked bar ↔ normalized stacked bar) to fundamentally different representations (map ↔ table ↔ chart). Animated transitions between views are critical: when bars morph into lines or circles rearrange into a grid, the animation helps the user understand that they are seeing the same data in a new form. Without animation, the toggle feels like navigating to a different page rather than re-viewing the same information.

Toggle View — try it yourself

언제 사용하나 / When to Use

데이터가 자연스럽게 각기 다른 통찰을 드러내는 여러 차트 유형을 지원할 때(예: 시계열 데이터는 막대, 선, 영역으로 표현 가능).
When the data naturally supports multiple chart types that each reveal different insights (e.g., temporal data can be bars, lines, or areas).
청중마다 선호하는 표현이 다를 때 — 분석가는 산점도를 원할 수 있고, 임원은 막대 차트를 원할 수 있습니다.
When different audiences prefer different representations — analysts might want a scatterplot, executives might want a bar chart.
분석 과제가 데이터의 서로 다른 구조적 속성(크기 비교 vs. 추세 vs. 분포)을 비교하는 것을 포함할 때.
When the analytical task involves comparing different structural properties of the data (magnitude comparison vs. trend vs. distribution).
사용자가 어떤 차트 유형이 자신의 질문에 가장 잘 답할지 확신하지 못하는 탐색적 대시보드에서.
In exploratory dashboards where the user is not sure which chart type will best answer their question.
화면 공간이 제한적이어서 여러 차트를 나란히 보여주는 것이 불가능할 때.
When screen space is limited and showing multiple charts side-by-side is not feasible.

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

대안 차트 유형이 데이터에 오해를 불러일으키거나 말이 되지 않을 때(예: 범주형 막대 차트를 선 차트로 전환하면 잘못된 연속성을 암시함).
When the alternative chart types would be misleading or nonsensical for the data (e.g., toggling a categorical bar chart to a line chart implies false continuity).
데이터가 명백히 하나의 최적 표현을 가지고 있고 대안이 분석적 가치를 더하지 않을 때.
When the data clearly has one optimal representation and alternatives add no analytical value.
차트 유형 간 전환이 너무 혼란스러워 사용자가 데이터를 놓칠 수 있을 때.
When the transition between chart types would be so disorienting that users lose track of the data.
사용자가 두 뷰를 동시에 비교해야 할 때 — 나란히 배치된 연결 뷰가 토글보다 낫습니다.
When the user needs to compare the two views simultaneously — linked side-by-side views are better than toggle.
저자가 표현을 통제해야 하는 내러티브/설명 맥락에서.
In narrative/explanatory contexts where the author should control the representation.

작동 방식 / How It Works

컨트롤 요소(버튼 그룹, 세그먼트 컨트롤, 탭, 또는 라디오 버튼)가 사용 가능한 차트 유형을 표시합니다.
A control element (button group, segmented control, tabs, or radio buttons) displays the available chart types.
사용자가 차트 유형 옵션을 클릭합니다(예: 현재의 "막대" 대신 "선").
The user clicks a chart type option (e.g., "Line" instead of the current "Bar").
시스템이 새로운 레이아웃을 계산합니다 — 각 데이터 항목에 대한 새로운 스케일, 축, 마크 유형, 위치.
The system computes the new layout — new scales, axes, mark types, and positions for each data item.
애니메이션 전환이 현재 마크를 새로운 형태로 변형시킵니다: 막대가 점으로 축소되어 선으로 연결되거나, 사각형이 트리맵 격자로 재배열될 수 있습니다.
An animated transition morphs the current marks into the new form: bars may shrink to points and connect into lines, or rectangles may rearrange into a treemap grid.
축, 범례, 레이블이 업데이트되어 새로운 차트 유형의 관례에 맞춰집니다.
Axes, legends, and labels update to match the new chart type's conventions.
사용자는 언제든 다시 토글할 수 있으며, 역방향 애니메이션이 재생됩니다.
The user can toggle back at any time, with the reverse animation playing.

변형 / Variations

차트 유형 토글: 근본적으로 다른 차트 유형 간 전환(막대 ↔ 선 ↔ 영역 ↔ 표).
Chart-type toggle: Switch between fundamentally different chart types (bar ↔ line ↔ area ↔ table).
레이아웃 토글: 동일한 차트 유형이지만 배열이 다름(그룹 막대 ↔ 누적 막대 ↔ 정규화된 누적 막대).
Layout toggle: Same chart type but different arrangements (grouped bar ↔ stacked bar ↔ normalized stacked bar).
지도/차트 토글: 동일한 지역 데이터의 지리적(코로플레스) 표현과 통계적(막대 차트) 표현 간 전환.
Map/chart toggle: Switch between geographic (choropleth) and statistical (bar chart) representations of the same regional data.
차트/표 토글: 시각적 차트와 데이터 표 뷰 간 전환, 접근성과 데이터 내보내기에 유용.
Chart/table toggle: Switch between a visual chart and a data table view, useful for accessibility and data export.
방향 토글: 가로 막대 차트와 세로 막대 차트, 또는 행과 열 레이아웃 간 전환.
Orientation toggle: Switch between horizontal and vertical bar charts, or between row and column layouts.
3D/2D 토글: 평면 2D 표현과 3D 원근 뷰 간 전환.
3D/2D toggle: Switch between a flat 2D representation and a 3D perspective view.

코드 레퍼런스 / Code Reference

// Toggle between bar chart and line chart
const views = ["bar", "line"];
let currentView = "bar";

d3.selectAll(".view-btn").on("click", function () {
  currentView = this.dataset.view;
  d3.selectAll(".view-btn").classed("active", false);
  d3.select(this).classed("active", true);

  if (currentView === "bar") {
    svg.selectAll(".line-path").transition().duration(500).style("opacity", 0);
    svg.selectAll(".bar")
      .transition().duration(500)
      .attr("y", d => y(d.value))
      .attr("height", d => height - y(d.value))
      .style("opacity", 1);
  } else {
    svg.selectAll(".bar").transition().duration(500).style("opacity", 0);
    svg.selectAll(".line-path")
      .transition().duration(500)
      .style("opacity", 1)
      .attr("d", line);
  }
});