Vault Dashboard
A high-frequency financial tracking interface built for speed. visualizing complex market data in real-time with sub-millisecond latency.
Roles
- UI Engineering
- Data Visualization
- Back-end Integration
Tech Stack
- React 18
- D3.js
- Node.js
- GraphQL
The Challenge
Financial data visualization often suffers from "render lag" when handling WebSocket streams with thousands of ticks per second. The goal for Vault was to create a dashboard that felt instantaneous, processing market movements and portfolio adjustments without freezing the main thread.
Technical Execution
Web Worker Offloading
To prevent UI jank, all data parsing, sorting, and aggregation was moved to a Web Worker. The main thread only receives the final calculated view state required for rendering.
Canvas vs SVG
While D3 usually relies on SVG, for the high-frequency tick charts, we implemented a hybrid approach using HTML5 Canvas for the moving data and SVG for the interactive overlays (tooltips, crosshairs). This reduced DOM node count significantly.
const updateChart = (data) => { // Batch updates to requestAnimationFrame requestAnimationFrame(() => { ctx.clearRect(0, 0, width, height); for (let i = 0; i < data.length; i++) { // Optimized drawing logic drawCandle(ctx, data[i]); } }); };
"Speed isn't just a metric here — it's the entire product experience. The user needs to trust that what they see is happening now."