1. Overview

In this tutorial, we’ll study how to automatically layout the gridline intervals in a chart.

2. Placing Grid Line Intervals

In our article on choosing a linear scale for the y-axis, we discussed how to identify the position of the ticks on an axis for a line chart. In this tutorial, instead, we analyze a related algorithm, that’s better suited to determine intervals in for the gridlines of a bar chart.

We first start with a chart that represents a distribution. For example, a chart containing the daily price of 10 independent stocks:

Rendered by QuickLaTeX.com

Then, we want to determine the correct number and placement of ticks on the y-axis. Our objective is to identify the correct spacing between ticks, that will let us understand the relative placement of the observations with one another.

3. Mistakes to Avoid

The range of the distribution is therefore the primary important constraint we have. Within it, we want to cover more or less uniformly the whole chart with gridlines. We also want, however, to avoid two common mistakes as we place the gridlines.

The first is the placement of too few lines in the range of the distribution, as this wouldn’t be conducive to understanding:

Rendered by QuickLaTeX.com

The second is the placement of an excessive number of lines. This would, in fact, lead to the risk of the overlapping between ticks, and would also crowd the image with unnecessary gridlines:

Rendered by QuickLaTeX.com

4. The Middle Way Leads to Understanding

Instead, we want the gridlines to cover the chart well enough, but also to leave enough room among them to let us see both the ticks and the value of the variables. If we do things properly, we then obtain a chart that’s insightful but also sufficiently empty:

Rendered by QuickLaTeX.com

5. What Numbers Are Nice?

The thing to do now is to determine what numbers are nice ticks for the gridlines and which ones aren’t.

There’s a branch of pedagogy, mathematics, and graphics that are dedicated to studying the mechanisms for understanding mathematics through vision. Thanks to those disciplines, we can aprioristically identify the desirable interaction between numbers, semantics, and the human mind, which leads to maximal understanding by the reader.

We know, for example, that multiples of 1, 2, and 5, in any order of magnitude, are preferable to most readers. As an example, we can see that the numbers in the column to the left look better than the numbers in the column to the right:

Rendered by QuickLaTeX.com

We also know that this consideration is valid regardless of the scale:

Rendered by QuickLaTeX.com

This means that there are scale-free methods for identifying nice numbers. This is important because if we identify a list of nice numbers in a predetermined interval, we can then scale it up or down as necessary. If, for example, we agree on a list of nice numbers in the interval [1,10], the same list will be valid in the interval (10^x, 10^{x+1}), provided we multiply it by 10^x.

6. The Algorithm

We can therefore define an algorithm that identifies the span of the ticks for gridlines that correspond to nice intervals. The algorithm takes as an input the range of the distribution and the maximum number of ticks, as defined by the user or as parametrized by us. Upon its termination, it returns the list of ticks that corresponds to a nice interval between the gridlines:

gridlines

The algorithm requires the separate storage of a list of unscaled ticks, in this particular implementation. Alternatively, we can use the selected value from the lookup table times the magnitude as the interval between ticks. In this case, we place the ticks at each interval, starting from the lower bound of the distribution.

As a lookup table we can define our own, any, provided it’s in the interval [1,10] and that both 1 and 10 are present. A common table is the one comprising the elements [1, 2, 2.5, 3, 5, 7, 7.5, 10], but any other can be used instead.

7. Conclusion

In this article, we studied an algorithm for placing nice gridlines on a bar chart.

Comments are closed on this article!