Metis Class 5

forked from sxywu's block: Metis Class 5

forked from anonymous's block: Metis Class 5

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
/*     i always delete that margin thing in the style  */
  </style>
</head>

<body>
  <script>
    // 0. define svg & margin convention
    // 0.5. filter the data for country & cutoff
    // 1. for each through the values to convert them (which attributes?) (make sure to console log!)
    // 2. figure out the scales
    // 3. axes
    // 4. draw the line!
    // ok let's start~  who goes first?  Rumman!
    
   // let's define the margins
   var margin = {top: 20, right: 20, bottom: 20, left: 50};
   var width = 600 - margin.right - margin.left;
   var height = 300 - margin.top - margin.bottom;
   // let's do smaller numbers so that we can see
   // what now?
   var svg = d3.select('body')
   	.append('svg')
    .attr('width', width + margin.right + margin.left)
   	.attr('height', height + margin.top + margin.bottom)
   	// <g> is an SVG group element, and everything
    // within it (circle, rect, line, path, etc.) is relative to it
   	.append('g')
   		.attr('transform', 'translate(' + [margin.left, margin.top] + ')');
     
// load data
var url = 'https://raw.githubusercontent.com/thisismetis/sf16_dataviz2/master/class05/incomes.csv?token=ABYaAQeuKqG3rafZDHXI6azZ__twa65cks5YKn0JwA%3D%3D';
    d3.csv(url, function(data) {
      var filteredData = data.filter(function(d) {
        return d.country === 'United States' && d.cutoff === 'cop50';
      });
      // can also loop through "data", but since
      // all we need to display is the filtered data
      // let's only loop through that
      // data has 1800 rows, and we're only using 9
      // for performance, it's much faster if we
      // just loop through the filtered 9 rows
      // (1800 is actually not that bad for modern browser
      // but it's good practice anyways)
      filteredData.forEach(function(d) {
        d.val = +d.val;
        d.year = +d.year;
      });
      
      // scales!!
      // y is linear because income value is
      // continuous (but you can use log scale, power scale, etc.)
      var yScale = d3.scaleLinear()
      	.range([height, 0])
      // what to use for domain is a lot of trial and error
      // for that matter, which scale to use is
      // also just trial and error to see what looks good
      	.domain(
          [d3.min(filteredData, function(d) {return d.val}) - 5000,
          d3.max(filteredData, function(d) {return d.val}) + 5000]
                 );
      // let's just keep it simple, and use scaleLinear for x-scale also
      // (they're all just years)
      var xScale = d3.scaleLinear()
      	.range([0, width])
      	.domain(d3.extent(filteredData, function(d) {return d.year}));
      
      var yAxis = d3.axisLeft()
      	.scale(yScale)
      	.tickFormat(d3.format('$,'));
      var xAxis = d3.axisBottom()
      	.scale(xScale)
      	.tickFormat(d3.format(''));
      
      // now we gotta draw the axes
      svg.append('g')
      	.call(yAxis);
      svg.append('g')
      	.attr('transform', 'translate(' + [0, height] + ')')
      	.call(xAxis);
      
      // and draw the line!
      // we're only drawing one line, do we need to select all?
      var line = d3.line()
      	.x(function(d) {return xScale(d.year)})
      	.y(function(d) {return yScale(d.val)});
      console.log(line(filteredData))
      svg.append('path')
      	.attr('d', line(filteredData))
      	.attr('fill', 'none')
      	.attr('stroke', 'steelblue');
      	
    })

</script>
</body>

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