circle transition

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg {
    width: 800px;
    height: 600px;
  }
  circle {
    opacity: 0.5;
  }
  </style>
</head>

<body>
  <svg></svg>
  <script>
    var radius = 10;
  	var duration = 1500;
  	var width = 800;
  	var height = 600;
  	const margin = {top: 20, bottom: 20, left: 40, right: 20};
  	var startYear = 1927;
    var numYears = 9;
    var index = 0;
  	var colorScale = d3.scaleOrdinal(d3.schemeCategory10);
    
    var xScale = d3.scaleBand()
    	.rangeRound([margin.left,width - margin.right]);
    
    var yScale = d3.scaleLinear()
    	.range([height - margin.bottom, margin.top]);
  
  
  
  d3.csv('data.csv', function(err, response) {
    response.forEach(function(d) {
      d.year = parseInt(d.year, 10);
      d.yield = parseInt(d.yield, 10);
      // use gen and site as the unique key for each datum
      d.key = d.site + ':' + d.gen;
    });
    
    var xDomain = response.map(d => d.site);
    xScale.domain(xDomain);
    
    
    var yMax = d3.max(response, d => d.yield);
    yScale.domain([0, yMax]);
    
    function update(data, year) {

var t = d3.transition()
      .duration(1000);
      var data = data.filter( d => d.year === year);
			var svg = d3.select('svg');
      var circles = svg.selectAll('circle')
      		.data(data, d => d.key);

// exit
      circles.exit().transition(t)
        .attr('r', 0)
        .remove();

// enter (constant parameter through updates)
      var enter = circles.enter().append('circle')
      .attr('cx', d => xScale(d.site))
      .attr('cy', height)
      .attr('fill', d => colorScale(d.gen))
      .attr('r', 0);
			
      // Merge enter and remaining
      circles = enter.merge(circles)
      .transition(t)
      .attr('r',10)
      .attr('cy',d => yScale(d.yield));
    }
    
    update(response, startYear);
      setInterval(() => {
        update(response, startYear + (index % numYears));
        index += 1;
      }, 2000);
    
  });

</script>
</body>

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