bubble-chart-generator_skill

Overview

This skill generates interactive Chart.js bubble chart visualizations packaged as a ready-to-use MicroSim (HTML, CSS, and documentation). It focuses on 2x2 priority matrices and multi-dimensional scatter plots where the third dimension is represented by bubble size. The output is responsive, modular, and suitable for embedding in documentation or standalone pages.

How this skill works

The skill accepts a dataset with labels, X and Y values, a size metric, and optional category/status fields. It creates a main.html that loads Chart.js, computes scaled bubble radii, and configures a bubble chart with tooltip and quadrant plugins. It also generates style.css for visual polish and index.md with usage, customization, and integration instructions.

When to use it

• Visualizing priority matrices (Impact vs Effort, Risk vs Value, Cost vs Benefit)
• Portfolio analysis comparing two metrics with count or cost as bubble size
• Quadrant analysis to categorize items into four strategic zones
• Interactive reports or dashboards that need hover tooltips and click actions
• Embedding visualizations in documentation sites (MkDocs) or standalone pages

Best practices

• Normalize input scales (use consistent 0–10 ranges) to keep visual comparisons meaningful
• Define clear min/max bounds for bubble sizes to prevent visual dominance or tiny dots
• Use subtle quadrant shading (5–10% opacity) and high-contrast labels for readability
• Prevent edge clipping by adding small padding to axes (e.g., min: -0.5, max: 10.5)
• Provide a documentation page with interpretation guidance, customization examples, and technical details

Example use cases

• Create an Impact vs Effort chart to prioritize feature backlog items with size = estimated user value
• Build a Risk vs Value portfolio chart where bubble size = exposure or cost
• Produce a product portfolio scatter with sales on X, profitability on Y, and market share as bubble size
• Generate a quadrant heatmap for stakeholder presentations with interactive tooltips
• Embed an interactive bubble chart in an MkDocs documentation site with a dedicated index.md