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] + ')');
  
  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;
    });
    
    // create scales
    var minMaxY = d3.extent(response, function(d) {return d.yield});
    console.log(minMaxY)
    var yScale = d3.scaleLinear()
        .domain(minMaxY)
    // right now minMaxY is [2.9, 75.5]
    // so you want 2.9 to be mapped to height, 75.5 to 0
        .range([height, 0]);
    
    // for the x's domain, we want to get all the sites
    // this will give us ALL the sites
    // but what is nice is that d3 scale will automatically unique it for us
    var xDomain = response.map(function(d) {return d.site});
    // let me do the x scale, since we've never seen it before
    // we'll use a subset of ordinal scale called **scale band**
    // scale band takes as domain a set of categories (sites)
    // and returns a range that's continuous which is nice 
    var xScale = d3.scaleBand()
        .domain(xDomain)
        .rangeRound([0, width]);
    var colorScale = d3.scaleOrdinal(d3.schemeCategory20);
    
    // now let's filter like missy is saying
    // filter is like map, so capture the result in a variable
    var filteredData = response.filter(function(d) {
      // make sure this is string (if we had converted to int
      // earlier, this should be int)
      return d.year === '1927';
    });
    
    // select container, add child elements to it
    // svg is main container, how to draw circles?
    var circles = svg.selectAll('circle')
        .data(filteredData)
        .enter().append('circle')
        .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);});
  });
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
</script>
​
    