oliviac12 · November 8, 2016 05:39
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!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>
    
   // let's define the margins
   var compareCountries = ["United Kingdom", "Norway", "Germany", "Canada", "Netherlands", "France", "Sweden", "Ireland", "Spain"];
   var containerMargin = {left: 50};
   var margin = {top: 20, right: 10, bottom: 20, left: 10};
   var width = 80 - 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) * compareCountries.length + containerMargin.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(' + [containerMargin.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) {
        // filter and get only the countries in compareCountries
        // indexOf is a Javascript function
        // that takes an element and sees what index it is in the array
        // if it's not in array, it returns -1
        // the below statement is seeing if the country
        // is in the compareCountries array 
        return compareCountries.indexOf(d.country) > -1 && d.cutoff === 'cop50';
      });
      console.log(filteredData)
      filteredData.forEach(function(d) {
        d.val = +d.val;
        d.year = +d.year;
      });
      
      var americaData = data.filter(function(d) {
        return d.country === 'United States' && d.cutoff === 'cop50';
      })
      var incomeByCountry = d3.nest()
      	.key(function(d) {return d.country})
      	.entries(filteredData);
      
      // 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(''))
      	.tickValues([1978, 2010]);
      
      // 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(incomeByCountry)
      var countries = svg.selectAll('.country')
      	.data(incomeByCountry)
      	.enter().append('g')
      	.classed('country', true)
      	.attr('transform', function(d, i) {
          return 'translate(' + (i * (width + margin.right + margin.left)) + ',0)';
        });
      
      countries.append('text')
      	.attr('font-size', 12)
      	.text(function(d) {return d.key});
      
      // now we gotta draw the axes
      countries.filter(function(d, i) {return i === 0})
        .append('g')
      	.call(yAxis);
      countries.append('g')
      	.attr('transform', 'translate(' + [0, height] + ')')
      	.call(xAxis)
      		.selectAll('text')
      		.attr('text-anchor', function(d, i) {return i === 0 ? 'start' : 'end'});
      
      countries.selectAll('.line')
      	.data(function(d) {return [americaData, d.values]})
      	.enter().append('path')
      	.classed('line', true)
      	.attr('d', line)
      	.attr('fill', 'none')
      	.attr('stroke', function(d, i) {return i === 0 ? 'steelblue': 'gray'})
      	.attr('stroke-width', function(d, i) {return i === 0 ? 3 : 1});
    });

  </script>
 </body>
	<!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>

	// let's define the margins
	var compareCountries = ["United Kingdom", "Norway", "Germany", "Canada", "Netherlands", "France", "Sweden", "Ireland", "Spain"];
	var containerMargin = {left: 50};
	var margin = {top: 20, right: 10, bottom: 20, left: 10};
	var width = 80 - 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) * compareCountries.length + containerMargin.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(' + [containerMargin.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) {
	// filter and get only the countries in compareCountries
	// indexOf is a Javascript function
	// that takes an element and sees what index it is in the array
	// if it's not in array, it returns -1
	// the below statement is seeing if the country
	// is in the compareCountries array
	return compareCountries.indexOf(d.country) > -1 && d.cutoff === 'cop50';
	});
	console.log(filteredData)
	filteredData.forEach(function(d) {
	d.val = +d.val;
	d.year = +d.year;
	});

	var americaData = data.filter(function(d) {
	return d.country === 'United States' && d.cutoff === 'cop50';
	})
	var incomeByCountry = d3.nest()
	.key(function(d) {return d.country})
	.entries(filteredData);

	// 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(''))
	.tickValues([1978, 2010]);

	// 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(incomeByCountry)
	var countries = svg.selectAll('.country')
	.data(incomeByCountry)
	.enter().append('g')
	.classed('country', true)
	.attr('transform', function(d, i) {
	return 'translate(' + (i * (width + margin.right + margin.left)) + ',0)';
	});

	countries.append('text')
	.attr('font-size', 12)
	.text(function(d) {return d.key});

	// now we gotta draw the axes
	countries.filter(function(d, i) {return i === 0})
	.append('g')
	.call(yAxis);
	countries.append('g')
	.attr('transform', 'translate(' + [0, height] + ')')
	.call(xAxis)
	.selectAll('text')
	.attr('text-anchor', function(d, i) {return i === 0 ? 'start' : 'end'});

	countries.selectAll('.line')
	.data(function(d) {return [americaData, d.values]})
	.enter().append('path')
	.classed('line', true)
	.attr('d', line)
	.attr('fill', 'none')
	.attr('stroke', function(d, i) {return i === 0 ? 'steelblue': 'gray'})
	.attr('stroke-width', function(d, i) {return i === 0 ? 3 : 1});
	});

	</script>
	</body>