Re-encode (Change Encoding)

Description

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.

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.

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.

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.
• 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

1. Dropdown menus, drag-and-drop shelves, or buttons are provided for each visual channel (x-axis, y-axis, color, size, shape).
2. The user selects a new data attribute for one of the channels — for example, changing the x-axis from “Year” to “Population.”
3. The system computes new scale domains and ranges based on the selected attribute’s data type and value range.
4. An animated transition moves each data mark from its old position to its new position. Axes, labels, and legends update simultaneously.
5. The user observes how the spatial pattern changes — clusters may form or dissolve, correlations may appear or disappear.
6. The user can continue re-encoding other channels, building up a multi-dimensional view iteratively.

Variations

• 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.
• 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);
});