I'm displaying some data related to categories using a series of overlapping bubbles.

  1. Bubble sizes correspond to category data value so one can compare categories between each other based on bubble size.
  2. Within bubbles a smaller bubble displays category related data according to bubble size. The more relevant the data, the larger the inner bubble.
  3. When inner bubble exceeds outer bubble size it shows as an outline to the original bubble but its size is capped to 110%.
  4. Categories are displayed next to the corresponding bubble and that's the only information I have on the bubble series.

The problem

Bubbles don't display any quantitative information so there's no way to distinguish between 0% (no inner bubble) and 100% (inner bubble of the same size than outer one).

I was thinking to always display inner bubble of 2% size which would partially solve the 0% problem, but wouldn't solve the 100% one.

I was wondering what would be a better way to display this data using bubbles without any problem extreme values?

Following image is just a partial example of bubble display. enter image description here

3 Answers 3


If you need to use a bubble chart (which can be tricky for users to grasp area size in a circle, as opposed to a bar chart, which can also be sorted for quick scanning, you could try using texture to indicate this.

Here's a quick and dirty sketch (i would refine the texture; this is just a quick noisy start to illustrate):

enter image description here

This way you don't have to add another color interpretation for the user, especially as you have other colors already that represent other category data values.

I don't know your constraints, but you might test w/ users to see if their assessment of volume represented by a circle is as accurate as a sorted bar chart.

  • 2
    +1 for your critique of using diameter to represent this. A 100% increase in area is represented by only a 41% increase in radius. This is wrong wrong wrong and you're doing a huge disservice to your users... Jul 10, 2017 at 15:46
  • Im aware of the area/radius problem. a 50% can either be displayed as 50% area of the whole bubble or as a 50% radius of the whole bubble. Either one doesn't feel like 50%. A better representation of percentage would likely be defining a function that defines middle between 50% radius and 50% area. But that's a completely different problem not related to the 0% and 100% issue I'm having. Pattern is a nice solution although I would be vary of using it in HTML because of browser support... The proposed outline seems a more reliable solution ATM. Jul 10, 2017 at 16:47
  • 2
    @RobertKoritnik Browser support is pretty good, I'd say. Jul 10, 2017 at 17:39
  • One problem with pattern... Small circle sizes. Pattern can only be dense to a particular point. Lower than that and it's hard to distinguish circle's size... Jul 10, 2017 at 20:55

Could you start with an empty bubble for 0% (which would make sense intuitively) and then fill in the color as more percentage?

This lets you easily distinguish between 0% and 100% and if you have a ton of bubbles it makes it easier to pick out which ones have data as the rest will be blank.

enter image description here


What happens when the bubbles overlap to the point that you can't see the inner bubble of the behind-most bubble?

Setting aside that concern, I see Mike M already addressed the option of a pattern AND the problem with readability of bubble graphs, but I'd already started a similar answer... so!

1) Pattern instead of color. Less to confuse.

2) If you must use a bubble-style graph... perhaps you would consider squares. Area of circles is very difficult to decode. See example.

box bubble graph with pattern

  • Bubbles overlap always for approx. 10% only. They never overlap neither more or less. That's a constant. Jul 10, 2017 at 20:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.