Old school D3 from simpler times

All examples By author By category About

oliviac12

Full window Github gist

Animation Example

Built with blockbuilder.org

forked from sxywu's block: Metis Class 3 Starter Block

forked from sxywu's block: Metis Class 3 Starter Block 2

<script src="https://d3js.org/d3.v4.min.js"></script>

<style type="text/css">
  /*css to go here*/
  svg {
    border:1px solid #f0f;
  }
  
  circle {
    opacity: 0.5;
  }

</style>

<body></body>

<script>
  // properties
  var margin = {top: 20, right: 20, bottom: 20, left: 20};
  var width = 800 - margin.left - margin.right;
  var height = 600 - margin.top - margin.bottom;

var svg = d3.select('body').append('svg')
    .attr('width', width + margin.left + margin.right)
    .attr('height', height + margin.top + margin.bottom)
  	.append('g')
  		.attr('transform', 'translate(' + [margin.left, margin.top] + ')');
  
  var data;
  var yScale = d3.scaleLinear();
  var xScale = d3.scaleBand();
  var duration = 1500;
  var year = 1927;
  
  function update() {
    var filteredData = data.filter(function(d) {
      return d.year === year;
    });
    
    var circles = svg.selectAll('circle')
    	.data(filteredData, function(d) {return d.gen + d.site});
    
    // remove exit selection
    circles.exit()
      .transition().duration(duration / 2)
    	.attr('r', 20)
    	.transition().duration(duration)
    	.attr('r', 0)
      .remove();
    
    // create enter selection
    // and then merge enter+update selections together
    // set attribute on them
    // currently, "circles" is our update selection
    // "enter" is our enter selection
    var enter = circles
        .enter().append('circle')
        .attr('cx', function(d) {return xScale(d.site);});
    enter.transition()
      .delay(function(d, i) {console.log(i, d); return i * 100})
      .duration(duration)
      .attr('r', 10)
      .attr('cy', function(d) {return yScale(d.yield);})
      .attr('cx', function(d) {return xScale(d.site);})
      .attr('fill', function(d) {return colorScale(d.gen);});
    
    circles.transition()
      	.duration(duration)
        .attr('r', 10)
        .attr('cy', function(d) {return yScale(d.yield);})
        .attr('cx', function(d) {return xScale(d.site);})
        .attr('fill', function(d) {return colorScale(d.gen);});
  };
  
  setInterval(function() {
    year = year + 1;
    if (year > 1936) {
      year = 1927;
    }
    update();
  }, duration * 2);
  
  d3.csv('barleyfull.csv', function(err, response) {
    if (err) {
      console.log(err);
      return;
    }
    
    response.forEach(function(d) {
      // is this what we wanted to do?
      d.yield = +d.yield;
      d.year = +d.year;
    });
    
    // create scales
    var minMaxY = d3.extent(response, function(d) {return d.yield});
    yScale.domain(minMaxY)
    	.range([height, 0]);
    
    var xDomain = response.map(function(d) {return d.site}); 
    xScale.domain(xDomain)
    	.rangeRound([0, width]);
    colorScale = d3.scaleOrdinal(d3.schemeCategory20);
    
    data = response;
  });
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
</script>

https://d3js.org/d3.v4.min.js