D3 Examples - Metis Class 3 Starter Block

xxxxxxxxxx
 
<script src="https://d3js.org/d3.v4.min.js"></script>
​
<style type="text/css">
  /*css to go here*/
  svg {
    border:1px solid #f0f;
  }
​
</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;
  
  function update(year) {
    console.log(data)
     var subset = data.filter(function(d){
     return d.year === year;
   });
   
   var circles = svg.selectAll('circle')
    .data(subset, function(d) {return d.gen + d.site});
    
​
    //remove exit selection
    var exit = circles.exit()
         .transition().duration(duration)
         .attr('r', 0)
         .remove()
    
    remove()
    
    //enter selection, 
    var enter = circles.enter().append('circle')
//                  .attr('cx', width)  coming from the right 
                                .attr('cx',function(d) {return   xScale(d.site);}) 
                                .attr('r', 20)
    // where does it start to fall, only add to enter 
    
    //add enter + update together
    //set attribute on them
    circles.merge(enter)
    .transition().duration(duration)
    .attr('r',5)
    .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 +=1;
//     if (year > 1936){
//       year = 1927;
//     }
//     update();
//   }, duration * 2)
  
 d3.csv("barleyfull.csv", function(error, response) {
  if (error) console.log(error);
   
   response.forEach(function(d){
     d.yield = +d.yield;
     d.year = +d.year;
     
   });
   console.log(data);
   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>
​
    