Bubble Chart Maker

How the Bubble Chart Maker works

A bubble chart is a scatter plot with a third number. Each point sits at an x and y position like any scatter, and the size of its circle carries a third measure. That extra dimension is why bubble charts show up wherever people need to compare things on several axes at once: countries by income, health and population, products by price, rating and sales, or projects by effort, impact and cost.

The best-known example is Gapminder's chart of countries by income per person against life expectancy, with population as the bubble size, which Hans Rosling made famous in his 2006 TED talk. The sample data follows the same pattern because it shows the form at its best: two related measures, a size that adds context, and labels that let the reader find their own country.

Using the bubble chart maker

Paste or type your data as rows. The tool reads columns in a fixed way:

The header row names the axes unless you fill in the axis label fields. Any extra columns are ignored, so you can paste straight from a spreadsheet and reorder the columns there if needed.

Size is area, not radius

The third value maps to the area of each circle. A bubble for twice the value covers twice the ink, which is how the eye judges size. Scaling the radius instead, a common mistake in hand-made charts, makes a value twice as large look four times as big. Bubble size sets the largest circle and every other bubble scales from it, so Large suits a handful of points and Small a crowded chart. Big bubbles are drawn first, so small ones are never hidden underneath.

Even with honest scaling, people read area less precisely than position. Research on graphical perception, starting with Cleveland and McGill in 1984, ranks position on a common scale as the most accurate encoding and area well below it. Put the two measures that matter most on the axes and use size for the supporting one.

When to use a log axis

Income, population, company revenue and city size are spread across several orders of magnitude. On a linear axis most bubbles crowd into the left edge with a few far out on the right. X axis scale: Log spaces each factor of ten equally, which spreads the crowd and often turns a curve into a straight line. The Gapminder chart uses a log income axis for exactly this reason. Log only works when every x value is positive; with a zero or negative value the axis stays linear. Label the chart so readers know the scale is logarithmic, because equal steps no longer mean equal differences.

Reading the stats

• Bubbles is how many rows were plotted. If it is lower than your row count, some rows had a missing or non-numeric value in one of the three numeric columns, or a negative size.
• Size column names the column driving bubble area, so you can confirm the tool picked the one you intended.
• Largest is the name and value of the biggest bubble. Number format controls how it appears: Compact writes 1.4G for 1,400,000,000, and Thousands separator writes it in full.

Tips

• Keep it under about 50 bubbles. Beyond that, circles overlap into a blob. Hide the bubble names when there are more than 20 or so, and mention the notable ones in the caption instead.
• Watch out for one giant. If a single value dwarfs the rest, such as China and India in a population chart, every other bubble shrinks to a dot. Consider leaving the outlier out, or plotting it separately.
• Sizes must be positive. A circle cannot have negative area, so rows with a negative size are dropped. For profit and loss, put the signed value on an axis and size by revenue.
• Grid lines help readers estimate values; turn them off for a cleaner slide once the pattern is the point.
• Say what the size means. Put it in the title or caption, since the chart has no size legend: "Bubble size shows population".

Alternatives

If you only have two measures, a scatter plot is clearer. For thousands of points, a hexbin plot shows density where bubbles would overlap. If size is the only measure and position means nothing, a circle packing chart packs the circles tightly instead.

Exporting

Download SVG gives a vector file that stays sharp in reports and slides. Download PNG renders at 1×, 2× or 3× the preview width for documents and social posts, and Copy SVG puts the markup on the clipboard for pasting into a design tool. The chart is drawn in your browser and your data is never uploaded.

Related tools