Bubble Chart

What it does

The bubble-chart skill generates interactive bubble charts using Vue.js and Chart.js. It allows you to visualize data points as circles, where the size of each circle represents a value, and their position on the chart can be determined by other variables. This provides a clear visual representation for comparing different data sets and identifying trends or outliers.

When to use it

• Comparing product performance: Visualize sales figures alongside marketing spend and customer satisfaction scores for various products.
• Analyzing website traffic: Display page views, bounce rates, and average time on site for different landing pages.
• Presenting demographic data: Show population size, income levels, and education attainment across different regions.
• Financial reporting: Illustrate revenue, expenses, and profit margins for various business units or projects.

Key capabilities

• Generates interactive bubble charts.
• Uses Vue.js and Chart.js libraries.
• Allows customization of circle size based on data values.
• Positions circles using X and Y axes representing other variables.

Example prompts

• "Create a bubble chart showing website traffic for the last quarter, with page views as circle size, bounce rate on the x-axis, and average time on site on the y-axis."
• "Generate a bubble chart comparing sales performance of different products, using revenue as circle size, marketing spend on the x-axis, and customer satisfaction on the y-axis."
• “Can you visualize population density versus median income for US states in a bubble chart?”

Tips & gotchas

The skill requires familiarity with data formatting suitable for Chart.js (arrays of objects). Ensure your input data is properly structured to avoid errors or unexpected visualizations.