d3-annotation Play by jwilber

index.html

<!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://rawgit.com/susielu/d3-annotation/master/d3-annotation.min.js"></script>

    <style>
      
      :root {
        --main-ann-color: darkseagreen;
      }
      
     body{
        background-color: var(--main-ann-color);
     }

     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>