Note: Images may be inserted into your messages by uploading a file attachment (see "Manage Attachments"). Even though it doesn't appear when previewed, the image will appear at the end of your message once it is posted.
Register Latest Topics

  Author   Comment  

Posts: 100
Reply with quote  #1 

Prompted by a question from a reader, in his July/August/September 2016 Visual Business Intelligence Newsletter article, Stephen examines Bar Widths and the Spaces in Between, to determine whether the width of bars in graphs and the space between bars matter. He believes they do matter and gives some guidelines based on his experience and perception. He also invites the Infovis research community to test and improve upon his recommendations.

What are your thoughts about the article? We invite you to post your comments here.



Posts: 1
Reply with quote  #2 
One aspect that seems to been over looked in this article is when the width of the Bar is actually used to encode a value... For example, creating a Totem Pole style visualisation. In these cases obviously the width of the bar will vary with some value/measure and as a result will need a different level of consideration.

Just a thought,

Posts: 853
Reply with quote  #3 

I intentionally ignored the variation of bar widths to encode a second quantitative variable, because it's an ineffective practice. We perceive the length and width of bars integrally rather than separately, which means that we cannot perceive both simultaneously as separate variables, but instead perceive their combination in the form of areas as a single variable. Furthermore, when the widths of bars vary, it distracts from reading and comparing the lengths of bars. And finally, it is difficult to compare the widths of bars because, unlike their lengths, they do not share a common baseline. When you need to display two quantitative variables for the same set of categorical items, it works much better to create two bar graphs and arrange them either side by side if the bars are horizontal or one above the other if the bars are vertical, with each graph representing one variable only.

Stephen Few

Posts: 192
Reply with quote  #4 
Similar results, different approach for dynamic environments

As a programmer, when I first had to find the "ideal" width of a bar, I came up with a slightly different calculation approach. Spaces designed for graphs are rarely fixed, they adjust due end user screen properties: resolution, dpi, ratios and sometimes user interaction (resize grips or splitters, show/hide widgets...). More than that, due the dynamic use of data filters, is no way we can know in advance the amount of items displayed in a graph. For the same designed size of the chart we may have 1, 2, 10, 20 or more bars they suppose to fit in exactly the same designed space. So, for me in a dynamic environment it was never an option to control the ratio between the length and width of bars, but to find a pleasant ratio between bar widths and the spaces between.

The logic of the algorithm in its simplest form is the following. I divide the categorical axis space to the amount of adhoc selected items obtaining what I call the "item space". In the item space I reserved 70% for the bars, having left 2x15% for space between bars. That makes the space between two adjacent bars 30% of item space, which makes the ratio between bars space and bars width of almost 50% (30/70 = 43%). 70% was chosen the default value after several visual checks for bar widths ratios between 50 and 100%, graph aspect ratio between 1/5 and 5/1 and items count between 1 and 50. I have to say that my initial choice of 66.6% (which gave an exact 50% ratio between space between bars and bar width 33%/66%) was later slightly increased to 70%.

In conclusion, even my approach was to find the "ideal" bar width within the calculated item space instead of finding the ratio between bar distance and bar width, the results are quite similar. A default value of 70% (bar width within item space) with a variation between 50 and 100% is equivalent with 43% ratio between space between bars and bars width (variation between 100 and 0%).

Whatever the ideal ratio between bar width and length will be ever determined, it will be almost impossible to respect that in a dynamic environment, where graph dimensions and items count are variable.

Other mentions:

1. The histogram is a special case of a bar chart, where by convention, the space between bars is removed.
2. Another special case is when due the reduced available space for a graph or the existance of too many items, the space between bars can be reduced to a small amount of pixels to give more visibility to the bars. (for instance if available space for an item would be 10 pixels, I would use 8 for bar width and only 2 for bars space)
3. Pixel precision for low resolution displays. Word sized bar charts should be designed differently both bars and spaces require pixel precision calculations. To explain: if I have a space of 80 pixels to represent certain 12 months values, I would use exactly 5 pixels for bars width and 1 pixel for bars space, making use of 73 pixels instead of 80, but displayed evenly and very precise. Any subpixel rendering engine which would attempt to display in non-integer coordinates such of graph will have a blurry result.


Posts: 853
Reply with quote  #5 

Thanks for pointing out that it is sometimes appropriate to remove the spaces between the bars. The primary case is when bars are being used to display a frequency distribution in the form of a histogram, as you mentioned. Removing the spaces in this case makes it easier to see the shape of the distribution. It also makes sense to remove the spaces when displaying a frequency distribution because the categorical axis hosts an interval scale consisting of equally sized bins along a quantitative range rather than discrete items, so allowing the bars to touch to represent the continuous nature of the scale is appropriate. The other occasion when I often remove the spaces between the bars is when I use a bar graph to display parts of a whole. In this case, having the bars touch visually suggests that the parts are related to one another in that they comprise a whole.

Stephen Few

Posts: 44
Reply with quote  #6 
Prompted by dans's comment, I will share my latest heuristic for a variety of bar settings.

My starting point was a combination of expert guidance and observations from nice exemplars:
  • Few: gap between 0.5 and 1.5 of bar width (now 0.5 and 0.75)
  • Knaflic: less than 1.0, but not so small to make area seem relevant.
  • WSJ Guide: 0.5
  • Horizontal bars tend to have smaller gaps.
  • Charts with many bars tend to have smaller gaps, often less than 0.5.

For single bars (which includes stacked bars and bullets), use a gap that decreases with the number of bars.
  • Linear from 1.0 to 0.75 for 1 to 9 bars
  • Inverse curve from 0.75 to 0.07 from 9 to 100 bars. (9/n)
  • Constant beyond 100.
  • 0.0 when there are less than 4 pixels per bar.

For grouped bars, the gap size depends on the number of bars in each group, g: 0.75 * sqrt(g).


For horizontal bars, all of the above are scaled by 0.8.

I don't take bar height into account when computing the gap. I'm worried doing so would create too much unexpected variation from graph to graph, especially with dynamic displays.

(I hope these animated GIFs work without being too annoying!)

Previous Topic | Next Topic

Quick Navigation:

Easily create a Forum Website with Website Toolbox.