Aggregate / Disaggregate

Description

Aggregate / disaggregate is an interaction that lets users switch between a summarized (aggregated) view and a detailed (disaggregated) view of the same data. In the aggregated state, data points are grouped by some categorical or temporal dimension and represented as summary statistics — means, sums, counts, medians — displayed as bars, lines, or area marks. In the disaggregated state, every individual data point is shown, often as a jittered strip plot, beeswarm, or scatterplot overlaid on or replacing the summary marks.

This interaction addresses a fundamental tension in visualization design: summaries are necessary to see patterns in large datasets, but they can hide important variation, outliers, and distributional shapes within groups. By letting the user toggle between the two levels, the visualization supports both the “forest” view (what is the overall pattern?) and the “trees” view (what does the underlying data actually look like?). Research by Weissgerber et al. (2015) demonstrated how bar charts of means conceal dramatically different distributions, motivating the now-common “show me the data” movement in scientific visualization.

The transition between aggregate and disaggregate states is a prime candidate for animated transitions (Heer and Robertson, 2007). When a bar decomposes into its constituent points, or a mean line splits into individual traces, the animation helps the user understand that the individual points are the same data that was summarized. Without animation, the jump between views can feel like switching to an entirely different dataset.

When to Use

• When the audience needs to see both overall patterns (group means, totals) and underlying distributions (individual values, outliers).
• When summary statistics alone could be misleading — the classic “Anscombe’s quartet” and “datasaurus dozen” scenarios.
• In scientific or analytical dashboards where users toggle between publication-ready summaries and diagnostic detail views.
• When the dataset has moderate size (dozens to low thousands of items) — large enough to need aggregation, small enough to render individually.
• When the user’s task includes identifying outliers or understanding within-group variability.

When NOT to Use

• When the dataset is so large (millions of items) that the disaggregated view is unreadable or cannot be rendered performantly.
• When the aggregated summary is the only meaningful representation (e.g., a population pyramid is always aggregated by age group).
• When the individual items have no meaningful identity — disaggregating anonymous counts is pointless.
• When the transition between views would be confusing because the two representations share no visual continuity.

How It Works

1. The visualization starts in one mode — typically aggregated, showing bars, lines, or summary marks by group.
2. The user triggers the toggle — via a button, checkbox, keyboard shortcut, or by clicking on an aggregate mark.
3. An animated transition morphs the view: bars dissolve into individual points (or vice versa), maintaining spatial correspondence so the user tracks the relationship.
4. In disaggregated mode, individual marks are positioned to avoid overlap (jittering, beeswarm layout) and may show additional encodings (color by sub-category, size by another variable).
5. Summary statistics may persist as reference lines (mean line, median marker) in the disaggregated view, giving context to the individual points.
6. The user can toggle back to the aggregated view at any time, with the reverse animation playing.

Variations

• Bar-to-strip: Bars decompose into jittered strip plots or beeswarm plots showing every data point.
• Line-to-spaghetti: A mean trend line splits into individual traces (“spaghetti plot”), revealing the variance around the trend.
• Progressive disaggregation: Multiple levels — total → group → subgroup → individual — traversed step by step.
• Hybrid view: Aggregated marks and individual points are shown simultaneously (e.g., a box plot with overlaid jittered points).
• Aggregation function switch: Instead of showing/hiding individual points, the user switches the aggregation function (sum → mean → median → count).
• Click-to-disaggregate: Clicking a specific bar or group explodes just that group into its individual items, leaving other groups aggregated.

Code Reference

// Toggle between bar chart (aggregated) and strip plot (disaggregated)
let isAggregated = true;

d3.select("#toggle-btn").on("click", () => {
  isAggregated = !isAggregated;

  if (isAggregated) {
    // Transition individual points into bar positions
    svg.selectAll(".point")
      .transition().duration(600)
      .attr("cy", d => y(groupMean(d.group)))
      .attr("cx", d => x(d.group) + x.bandwidth() / 2)
      .style("opacity", 0);
    svg.selectAll(".bar")
      .transition().duration(600)
      .style("opacity", 1);
  } else {
    // Transition bars away, show individual points
    svg.selectAll(".bar")
      .transition().duration(600)
      .style("opacity", 0.15);
    svg.selectAll(".point")
      .transition().duration(600)
      .attr("cx", d => x(d.group) + jitter(x.bandwidth()))
      .attr("cy", d => y(d.value))
      .style("opacity", 0.7);
  }
});