Design of graphs. Scales

There are entire fields of design that are not perceived as a product of someone's work. Two examples: street signs and computer graphs.

A plate with building number can be used by millions of people every day and none of them think that it was ever designed by somebody. Its users are simple people.

Graphs are used by financial analysts, and they are professionals. But even for them, a graph on the screen is a product of an algorithm, although before creating this algorithm, the graph had to be manually designed. And this is a huge, painstaking work with elements of mathematics.

Horizontal scale

Designing graphs begins with the choice of axes. Usually graphs are plotted in two axes. Mathematicians call them the abscissa and ordinate, but we will call them the horizontal and vertical axes.

In the base of an axis lies a scale, i. e. a line with marks. Usually the horizontal axis of a graph is the time scale. It can marked with years, months, days, hours or minutes. The vertical axis can be anything. In finance, this is most often the stock price in dollars.

Default graphs are ugly. Attention is often distracted by a contrast grid, and date labels are too long and messy.

The grid can be faded, leaving the frame a little darker. Dates can be shortened to the first three letters of the month name. We will deal with the missing years later, for now we will label only January.

Vertical axis

The vertical axis is not always placed to the left. Financial analysts use the term “right edge”. The information closer to the right side of the graph is much more valuable, and the most important price is the latest one.

For this reason, in financial systems it is accepted to place the vertical scale to the right, and to ease finding the latest price by highlighting it with a color and a dotted line that follows the rightmost point of the graph.

To improve readability, it is customary not to repeat the unit of measurement (dollars) each time. It can be labeled just once as the name of the scale.

On the background of the light grid and neat labels, the 2-pixel thick line of the graph seems excessive, and the axes marks create noise. Author has experimentally established that the thickness of the graph line from 1.3 to 1.6 pixels is read most easily, and the axes marks can be removed as they are represented by grid lines.

Unlike mathematics, in economics graphs seldom start at zero. GDP, economic data and stock prices are measured in tens and hundreds of dollars. If counted from zero, the graph will shift up, and this will burden the analysis.

Therefore the vertical scale must be adjusted to the values of the graph within the visible area. The bottom point of the scale should be just below the minimum of the chart, and the top point should be just above the maximum. Just below and just above — for the graph to not touch the edges.

The step of the vertical scale is chosen by dividing it into several equal parts. The distance between the marks should not be too wide and not too narrow. For instance, it can be from 40 to 90 pixels. Marks cannot always be labeled with round numbers, but this should be strived for.

Two-level scale

In finance, graphs are often read in different scales: years, quarters, months, weeks, days, hours, minutes and seconds. A drop-down list is usually used for switching between them.

Let us take a scale and look how the labels will change on the time axis. Years:

Quarters:

Months:

Weeks:

Days:

Hours:

For convenience, let us place all scales side by side.

Problems start with the monthly scale. It is impossible to determine the year from it, except for the label of January. From the hourly scale, even the day cannot be determined.

It could be a good idea to label the year and day on each mark. But this is impossible. Labels will not fit, even if the year is shortened to two digits.

This problem can be solved by a two-level scale, which uses two scales at once. Under the the main scale, which is marked as usual, placed the top-level scale, which is marked intervals.

The two-level scale looks unaccustomed, but perfectly solves the problem of labeling.

Among popular software, such scale is used in the Bloomberg terminal.

Scaling

Graphs must scale, i. e. adjust to the width of the screen in the desired range. During scaling, the graph will shrink or expand, but only horizontally. The vertical axis will not change.

During scaling down, the marks on the horizontal scale will become closer to each other, and at some point the labels will interfere.

To avoid this, after reaching some critical density every second mark must be discarded from the scale.

Scaling should happen on mouse scroll, but the plus and minus buttons can be used as an alternative.

Ranges

It is often necessary to analyze the graph within a specific range, such as a year or a month. Shortcuts can be used to quickly switch the range.

Shortcuts are placed above the graph. This is usually a series of buttons labeled the same way in all financial software. 1D means 1 day, W means week, and so on. YTD (year to date) means range from the beginning of the year until today.

Click on the shortcut scales the graph exactly to the selected range.

Navigation

The graph should move left and right if dragged with mouse. In this way the analyst will be able to browse the history of prices into the past or future.

When the graph is moved into the past, the latest price will be left behind the frame, and the graph line will touch the border with no room for the dotted line.

It is useful to add a button that would scroll the chart forward to the latest date. This button can be placed in the lower right corner.

Sometimes it is useful to scale the vertical axis as well. For example, the amplitude of the graph may be too large and needed to be tighten. This can be done, for instance, by pulling the axis up or down. When hovering over the axis, the cursor will become the same as when the window is resized; a hint will be displayed.

By holding the left mouse button and draggin down, the graph could be shrink vertically, relatively to the center. The axis should adjust to the new scale.

Vice versa: when pulled up, the graph will expand. The same method can be applied to the horizontal axis to make sure that the interface works in a consistent way.

Holding down the Ctrl or ⌘ button can activate a free pan of the graph along two axes. This is a rarely needed operation. It should not be turned on without pressing a modifier key, otherwise it will prevent user from moving the graph along the horizontal axis only.

A scale reset button is also needed, that will return the axes to their normal state.

Nonlinear scales

In finance, graphs are often viewed not in absolute, but in relative units. That is, as a percentage.

The leftmost point of the graph within the visibile range is taken as 100 %. On the vertical axis, opposite to this point, a mark of 100 % is placed. The remaining points are converted into percentages relatively to this mark.

Marks can be labeled in other way. Instead of 100 %, the vertical axis is marked with 0 %. Values above this mark are labeled with a plus sign, values below it are labeled with a minus sign.

The logarithmic scale is even more important than the percentage one. It is impossible to professionaly analyze graphs without it.

In finance, it is not the absolute change that is important, but the relative change. For instance, an increase in the stock price from $100 to $200 and from $1,000 to $2,000 are both 2× increase. However on the graph the first increase will be tiny, because it is negligible when compared to the second growth.

The logarithmic scale is built in such a way that increase by N times will have the same amplitude anywhere on the graph.

On such a scale, analyst can compare the 2× price increase a century ago and in the last year, and see the same change. At the same time, the vertical grid becomes uneven, and the marks on the axis are labeled unusually.