Home / Relationships / Bubble Chart
Bubble Chart in HTML, CSS and JavaScript
A bubble chart is a scatter plot where each dot is a bubble of a different size. This free template draws one with plain SVG and vanilla JavaScript, no chart library. The example shows ad campaigns compared on cost, conversion and budget.
What is a bubble chart?
A bubble chart is a scatter plot where each dot is a bubble of a different size. It shows three numbers at once: one across the bottom, one up the side and one as the size of the bubble.
Color can add a fourth piece of information, like the channel of each campaign. It is a quick way to spot items that punch above their weight, like a small email campaign that beats big video spend.
At a glance
- Best for
- Comparing items on three numbers at once
- Data you need
- Three numbers for each item, plus an optional group
- Skip it when
- More than about 30 bubbles. It gets crowded.
- Made with
- HTML, CSS and vanilla JavaScript. No library.
When to use a bubble chart
- Marketing campaigns by cost, results and budget
- Countries by income, health and population
- Products by price, rating and sales
- Projects by cost, value and team size
When to pick another chart
- Scatter Plot: you only have two numbers
- Quadrant Chart: you want to sort items into four groups
What you get in this template
- Bubble area, not width, matches the budget so sizes are honest
- Four colors for search, social, display and email
- Labels that move to find space and hide only when there is none
- A note on the chart that says where the best value is
- Hover or use the arrow keys to read each campaign
- Hide a channel from the key
How the code works
Here is a short version of the idea behind this bubble chart. The full file adds the axis, labels, tooltips, sorting and resizing on top of it.
const campaigns = [['Loyalty points', 0.06, 8.8, 1200], ['Spring sale', 1.10, 4.8, 9000], ['Summer video', 0.35, 1.4, 15000]];
const x = cpc => 40 + cpc / 1.6 * 540, y = cr => 280 - cr / 10 * 260;
campaigns.forEach(([name, cpc, conv, budget]) => {
const r = Math.sqrt(budget) * 0.3; // area matches the budget
drawCircle(x(cpc), y(conv), r, '#5ad19a');
drawText(x(cpc) + r + 5, y(conv) + 4, name);
});The example uses four tiny helpers that create SVG shapes. Put them above the code and it runs as is.
const svg = document.querySelector('svg');
function make(tag, attrs) {
const n = document.createElementNS('http://www.w3.org/2000/svg', tag);
for (const k in attrs) n.setAttribute(k, attrs[k]);
svg.appendChild(n);
return n;
}
function drawRect(x, y, width, height, fill) { return make('rect', { x, y, width, height, fill }); }
function drawCircle(cx, cy, r, fill) { return make('circle', { cx, cy, r, fill }); }
function drawLine(x1, y1, x2, y2, stroke, width, dash) {
return make('line', { x1, y1, x2, y2, stroke, 'stroke-width': width || 1, 'stroke-dasharray': dash || 'none' });
}
function drawText(x, y, str, anchor) {
const t = make('text', { x, y, 'text-anchor': anchor || 'start' });
t.textContent = str;
return t;
}How to add it to your website
- Download the file. Click Download HTML file above. You get one file called bubble-chart.html with everything inside.
- Change the data. Open the file in any code editor and find the DATA list near the bottom. Replace the names and numbers with your own.
- Change the colors and text. Colors are at the top of the style tag. The title, subtitle and main point are plain HTML near the top of the body.
- Put it online. Upload the file to any host, such as GitHub Pages, Netlify or your own server, or paste it into your site. There is no build step.
Questions people ask
What is a bubble chart?
A bubble chart is a scatter plot where each point is a circle sized by a third number. It shows three measures for each item in one view.
How should bubble size be worked out?
Scale the area, not the radius. Use the square root of the value for the radius, otherwise big values look far bigger than they are.
How many bubbles can a bubble chart show?
Up to about 30 works well. With more, bubbles overlap and labels no longer fit.
What is the difference between a bubble chart and a scatter plot?
A scatter plot shows two numbers per item. A bubble chart adds a third one as size.
More relationships
041. Scatter Plot
Example: used car prices against mileage
043. Heatmap
Example: gym check-ins by day and hour
044. Correlation Matrix
Example: what drives daily sales at a cafe
045. Connected Scatter Plot
Example: monthly bike share trips against average temperature
046. Hexbin Plot
Example: distance and fare for 3,000 taxi rides
047. Contour Plot
Example: a hill walk with height lines and a trail
048. Radar Chart
Example: three laptops scored on six features
049. Parallel Coordinates Chart
Example: rental flats compared on six measures