Chart annotations are crucial in data-driven storytelling. They help chart authors to explain and highlight the core messages of their visualisations. As former graphics editor of the New York Times Amanda Cox stated in a now famous quote:
“The annotation layer is the most important thing we do. . . otherwise it’s a case of here it is, you go figure it out”
Text annotations are very common, and are important in explaining patterns in a visualisation. They are the subject of the Text annotations module. In this module, non-text annotations are explained and illustrated.
Three main types of visual annotations can be distinguished.
Annotation highlights involve altering the appearance of some of the data marks in a visualisation to make them stand out. Data marks are the geometric elements that represent the items in a data set: the bars in a bar chart, the lines in a line chart, the dots in scatterplot, ...
Highlighting can be done by differentiating the visual properties between the data marks to be highlighted and the other data marks. Highlighting can work in two directions: amplify a visual property of data marks to make them stand out more, or deamplify visual properties to dehighlight data marks and put them more in the background of the visualisation.
Colour is an obvious visual property to use in highlighting.
Source: Americans Say High Prices Are Hitting the Things They Need to Get By, nytimes.com
Other visual properties that can be used to highlight data marks are the stroke of visual elements (presence or absence of stroke, stroke colour, stroke widths).
The above charts highlights the bars representing the share of Russia in global exports by adding a black stroke to these bars. The bars are also highlighted with colour: the red stands out from the blues and greys used for other countries. Source: How Russia’s war is reverberating through global goods markets, economist.com
Colour and the stroke width work together to highlight the line for Canada in this chart. Source: Do vaccine mandates actually work?, The Economist
In some cases size can also be used as a property for highlighting. But when size is used for highlighting, there should be no confusion about data encoding: it should be clear that the differences in size serve highlighting purposes, and are not related to patterns in the underlying data.
When data marks are labelled (with data values, with names or with other text elements), the visual property used to highlight data marks can be copied into the styling of the labels: labels can copy the color and opacity of the data marks they belong to, for example. To make these labels highlighted, they can have bold styling or a bigger font size.
Source: What impact has the Russian invasion of Ukraine had on European attitudes to NATO?, yougov.co.uk
A common pattern in interactive visualisations is “highlighting on hover” or “highlighting on click”. With this technique, the hovered over or clicked data mark will receive visual properties to highlight it (intenser color, thicker stroke, ...). Often a label or tooltip will appear showing text to identify the mark and show its value(s). Sometimes the other data marks in the visualisation will be dehighligted at the same time.
The chart embedded below is interactive and uses highlighting on hover. When you hover for a longer duration, the dots not belonging to the same category are removed from the chart.
[The bubbles on this bubble chart have a white stroke, except the highlighted bubbles which have a black stroke. On hover, the hovered bubble gets a thick black stroke. Source: datawrapper.de](http://datawrapper.dwcdn.net/6A7hp/1/)
The bubbles on this bubble chart have a white stroke, except the highlighted bubbles which have a black stroke. On hover, the hovered bubble gets a thick black stroke. Source: datawrapper.de
The data marks to apply the highlighting to (the “highlighting targets”) depend on the message you want the visualisation to convey. These can be