Scatter Plot

Standard Scatter Plot

A scatter plot shows the relationship between two sets of data, plotted on the X- and Y-axes.

Large & Medium Snapshots (567px+)

Small & Extra Small Snapshots (<567px)

Bubble Plot

A bubble plot shows the relationship between three sets of data. Two sets of data are plotted on the X- and Y-axes, and the third (Z) set of data determines the size of the dot. Bubble plots should only be used when the main conclusion of the analysis will come from the third dimension (the third set of data).

Large & Medium Snapshots (567px+)

Small & Extra Small Snapshots (<567px)

Implementation

Bubble Sizing

Bubbles should be sized relatively according to area, not diameter. This ensures that bubbles have an accurate visual weight.

Bubbles that have a Z variable equal to zero should still have a visible surface area, because the X- and Y-values still need to be represented.

check-circleCorrect | X=A=πr2

times-circleIncorrect | X=A=2r

Defining Size

It’s important for your audience to understand the meaning of the bubble size. If you’re simply using size to show relative proportion, you can define the meaning with a thorough caption and by including the data point in the bubble label. If you need to codify the range of sizes, then define the sizes with a legend:

Scaled Sizing

Bubbles can be any size within a range. Legend should indicate type of data and endpoints of range.

Examples:

Discrete Sizing

Bubble size indicates a defined set of discrete values. Up to three sizes is recommended–do not use more than five.

Examples:

Plotting Negative Values

Your data may contain negative values that need to be indicated in your chart. Show negative X- and Y-values by adjusting the axes accordingly. Show negative Z-variables with an outlined circle.

Negative X- and Y-values

Negative Z-values

Accommodating Bubble Overlap

Inherent in the bubble plot is the possibility for overlapping data. Use these methods to ensure access to your data.

Z-index

Ensure that the smallest bubbles are at the front of the Z-index so users are able to hover over them. Bubbles that are entirely eclipsed by another have a hairline pointer connecting the label to the bubble.

Zoom

Providing zoom functionality allows users to zero in on a single area of the chart and make it larger so that they can get a better look at the data.

Filtering

Providing filters will allow users to look at a more select group of data, thereby decluttering the visual.