D3 Examples - FEM (enter, exit, update and transitions)

xxxxxxxxxx
 
<script src="https://d3js.org/d3.v4.min.js"></script>
​
<style type="text/css">
  /*css to go here*/
  svg {
    width: 100%;
    height: 100vh;
    border: 1px solid red;
  }
  circle {
    opacity: 0.5;
    
  }
</style>
​
<body></body>
​
<script>
  // properties
  var radius = 10;
  var duration = 1500;
  var width = 800;
  var height = 600;
  var svg = d3.select('body').append('svg');
  // scales
  var xScale = d3.scaleBand()
    .rangeRound([0, width]);
  var yScale = d3.scaleLinear()
    .range([height, 0]);
  var colorScale = d3.scaleOrdinal(d3.schemeCategory10);
  
  function update(data, year) {
    
    var t = d3.transition().duration(duration);
    
    var newData = data.filter(item => item.year === year)
   
    const xDomain = ['StPaul', 'Duluth', 'Waseca', 'GrandRapids', 'Morris', 'Crookston']; 
    
    var circles = svg.selectAll('circle')
        .data(newData, d => d.key)
    
    // enter
    var enter = circles.enter().append('circle')
    .attr('fill', (d, i) => colorScale(d.gen))
    .attr('cy', d => yScale(d.yield))
    .attr('r', 0)
    
    // exit (generally better to add first)
    circles.exit()
        .transition(t)
        .attr('r', 0)
      .remove();
    
   
    // enter + update
    circles = enter.merge(circles)
    //.attr('cx', function(d, i){
        
    //    return xDomain.findIndex(item => item === d.site) * 50
      //})
    .attr('cx', d => xScale(d.site))
        .transition(t)
        .attr('r', radius)
      .attr('cy', d => yScale(d.yield))
  }
  
  d3.csv('barleyfull.csv', function(err, response) {
    
    response.forEach(function(d) {
      // convert yield and year from string to int
      d.year = +d.year;
      d.yield = +d.yield;
      // use gen and site as the unique key for each datum
      d.key = d.site + ':' + d.gen;
    });
    
    const xDomain = response.map(d => d.site);
    console.log(xDomain);
    xScale.domain(xDomain);
    console.log(xScale.domain())
    
    const yMax = d3.max(response, d => d.yield)
    console.log(yMax)
    yScale.domain([0, yMax])
    
    var startYear = 1927;
    var numYears = 9;
    var index = 0;
    //update(response, startYear)
    setInterval(() => {
      update(response, startYear + (index % numYears));
      index += 1;
    }, duration)
  });
</script>
    