high-performance-data-visualization_skill

Overview

This skill helps render large datasets (charts and graphs) inside React apps using Canvas, SVG, or WebGL for high performance. It focuses on decoupling the render cycle from React to keep UI responsive while handling 10k–100k+ points. Built for interactive, production-ready visualizations with zoom, pan, and performance metrics.

How this skill works

The implementation separates drawing from React's reconciliation by driving a dedicated render loop (requestAnimationFrame) that updates Canvas or WebGL buffers directly. Interaction handlers (zoom, pan, selection) compute transforms and feed them to the render pipeline without forcing full React re-renders. Optional SVG is used for lightweight overlays and accessibility, while FPS and timing metrics are measured and exposed for tuning.

When to use it

• You must plot tens of thousands to millions of points with smooth interactions.
• When React-driven rendering causes jank or frame drops in charts.
• Building interactive tools that need sub-100ms response on zoom and pan.
• When you need precise coordinate mapping between DOM and drawing surface.
• If you require runtime performance metrics (FPS, draw times) for monitoring.

Best practices

• Keep heavy drawing out of React lifecycle; use refs and a dedicated render loop.
• Use WebGL for very large datasets and Canvas for moderate sizes; use SVG only for overlays.
• Batch updates and use typed buffers for vertex data to minimize memory churn.
• Implement spatial indices (quadtrees) for hit-testing and culling.
• Expose and log FPS/draw timings to guide progressive optimization.

Example use cases

• Scatter plot visualizing 10k+ points with smooth zoom and pan for analytics dashboards.
• Time-series overview with GPU-accelerated rendering of millions of samples and responsive brushing.
• Interactive map-like views where coordinate transforms must remain accurate during resize.
• Diagnostic tooling that shows FPS and render timings to help tune visualization parameters.