Annotation is an essential part of visual data-driven storytelling. If you don’t use it properly, then you might as well tell you reader “here’s the data, go figure it out yourself”.
Nonetheless, there are few tools you may use to annotate in your SVG-based charts, such as those generated using D3. That’s why the ChartAccent.js library was invented.
This library allows you to highlight significant data from your data visualizations. To make a chart “annotatable,” the chart creator loads the data and renders the chart. The chart creator must also create a “ChartAccent object,” register chart elements such as axes, marks, and legends as well as their metadata, and map marks with their corresponding data items as well as their default annotation form.
ChartAccent.js supports cartesian coordinate systems of linear or ordinal scales, circle or rectangle marks, polylines connecting marks within series, and bullet-style series legends.
Thus, it can be used to annotate many variants of bar charts, line graphs, and scatterplots. For other types of charts, ChartAccent.js currently provides limited support for item-based annotations.