playbooks

home / skills / harborgrid-justin / lexiflow-premium / high-performance-data-visualization

high-performance-data-visualization skill

/frontend/.github-skills/high-performance-data-visualization

This skill helps you render large data visualizations in React with Canvas/SVG/WebGL, delivering smooth zoom, pan, and 100k-point performance.

npx playbooks add skill harborgrid-justin/lexiflow-premium --skill high-performance-data-visualization

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
630 B
---
name: high-performance-data-visualization
description: Render large datasets (charts, graphs) using Canvas/SVG/WebGL within React.
---

# High-Performance Data Visualization

## Summary
Render large datasets (charts, graphs) using Canvas/SVG/WebGL within React.

## Key Capabilities
- Decouple render cycle from React.
- Implement zoom and pan interactions.
- Handle 100k+ data points.

## PhD-Level Challenges
- Maintain interactivity at scale.
- Map coordinate systems accurately.
- Implement responsive resizing.

## Acceptance Criteria
- Render a scatter plot with 10k points.
- Implement smooth zoom.
- Show FPS metrics.

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.

FAQ

Will this work inside a standard React app?

Yes. The skill integrates via refs and event handlers so React manages UI while the render loop draws to Canvas/WebGL independently.

Which renderer should I choose: Canvas, SVG, or WebGL?

Use WebGL for largest datasets and GPU acceleration, Canvas for medium datasets with complex 2D effects, and SVG only for small overlays or annotated elements.