Better BI

The previous post explored the geometry of the Bullet Graph Body. This post explores the geometry of the Bullet Graph Scale and the alignment of the Scale’s elements with the Body and the Body’s elements.

See Bullet graph design: nomenclature for the nomenclature used in describing the Graph Body, Text Label, and Quantitative Scale.

This is the example Bullet Graph used in this exercise, copied from Stephen Few’s Bullet Graph Specification, without the Text Label:

For the purposes of this article the Scale’s elements have been rendered somewhat oversized; for example, although the Scale Labels are identified as Arial 6pt text, they are relatively large compared to the graph Body. This makes it easier to illustrate the alignment of the Scale’s elements with each other, and with the Body’s elements. Once the relationships have been rationalized and an API for Bullet Graph creation is developed it will be easy to configure the various dimensions, colors, and other properties of the graph to provide enough flexibility to render high quality presentations in different contexts.

As shown here, the graph’s Body and Scale are abutted, joining seamlessly at their common edges.

The individual Scale marks are laid out evenly, spanning the full length of the Body, with projections on the baseline and terminus of the body to accommodate the multiple requirements for: 1) aligning the midlines of the Ticks and Labels; 2) aligning the leftmost Scale element’s Tick with the Body’s baseline; and 3) aligning the rightmost Scale element’s Tick with the Body’s terminus. These are show below.

Each point on the Scale is identified by a Tick mark and a text Label. The Tick is used to precisely denote the point on the graph corresponding to the Scale point’s value. As the Tick has a definite width (it’s really a rectangle), it’s essential to be specific in determining how to align it with the Graph Body in order to accurately and precisely denote the correct value. Although seemingly simple, there are subtleties involved, as shown in the examples below.

The leftmost Scale point’s Tick mark is left-aligned with the baseline of the Graph Body. This is different from the other Scale Tick marks, but is a visual convention that works well. As always, the Label is center-aligned with the Tick; this will almost in all cases cause the Label’s bounding box to extend to the left of the baseline of the Body. Handling text has particular considerations—look for a future article on handling the various text elements found in Bullet Graphs.

The Scale’s midpoints’ Tick marks are right-aligned with the corresponding value, scaled to match the length of the Graph Body. The importance of this alignment is revealed when the Tick’s value corresponds to the value of one of the Qualitative Bars, in which case they are right-aligned on the value. The basic principle here is that the leading edge of the element corresponds to the value being visually coded.
The Label is center-aligned to the Tick.

The rightmost Scale point’s Tick mark is right-aligned with the point’s value, scaled to the Graph Body. This is the same convention as for the midpoints.
The Label is center-aligned to the Tick; this will cause the label to extend to the right of the Graph Body, in almost all cases.