{"id":62882,"date":"2012-07-27T00:00:00","date_gmt":"2012-07-27T00:00:00","guid":{"rendered":"https:\/\/rockcontent.com\/blog\/45-ways-to-communicate-two-quantities\/"},"modified":"2025-09-15T14:52:55","modified_gmt":"2025-09-15T17:52:55","slug":"45-ways-to-communicate-two-quantities","status":"publish","type":"post","link":"https:\/\/pingback.com\/en\/resources\/45-ways-to-communicate-two-quantities\/","title":{"rendered":"45 Ways to Communicate Two Quantities"},"content":{"rendered":"

Back in 2010, I was giving a workshop on interactive data visualization in Lima, Per\u00fa, discussing whether a dataset has a unique or at least an ideal way to be visualized. For a simple data structure — a list of some hundreds of numbers, for instance — around half of 20 participants were convinced that there’s one way that is clearly better in communicating the data, regardless of the unit of the values, their range, meaning, context and possible aim of the visualization. This discussion actually came out as a consequence of another idea, which resonated with most participants, as well: that there should be a guide that indicates the best way to visualize each possible dataset. So I proposed the following exercise: <\/p>\n

\n

let’s try to find all possible ways to visualize a ludicrously small data set of two numbers. Afterwords, let’s try to pick the best visualization. <\/p>\n<\/blockquote>\n

With such a tiny dataset, you would think we would complete both exercises in less than 5 minutes. Yet, we spent more than two hours without having actually accomplished either of the two tasks. Not only was the number of possible ways to visualize two values far higher than expected, but also each single visualization method admitted multiple and interesting variations and opened new questions and discussions. The following is a list of different ways to visualize two numbers. In many cases, the visualization depends directly on the unit, meaning, interpretation and context of the values. Some of the examples might be seen as variations of the same theme, others will be perceived as excessively eccentric or even esoteric. On the other hand, I’m sure many of you will come up with visualization methods not included in the list (in which case, please include them in the comments!). I explain only some of the methods; in general they are clear and well known. Some have a very bad reputation, but I won’t get into that kind of discussion. I’ll also avoid the discussion about which method is better according to the context and goal. <\/p>\n

75 and 37<\/h2>\n

1. writing, number notation <\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n

  2. squares <\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n

  3. repeated icon <\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n

  4. hundreds, tens, units, decimals\u2026 represented by squares <\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n

  5. bars <\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n

  6. line graph <\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n

  7. percentages bars <\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n

  8. spliced bar <\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n

  9. proportion <\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n

  10. interval <\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n

  11. squares merged <\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n

  12. percentages in squares <\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n

  13. pie charts <\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n

  14. donut chart <\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n

  15. circle areas <\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n

  16. semi-circle areas <\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n

  17. circle and external ring <\/p>\n

\n
\"\"<\/a>
It might be interpreted that the second value is represented by the complete bigger circle, including the hidden surface. I’ve made some tests on this, asking people, and obtaining different interpretations.”]<\/figcaption><\/figure>\n<\/div>\n

  18. co-centered circles <\/p>\n

\n
\"\"
Can be interpreted as the case 17.<\/em> Adding a shadow or even some tridimensional representation are attempts to ‘separate’ the two circles, thus trying to avoid the ambiguity.”]<\/figcaption><\/figure>\n<\/div>\n

  19. square divided <\/p>\n

\n
\"\"
Same ambiguity problem as in 17.<\/em> and 18.<\/em>: the reader can interpret that the bigger number is associated with the entire square, or only with the visible part.”]<\/figcaption><\/figure>\n<\/div>\n

  20. shape divided <\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n

  21. square surfaces <\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n

  22. shape surfaces <\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n

  23. different shape surfaces <\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n

  24. icon surfaces <\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n

  25. icon height <\/p>\n

\n
\"\"<\/a>
In this case, it is the metaphor and an explicit message making it clear that the values are represented by the height of the icon and not its surface.”]<\/figcaption><\/figure>\n<\/div>\n

  26. volumes <\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n

  27. special metaphors <\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n

  28. gray tones <\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n

  29. color scale <\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n

  30. geometric proportions <\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n

  31. horizontal\/vertical proportions <\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n

  32. coordinates <\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n

  33. angles <\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n

  34. geographic coordinates <\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n

  35. values associated to countries <\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n

  36. density <\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n

  37. percentages \/ density <\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n

  38. dashed <\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n

  39. nodes and connections in a network <\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n

  40. parameters of a mathematical function <\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n

  41. harmonic frequencies <\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n

  42. pulses frequencies (in pulses per minute) <\/p>\n