A telemetry heatmap is a matrix of evidence, not a colored screenshot. Every cell needs a stable answer to six questions: which metric, which query, which time interval, which value bucket, which aggregate, and which revision produced it.
A small demo can fetch samples, put time on the horizontal axis, put latency on the vertical axis, and choose a brighter color for larger counts. Production systems fail at the seams: a coarse response races a refined response, histogram schemas differ, the automatic color scale jumps when one outlier arrives, a hidden tab accumulates work, or a hover label points to a cell that was evicted during zoom.
The design challenge is to preserve cell meaning while reducing a large distribution to the pixels and interactions the browser can support.
Clarify the telemetry product
Assume an observability surface that shows one histogram-like metric across time. A common example is request latency: each time column contains counts for latency ranges such as 0 to 10 ms, 10 to 25 ms, and 25 to 50 ms. The user can change query filters and time range, pan, zoom, inspect a cell, choose a color policy, open an exemplar, and share the view.
Ask whether the source is a classic histogram, native or exponential histogram, server-created matrix, or raw sample stream. Ask whether values are delta or cumulative, whether bucket schemas can change, how missing intervals are represented, how late data is corrected, and whether multiple series may be merged. Also ask about the largest time range, smallest useful step, value range, live update rate, mobile scope, export limits, data retention, and label permissions.
Those answers decide whether cells can be combined. A rendering library cannot repair ambiguous metric semantics.
The public interview prompt
Design a browser-based telemetry heatmap. Explain:
- metric identity, histogram temporality, time and value boundaries, zero versus missing, schema changes, and correction revisions;
- coarse-to-fine query tiles, generation guards, cancellation, replacement semantics, live-tail merging, and cache keys;
- workers, typed matrix storage, server aggregation, pixel-bounded projection, Canvas 2D or WebGL, device-pixel ratio, resizing, and context loss;
- stable color domains, outlier clipping, legends, selection, hover, keyboard navigation, accessible summaries, and color-independent state;
- URL state, hidden tabs, memory limits, degraded modes, entitlements, exports, observability, testing, and rollout.
What the premium solution covers
The complete solution defines a cell contract before choosing a renderer. It follows one query from a coarse matrix through viewport refinement and live-tail replacement, while old generations are rejected and refinement coverage only moves forward. It then separates authoritative aggregates, worker-owned tiles, pixel projection, and DOM interaction state.
Original teaching media includes a frame-verified refinement animation, a cell-semantics visual, a rendering-boundary visual, and a color-domain comparison. A deterministic lab lets the reader vary time range, source step, value buckets, viewport size, update rate, reducer cost, and draw cost without needing a telemetry backend.