How to Design Interactive Bubble Charts
Designing an interactive bubble chart is based on a scatter chart. Bubbles replace the dots in the scatter chart and like a scatter chart, there must be three values. Often used for financial data, the bubble size represents values. The larger the bubble is, the larger the value it represents. Data should be arranged in rows or columns, and the "X" value should be the first data and the "Y" value the second. The last value is "Z" and will be the value that determines the bubble's size.
Other People Are Reading
Instructions
-
-
1
Decide what information to display through a bubble chart. A bubble chart needs three series of data. An example is the numbers of products sold, the amount of the sale and the percentage of the market share. The third value determines the size of the bubble.
-
2
Create the bubble chart through a chart program, such as Excel or SmartDraw, or through a graphic program that's able to create charts, such as Illustrator.
-
-
3
Make extra images for interactive effects. For example, if a user clicks on a bubble or drags the mouse over a bubble, a new image or information will appear, such as information on the product or salesperson.
-
4
Import the bubble chart and images into an animation or HTML program. Add interactivity through the program with mouse over and clicks. For example, if using an animation program such as Flash, add interactivity by adding the extra images to the mouse over or when the user clicks on a bubble. The same technique may be applied to other programs, such as HTML code with hot spots that will display a new image when moused over or clicked.
-
1
References
Resources
- Photo Credit Creatas/Creatas/Getty Images
