## Bullet graph design: Body Geometry

Examining the geometry—the dimensions of and relationships between—the various elements of the body and quantitative scale.

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

This is a copy of the first Bullet Graph Stephen Few presents in the Bullet Graph specification, without the Text Label.

This study is an exercise in determining the geometry, dimensions, and alignment of the various elements of the Graph in order to assist the creation of a detailed design specification for other bullet graphs that conform to this example and can be created programmatically.

For the purposes of this article – describing the geometry and relative alignments of the graph’s components the Scale’s elements have been rendered somewhat oversized.

This diagram has exploded the different bars of the graph to reveal their layering. (Well, actually, it slipped the bars down, but (exploded” is a much more dynamic term.)

The top-down ordering shown matters in that each bar hides everything beneath it in the final rendering, making it much easier to build the final image.

The * indicates that there may be more than one middle bar, i.e. when there are more than three Qualitative Ranges.

In this diagram the Comparative Measure is placed on top of the Performance Measure; the specification isn’t clear on this and as long as they are both are colored 100% black and are have these dimensions and positions it seems not to matter. (*while this may not matter in normal circumstances it may become significant in some edge cases. Look for further studies on this and related topics*)

As illustrated in this diagram the baseline dimensions of the graph have been normalized to 200 units wide and 12 units high. (*Inkscape assumes a unit of pixels if none is specified, and this works well for our purposes.*)

The dimensions of 200×12 provide a good approximation of the dimensions of the Canonical Bullet Graph, and have the advantage of providing easy-to-work-with integer values for most of our calculations employed in programmatically constructing bullet graphs. The 200 units width is easy to scale for both absolute and percentage scales, and the 12 units height makes it easy to center the Comparative and Performance measures along the horizontal axis for a variety of the possible values that their heights may end up being (*12 is easily divided into 1/6s, 1/4s, 1/3s, 1/2*).

It’s assumed that the bottom Qualitative Range Bar will span the full 200 units width, and that the other graph elements will be scaled proportionally to it.

The Performance Measure bar is defined to be one-third of the width of the graph baseline value for the bar group, or 4 units. When rendered on top of the bar group this results in the Performance Measure occupying the center third of the bar group’s height, which provides for good visual discrimination between the elements.

The Performance Measure is left-aligned with the graph bar group and its width is proportional to its fraction of the maximum scale value of the graph, normalized to the 200 units of the width of the graph bar group.

The Comparative Measure measure is defined to be a rectangle 2 units wide and 10 units high.

When rendered horizontally aligned atop the graph’s Qualitative Range bars there is a 1 unit gap on either side of the Comparative Measure, aiding the viewer’s visual location of its position. When rendered atop the Performance Measure the Comparative Measure extends 3/4 of the way across the visual gap between their outer edges of the PM and the edge of the bar group.

The CM’s y coordinate is calculated to achieve its horizontal alignment with the graph bar group and the Comparative Measure.

The CM’s x coordinate is calculated to be proportionate to its fraction of the maximun scale value of the graph, normalized to the 200 units of the width of the graph bar group, minus the 2 units of the CM’s width. This ensures that the leading edge of the CM is exactly geometrically aligned with its value.

Greetings Chris,

I just read this post and I think this is a great idea. It’s useful to break down bullet graphs to their basic components to make it easier for developers to implement them. However, there are a few suggestions and corrections I’d like to make.

First, in your labels and descriptions, it appears that you’ve reversed the Comparative Measure and the Performance Measure. In a bullet graph, the black bar represents the performance measure while the short vertical line represents the comparative measure. For instance, the black bar might be YTD sales, and the short vertical line could represent the target. The bar is more salient than the short vertical line, so it should represent the most important information.

Second, you say, “In this diagram the Performance Measure is placed on top of the Comparative Measure; the specification isn’t clear on this and as long as they are both are colored 100% black and are have these dimensions and positions it seems not to matter.” It’s not necessary for the measures to be 100% black, they just have to be the most salient part of the graph. A color would work fine, as long as it is dark enough to draw people’s attention. For instance, on the last page of Stephen Few’s bullet graph design specification (http://www.perceptualedge.com/articles/misc/Bullet_Graph_Design_Spec.pdf) he uses blue instead of black for the measures.

Finally, the tick marks and numbers along the scales could be made a bit less salient, either by reducing the font size and the stroke width of the tick marks, or by using a shade of gray, instead of black. This isn’t a big deal, but when the scale and tick marks are overly salient, it makes it a bit harder to focus on the data.

Again, thanks for writing this blog entry.

-Bryan

Bryan PierceFebruary 25, 2009 at 3:56 pm

Hi Bryan,

Thanks.

I did indeed manage somehow to confuse the Comparative and Performance Measures. I’ll make the changes.

When considering the relationship between the measures I used 100% black for this example only, not as a suggestion that it’s the only suitable color. In preparing the bullet graphs that led to my comment on perceptualedge.com – http://www.websitetoolbox.com/tool/post/sfew/show_single_post?pid=31017498&postcount=1 – I found that in some circumstances distinguishing the Comparative Measure from the background of the graph is difficult, and that more work needs to be done on finding good presentations for the measures that work in these circumstances. This is something I intend to explore in future articles.

The scale’s elements are bigger than is optimal, but my primary objective here is to clearly identify the spatial relationships between the elements, and this is easier to do with slightly oversized elements. My next article is where I lay these out, so it was a question of using smaller, more appropriate, elements here and larger ones later, or being consistent. And, since I’m using the same base SVG files for both consistence won.

I also need to note that I intend to work my way through the various technical aspects of building bullet graphs and, once there’s a solid foundation, working through the various permutations looking for the optimal presentations.

Regards,

Chris

Chris GerrardMarch 6, 2009 at 12:46 pm