Building an SVG Bubble Chart by Hand
A bubble chart extends a scatter plot by encoding a third variable in each circle's radius alongside its x and y position.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Scaling Radius by Area, Not Radius
The most common mistake in bubble charts is mapping a data value directly to the circle's radius, which exaggerates differences because area grows with the square of radius, so the correct approach scales the value to area and derives radius as the square root.
- Mapping value directly to radius exaggerates visual differences
- Circle area grows with the square of the radius, distorting comparisons
- Scale the value to area and take the square root to get radius
Managing Overlap and Draw Order
Bubble charts inevitably produce overlapping circles, and sorting the data so larger bubbles render first means smaller ones draw on top and remain visible, while adding partial fill opacity lets overlapping regions remain readable rather than fully occluding one another.
- Sorting so larger bubbles render first keeps smaller ones visible on top
- Partial fill opacity keeps overlapping regions readable
- Without both, small bubbles can disappear entirely behind large ones
Frequently Asked Questions
Why shouldn't I map data values directly to bubble radius?
Because area grows with the square of radius, doubling the radius quadruples the visual area, greatly exaggerating the underlying difference in values.
How do I stop large bubbles from hiding smaller ones?
Sort the data so larger bubbles draw first and smaller ones render on top, and apply partial fill opacity so overlapping areas remain readable.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG