Explain how you would use D3.js to create an interactive chart that updates in real-time.

Official answer

Separate data arrival from rendering. Choose polling, server-sent events or WebSockets from the required direction, latency and recovery behavior; D3 manages the visualization, not the transport protocol.

Validate incoming records, parse timestamps consistently and maintain stable IDs or sequence numbers. Define what happens to duplicates, corrections and out-of-order events. Keep a bounded time window or aggregation so memory and DOM size do not grow forever. On reconnect, reconcile a snapshot and replay position rather than assuming no records were missed.

Create scales, axes and the chart container once. In an update function, bind records using a stable key, then use D3's data join to create new marks, update retained ones and remove expired ones. Update the scale domain deliberately, preserving user zoom or offering an explicit reset. Coalesce rapid arrivals into scheduled renders; a trailing debounce alone can postpone updates indefinitely under a continuous stream.

Display loading, empty, disconnected and stale states, including the last successful update time. Use safe text insertion for untrusted labels. Clean up timers, event listeners and transport connections when the chart is removed.

Provide keyboard-operable controls, a text/table alternative, restrained announcements and a pause or update-frequency control where applicable. Respect reduced-motion preferences. Test bursty input, duplicates, reconnection, resize and long sessions before making a responsiveness claim.

Sources

D3: joining data; W3C: control of auto-updating information.