Interactive Data Visualization
A modern charting experience with dynamic filtering, tooltip interactions, and smooth UI behavior across devices.
Mobile & UI Developer
2 Months (Q1 2026)
The Challenge
Rendering large time-series financial datasets (10,000+ data points) on native mobile screens caused severe UI frame drops (under 20 FPS). Standard charting libraries caused lag when panning, zooming, or triggering tooltips.
The Solution
Implemented hardware-accelerated rendering using Shopify Skia for React Native. Rendered complex line charts, areas, and gridlines on the GPU. Built custom SVG interaction layers using React Native Gesture Handler and Reanimated to track finger movements without locking the main thread.
Impact & Achievements
Maintained a smooth 60 FPS rendering rate on budget Android and iOS devices during rapid panning/zooming.
Reduced initial memory footprints for rendering time-series grids by 70%.
Created custom responsive tooltips that trace coordinates smoothly on touch.
Technical Snippet
Here is a look at a key implementation detail from this project:
// Panning gesture handler using React Native Reanimated for chart tracking
const panGesture = Gesture.Pan()
.onStart((event) => {
touchX.value = event.x;
active.value = true;
})
.onChange((event) => {
// Keep interactive tooltip position updated synchronously on the UI thread
touchX.value = Math.max(0, Math.min(event.x, chartWidth));
})
.onEnd(() => {
active.value = false;
});