Scatter Chart

Scatter charts plot two quantitative variables as points — the most direct view of joint distribution, and pixi-charts’ performance flagship: built for the 100k-point regime via a single batched PixiJS ParticleContainer draw call, where per-point Canvas libraries become unresponsive.

Categorical color

The spec:

What this chart does well

Scatter is the chart for joint distribution: the shape of the cloud reveals correlation, clustering, outliers, and gaps that aggregated views collapse. Reach for it when you have two quantitative variables per observation and you want the reader to see how they move together — or fail to.

It’s the wrong pick when the data is one-dimensional (use a histogram or strip plot), when the variables aren’t both quantitative (categorical-vs-categorical wants a heatmap), or when the point cloud is so dense that overplotting obscures everything. At extreme densities, 2-D binning into a heatmap usually communicates the story better than another million points.

See the Performance page for a live demo of the 100k-point regime; this page focuses on the encoding shapes.

Encoding reference

Channel	Required	Accepted types	Notes
x	yes	quantitative, temporal	The horizontal coordinate.
y	yes	quantitative, temporal	The vertical coordinate.
color	no	categorical or quantitative	Categorical → discrete palette + categorical legend. Quantitative → viridis ramp + continuous legend.
size	no	numeric field	Square-root scale so visual area is proportional to value, not radius.

value is not used by scatter charts.

See ChartEncoding and ColorEncoding for the full type shapes, or ScatterChart for the imperative API.

Continuous color and size

When color.type is quantitative, pixi-charts uses a sequential viridis ramp. Pair it with a size channel and each point carries three quantitative variables at once: position-x, position-y, color, and area.

The spec:

Reach for continuous color when the third variable is itself quantitative (elevation, density, time-of-day, temperature). Reach for size when you want to weight the eye toward higher-magnitude observations — votes, market cap, sample count.

Notes

• Performance — points render through a ParticleContainer in a single batched draw call, which is what keeps streaming smooth at the 100k-point regime where per-point Canvas libraries become unresponsive. See /performance/ for live numbers.
• Hit-testing — uses a d3-quadtree spatial index, so tooltips stay O(log n) per pointer move even at high point counts.
• Hover overlay — the hover marker is a separate sprite drawn above the particle texture, so hover doesn’t trigger a particle-buffer re-upload.
• Size scale — radius scales with the square root of the size field; visual area tracks the data linearly. This is the convention readers expect; linear-radius scales misrepresent magnitude.