D3 Examples - Line of circles

xxxxxxxxxx
 
<!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> 
​
  <style>
    body { background-color: #fff; margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    circle { fill: steelblue; stroke: lightgrey}
    g.tick { opacity: .6 }
    g path.domain { opacity: .1}
    g.tick line { opacity: .1 }
    :root {
      --annotation-color: #555;
    }
    .annotation path {
      stroke: var(--annotation-color);
      fill: none;
    }
    .annotation path.connector-arrow, 
    .annotation path.connector-dot, 
    .title text, .annotation text {
      fill: var(--annotation-color);
    }
    .annotation-note-bg {
      fill: rgba(0, 0, 0, 0);
    }
    .annotation-note-title, text.title {
      font-weight: bold;
      font-family: sans-serif;
    }
    .annotation-note-label { font-family: sans-serif; }
    h4 { color: #555; margin-top: -1em;}
    h4, h1 { margin-left: 20px; }
  </style>
</head>
​
<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>
​
    