Labeling

The primary bars can be labeled inside the bars or to the left of the bars as in a traditional bar chart. The latter is especially useful if some labels are too long to fit inside, but it increases the risk of associating the label with the entire row instead of just a single bar.

Labeling of the secondary bars is optional. Following the Focus+Context idea, the identity of individual secondary bars is not so important — their main purpose is to provide context. The default is to label a few of the secondary bars because the threshold between primary and secondary might be fuzzy. And for unfamiliar readers, the secondary labels underscore the fact that each bar is a separate entity.

These examples show the same data set of 572 dog names. The default labeling is to show secondary bars whose values are within 80% of the smallest primary bar.

At the extreme, we can show all the secondary labels that fit within their bars.

Or we can choose some intermediate threshold that makes sense for the data.

Packing

We can introduce two additional parameters to the packing algorithm for the secondary bars: the packing order and the packing direction. The usual packing order is in descending value order, so the largest bars are packed first. The usual packing direction is left-to-right, and the main alternative is top-to-bottom. The combination of alphabetical ordering and top-to-bottom direction can be useful if it’s more important to locate secondary items by name. All of these packing variations result in a more jagged right edge.

Packing order = alphabetical,  packing direction = left-to-right:

Packing order = alphabetical,  packing direction = top-to-bottom:

Packing order = descending values,  packing direction = top-to-bottom:

Coloring

The default coloring supports the Focus+Context principle by using a prominent color for the primary values and muted colors for the secondary values. However, since each bar is a separate entity, we can encode additional information in its color.

In these examples, we color each bar according to the female/male balance of the dogs with a given name, with blue representing no males and red representing all males.

We can color only the primary bars to keep the Focus+Context separation. We can see that most names are gender-specific. Bailey and Marley appear to be the most gender-neutral since they are close to purple.

We can color the secondary bars with a faded treatment, which makes the coloring less clear, but keeps the primary/secondary distinction. Notice there is also the danger of secondary bars running together when neighboring bars have the same color.

We can color all the bars with the same scheme for higher color fidelity, but we have to  add separator lines to distinguish primary from secondary.