Re-encode (Change Encoding)

설명 / Description

인코딩 변경(리인코드)은 사용자가 어떤 데이터 속성을 어떤 시각 채널에 매핑할지 재할당할 수 있게 하는 인터랙션입니다 — x축에 무엇을 놓을지 바꾸거나, 색상 변수를 바꾸거나, 크기를 다른 지표로 다시 매핑하거나, 선형과 로그 스케일 사이를 전환하는 식입니다. 데이터 자체는 바뀌지 않습니다. 시각적 인코딩만 바뀌어 동일한 데이터셋 안에서 서로 다른 패턴과 관계를 드러냅니다.

Re-encode (or change encoding) is an interaction that lets users reassign which data attributes are mapped to which visual channels — swapping what is on the x-axis, changing the color variable, remapping size to a different metric, or switching between linear and logarithmic scales. The data itself does not change; only the visual encoding changes, revealing different patterns and relationships in the same dataset.

이 인터랙션은 탐색적 데이터 분석에서 근본적인 역할을 합니다. 어떤 단일 인코딩도 다차원 데이터셋의 한 가지 투영만 보여주기 때문입니다. GDP 대 기대 수명 산점도는 하나의 이야기를 들려주고, x축을 교육 수준으로 재인코딩하면 다른 이야기를 들려줍니다. 인코딩 변경을 1급 인터랙션으로 만듦으로써, 시각화 도구는 사용자가 시각적 환경을 벗어나거나 새 코드를 작성하지 않고도 가설을 빠르게 반복 검증할 수 있게 합니다. 베르탱(Bertin, 1967)은 이를 "재표현(re-expression)" — 동일한 데이터를 서로 다른 그래픽 렌즈로 보는 능력 — 이라고 불렀습니다.

This interaction is fundamental to exploratory data analysis because any single encoding shows only one projection of a multi-dimensional dataset. A scatterplot of GDP vs. life expectancy tells one story; re-encoding the x-axis to education level tells another. By making encoding changes a first-class interaction, the visualization tool lets users rapidly iterate through hypotheses without leaving the visual environment or writing new code. Bertin (1967) called this "re-expression" — the ability to see the same data through different graphic lenses.

Tableau, Vega-Lite의 인터랙티브 선택, Observable Plot 같은 도구는 모두 드래그 앤 드롭 필드 할당이나 드롭다운 메뉴를 통해 인코딩 변경을 지원합니다. 핵심 디자인 요건은 이전 인코딩과 새 인코딩 사이의 매끄러운 애니메이션 전환으로, 사용자가 개별 데이터 항목이 이전 위치에서 새 위치로 어떻게 이동하는지 추적할 수 있게 해줍니다. 애니메이션이 없으면 인코딩 변경은 동일한 데이터를 다르게 보는 것이 아니라 완전히 새로운 차트를 불러오는 것처럼 느껴집니다. 히어와 로버트슨(Heer & Robertson, 2007)은 애니메이션 전환이 인코딩 변화를 추적하는 사용자의 능력을 크게 향상시킨다는 것을 보여주었습니다.

Tools like Tableau, Vega-Lite's interactive selections, and Observable Plot all support re-encoding through drag-and-drop field assignment or dropdown menus. The key design requirement is a smooth animated transition between the old and new encoding, so the user can track how individual data items move from their old positions to their new ones. Without animation, re-encoding feels like loading a completely new chart rather than viewing the same data differently. Heer and Robertson (2007) showed that animated transitions significantly improve users' ability to track changes in encoding.

Re-encode (Change Encoding) — try it yourself

언제 사용하나 / When to Use

데이터셋에 동시에 보여줄 수 있는 것보다 더 많은 흥미로운 속성이 있고, 사용자가 다른 조합을 탐색하고 싶을 때.
When the dataset has more interesting attributes than can be shown simultaneously, and the user wants to explore different combinations.
사용자가 관계를 찾고 있고 어떤 인코딩이 가장 잘 드러낼지 미리 알지 못하는 탐색적 분석에서.
In exploratory analysis where the user is searching for relationships and does not know in advance which encoding will be most revealing.
동일한 데이터를 서로 다른 시각적 매핑 아래에서 비교하는 것 자체가 분석 작업일 때(예: "연도 대신 지역별로 보면 이 패턴이 그대로 유지되는가?").
When comparing the same data under different visual mappings is itself the analytical task (e.g., "does this pattern hold when we look at it by region instead of by year?").
서로 다른 청중이 서로 다른 변수에 관심을 가지고, 발표자가 라이브로 전환하고 싶어 하는 프레젠테이션 도구에서.
In presentation tools where different audiences care about different variables and the presenter wants to switch live.
고정된 인코딩이 무엇이 중요한지에 대한 디자이너의 가정을 강요하게 될 때.
When a fixed encoding would impose the designer's assumptions about what is important.

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

시각화가 단일하고 명확하게 정의된 목적을 가지고 있고 인코딩이 의도적으로 선택되었을 때 — 인코딩 변경은 힘을 실어주기보다 오히려 혼란을 줄 것입니다.
When the visualization has a single, well-defined purpose and the encoding was chosen deliberately — re-encoding would confuse rather than empower.
데이터에 속성이 2~3개밖에 없고 현재 인코딩이 이미 그것들을 모두 보여줄 때.
When the data has only 2-3 attributes and the current encoding already shows all of them.
청중이 비전문가여서 컨트롤에 반응해 차트의 의미가 바뀌면 혼란스러워할 때.
When the audience is non-technical and would be disoriented by the chart changing its meaning in response to a control.
인코딩 간 전환이 무의미한 중간 상태를 만들어낼 때(예: 범주형 축에서 시간형 축으로 애니메이션되는 경우).
When the transitions between encodings would produce nonsensical intermediate states (e.g., animating from a categorical to a temporal axis).
저자가 독자가 보는 것을 정확히 통제해야 하는 설명적/내러티브 맥락에서.
In explanatory/narrative contexts where the author needs to control exactly what the reader sees.

작동 방식 / How It Works

드롭다운 메뉴, 드래그 앤 드롭 선반, 또는 버튼이 각 시각 채널(x축, y축, 색상, 크기, 모양)마다 제공됩니다.
Dropdown menus, drag-and-drop shelves, or buttons are provided for each visual channel (x-axis, y-axis, color, size, shape).
사용자가 채널 중 하나에 대해 새로운 데이터 속성을 선택합니다 — 예를 들어, x축을 "연도"에서 "인구"로 바꿉니다.
The user selects a new data attribute for one of the channels — for example, changing the x-axis from "Year" to "Population."
시스템이 선택된 속성의 데이터 유형과 값 범위에 기반하여 새로운 스케일 도메인과 범위를 계산합니다.
The system computes new scale domains and ranges based on the selected attribute's data type and value range.
애니메이션 전환이 각 데이터 마크를 이전 위치에서 새 위치로 이동시킵니다. 축, 레이블, 범례가 동시에 업데이트됩니다.
An animated transition moves each data mark from its old position to its new position. Axes, labels, and legends update simultaneously.
사용자는 공간적 패턴이 어떻게 변하는지 관찰합니다 — 클러스터가 형성되거나 흩어질 수 있고, 상관관계가 나타나거나 사라질 수 있습니다.
The user observes how the spatial pattern changes — clusters may form or dissolve, correlations may appear or disappear.
사용자는 계속해서 다른 채널을 재인코딩하여 다차원적인 뷰를 점진적으로 구축할 수 있습니다.
The user can continue re-encoding other channels, building up a multi-dimensional view iteratively.

변형 / Variations

축 교체: 가장 단순한 형태 — 버튼 하나로 x축과 y축을 교체하여 차트를 전치합니다.
Axis swap: The simplest form — a button swaps the x and y axes, transposing the chart.
드롭다운 재인코딩: 각 축이나 채널마다 사용 가능한 데이터 속성을 나열하는 드롭다운이 있습니다. 대시보드 도구에서 가장 흔합니다.
Dropdown re-encoding: Each axis or channel has a dropdown listing available data attributes. Most common in dashboard tools.
드래그 앤 드롭 인코딩: 사용자가 필드 목록에서 속성 알약(pill)을 채널 선반으로 드래그합니다(Tableau 스타일). 유연성이 가장 높습니다.
Drag-and-drop encoding: The user drags attribute pills from a field list onto channel shelves (Tableau-style). Maximum flexibility.
스케일 유형 토글: 속성을 바꾸는 대신, 사용자가 동일한 속성에 대한 스케일 유형을 바꿉니다(선형 ↔ 로그 ↔ 제곱근).
Scale-type toggle: Instead of changing the attribute, the user changes the scale type for the same attribute (linear ↔ log ↔ square root).
인코딩 프리셋 버튼: 미리 구성된 인코딩 조합이 레이블이 붙은 버튼으로 제공됩니다(예: "지역별", "연도별", "소득 수준별").
Encoding preset buttons: Pre-configured encoding combinations are offered as labeled buttons (e.g., "By Region," "By Year," "By Income Level").
애니메이션 모핑: 연속적인 애니메이션이 이전 인코딩과 새 인코딩 사이를 보간하여 개별 항목을 쉽게 추적할 수 있게 합니다.
Animated morphing: A continuous animation interpolates between the old and new encodings, making it easy to track individual items.

코드 레퍼런스 / Code Reference

// Re-encode x-axis attribute with animated transition
const attributes = ["gdp", "population", "lifeExpectancy", "co2"];
let currentX = "gdp";

d3.select("#x-axis-select")
  .selectAll("option").data(attributes).join("option")
  .text(d => d).attr("value", d => d);

d3.select("#x-axis-select").on("change", function () {
  currentX = this.value;
  const xScale = d3.scaleLinear()
    .domain(d3.extent(data, d => d[currentX]))
    .range([0, width]);

  svg.select(".x-axis")
    .transition().duration(800)
    .call(d3.axisBottom(xScale));

  svg.selectAll("circle")
    .transition().duration(800)
    .attr("cx", d => xScale(d[currentX]));

  svg.select(".x-label").text(currentX);
});