d3-annotation

Made with by Susie Lu

#Annotation Types

  • Presets
  • Options

    Note

    Line Type

    Orientation


    Align


    Connector

    Type

    End

d3.annotationLabel A centered label annotation Code below is ready to use with these setttings

Use d3.annotationLabel:

#Examples

#Basic Without Scales

#Tooltips

#Responsive with Types and Hover

Example showing how to dynamically change anntation types

#Reimagining the Circle Pack

Remake of the circle pack with annotations as the exterior circles

#Thresholds and Annotation Color Styles

Using annotation design for emphasis

#Points of Interest with Badges

Expanding on points of interest outside of the chart itself

#Overlapping

Moving annotations algorithmically to prevent overlap using rect collision

#Encircling

Annotations following a set of points using d3.packEnclose

#Map with Tooltips and Edit Mode

A map with tooltips, double-click to enable/disable editMode

#d3 v2.0 Features

Easy annotation coloring, new badge options, and new note positioning options

#Essays