Blog
Charts from data

CSV to bubble chart online

A bubble chart is a scatter plot that carries a third number in the size of each dot. Spend on the horizontal axis, revenue on the vertical, and order count as the size — three variables in one picture, at the cost of some precision in reading the third.

Your data never leaves this device

Your data

Paste a table straight from Excel or Google Sheets, or drop a CSV file. Nothing is uploaded anywhere — the whole calculation runs inside this browser tab.

CSV, TSV or plain text. Files saved in windows-1251 are detected and re-read automatically, so Cyrillic headers do not turn into garbage.

Parsing options

Columns

Result

The drawing library is downloaded only when you press the button, and only on this page.

This page has no server side at all. The table you paste is parsed by JavaScript inside your own browser, the chart is drawn on a canvas element on your machine, and the export file is assembled locally. Nothing is uploaded, stored or written to any log. You can disconnect from the network after the page has loaded and everything will still work — which is the simplest way to verify the claim yourself.

Facts and limits of this method

Best for Three numeric variables where the third is roughly ordinal
Size scaling Radius ∝ √value, so the AREA is proportional to the value
Radius range 4 px to 26 px, mapped from zero to the largest absolute value
Third column Optional — leave it unset and the chart degrades gracefully to a scatter plot
Negative sizes Scaled by absolute value; a negative magnitude has no visual meaning
Output PNG at 2× scale, plus CSV, JSON and Markdown of all three columns

When it misleads you

How it is calculated

Three columns are read: X and Y set the position of each bubble exactly as in a scatter plot, and the third column sets the size. Rows missing either coordinate are dropped; a row missing only the size is drawn at the default radius.

Sizes are mapped so that the AREA of the bubble is proportional to the value, which means the radius is proportional to the square root. This matters more than it sounds: if the radius were mapped directly, a value twice as large would draw a bubble four times the area and look four times as important. That is one of the most common quiet distortions in published charts.

The radius runs from 4 px to 26 px. A floor of 4 px keeps the smallest bubbles visible; a ceiling of 26 px stops one dominant value from swallowing the whole plot.

If you leave the size column unset, every bubble is drawn at a fixed radius and the chart becomes an ordinary scatter plot. That is deliberate: the tool should still work when your third variable turns out to be missing.

Questions and answers

Why are my bubbles smaller than I expected?

Because the area, not the radius, is proportional to your values. A value four times larger produces a bubble twice as wide, not four times. That is the correct encoding — tools that make it four times wide are exaggerating by a factor of four.

Can I use a text column for the size?

No. The size column must be numeric. If you want to encode a category, a scatter plot with coloured groups communicates it far more accurately than bubble size.

My big bubbles cover the small ones.

Sort your rows in descending order of the size column before pasting, so the largest are drawn first and the small ones land on top. If overlap is still severe, the data probably wants a scatter plot instead.

What happens with negative sizes?

They are scaled by absolute value, because a bubble cannot have negative area. If negatives are meaningful in your data, encode them with position or colour rather than size.

Is anything sent to a server?

No. All three columns are read, scaled and drawn inside your browser.

The opposite tool

Need it the other way round? CSV to scatter plot Two columns plotted against each other to reveal a relationship

Related tools

All tools