Experiments
This collection of experiments focuses on building performant frontend visualizations for complex datasets, combining mapping, charting, streaming data, and interaction design.
Many of the ideas grew from challenges I encountered while building production analytics applications. The project compares different visualization approaches and rendering technologies under realistic frontend constraints.
Different visualization libraries excel at different workloads. One of the most interesting engineering questions has been understanding when SVG begins to struggle, when Canvas becomes a better fit, and how rendering choices affect the overall user experience.
Visualization is about much more than drawing charts. Good interfaces help people discover patterns, ask better questions, and understand information quickly. That requires balancing performance, usability, interaction design, and visual clarity.
Visualization case study
The work began by collaborating with backend engineers to understand what users needed from the incoming radio-frequency data, how much of it should be delivered, and where it could be reduced without losing the most valuable signal. That shared data contract then informed the D3 and Canvas rendering architecture on the frontend.
Baseline
This first data iteration helped frame the product question: how much data should reach the user, and which parts are most valuable for interpreting the signal? I worked with backend engineers to shape that contract before optimizing how the frontend rendered it.
Rendering architecture
D3 manages scales, axes, and the readable spectrum line. Canvas renders the pixel-dense waterfall as a bitmap, avoiding a DOM or SVG element for every sample and historical cell.
Data optimization
The visualization reduces samples to the screen’s useful resolution, normalizes the display range, and keeps a bounded rolling history. The result preserves signal shape without pushing redundant data through React or the renderer.
Product experience
Frequency, bandwidth, presets, connection state, and limits remain visible around the chart so performance work supports the task instead of turning the visualization into an isolated demo.
Agree with backend engineers on which data is most valuable to users before deciding what the interface needs to render.
Keep a fixed rolling history instead of allowing the waterfall dataset to grow indefinitely.
Let React manage controls and state while imperative drawing handles the high-frequency render loop.
Use D3 where semantic scales and interaction matter; use Canvas where pixel throughput matters.
Every library has different strengths. Building the same concepts with multiple technologies has helped me better understand their trade-offs and choose the right tool for different types of applications.
I enjoy turning large amounts of technical information into interfaces that people can understand almost immediately. It's one of the places where engineering, design, and user experience come together.
Connect
I'm always happy to chat about frontend engineering, accessibility, React, or interesting opportunities.
