U2.06.3Conditional occlusion control in bubble chartsdesignresearch

Big bubbles occlude small ones; draw in size order and lower opacity

Aliases: bubble occlusion · draw order · transparent overlap

What it is

When bubbles overlap, later marks cover earlier ones. Drawing large bubbles first puts smaller bubbles above them, while reduced opacity can leave evidence of underlying overlap. Both are common forms of occlusion control, but the title describes conditional strategies rather than a fixed recipe. Draw order changes salience and selection; translucent colours mix and imply density. Neither guarantees that every record remains distinguishable.

Why it happens

Z-order determines coverage, and alpha compositing determines how overlapping pixels mix. Large-first drawing reduces the chance that small marks vanish but can fragment large boundaries, while topmost small marks may capture pointer events. Transparency exposes overlap, yet colour, background, layer count, and blending determine the result; dark regions may be mistaken for density or another category. Occlusion is a rendering, selection, and semantic problem, not merely an opacity setting.

Studying it

Using realistic density and size distributions, compare data order, size order, random order, opacity levels, outlines, jitter, and binning. Test finding minimum and maximum marks, selecting covered records, estimating density, and comparing categories; measure omissions, mis-selections, time, and colour-mixture errors. Cover mouse, touch, keyboard, and screen-reader access, plus light, dark, high-contrast, print, and export conditions. A translucent view that looks richer does not demonstrate record recoverability.

Where it stops holding

Size order may erase meaningful temporal or priority layering; then z-order should follow the task or be switchable. Category colours can blend into colours absent from the legend, and transparency is weak where precise colour identification matters. Dense areas may saturate while small bubbles remain unselectable; binning, contours, sampling, facets, or zoomed details may be better. Hit areas may exceed visible circles but must not make adjacent records impossible to select.

Applying it

  • Decide whether small marks, priority records, temporal layers, or category discrimination deserve precedence before selecting z-order; do not hard-code descending size.
  • Tune opacity and outlines against target backgrounds and palettes. On hover, focus, or selection, provide an opaque highlight and a list of overlapping records.
  • Separate visual radius from accessible hit area, adding keyboard point navigation and structured-data access so full occlusion does not mean inaccessibility.
  • Validate lookup, selection, density, and category tasks. Switch to bins, facets, or coordinated details when colour mixing, saturation, or mis-selection persists.

Related

  • Same group: U2.06.1 Bubbles carry a third variable on the least precise common channel · U2.06.2 Map values to bubble area, not radius · U2.06.4 Bubble size needs a reference-bubble legend · U2.06.5 Precise third-variable comparison belongs in facets or a separate chart
  • Adjacent: U2.05.2 Many points overplot; use transparency or binning · U1.12.3 Highlight only the class currently in focus
  • Search terms: bubble occlusion · z-order · alpha compositing · hit testing

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/U2.06.3