D3 Examples - FEM: Exercise 2 Starter

xxxxxxxxxx
 
<script src="https://d3js.org/d3.v4.min.js"></script>
​
<style type="text/css">
  /*css to go here*/
  svg {
    width: 800px;
    height: 600px;
  }
  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) {
   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();
    
    // enter
    var enter = circles
    .enter()
    .append('circle')
    .attr('r', radius)
    .attr('cy', d => yScale(d.yield))
    .merge(circles)
    .attr('cx', d => xScale(d.site))
    .transition(t)
    .attr('cy', d => yScale(d.yield))
    .attr('fill', d => colorScale(d.gen));
    
    
  }
  
  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;
    });
    
    var xDomain = response.map(d => d.site);
    xScale.domain(xDomain);
    
//     var yExtent = d3.extent(response, d => d.yield);
    var yMax = d3.max(response, d => d.yield);
    yScale.domain([0, yMax]);
    
    var startYear = 1927;
    var numYears = 9;
    var index = 0;
    
    update(response, startYear);
    
 
    setInterval(() => {
      update(response, startYear + ( index % numYears));
      index += 1;
    }, 1000)
    
    
  });
</script>
    