React chart example
Grouped scatter
Compare relationships within and between groups by adding category colours to a scatter plot.
Height and weight by group
Use colour to distinguish categories in a scatter plot.
What is a grouped scatter plot?
A grouped scatter plot adds a categorical distinction to a two-variable scatter plot, usually through colour. Each point remains an individual observation. The grouping helps readers see whether an overall pattern also holds within each subset of the data.
When to use it
Use it to compare relationships across segments, such as product plans, regions or experimental groups. It can expose clusters that a single-colour plot hides. When a chart contains many groups, separate panels may be easier to follow than a crowded colour key.
Design tips
Keep the numeric scales shared across groups so their positions remain directly comparable. Explain what each group label means in the source data.
Look at group sizes as well as their positions. A group with few observations can appear more consistent simply because it contains less data.
Check within-group patterns before describing a combined trend. A pooled relationship can differ from the relationships inside the groups.
Build this chart in React
Compare with
Use when category grouping would add noise to one relationship.
Use when point size should encode a third numeric measure.
Graphy Chart SDK
Add Graphy’s grouped scatter plots to your React app.
Ship quickly with one maintained SDK, without building and maintaining the entire charting experience yourself.