bubble-chart_skill

Overview

This skill builds BubbleChart components for Vue 3 to visualize three-dimensional relationships by encoding x, y and size into circle position and radius. It is designed for scatter plots where a categorical key maps to bubble color and size encodes a third numeric variable. Use it to reveal clusters, outliers, and correlations in compact, interactive charts.

How this skill works

The component accepts an array of data objects plus three accessor functions: xAccessor, yAccessor and sizeAccessor to extract numeric values for position and radius. A required categoryKey links each data item to a color defined in a categories map. Additional props control sizeRange, axis formatters, labels, grid lines, opacity, legend and tooltips.

When to use it

• Compare three variables per item (two positional, one size) to surface correlations and trade-offs
• Highlight clusters and outliers across categories with color encoding
• Show performance matrices or market maps where size represents importance or volume
• When you need interactive legends and formatted axis labels for presentation-grade charts
• When compact visual summaries must show category-level differences at a glance

Best practices

• Always provide categoryKey and a complete categories mapping for every category value
• Normalize size values or choose an appropriate sizeRange to avoid overplotting or invisible bubbles
• Use opacity (0.4–0.8) when bubbles overlap to preserve visibility
• Provide xFormatter and yFormatter to improve axis readability (currency, percentages, units)
• Label axes (xLabel, yLabel) and add grid lines when precise comparisons are required

Example use cases

• Company performance map: revenue (x), growth (%) (y), employees (size), sector (color) for investor presentations
• Team performance matrix: velocity (x), quality (y), team size (size), status (color) to prioritize coaching
• Market analysis: product sales (x), profitability (y), market share (size), category (color) to spot opportunities
• Customer segmentation: recency (x), frequency (y), monetary value (size), cohort (color) to target campaigns
• Risk assessment: likelihood (x), impact (y), exposure (size), risk type (color) for dashboards