Metis Health & Wealth of Nations Country Comparison

forked from ElaineYu's block: Metis Health & Wealth of Nations Country Comparison

<!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; }
    .line {
      fill: none;
      stroke: #c0c0c0;
      stroke-width: 1.5px;
    }
  </style>
</head>

//  HOMEWORK ASSIGNMENT:
    // 1. pick: pop, $, or death
    // 2. pick a country
    // 3. create line chart
    // 4. create dropdown of countries
    // 5. create ability to pick different series
    // 6. create ability to compare two countries

// Helpful References
    // Line chart with dropdown selector: https://bl.ocks.org/jhubley/17aa30fd98eb0cc7072f

// Margin conventions: https://bl.ocks.org/mbostock/3019563
    // Define the margin object with properties for the four sides
    var margin = {top: 20, right: 40, bottom: 200, left: 70};
    // define width and height as the INNER dimensions of the chart area
    var width = 960 - margin.left - margin.right;
    var height = 500 - margin.top - margin.bottom;

// General Instructions and Breakdown
		// 1. Determine the range. The range is your screen space display.
    //    For x-scale, .range([0 , width])
    //    For y-scale, .range([height, 0])

// 2. Determine the domain.  The domain is your data (e.g. income per capita).
    //    Requires the extent of your data (min and max values). For example
    //    X-axis
    //    var xExtent = d3.extent(data, d => d.income);
    //    .domain([300, xExtent[1]]) // income per capita data
    //    Y-axis
    //    var yExtent = d3.extent(data, d => d.lifeExpectancy);
    //    .domain([0, yExtent[1]]) // life expectancy data

// 3. Determine the scale, which requires domain and range
    //    Scales can also be used with virtually any type of data, such as named categorical data or discrete data that requires sensible breaks.
    //    For continuous quantitative data, you typically want a linear scale.

// 4. Determine the axes, which requires scale
		// 5. Draw svg. Append the svg to the body
    // 6. Append axes

// Create global variables
    
    var dropdownSelectForCategory = 'population';
    var dropdownSelectForCountry = 'Angola';
    
     xAxis = svg.append('g')
        .attr("transform", "translate(0," + height + ")") // Move x-axis down translate(tx, ty) / (0, 500 - margin.top - margin.bottom)
        .call(axes.x)

yAxis = svg.append('g')
        .call(axes.y)
    
    var appendLine = svg.append("path")
    		.attr("class", "line")

// 1. Determine the range. The range is your screen space display.
    var loadRange = function() {
      return {
        x: [0, width],
        y: [height, 0]
      }
    }

// 2. Determine the domain.  The domain is your data (e.g. income per capita).
    var loadDomain = function(xValues, yValues) {
      return {
        x: d3.extent(xValues), // year
        y: d3.extent(yValues) // Example: population
      }
    }

// 3. Determine the scale, which 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, which 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. --- DON'T DRAW THE SVG EVERY TIME. ONCE YOU'VE APPENDED IT, YOU SHOULD NEVER NEED TO APPEND IT AGAIN.
   // var drawSVG = function() {
     // var svg = d3.select("body")
       //         .append("svg") // Append the svg to the body
         //           .attr("width", width + margin.left + margin.right)
           //         .attr("height", height + margin.top + margin.bottom)
             //   .append("g")
               //     .attr("transform",
                 //         "translate(" + margin.left + "," + margin.top + ")");
   //   return svg;
   // }

// 6. Append axes
    var appendAxes = function(svg, axes){

}

function getXAxisValueExtent(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
          // console.log(d3.extent(allMinMax));
          return d3.extent(allMinMax)
        })
      var xValuesYearMinMax = d3.extent(d3.merge(nationYears));
      return xValuesYearMinMax
      // [1800, 2009]
    }

var findByYear = function(data, year) {
      var resultArry = data.find(function(i) {
        return i[0] === year
      })
      if(resultArry) {
        return resultArry[1]
      }
    }

// 7.5. Create global variables

// 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 drawLine(svg, scale, lineData) {
      var line = d3.line()
        .x(function(d) { return scale.x(d[0])})
        .y(function(d) { return scale.y(d[1])})
      
      var appendLine.datum(lineData)
        .attr("d", line);
    }

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.value) {
            arrayOfYAxisValuesForCountry.push(newNation.value);
          }
      }
      var domain = loadDomain(xValuesYearMinMax, arrayOfYAxisValuesForCountry);
      var range = loadRange();
      var scale = loadScale(domain, range);
      var axes = loadAxis(scale);
      xAxis.call(axes.x);
      yAxis.call(axes.y);

var lineData = getLineDataForCountryAndCategory(xValuesYearMinMax, nationsData, countryName, categoryStr);
      drawLine(svg, scale, lineData)
      //  Rough direction
      // <select></select>
      // var dropdown = d3.select(“select”);
      //
      // var options = dropdown.selectAll(“option”) // don’t exist before they exist
      //                       .data(lineData)
      // //
      // options.enter()
      //        .append(“option”)
      // // .text(function(d) { return d.name})
      // //
      // dropdown.on(“change”, onChange)
      //
      // console.log(this.value)
    }

// 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 updateChartByDropdownCategoryAndCountry(xValuesYearMinMax, nationsData) {
      populateCategoryDropdown()
			var dropdownCategory = d3.select("#dropdown-category");
      var dropdownCountry = d3.select("#dropdown-countries");
      
      
   }
    
    
    
    function updateChartByCategory(xValuesYearMinMax, nationsData, countryName) {
      populateCategoryDropdown()

// instead of setting a variable in there, set a global varialbe
      
      var dropdownCategory = d3.select("#dropdown-category");
      console.log('dropdowncat', dropdownCategory);
      dropdownCategory.on("change", function() {
        console.log("hiiii");
        console.log(this);
        console.log(this.value);
        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)
      })
      // console.log('dropdown category value', dropDown._groups[0][0].value);

}

d3.json('nations.json', function(error, nations) {
      console.log('Original data', nations)
      var xValuesYearMinMax = getXAxisValueExtent(nations);

// var sel = document.getElementById('dropdown-category');

// console.log('vat', sel.options[sel.selectedIndex].value);
      // var domain = loadDomain([1800, 2009], [0, 20000000])
      // 2. Create an array of Objects
      // var arrayAllPopulationObjectsforIsrael = [];
      // for(var year=xValuesYearMinMax[0]; year<=xValuesYearMinMax[1]; ++year) {
      //     var newNation = buildObjectForCountry(rawDataForIsrael, year, "population")
      //     if (newNation.value) {
      //       arrayAllPopulationObjectsforIsrael.push(newNation);
      //     }
      // }

populateCountryDropdown(nations);

// updateChart(xValuesYearMinMax, nations, "Israel", "lifeExpectancy")
      updateChartByCategory(xValuesYearMinMax, nations, "Israel")

function drawChart(xValuesYearMinMax, nationsData, countryName, categoryStr) {
        
      }

})

</script>
</body>

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