D3 Examples - transition

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: 800px;
      height: 600px;
    }
    circle {
      opacity: 0.5;
    }
  </style>
</head>
​
<body>
  <script>
    const radius = 10;
    const duration = 1500;
    const width = 800;
    const height = 600;
    const margin = {
      top: 20,
      right: 20,
      bottom: 20,
      left: 20,
    };
    const svg = d3.select('body').append('svg');
    
    // scales
    const xScale = d3.scaleBand().rangeRound([margin.left, width - margin.right]);
    const yScale = d3.scaleLinear().range([height - margin.bottom, margin.top]);
    const colorScale = d3.scaleOrdinal(d3.schemeCategory10);
    
    const update = (data, year) => {
      data = data.filter(d => d.year === year);
      
      const t = d3.transition().duration(1000);
      let circles = svg.selectAll('circle')
        .data(data, d => d.key);
      
      // exit
      circles.exit()
        .transition(t)
        .attr('r', 0)
        .remove();
      
      const enter = circles.enter().append('circle')
        .attr('r', 0)
        .attr('cy', d => yScale(d.yield));
      circles = enter.merge(circles)
        .attr('fill', d => colorScale(d.gen))
        .attr('cx', d => xScale(d.site))
        .transition(t)
        .attr('r', radius)
        .attr('cy', d => yScale(d.yield));
    }
    
    d3.csv('barleyfull.csv', (err, data) => {
      data.forEach(d => {
        d.year = +d.year;
        d.yield = +d.yield;
        d.key = `${d.site}:${d.gen}`;
      });
    
      const xDomain = data.map(d => d.site);
      xScale.domain(xDomain);
      const yMax = d3.max(data, d => d.yield);
      yScale.domain([0, yMax]);
      
      const startYear = 1927;
      const numYears = 9;
      let index = 0;
      
//       update(data, startYear);
      setInterval(() => {
        update(data, startYear + (index % numYears));
        index += 1;
      }, duration)
    });
    
  </script>
</body>
​
    