Line of circles

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-annotation/1.12.1/d3-annotation.min.js"></script>

<body>
  <h1>Daily Coalition strikes in Iraq and Syria</h1>
  <h4>In days, August 2014 to June 2017</h4>
  <script>
    const width = window.innerWidth;
    let data = [];
    const radius = d3.scaleLinear().range([0,50]).domain([0,70]);
    const opacityScale = d3.scaleSqrt().range([0,.15]).domain([0,100]);

var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", 500);
    
    function render(data, x, annotations) {
      let circles = svg.selectAll('circle')
        .data(data);

circles
        .enter()
        .append('circle')
        .attr('cx', (d,i) => x(i))
        .attr('cy', 100)
        .transition()
        .attr('r', d => radius(d.t))
      	.style('opacity', d => opacityScale(d.t));
      
      svg.append('g')
        .attr("transform", "translate(0,100)")
        .call(d3.axisBottom(x).ticks(5));

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

svg.append("g")
        .attr("class", "annotation-group")
        .call(makeAnnotations)
    };

setTimeout(function() {
      d3.csv('only.csv', function(data) {
        const x = d3.scaleLinear()
          .range([50, width-100])
          .domain([0, data.length]);

const annotations = [{
          type: d3.annotationCalloutCircle,
          note: {
            label: "TKTKTKTK",
            title: "2017",
            wrap: 190
          },
          subject: {
            radius: 40
          },
          x: x(850),
          y: 100,
          dy: 50,
          dx: -102
        },{
          type: d3.annotationCalloutCircle,
          note: {
            label: "CENTCOM reports strikes fortnightly",
            title: "2014",
            wrap: 130
          },
          subject: {
            radius: 60
          },
          x: x(110),
          y: 100,
          dy: 80,
          dx: 102
        }];
        render(data, x, annotations);

});
    }, 500);

</script>
</body>

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

https://cdnjs.cloudflare.com/ajax/libs/d3-annotation/1.12.1/d3-annotation.min.js