Testing - FEM: Exercise 2 Starter

Built with blockbuilder.org

forked from sxywu's block: Selections: Data example

forked from sxywu's block: Selections: Enter example

forked from sxywu's block: Selections: Update-Exit example

forked from sxywu's block: FEM: Exercise 2

forked from sxywu's block: FEM: Exercise 2 Starter

forked from anonymous's block: FEM: Exercise 2 Starter

data = data.filter(function(d){return d.year === year;})

console.log(data)
    var circles = svg.selectAll('circle')
        .data(data, d => d.key);

//       // exit
      circles.exit().transition(t)
        .transition(t)
// 				.attr('cy', 0)
//         .attr('cx', 0)
      	.attr('r',0)
        .remove();

// enter
      var enter = circles.enter().append('circle')
				.attr('cy', d=>yScale(d.yield))
        .attr('cx', d=>xScale(d.site))
      	.attr('r',0)
      
      // enter + update
      circles = enter.merge(circles)
      	
      	.attr('cx', d=>xScale(d.site))
				.attr('fill',d=>colorscale(d.gen))
        .transition(t)
        .attr('r',radius)
        .attr('cy', d=>yScale(d.yield))
        
  } //end update
  
  
  d3.csv('barleyfull.csv', function(err, response){
    response.forEach(function(d){
      		d.year = +d.year;
      		d.yield = +d.yield;
      		d.key = d.site+":"+d.gen;          
    			});
//     console.log(response);
    
    
    var xDomain1 = response.map(function(d) {return d.site})
// 		console.log("1: ", xDomain1);
//     var xDomain2 = d3.map(response, d => d.site)
// console.log("2: ", xDomain2);    
    xScale.domain(xDomain1);
//     console.log("ends up like: ",xScale.domain())
    
    var yExtent = d3.extent(response, d => d.yield)
        console.log(yExtent[1]);
        yScale.domain([0,yExtent[1]])
  	var startyear = 1927;
  	var numyears = 9;
  	var index = 0;
  
//     update(response, startyear);
  	setInterval(()=>{update(response, startyear +(index%numyears));
                  index+=1;
                  },2000);
  });

</script>

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