An order book and a live chart are two projections of ordered market evidence. The book answers what liquidity is visible at each price now. The chart answers how trades formed price and volume over time. They can share an instrument and a clock, but they must not share an ambiguous global state.
A demo can replace an array whenever a WebSocket message arrives and append the last price to a chart. That approach fails when the initial snapshot races with live updates, a message is missed, a price level reaches zero, a hidden tab stops painting, or ten thousand updates arrive between two screen refreshes.
The design challenge is to preserve the market contract first, then choose a visual projection the browser can sustain.
Clarify the market-data product
Assume an observational browser surface for one instrument at a time. It displays an aggregated Level 2 price ladder, cumulative depth, recent trades, and an OHLCV chart whose interval can change. The user can pan, zoom, inspect a point, choose visible depth, and switch instruments. This question does not include order entry.
Ask whether the feed sends price levels or individual orders, whether updates replace size or add a delta, how sequence gaps are reported, whether replay exists, which clock defines candle buckets, how corrections arrive, and how much depth the product promises. Also ask about desktop density, mobile scope, historical range, permitted latency, data entitlements, and stale-state policy.
Those answers are part of the data model. “WebSocket plus canvas” is not a design until the message contract and failure rules are explicit.
The public interview prompt
Design a browser-based order book and live price chart. Explain:
- Level 2 snapshots, incremental updates, feed sessions, sequence numbers, duplicate and missing messages, snapshot races, and recovery;
- exact price and size representation, bid and ask ordering, zero-size deletion, cumulative depth, spread, and crossed-book detection;
- workers, indexed book storage, dirty projections, paint cadence, virtualization, canvas or WebGL rendering, device-pixel ratio, resizing, and context loss;
- historical candles, live trades, interval boundaries, late corrections, empty periods, interval switches, panning, zooming, cursor state, and decimation;
- keyboard navigation, textual chart alternatives, color-independent state, hidden tabs, memory limits, degraded modes, security, observability, and testing.
What the premium solution covers
The complete solution starts by choosing a precise feed contract and gives every visible projection a session and sequence receipt. It follows the snapshot bootstrap, continuous deltas, a missing update, publication freeze, and atomic repair. It then builds an exact price-level index, separates worker reduction from main-thread painting, and joins immutable historical candles to one mutable live bucket.
Original teaching media includes a frame-verified recovery animation, a price-level replacement visual, a chart ownership pipeline, and a degraded-mode matrix. A deterministic lab lets the reader vary update rate, retained depth, visible depth, chart points, paint cadence, reducer cost, and draw cost without requiring a market backend.