Annotating a chart is a crucial step for an insightful dataviz. This document is dedicated to d3-annotation, a d3.js library for annotation. This library has been created by Susie Lu and its documentation is truly awesome.
d3-annotation
. You can edit the code beside to see what happens.annotations
created at the beginning of the script. At the very least, you have to specify the position of the thing to annotate (x
and y
), and the text position (dx
and dy
).d3.annotation()
is called to effectively build the annotation.
note
(~ the text)note
is the part with the text and the border around it.note
section of the annotation
object.
connector
connector
part of the annotations
object or ii/ using css
.
types
of annotation are available. In the examples above, the default type d3.annotationLabel
was used. It does not display anything for the subject.d3.annotationCalloutCircle
or d3.annotationCalloutRect
as shown beside.