d3-annotation Play

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link href='https://fonts.googleapis.com/css?family=Lato:300,900' rel='stylesheet' type='text/css'>
  <script src="https://d3js.org/d3.v4.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/susielu/d3-annotation/d3-annotation.min.js"></script>

svg {
        background-color: white;
        font-family: 'Lato';
     }
      
      .chartTitle {
        font-family: consolas;
        font-size: 1.2rem;
        font-weight: bold;
      }

.annotation-note-title, text.title {
      font-weight: bold;
    }

text.title {
      font-size: 1.2em;
    }

</style>
</head>
<body>
    <script>
      // set constants
      const width = 960;
      const height = 500;
      
      // create svg and title
      d3.select('body').append('svg')
      	.attr('width', width)
      	.attr('height', height);
      
      d3.select('svg').append('text')
        	.attr('class', 'chartTitle')
        	.attr('x', 480)
        	.attr('y', 40)
        	.attr('text-anchor', 'middle')
        	.html('Playing with d3-annotation')
      
      const annotations = [
        {
          //below in makeAnnotations has type set to d3.annotationLabel
          //you can add this type value below to override that default
          type: d3.annotationCalloutCircle,
          note: {
            label: "Here's the text for 'label'",
            title: "This is the text for  'title'",
            wrap: 190 // how long label can be
          },
          //settings for the subject, in this case the circle radius
          subject: {
            radius: 100
          },
          x: (width/2), //
          y: (height/2), //
          dy: 0, // y-pos for text
          dx: 102 // x-pos for text
        },
        {
          type: d3.annotationCalloutCircle,
          note: {
            label: "yep, that's smaller circle",
            title: "small",
            wrap: 90
          },
          connector: {
            end: "arrow" // 'dot' also available
          },
          subject: {
            radius: 20
          },
          x: 40,
          y: 140,
          dy: -60,
          dx: 30
        }].map(function(d){ d.color = "darkseagreen"; return d})

const makeAnnotations = d3.annotation()
          .type(d3.annotationLabel)
          .annotations(annotations)

d3.select("svg")
          .append("g")
          .attr("class", "annotation-group")
          .call(makeAnnotations)

</script>
</body>
</html>

Updated missing url https://rawgit.com/susielu/d3-annotation/master/d3-annotation.min.js to https://cdn.jsdelivr.net/gh/susielu/d3-annotation/d3-annotation.min.js

https://d3js.org/d3.v4.js

https://rawgit.com/susielu/d3-annotation/master/d3-annotation.min.js