test: transition

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

<body></body>
  <script>
    var radius = 10;
    var duration = 1500;
    var width = 800;
    var height = 600;
    var svg = d3.select('body').append('svg');
    var xScale = d3.scaleBand()
    	.rangeRound([0, width]);
    var yScale = d3.scaleLinear()
    	.range([height, 0]);
    var colorScale = d3.scaleOrdinal(d3.schemeCategory10);
    
		function update(data, year) {
      data = data.filter(d => d.year === year);
      
      var t = d3.transition().duration(1000);
      var circles = svg.selectAll('circle')
      	.data(data, d => d.key);
  
      circles.exit()
      	.transition(t)
      	.attr('r', 0)
        .remove();
      
      var enter = circles.enter().append('circle')
      	.attr('r', radius)
      	.merge(circles)
      	.attr('fill', d => colorScale(d.gen))
      	.attr('cx', d => xScale(d.site))
      	.transition(t)
      	.attr('cy', d => yScale(d.yield));
    }
    
    d3.csv('barleyfill.csv', (err, response) => {
      response.forEach((d) => {
        d.year = +d.year;
        d.yield = +d.yield;
        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]);
      
      var startYear = 1927;
      var numYears = 9;
      var index = 0;
      
      setInterval(()=> {
        update(response, startYear + (index % numYears));
        index += 1;
      }, 1000)
    });
  </script>

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