What's the difference between a scatter and a bubble chart?

A scatter plot shows two variables as x and y. A bubble chart adds a third variable encoded as point size (a ZAxis in recharts), letting you read three dimensions at once — for example revenue, margin and headcount.

How do I show priorities with a scatter plot?

Use a quadrant matrix: plot effort against impact, add reference lines through the midpoints to split the plane into four quadrants, and optionally size points by a third value. Vireya ships a quadrants variant for this.

All charts

scatter/*

Scatter

Scatter / bubble plots — relationship between two numeric variables, with optional ZAxis to encode a third as point size.

4 variants

@vireya/ui/charts/scatter/simple

Two-axis scatter with deterministic cohort points and dashed-cursor tooltip.

client

@vireya/ui/charts/scatter/bubble

Bubble = scatter + ZAxis range encoding a third numeric dimension as point size. Two cohort series (revenue × margin × headcount).

client

@vireya/ui/charts/scatter/quadrants

Effort × impact priority matrix: ZAxis size + ReferenceLine quadrant dividers + axis Labels.

client

@vireya/ui/charts/scatter/gapminder

Gapminder-style: log GDP × life expectancy × population (ZAxis), four continent series.

client

Understanding Scatter charts

Scatter plots position points by two numeric variables, revealing correlation, clusters and outliers that aggregated charts hide. Adding a third dimension as point size (a bubble chart, via a ZAxis) lets you pack three variables into one view.

Vireya's scatter family includes plain scatter, bubble, quadrant-priority matrices and Gapminder-style multi-series plots.

When to use

Exploring the relationship between two numeric variables.
Surfacing clusters and outliers in many observations.
Priority/effort-impact matrices with quadrant dividers.
Encoding a third variable as bubble size.

When to avoid

Categorical data with no numeric x-axis.
Very few points, where a table communicates the same thing.
Encoding more than three dimensions, which overwhelms the reader.

Best practices

Add reference lines or quadrant dividers to give points meaning.
Use transparency to reveal density where points overlap.
Scale bubble area (not radius) to value so sizes aren't exaggerated.
Label outliers directly rather than expecting hover discovery.

Accessibility

Distinguish series by colour plus shape where possible.
Provide accessible tooltips with the full coordinate values.
Summarise the key relationship in adjacent text.

Frequently asked questions

What's the difference between a scatter and a bubble chart?: A scatter plot shows two variables as x and y. A bubble chart adds a third variable encoded as point size (a ZAxis in recharts), letting you read three dimensions at once — for example revenue, margin and headcount.
How do I show priorities with a scatter plot?: Use a quadrant matrix: plot effort against impact, add reference lines through the midpoints to split the plane into four quadrants, and optionally size points by a third value. Vireya ships a quadrants variant for this.