TheJIT Bubble Chart Maker

Map X, Y, Size, and an optional Group while keeping the numerical meaning of each bubble inspectable.

Open the live Bubble Chart Maker

Why this bubble chart is different

Bubble charts often hide the very problems they create: circle diameter is used instead of area, small points disappear, labels collide, or overlapping points look like one observation. This maker audits those conditions instead of silently polishing them away.

• Paste columns in any order, then confirm the inferred Label, X, Y, Size, and optional Group roles before drawing.
• Draw up to 300 valid points; above 80 the tool warns about density instead of failing after the table has already been pasted.
• Keep circle area proportional to Size and show a size legend.
• Use automatic axes or fixed X/Y limits for comparable charts.
• Identify duplicate coordinates and report how many labels are hidden.
• Add locator rings to very small bubbles without inflating their encoded area.
• Click a bubble or press Enter to pin its label; the audit can pin every hidden label at once. Outside labels use leader lines while positions stay exact.
• Adjust opacity, outlines, and center dots for purposeful overlap inspection.
• Stop on invalid rows or explicitly skip and list them.
• Export watermark-free SVG, exact CSV, and 1×, 2×, or 4× PNG.
• Copy the current SVG directly to the clipboard.
• Download an evidence ZIP with SVG, PNG, formula-neutralized exact CSV, and a plain-language description.
• Choose the maximum bubble radius, label strategy, and grid density without moving a data point or changing proportional area.
• Choose label content, format X/Y/Size independently, add benchmarks and named quadrants, and place a source note in the exported chart.
• Autosave on this browser, save/reopen a project, or copy a compressed URL-fragment share link without creating an account.

Input format

Label,Conversion rate,Retention,Revenue,Group
Search,74,82,540,Acquisition
Referral,61,68,310,Acquisition
Email,48,76,220,Retention
Onboarding,83,58,440,Activation

X and Y may be positive or negative. Size must be greater than zero. Group is optional. This release accepts up to 300 valid bubbles and warns above 80 so a dense chart can be filtered or relabeled before publication.

A practical workflow

1. Give every column one job: Label, X, Y, Size, and optional Group.
2. Decide whether axes should follow the dataset or stay fixed across charts.
3. Read the overlap, hidden-label, range, group-color, and point-density audit.
4. Pin only the names that matter, inspect the exact table, then export the chart, CSV, or four-file review ZIP.

Run the standalone demo

python3 -m http.server 8000

Then open http://localhost:8000/demo/.

Source layout

• src/bubble.js — validation, axis domains, area-proportional sizing, overlap audit, and SVG rendering.
• src/lab-core.js — defensive table parsing, safe SVG helpers, and export.
• src/project.js — versioned local project validation.
• src/templates.js — four Bubble use cases.
• src/app.js — standalone controls for this repository.
• SOURCE_MANIFEST.json — SHA-256 hashes for the production-derived modules.

The renderer, parser, project format, shared export module, and browser app are the same release used by the live tool. The page only mounts the Bubble studio.

Privacy and honest limits

Parsing, validation, layout, and export happen in the current tab. There is no dataset upload endpoint, account, telemetry call, or external chart runtime.

The chart reports duplicate coordinates but does not move data points to make them look separate. It does not provide collision simulation, collaborative editing, hosted publishing, or live-dashboard refresh. Those features need a different product and would weaken the simple local privacy model here.

Test

npm test

The repository has no runtime or development package dependencies.

License

MIT