D3 Examples - FEM: Exercise 2

xxxxxxxxxx
 
<script src="https://d3js.org/d3.v4.min.js"></script>
​
<style type="text/css">
  /*css to go here*/
  svg {
    width: 800;
    height: 600;
  }
  circle {
    opacity: 0.5;
  }
</style>
​
<body></body>
​
<script>
  // properties
  var radius = 10;
  var duration = 1500;
  var width = 800;
  var height = 500;
  var margin = { top: 20, bottom: 20, left: 20, right: 20 }
  var svg = d3.select('body').append('svg').attr('height', height).attr('width', width);
  // scales
  var xScale = d3.scaleBand()
    .rangeRound([margin.left, width - margin.right]);
  var yScale = d3.scaleLinear()
    .range([height - margin.bottom, 0]);
  var colorScale = d3.scaleOrdinal(d3.schemeCategory10);
  
  var yearText = svg.append('text')
    .attr('y', height);
  
  function update(data, year) {
    data = data.filter(x => year === x.year)
    
    var t = d3.transition().duration(duration);
    
    yearText
        .attr('x', 0)
        .transition(t)
        .attr('x', width/2)
        .style('opacity', 1)
      .text(year)
    
    var u = svg.selectAll('circle')
        .data(data, d => d.key);
    
    var exiting = u.exit()
        .transition(t)
        .attr('r', 0)
        .remove();
    
        var entering = u.enter()
        .append('circle')
        .attr('cy', d => yScale(d.yield))
        .merge(u)
        .transition(t)
        .attr('r', radius)
        .attr('cx', d => xScale(d.site) + 75)
        .attr('cy', d => yScale(d.yield))
        .attr('fill', d => colorScale(d.gen))
        .attr('stroke', 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;
    });
    
    // set domain on the scales
    var xDomain = response.map(function(d) {return d.site});
    xScale.domain(xDomain);
    var yDomain = d3.extent(response, function(d) {return d.yield});
    yScale.domain(yDomain);
    
    var xAxis = d3.axisBottom().scale(xScale);
    var yAxis = d3.axisLeft().scale(yScale);
    
    svg.append('g')
        .call(xAxis);
    
    svg.append('g')
        .attr('transform', `translate(${margin.left}, 0)`)
        .call(yAxis);
    
    var startYear = 1927;
    var numYears = 9;
    var index = 0;
    
    setInterval(() => {
      update(response, startYear + (index % numYears));
      index += 1;
    }, 2000);
  });
</script>
    