Render large datasets

Reduces and renders large visualization datasets while preserving the analytical features users need to see.

large-dataset-rendering

See how it helps

When is it useful?

Use when charts overwhelm browser memory or hide important spikes through naive sampling.

What does it help you do?

Moves filtering and aggregation close to the data source.
Chooses downsampling appropriate to peaks, distributions or trends.
Selects SVG, Canvas or WebGL from measured interaction requirements.

Try asking this

Display a million-point time series while preserving short spikes and measuring browser responsiveness. Include a one-second spike among otherwise flat measurements. Zoomed and summarized views must retain that signal while remaining responsive during panning.

Detailed documentation

Read the skill’s original instructions, examples and checks in their authored language.

Details…Show less

Large Dataset Rendering

Use this skill when charts or dashboards must handle high-cardinality series, long high-frequency time histories, dense scatter plots, or large network/hierarchy datasets without dropping frames or freezing the browser.

Data Reduction Before Pixel Rendering

An 800-pixel-wide chart cannot display 500,000 distinct horizontal positions simultaneously. Coordinate data volume across the full pipeline:

Push Rollups and Filtering to the Server / Query Layer First:
- Coordinate with the database/backend specialist so macro views query pre-aggregated time buckets, histograms, or hexbin/tile summaries rather than streaming multi-megabyte raw tables to the browser.
Choose the Right Downsampling Algorithm for the Analytical Task:
- M4 / Min-Max Envelope Aggregation (First, Last, Min, Max per pixel bucket): Mandatory when peaks, spikes, and anomalies matter (monitoring, latency, financial highs/lows). Guarantees that extreme highs and lows in every pixel column are preserved.
- LTTB (Largest-Triangle-Three-Buckets): Preserves perceptual trend shape for smooth line charts, but can drop single-sample outliers if not paired with a min-max band.
- Density Binning (2D Hexbin / Heatmap / Contour): Replace overlapping scatter clouds ($>10,000$ points) with density bins plus outlier points so overplotting does not hide the true concentration of data.
- Dynamic Resolution on Zoom: Re-bucket or fetch finer-grained data as the user zooms into a narrower window.

Selecting the Rendering Engine: SVG vs. Canvas vs. WebGL

SVG ($\lesssim 1,000\text{–}3,000$ DOM marks): Best for crisp typography, CSS theming, accessible per-element DOM focus, and standard business charts. Never render $20,000$ SVG <circle> or <path> nodes into the DOM.
HTML5 2D Canvas ($\sim 3,000\text{–}100,000$ marks): Use for dense time series, heatmaps, and multi-series charts; pair a Canvas data layer with an SVG/HTML overlay for crisp axes, direct labels, and accessible keyboard focus cursors.
WebGL / WebGPU ($\gtrsim 100,000+$ marks): Use for massive telemetry, scientific scatter plots, or large force-directed graphs, using spatial indexes (quadtree / R-tree) or offscreen picking buffers for fast hit-testing.

Checklist

Are high-volume queries aggregated on the server or downsampled to match viewport pixel density?
Does the downsampling method preserve critical spikes/extremes (M4 / Min-Max) when anomaly detection matters?
Is Canvas or WebGL used instead of thousands of SVG DOM nodes when mark counts exceed SVG thresholds?
Are brush and pointer interactions throttled (requestAnimationFrame) and decoupled from full React/Vue tree re-renders?

Included files 1

SKILL.md