Große Datenmengen darstellen

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:

1. 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.
2. 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?