How to represent quantity in an X / Y axis grid without taking too much space?

Question

We have a graph that displays the symptoms (y axis) and the ages of people who have them (x axis). The bigger the circle, means more people of the same age range share the same symptoms.

Example of data that can be plotted in the graph:

30 Patients, Aged 25-34, have Headache symptoms. (bigger circle)

2 Patients, Aged 55+, have Rash symptoms. (very small circle)

My question is, is there a better way to represent quantity in this graph without resorting to circle size? Because the circles may overlap and make it hard for people to see where each circle is located. And the bigger circles take too much space.

Answer 1

Why not use a heat map? Instead of differently sized bubbles that overlap, the quantities can be represented by color intensity. Heat maps are also an x/y-axis chart.

You can play with the above pictured demo here: https://demos.zingchart.com/view/VNK075JU

There are also different heat map aspects you can apply. A heat map with a size aspect shares some similarities to a bubble chart, while avoiding the overlap issue.

Demo: https://demos.zingchart.com/view/HCD56QCU

Or with a vertical aspect:

Demo: https://demos.zingchart.com/view/D218JDUZ

See this Heat Map Tutorial for more information. This chart type allows for extensive x/y-axis scale configuration, and you can use tooltips with tokens to display information about each quantity.

Disclosure: I'm a member of the ZingChart team. Let me know if you have further questions.

Answer 2

Is there a better way to represent quantity in this graph without resorting to circle size?

Yes - a data table, while less sexy, would put across the information in a far more accessible way.

I would go back to your original reason for creating this visual and question exactly what it is your image is attempting to convey. What's your point?

It may be that using separate charts can allow you to highlight the key information more accurately. For example if your point is that there are disproportionately more older 'ache' sufferers, then a pie chart or percentage bar-chart could achieve this.

Answer 3

You can use the visualization below:

This graphic is pretty descriptive and is in similar domain to yours. Hope you like the idea.

P.S. Image taken from dailymail.co.uk

Answer 4

Do you need to show all of this information at once? If so, a table would probably be simplest – you could combine this with the heat map to quickly show which the highest/lowest values are or see any trends.

The question is whether you would need to view the number of patients with body ache in the 13-17 group at the same time as the number of headaches in 18-24. If not, it may get the message across better to either show all data for an individual age group at once, or all data for an individual symptom at once, e.g. by using a pie chart and selecting the relevant group from the dropdown menu in your original example.

Answer 5

Idea 1 It sounds like you are trying to understand trends for different symptoms and people's ages. First, I would make you y axis relate to sum of the patients with that ailment. Then I would put symptoms on the color. This will allow you to see more clearly.

This will help solve your data ambiguity issues (not sure how many people have cough).

Idea 2 You could also remove the bins for age and plot each dot individually with opacity and a slight border for each dot. This will give you a nice clean line and clusters around the ages. This will also give you a sense if data is weighted around the boundaries for two age bins.

Idea 3 If your audience is less data savvy... Separate each symptom into its own bar chart. You can stack them vertically. Make sure the y axis is the same for all the charts if comparison is a desire.