Bubble plot

A bubble plot is a scatter plot with a third numeric variable mapped to circle size. This page offers several examples of implementation with d3.js, from the most basic to custom versions.

Step by step

Building a bubble chart basically follows the same process as for a scatterplot, except that another scale is used to map a variable to bubble size. Thus, have a look to the scatterplot section for more examples.


Here is the template I use to start a bubble chart project. Legend describes both size and color. Hover the legend to highlight the corresponging group. Hover a bubble to get country name.

Get code

Selection of blocks

A selection of blocks involving bubble charts

Related chart types

Connected scatter
Density 2d