Chart Annotation

Example using the d3.ringNote plugin to add circle annotations to a chart. Drag the dashed circles and the text to move the annotation elements. These moveable, dashed-line circles will disappear if ringNote.draggable(false) is called.

The chart shows the eruption duration and waiting time between eruptions for the Old Faithful geyser in Yellowstone National Park. This is from the datasets R package.

<html>
<head>
<style>
  
body {
  font: 12px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

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

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

.annotation text {
  text-shadow: -2px 0 2px #fff, 
                0 2px 2px #fff,
                2px 0 2px #fff, 
                0 -2px 2px #fff;
}

</style>
</head>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="d3-ring-note.js"></script>
<script>
  
// After position the annotation, run `copy(annotations)` in the browser's
// console and paste over this array:
var annotations = [
  {
    "cx": 625,
    "cy": 111,
    "r": 109,
    "text": "The longer Old Faithful lays dormant, the longer the eruption last",
    "textWidth": 140,
    "textOffset": [
      121,
      186
    ]
  }
];

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = function(d) { return d.waiting; },
    y = function(d) { return d.eruptions; }

var xScale = d3.scale.linear().range([0, width]),
    yScale = d3.scale.linear().range([height, 0]);

var xValue = function(d) { return xScale(x(d)); },
    yValue = function(d) { return yScale(y(d)); };

var xAxis = d3.svg.axis().scale(xScale).orient("bottom"),
    yAxis = d3.svg.axis().scale(yScale).orient("left");

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

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

d3.json("faithful.json", function(error, data) {
  if (error) throw error;
  
  xScale.domain(d3.extent(data, x));
  yScale.domain(d3.extent(data, y));
  
  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .append("text")
      .attr("class", "label")
      .attr("x", width)
      .attr("y", -6)
      .style("text-anchor", "end")
      .text("Time Between Eruptions (minutes)");
  
  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("class", "label")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Eruption Duration (minutes)");
   
   svg.selectAll(".dot")
      .data(data)
    .enter().append("circle")
      .attr("class", "dot")
      .attr("r", 3)
      .attr("cx", xValue)
      .attr("cy", yValue);
      
   svg.append("g")
     .attr("class", "annotations")
     .call(ringNote, annotations);
});

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

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