Old school D3 from simpler times

All examples By author By category About

ansuarez9

Full window Github gist

FEM: Exercise 2

Built with blockbuilder.org

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

<style type="text/css">
  /*css to go here*/
  svg {
    width: 800;
    height: 600;
  }
  circle {
    opacity: 0.5;
  }
</style>

<body></body>

<script>
  // properties
  var radius = 10;
  var duration = 1500;
  var width = 800;
  var height = 500;
  var margin = { top: 20, bottom: 20, left: 20, right: 20 }
  var svg = d3.select('body').append('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, 0]);
  var colorScale = d3.scaleOrdinal(d3.schemeCategory10);
  
  var yearText = svg.append('text')
  	.attr('y', height);
  
  function update(data, year) {
    data = data.filter(x => year === x.year)
    
    var t = d3.transition().duration(duration);
    
    yearText
    	.attr('x', 0)
    	.transition(t)
    	.attr('x', width/2)
    	.style('opacity', 1)
      .text(year)
    
    var u = svg.selectAll('circle')
    	.data(data, d => d.key);
    
    var exiting = u.exit()
    	.transition(t)
    	.attr('r', 0)
    	.remove();
    
		var entering = u.enter()
    	.append('circle')
    	.attr('cy', d => yScale(d.yield))
    	.merge(u)
    	.transition(t)
    	.attr('r', radius)
    	.attr('cx', d => xScale(d.site) + 75)
    	.attr('cy', d => yScale(d.yield))
    	.attr('fill', d => colorScale(d.gen))
    	.attr('stroke', d => colorScale(d.gen));

}
  
  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 xAxis = d3.axisBottom().scale(xScale);
    var 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;
    
    setInterval(() => {
      update(response, startYear + (index % numYears));
      index += 1;
    }, 2000);
  });
</script>

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