D3 Examples - barley by year

xxxxxxxxxx
 
<script src="https://d3js.org/d3.v4.min.js"></script>
​
<style type="text/css">
  /*css to go here*/
  svg {
    border: 1px solid lavender;
    width: 800px;
    height: 400px;
  }
  circle {
    opacity: 0.5;
  }
</style>
​
<body></body>
​
<script>
  // properties
  const radius = 10;
  const duration = 1000;
  const width = 800;
  const height = 400;
  const svg = d3.select('body').append('svg');
​
  let years;
  let sites;
  let bins = {};
  let yearIndex = 0;
​
  const mapToObject = y => {
    const r = {};
    r[y] = [];
    return r;
  };
​
  const prepData = data => {
    sites = data.map(d => d.site);
    // sort data into bins by year
    years = d3.set(data, d => d.year).values();
    bins = Object.assign({}, ...years.map(mapToObject));
​
    data.forEach(d => {
      bins[d.year].push({
        x: d.site,
        y: +d['yield'],
        gen: d.gen
      });
    });
  };
​
  const setup = rawData => {
    // restructure raw data for our needs
    prepData(rawData);
​
    // create scales
    const x = d3.scaleBand()
        .domain(sites)
        .range([100, width]);
            
    // determine y scale
    const extentY = d3.extent(bins[years[0]], d => d.y);
    const y = d3.scaleLinear()
      .domain(extentY)
      .range([height - 50, 50]);
​
    // color scale
    const c = d3.scaleLinear()
        .domain(extentY)
        .range([0, 1]);
    const colors = d3.scaleOrdinal(d3.schemeCategory10);
​
    const update = () => {
      // get next data set
        const data = bins[years[yearIndex]];
​
      const circles = svg.selectAll('circle')
        .data(data, d => d.gen);
​
      circles
        .exit()
        .transition()
        .duration(duration)
        .attr('r', 0);
​
      circles
        .enter().append('circle')
        .attr('cy', d => y(d.y))
        .attr('cx', d => x(d.x))
        .attr('r', 0)
        .attr('fill', d => colors(c(d.y)))
        .merge(circles)
        .transition()
        .duration(duration)
        .attr('cy', d => y(d.y))
        .duration(duration)
        .attr('r', 6);
​
      yearIndex++;
      if (yearIndex === x.domain().length) {
        yearIndex = 0;
      }
    };
  
    update();
​
    setInterval(update, duration);
  };
​
    d3.csv('barleyfull.csv', data => {
    setup(data);
  });
​
  /*
  schema = {
    gen: "Manchuria",
    id: "1",
    site: "StPaul",
    year: "1927",
    yield: "47.5"
  };
  */
</script>
​
    