Ring Notes

Annotations created using the d3.ringNote plugin.

html {
  font-family: sans-serif;
  font-size: 12px;
}

label {
  position: absolute;
  top: 15px;
  right: 15px;
}

.annotation circle {
  fill: none;
  stroke: black;
}

.annotation path {
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;
}

.annotation .shaded {
  fill: grey;
  fill-opacity: 0.2;
}

</style>
</head>
<body>
  
<label>
  <input type="checkbox">
  Hide controls
</label>

var annotations = [
  {
    "cx": 232,
    "cy": 123,
    "r": 103,
    "text": "This is a \"ring note\"",
    "textOffset": [
      114,
      88
    ]
  },
  {
    "cx": 691,
    "cy": 101,
    "r": 54,
    "text": "Drag this text to move it. Text wraps automatically. Just set the width",
    "textWidth": 150,
    "textOffset": [
      0,
      66
    ]
  },
  {
    "cx": 347,
    "cy": 370,
    "r": 46,
    "text": "Drag the dashed circles to change the annotation's position and size. You can remove these controls after you settle on a final layout",
    "textWidth": 200,
    "textOffset": [
      -68,
      -37
    ]
  },
  {
    "cx": 760,
    "cy": 361,
    "r": 67,
    "text": "Styling individual annotations is straightforward",
    "textWidth": 150,
    "textOffset": [
      -75,
      -5
    ],
    "shaded": true
  }
];

var width = 960,
    height = 500;

var ringNote = d3.ringNote()
  .draggable(true);

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height);
  
var gAnnotations = svg.append("g")
  .attr("class", "annotations")
  .call(ringNote, annotations);

// Styling individual annotations based on bound data
gAnnotations.selectAll(".annotation circle")
  .classed("shaded", function(d) { return d.shaded; });

// Hide or show the controls
var draggable = true;
d3.select("input")
  .on("change", function() {
    ringNote.draggable(draggable = !draggable);
    gAnnotations
        .call(ringNote, annotations)
      .selectAll(".annotation circle")
        .classed("shaded", function(d) { return d.shaded; });
  });

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

https://d3js.org/d3.v3.min.js