OneTaskBy Tim King · Updated
Circle Packing Chart Maker
Nested Bubbles from an Indented List, Free
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Circle Packing Chart Maker works
This circle packing chart maker draws a hierarchy as bubbles. A circle packing chart shows a hierarchy as bubbles inside bubbles: each item is a circle whose area is proportional to its value, and each group is a larger circle that wraps its members. It is a friendlier cousin of the treemap, less precise but easier to read as a picture of teams, portfolios, folders or categories. Type the items as an indented list with values on the leaves and this page packs the circles, colours them by top-level group and lets you download SVG or PNG. Nothing is uploaded.
Circle packing chart maker: writing the list
One item per line, indented by two spaces or one tab per level. A line belongs to the nearest line above it with less indentation. Leaf lines end with a comma or colon and a number: "Backend, 12". Groups take the sum of their children and need no number. A leaf with no value counts as 1, which works well for charts that simply count members. Lines starting with "#" are ignored. A single top line becomes the outer circle; several top lines are packed side by side inside a plain outer ring.
How the packing works
Within each group, the child circles are packed as tightly as possible, largest touching the centre, and the group circle is drawn as the smallest circle that encloses them all. The outermost circle is then scaled to fill the preview. Because circles never tile a plane perfectly, some space inside each group is empty; that is normal for this chart and is why areas should be compared within a group rather than across the whole picture.
Gap, order and colour
Gap sets the space between neighbouring circles and between a group circle and its contents; a larger gap makes the nesting clearer, a smaller one packs more in. As typed keeps the packing order of your lines, which affects where each bubble lands; Largest first sorts each group by value so the biggest bubble is placed first, at the centre of its group. Every circle takes the colour of the top-level group it belongs to: leaves are solid, group circles are drawn as a tinted ring so the leaves inside stay visible. The palette menu switches the colour set.
Labels
All puts each group's name at the top of its circle and each leaf's name at its centre. Leaves labels only the innermost bubbles. Labels shrink with the circle and are shortened with an ellipsis when the name is wider than the bubble; circles under about 12 pixels in radius are left unlabelled. Every circle keeps its full path and value as a hover title, which is preserved in the downloaded SVG, and the values themselves are formatted with the Number format menu.
Exporting
Download SVG gives a vector file with labels as text and hover titles for every circle. Download PNG renders at one, two or three times the preview width. Copy SVG puts the markup on the clipboard. Everything is drawn in your browser; the text never leaves your machine.
FAQ
When should I use circle packing instead of a treemap?
When the picture matters more than precise comparison. Circles are quick to recognise as groups and members, and a packed chart makes a good slide or poster. A treemap uses the space fully and is better for reading exact proportions or fitting many labels.
Why is there empty space inside the groups?
Circles cannot fill an area without gaps, so every group circle has some unused space around its members. Areas are proportional to value within the same group; across groups the comparison is approximate because of the packing.
How do I write the values?
End each leaf line with a comma or a colon and a number. Groups take the sum of their children, so leave their lines as just a name. Decimals are fine; formatting such as thousands separators or currency comes from the Number format menu.
Why is a bubble unlabelled?
Circles smaller than about 12 pixels in radius are left blank so the chart stays clean, and longer names are shortened with an ellipsis. Make the preview wider, reduce Gap, or shorten the names. Hovering any circle still shows its full name and value.
See also: all Diagram Makers tools, Images, Audio, Video & Screen, PDF, SVG, Simulations & Screensavers, Generative Art, Chart Makers, 3D Model Viewers, Drawing Pads, Mockups & 3D Making, 3D Science, Tracker Music.
Related tools
Treemap Maker
Type an indented list with values and download a treemap as SVG or PNG.
Sunburst Chart Maker
Type an indented list and download a sunburst chart as SVG or PNG.
Bubble Chart Maker
Paste name,x,y,size rows, get a labelled bubble chart; SVG or PNG.
Indent Code
Shift every line right by a set number of spaces or tabs.
SVG To PNG
Rasterise an SVG to a PNG at any width.