The Magic Lens:
drilling down without losing the room

Curiosity is spatial. Drilldown is not.

You notice something because of where it sits. That bar is tall compared to the ones beside it. That row is strange relative to the rows above it. The comparison is the finding.

Then you click, and the interface performs a full page substitution. The neighbours disappear. The axis rescales to the new, narrower data. You are now looking at four weeks of September with nothing to hold them against, trying to keep August in your head as a number rather than a shape. The question that survives the transition is rarely the question you started with.

Two knobs, not one

The interaction has a long pedigree. Xerox PARC's Toolglass and Magic Lenses (Bier et al., 1993) put a movable, semi‑transparent filter between the cursor and the work — the region under the glass renders differently. Separately, George Furnas's fisheye views (1986) bent space itself, so the area you care about got bigger and the rest compressed rather than disappeared.

The interaction people describe as a “fishbowl” is what happens when you turn both knobs at once:

• Geometric dilation. The region under the lens is stretched, so things that were crowded become legible. Space is borrowed, not destroyed.
• Semantic substitution. The extra room is filled with a different, finer rendering of the same data — months become weeks, days become hours, a row becomes its constituent rows.

Dilation without substitution is a magnifying glass: bigger pixels, no new information. Substitution without dilation is a tooltip: new information, no room to show it. You need both, and — this is the part that is easy to get wrong — you need to dilate along the axis that carries the information.

A good month, or one good week?

Monthly orders. September is the tall one, and the obvious story is “September was strong.” Drag the lens over it. Inside the glass, the month dilates into its four weeks — and the shape of the finding changes completely.

Drag the lens · drag the small circle at its lower‑right to resize · or focus it and use arrow keys, + / −, 0.

Widen the lens until it spans two bars and the weekly series continues across the boundary — the lens is not a popup bound to one object, it is a window onto a continuous finer series.

The same question, the conventional way

For contrast, here is the industry-standard answer to “tell me more about September.” Press the button and watch what you lose.

Smoothness is an artifact of sampling

Daily median response time, and it looks placid. But a daily median is an average of a day, and days have hours. Inside the lens the same series is redrawn at hourly resolution — the placid line turns out to be a sawtooth with a nightly batch spike that the daily roll‑up erases.

Note that the vertical axis does not change here: milliseconds are milliseconds. Only the time axis dilates. When the lens and the page share units, keep the shared axis fixed — it is what lets the eye compare across the rim.

Aggregation hides concentration

Revenue by region. Four tidy rows, all growing. Pass the lens down the table and each region opens into the cities underneath it — while the rows above and below stay put, still readable, still comparable.

A table is a list, so its lens dilates vertically: rows under the glass gain height and gain children, and the rows outside slide to make room instead of being overwritten. The scroll position never moves.

A slice is a container

Acquisition channels. “Paid” is a third of the business, which tells you almost nothing about the business. Here the lens magnifies uniformly — a pie has no privileged axis — and swaps each arc for the sub‑channels inside it.

Uniform magnification is the safe default whenever the encoding is angular or spatial rather than ordinal. Stretching one axis of a pie chart would corrupt the very quantity it encodes.

Every cell is a smaller grid

Activity by day and hour‑block. Under the lens each cell subdivides into four, exposing the structure a coarse bin was flattening — and unlike a drilldown modal, you can slide across the boundary and watch one cell's internal pattern hand off to the next.

What breaks, and how to not break it

• Declare your own distortion. The rim carries a chip — weekly · ×2.4 — naming the resolution and the dilation factor. A lens that silently lies about scale is worse than no lens.
• Anchor the baseline, not the centre. Magnifying a bar chart about the lens centre pushes the zero line out of the glass and the bars become unreadable stubs. Dilate x about the centre; rescale y from a pinned baseline.
• Keep the interior crisp. It is tempting to put backdrop-filter: blur() on the lens because glass. Do not: you would blur the exact thing you built the lens to read. Express the glass at the rim — ring, specular arc, halo — and leave the centre honest.
• Re-render, don't scale, anything with text. A CSS scaleX is cheap and makes every label look like it melted. Where an axis stretches, recompute geometry as x′ = cx + (x − cx) × k and draw type at its natural size.
• Never hijack the wheel. Resize is on a visible slider, a drag handle, the + / − keys, and ⌘/Ctrl‑wheel. Plain scroll still scrolls the page, because the page is the thing you are trying not to lose.
• Make it reachable without a pointer. The lens is focusable and driven by arrow keys; a polite live region announces what is under it, debounced so dragging doesn't machine‑gun a screen reader; and every demo ships the same numbers as a plain table for assistive tech.

Detail as a place you visit, not a place you move to

The dominant metaphor in analytics is navigation: you go somewhere to see more, and coming back is your problem. It is a metaphor inherited from documents and URLs, and it fits exploration badly, because exploration is mostly comparison and comparison needs two things visible at once.

The lens proposes something quieter. Detail is not a destination; it is a local property of attention. You bring the resolution to the question instead of carrying the question to the resolution. The page you were reading stays exactly where it was — which means the thing that made you curious is still on screen when the answer arrives.

Built as a standalone study. Data is synthetic. The lens engine is roughly 200 lines: pointer capture, a clip-path circle, and a per‑demo function that says what “finer” means.

Where this one went to work

The figures above run on invented numbers, so the interaction is the only thing being tested. The same engine carries seven figures in Protein Mania, this time over the USDA branded-food database and three companies’ filings — real data, where the values are uneven and the product names are long.