Old school D3 from simpler times

All examples By author By category About

evbettor

Full window Github gist

Metis Class 3 Starter Block

Built with blockbuilder.org

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

<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){
     var filteredData = data.filter(function(d) {
      return d.year === year;
    });
    
    var circles = svg.selectAll('circle')
      .data(filteredData, function(d) {return d.gen + d.site});
    
    exit = circles.exit()
      .transition().duration(duration)
      .attr('r',0)
      .remove();
    
    enter = circles.enter().append('circle');
    
    circles = circles
      .enter().append('circle')
      .attr('cx', function(d) {return xScale(d.site);})
   // .attr('cy', function(d) {return yScale(d.yield);})
     .attr('r', 20)
     .merge(enter)
      .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)})
    
  };
  
  d3.csv('barleyfull.csv', function(err, response){
  	if (err) {
      console.log(err);
      return;
    }
    response.forEach(function(d){
             d.yield= +d.yield;
               
                          
    });

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