D3 Examples - animateTransitions

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg {width:800;
             height: 600;}
    circle{
      opacity:0.5;
    }
  </style>
</head>
​
<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(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();
    
    circles.enter().append('circle')
        .attr('r', radius)
        .attr('cy', d => yScale(d.yield))
        .merge(circles)
        .attr('fill', d => colorScale(d.gen))
        .attr('cx', d => xScale(d.site))
        .transition(t)
        .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;
    });
    
    // 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 startYear = 1927;
    var numYears = 9;
    var index = 0;
     update(response, startYear);
 /*    setInterval(() => {
       update(response, startYear + (index % numYears));
       index += 1;
     }, 1000)*/
  });  
  </script>
</body>
​
    