What is a bubble chart

      When you have a table with 3 related dimensions of data, how do you represent it on a flat 2D chart? Put three column charts side by side, one for each dimension? Or use two XY-plot charts? But both of them will be ineffective in putting together all the 3 parameters in one elegant visualization. Time to say hello to the bubble chart.

JavaScript charts draft lines

Chart from JavaScript chart library VanCharts

What are bubble charts?

      Bubble charts or bubble graphs are extremely useful charts for comparing the relationships between data objects in 3 numeric-data dimensions: the X-axis data, the Y-axis data, and data represented by the bubble size. Essentially, bubble charts are like XY scatter graphs except that each point on the scatter graph has an additional data value associated with it that is represented by the size of a circle or “bubble” centered around the XY point.

      Column charts and line charts have 2 axes commonly – a numeric axis and a categorical axis. The Y-Axis is the numeric axis for column and line charts. This means that the quantitative magnitude of the plot is indicated by the position of the plot with respect to the Y-axis. Bubble charts are different, because both axes of a bubble chart are numeric. Hence, the position of the plot is an indicator of two numeric values. The area of the plot is an indicator of the magnitude of the third numeric characteristic.

JavaScript Chart library VanCharts

      The bubble chart above is supposed to help you manage your investments in equities better. The X-axis and the Y-axis are used to denote Age of Investment and Return on Investment respectively. Apart from these 2 parameters, what is the third parameter that you would be interested in? Obviously, how much have you invested in a particular equity? So that is denoted by the area of the plot. Quite clearly, A has the largest ROI and the largest investment size as well.

      But you could have made that out from the data table itself. How did the bubble chart help you? Since we have taken up a very basic example, only 5 investments have been shown. But in reality, the number of investments will be much higher. In that case, the bubble chart will help you form a mental visualization like this:

JavaScript Chart library VanCharts

The same bubble chart has been divided into 4 quadrants. Depending on the parameters, each of the quadrants has a particular meaning for you.

      Quadrant 1 - Best investments: Investments that have given high ROI in a short period of time. What else could you ask for? These investments are like jackpots.
      Quadrant 2 - Good investments: Long Age of Investment but great ROI. If you are planning to make further investments, you would surely invest in the equities in this quadrant.
      Quadrant 3 - Not-so good investments: Low ROI over a long period of time. Further investment on equities in this quadrant would be your last bet.
      Quadrant 4 - Decent investments: Manageable ROI over a short span of time. If you are thinking short-term investment, then this is your quadrant.
With a larger number of data plots, mental divisions like this are very helpful in determining the next course of action.

Where can bubble charts be used?

      Apart from using JavaScript bubble charts for investment, there are a whole lot of other places where bubble charts can be used. Some examples to stir up your imagination:

To see if higher promotional expenses lead to more footfall and in turn to more revenue for a bunch of retail stores for a month: The X-Axis can have the average daily footfall, Y-Axis the promotional expenses and the area of the plot will show the revenue generated by the outlet for that month. This can help find out which store was able to promote itself successfully and whose promos failed.

Checking if higher CPC leads to higher clicks and better conversions in PPC Campaigns: To check if your excess spending on increasing the CPC to get better ad positions are getting you more clicks and finally leading to more conversions, a bubble chart will be useful.

Bubble Charts in Business

      Bubble charts are often used in business to visualize the relationships between projects or investment alternatives in dimensions such as cost, value, and risk. By visualizing project portfolios using bubble charts, you can find clusters of relatively attractive projects in one area of the graph, such as areas of high value, low cost, and/or low risk, and compare them with relatively less attractive projects in a different area of the graph, such as an area of low value, high cost, and/or high risk.

In the bubble chart examples above, the most desirable quadrant is in the upper left (higher profit and lower cost) and the least desirable quadrant is the lower right (high cost and lower profits). Bubbles with larger areas have higher probabilities of success.

As you can see, studying a project portfolio in several bubble charts using different dimensions of business relationships can be a great help in making insightful business investment decisions.

Variants of the bubble chart

      What we have discussed till now are single-series bubble charts. You can also have multiple series of data plotted in the bubble chart. The series will then have different colors with the legend pointing out which color refers to which data series.

      In our Investments – Equities example, we can also show Mutual Funds in the same bubble chart.

JavaScript Chart library VanCharts

      Using bubble charts like this, you can see view all your investments at once. Then you can decide which investments you should pump more money in and which ones should you divest.

Displaying zero or negative data values in bubble charts

      The metaphoric representation of data values as disk areas cannot be extended for displaying values that are negative or zero. As a fallback, some users of bubble charts resort to graphic symbology to express nonpositive data values. As an example, a negative value v < 0 can be represented by a disk of area v in which is centered some chosen symbol like "×" to indicate that the size of the bubble represents the absolute value of a negative data value. And this approach can be reasonably effective in situations where data values' magnitudes (absolute values) are themselves somewhat important—in other words, where values of v and -v are similar in some context-specific way—so that their being represented by congruent disks makes sense.

      To represent zero-valued data, some users dispense with disks altogether, using, say, a square centered at the appropriate location.

Data Proportional to Radius or Area?

      Bubble charts can be misleading if care isn’t taken to understand the relationship between bubble size and the data the size represents. If the data is proportional to the bubble radius, the data will be skewed because bubble area grows exponentially as the square of the radius (Area=π*r^2). For a proportionally accurate representation of the data, bubble data should be represented directly by the area using the circumference of the circle, which grows the bubble area linearly in relationship to the diameter (circumference=π*diameter).

      This isn’t to say that one should never use the radius to represent the data as it can be useful if one wants to exaggerate the differences between the data objects or projects. For example, if the bubble data is similar in magnitude and you want more easily contrast the bubbles. However, it should be specified on the chart as to what representation is being made. In Bubble Chart Pro™, one can choose between “Bubbles proportional to area” or “Bubbles proportional to radius,” and the selected relationship is stated on the resulting bubble chart.

Incorporating further dimensions of data

      Bubbles are usually differentiated by color, pattern, number or name labels, or a combination of these. Colors are usually adequate for small numbers of bubbles, but subtle differences in colors become difficult to distinguish in larger number of projects. Therefore, numbers corresponding to a chart legend becomes a more useful method of distinguishing bubbles.

      Hiding the bubble chart legend and using labels is another way to create more room in a bubble chart and easily identify the bubbles.

      Additional information about the entities beyond their three primary values can often be incorporated by rendering their disks in colors and patterns that are chosen in a systematic way. And, of course, supplemental information can be added by annotating disks with textual information, sometimes as simple as unique identifying labels for cross-referencing to explanatory keys and the like.

Crowded or Congested Bubble Charts

      Finally, congestion and overlapping bubbles can be a problem with JavaScript charts that have large numbers of bubbles or tight clusters of bubbles. This is a significant barrier to using bubble charts for analyzing such data, however, using features like the “zoom-boxes” in Bubble Chart Pro™ to instantly expand congested areas makes analyses of these types of JavaScript charts much easier.