Labs

A collection of high-fidelity sketches and technical deep-dives. Less about the perfect spec, more about the feel of the interaction.

Natural Language ECharts

Natural Language ECharts

I hooked Claude 3.5 Haiku to "design" charts via chat. It acts as a specialized JSON generator that understands the ECharts schema. By giving it the current state of the chart, the model can precisely target and update nested visual styles based on simple prompts. No more manual config editing—just describing what you want and watching the chart update.

Claude 3.5 HaikuReactEChartsVibes
The Multi-Engine Toggle

The Multi-Engine Toggle

This is a "switchboard" for data visualization. I built a specialized layer that takes one data source and feeds it into three different charting engines simultaneously. It’s been a lifesaver for comparing how different libraries handle things like hover states and animations, allowing for instant A/B testing of the actual rendering performance.

Chart.jsPlotlyEChartsTypeScript

CoffeeBloom High-Res Extraction

I wanted to see exactly what’s happening inside the basket, so I built a way to visualize the DE1’s high-res pressure and flow data to spot hidden channeling. To keep the playback feeling buttery smooth at 60fps, I’m using a hybrid approach: Canvas handles the heavy lifting for the 10Hz data curves, while SVG keeps the interactive overlays crisp and responsive.

D3.jsCanvasSwiftUIDecent Espresso