Day 7 HW

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    path{
      stroke: black;
      stroke-width: 5;
      fill: none;

}   
  </style>
</head>

<body>
  <select id="dropdown-category"></select>
  <select id="dropdown-countries"></select>
  <script>
    
    	var margin = { top: 20, right: 20, bottom: 20, left: 20 };
			var width = 960 - margin.left - margin.right;
			var height = 500 - margin.top - margin.bottom;
        
// 1. Determine the range (screen space display)
        var loadRange = function() {
          return {
            x: [0, width],
            y: [height, 0]
          }
        }
        
// 2. Determine the domain (your data. Requires the extent (the min and max))
    var loadDomain = function(xValues, yValues) {
      return {
        x: d3.extent(xValues),
        y: d3.extent(yValues)
      }
    }

// 3. Determine the scale (requires domain and range)
    var loadScale = function(domain, range) {
      return {
        x: d3.scaleLinear().domain(domain.x).range(range.x),
        y: d3.scaleLinear().domain(domain.y).range(range.y)
      }
    }
    
// 4. Determine the axes (requires scale)
    var loadAxis = function(scale) {
      return {
        x: d3.axisBottom().scale(scale.x),
        y: d3.axisLeft().scale(scale.y)
      }
    }
    
// 5. Draw svg / add svg to canvas.
    var drawSVG = function() {
      var svg = d3.select("body")
      					.append("svg")
      					.attr("width", width + margin.left + margin.right)
      					.attr("height", height + margin.top + margin.bottom)
      					.append("g")
      					.attr("g")
      					.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
      return svg;
    }
    
// 6. Append axes
    var appendAxes = function(svg, axes) {
      svg.append("g")
      	.attr("transform", "translate(0," + height + ")")
      	.call(axes.x)
      
      svg.append("g")
      	.call(axes.y)
      	return svg
    }
    
    function getAxisValueExtent(nationsData) {
      var nationYears = nationsData.map(function(nation) {
        // Determine min and max for each
        var incomeMinMax = d3.extent(nation.income, function(i) {return i[0]})
        var lifeMinMax = d3.extent(nation.lifeExpectancy, function(i) {return i[0]})
        var popMinMax = d3.extent(nation.population, function(i) {return i[0]})
        // Merge the arrays
        var allMinMax = d3.merge([incomeMinMax, lifeMinMax, popMinMax])
        // Find the extent of all the arrays
        return d3.extent(allMinMax)
      })
    var xValuesYearMinMax = d3.extent(d3.merge(nationYears));
      return xValuesYearMinMax
    }
    
   var findByYear = function(data, year) {
     var resultArray = data.find(function(i) {
       return i[0] === year
     })
     if(resultArray) {
       return resultArray[1]
     }
   }
   
   // 8. Build an object for category population
   var buildObjectForCountry = function(nation, year, categoryStr) {
   
   		if (categoryStr === "population") {
        var n = {
          country: nation[0].name,
          year: year,
          category: "population",
          value: findByYear(nation[0].population, year)
        }
        return n
      } else if (categoryStr === "lifeExpectancy") {
        var n = {
          country: nation[0].name,
          year: year,
          category: "lifeExpectancy",
          value: findByYear(nation[0].lifeExpectancy, year)
        }
        return n
      } else if (categoryStr === "income") {
        var n = {
          country: nation[0].name,
          year: year,
          category: "income",
          value: findByYear(nation[0].income, year)
        }
        return n
      }
     
// 7. Get original data for specified country
     function getDataForCountry(nationsData, countryName) {
       return nationsData.filter(function(nation) {
         if (nation.name === countryName) {
           return nation
         }
       });
     }
     
     function getLineDataForCountryAndCategory(xValuesYearMinMax, nationsData, countryName, categoryStr) {
       var data = [];
       var originalDataForOneCountry = getDataForCountry(nationsData, countryName);
       for (var year = xValuesYearMinMax[0];
           year <= xValuesYearMinMax[1]; ++year) {
         var newNation = buildObjectForCountry(originalDataForOneCountry, year, categoryStr)
         if (newNation.value) {
           data.push([newNation.year, newNation.value])
         }
       }
       return data;
     }
     
     function drawLine(svg, scale, lineData) {
       var line = d3.line()
       .x(function(d) { return scale.x(d[0])})
       .y(function(d) { return scale.y(d[1])})
       
       svg.append("path")
       	.attr("class", "line")
       	.datum(lineData)
       	.attr("d", line);
       return svg;
     }
    
    function updateChart(xValuesYearMinMax, nationsData, countryName, categoryStr) {
      var arrayOfYAxisValuesForCountry = [];
      var originalDataForOneCountry = getDataForCountry(nationsData, countryName);
      for(var year=xValuesYearMinMax[0];
         year <= xValuesYearMinMax[1]; ++year) {
        var newNation = buildObjectForCountry(originalDataForOneCountry, year, categoryStr)
        // Get an array of nation population values for domain/extent
        if (newNation.values) {
          arrayOfYAxisValuesForCountry.push(newNation.value);
        }
      }
      
      var domain = loadDomain(xValuesYearMinMax, arrayOfYAxisValuesForCountry);
      var range = loadRange();
      var scale = loadScale(domain, range);
      var axes = loadAxis(scale);
      var svg = drawSVG();
      appendAxes(svg, axes);
      
      var lineData = getLineDataForCountryAndCategory(xValuesYearMinMax, nationsData, countryName, categoryStr);
      drawLine(svg, scale, lineData)
    }
    
    // Populate dropdowns
    function populateCategoryDropdown() {
      var dropdownOptions = [
        {text: "Population", value: "population"},
        {text: "Income", value: "income"},
        {text: "Life Expectancy", value: "lifeExpectancy"}
                            ]
      d3.select("#dropdown-category")
      	.selectAll("option")
      	.data(dropdownOptions)
      	.enter()
      	.append("option")
      	.attr("value", function(option) {return option.value;})
      	.text(function(option) {return option.text;})
    }
    
     function populateCountryDropdown(nationsData) {
       var dropdownOfCountries = []
       nationsData.forEach(function(nation) {
         dropdownOfCountries.push({ text: nation.name, value: nation.name })
       });
       d3.select("#dropdown-countries")
       	.selectAll("option")
       	.data(dropdownOfCountries)
       	.enter()
       	.append("option")
       	.attr("value", function(option) {return option.value;})
       	.text(function(option) {return option.text;})
     }
     
     var dropdownValue = "population";
     
     function updateChartByCategory(xValuesYearMinMax, nationsData, countryName) {
       populateCategoryDropdown()
       
       var dropdownCategory = d3.select("#dropdown-category");
       console.log('dropdowncat', dropdownCategory);
       dropdownCategory.on("change", function() {
         dropdownValue = this.value;
         console.log("dropdown options", dropdownValue);
         var sel = d3.select("#dropdown-category").node().value;
         console.log("hey", sel);
         updateChart(xValuesYearMinMax, nationsData, countryName, this.value)
       })
     }
   
    d3.json('nations.json', function(error, nations) {
      console.log("Original data", nations)
      var xValuesYearMinMax = getXAxisValueExtent(nations);
    }) 
     
     
   	data = d3.json("nations.json", function(error, data) {
      	data = data[0].income
			if (error) return error;  
     
     
    var xScale = d3.scaleLinear()
  	.domain([1800, 2010])
  	.range([0, width]); //chart becomes flipped if enter [960, 0] into range instead
  
  var yScale = d3.scaleLinear()
  	.domain([0, 100000])
  	.range([height,0]);
  
  			// axes
			var x = d3.axisBottom()
				.scale(xScale)
				.ticks(10, ".0f");
			var y = d3.axisLeft()
				.scale(yScale);

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 line = d3.line()
  	.x(function(d) { return xScale(d[0])})
  	.y(function(d) { return yScale(d[1])});
         
        
      			// axes
			var xAxis = svg.append("g")
				.call(x)
				.attr("transform", "translate(0, " + height + ")");
			var yAxis = svg.append("g")
				.call(y);
      
//      var yLabel = yAxis.append("text")
	//			.text("income per capita, inflation adjusted (dollars)")
	//			.attr("class", "axis")
	//			.attr("transform", "translate(" + (margin.left * 0.85) + ", 0) rotate(-90)")
		//		.attr("text-anchor", "end");

console.log(line(data));
    
svg.append("path")
	.datum(data) //.datum tells the computer to create ONE thing, vs plotting multiple circles
	.attr("d", line); //The shape of an SVG Path element is defined by one attribute: d
  };
  </script>
</body>

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