D3 Examples - Animation

xxxxxxxxxx
 
<script src="https://d3js.org/d3.v4.min.js"></script>
​
<style type="text/css">
  /*css to go here*/
  html, body {
    height: 100%;
    width: 100%;
  }
  circle {
    opacity: 0.5;
  }
</style>
​
<body></body>
​
<script>
  // properties
  var radius = 10;
  var duration = 1500;
  var width = 960;
  var height = 500;
  var margin = { top: 20, bottom: 20, left: 20, right: 20 }
  var svg = d3.select('body').append('svg');
  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, margin.top]);
  var colorScale = d3.scaleOrdinal(d3.schemeCategory10);
​
  
  function update(data, year) {
    data = data.filter(function(d) {
      return d.year === year;
    });
    
    var t = d3.transition().duration(1000);
    var circles = svg.selectAll('circle')
      .data(data, function(d) {return d.key});
    
    // Exit
    circles.exit()
        .transition(t)
        .attr('r', 0)
      .remove();
    
    // Enter
    circles.enter().append('circle')
        .attr('r', 0)
        .merge(circles)
//      .attr('style', 'opacity: 0;')
        .transition(t)
        .attr('cy', d => yScale(d.yield))
        .attr('fill', d => colorScale(d.gen))
        .attr('cx', d => xScale(d.site) + 75)
        .attr('r', radius)
        .attr('style', 'opacity: .5;');
  }
  
  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);
    
    const xAxis = d3.axisBottom()
        .scale(xScale);
    
    const 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;
//     update(response, startYear);
    setInterval(() => {
      update(response, startYear + (index % numYears));
      index += 1;
    }, 2000)
  });
</script>
​
    