barley by year

let years;
  let sites;
  let bins = {};
  let yearIndex = 0;

const mapToObject = y => {
    const r = {};
    r[y] = [];
    return r;
  };

const prepData = data => {
    sites = data.map(d => d.site);
    // sort data into bins by year
    years = d3.set(data, d => d.year).values();
    bins = Object.assign({}, ...years.map(mapToObject));

data.forEach(d => {
      bins[d.year].push({
        x: d.site,
        y: +d['yield'],
        gen: d.gen
      });
    });
  };

const setup = rawData => {
    // restructure raw data for our needs
    prepData(rawData);

// create scales
    const x = d3.scaleBand()
    	.domain(sites)
    	.range([100, width]);
			
    // determine y scale
    const extentY = d3.extent(bins[years[0]], d => d.y);
    const y = d3.scaleLinear()
      .domain(extentY)
      .range([height - 50, 50]);

// color scale
    const c = d3.scaleLinear()
    	.domain(extentY)
    	.range([0, 1]);
    const colors = d3.scaleOrdinal(d3.schemeCategory10);

const update = () => {
      // get next data set
	    const data = bins[years[yearIndex]];

const circles = svg.selectAll('circle')
        .data(data, d => d.gen);

circles
        .exit()
        .transition()
        .duration(duration)
        .attr('r', 0);

circles
        .enter().append('circle')
        .attr('cy', d => y(d.y))
        .attr('cx', d => x(d.x))
        .attr('r', 0)
      	.attr('fill', d => colors(c(d.y)))
      	.merge(circles)
      	.transition()
        .duration(duration)
        .attr('cy', d => y(d.y))
      	.duration(duration)
        .attr('r', 6);

yearIndex++;
      if (yearIndex === x.domain().length) {
        yearIndex = 0;
      }
    };
  
    update();

setInterval(update, duration);
  };

d3.csv('barleyfull.csv', data => {
    setup(data);
  });

/*
  schema = {
    gen: "Manchuria",
    id: "1",
    site: "StPaul",
    year: "1927",
    yield: "47.5"
  };
  */
</script>

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