class6_hw

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="viz.js"></script>
  
  <style>
    body { margin:100;position:fixed;top:0;right:0;bottom:0;left:0; }
  	#area-1 { 
      stroke: blue;
      stroke-width: 2;
      fill: steelblue;
      opacity: 0.5;
    }
    svg {
      display: block;
      margin: auto;
    }

line {
      fill: none;
      stroke: grey;
      stroke-width: 1;
    }
    
    form{
      font-size: 12;
      display: block;
    }
    input {
      display: block;
    }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    // Set the dimensions of the canvas / graph
    
    var margin = {top: 30, right: 20, bottom: 30, left: 60},
      width = 600 - margin.left - margin.right,
      height = 400 - margin.top - margin.bottom;
    
    var dispatch = d3.dispatch("load", "statechange");
    
    var area = d3.area()
    	.x(d => d[0])
    	.y(d => d[1])
    	.curve(d3.curveBasis);
    
    // setup svg cahrt area
		var svg = d3.select("body")
    	.append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom);
    var chart = svg.append('g')
      .attr("id", "chart")
      .attr("width", width).attr("height", height)
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
    // setup axes
    chart.append('g')
      .attr("class", "axis")
      .attr("id", "x-axis")
      .attr("transform", "translate(" + "0," + height + ")");
    chart.append('g')
      .attr("class", "axis")
      .attr("id", "y-axis");
    
    d3.json('nations.json', d => {
    
      var data = mapCountry(d);
      
      dispatch.call("load", this, data);
      dispatch.call("statechange", this, data, 'United States');
      
    
    });
    
    dispatch.on("load.menu", d => {
      
      var dropdown = d3.select("body")
        .append("div").attr("class", "menu")
        .append("select")
        .attr("class", "dropdown").attr("id", "select-country")
        .on("change", () => {dispatch.call("statechange", this, d);});   
      var countryList = Object.keys(d).sort();
      
      dropdown.selectAll("option")
        .data(countryList)
        .enter().append("option")
        .attr("value", d => d)
        .text(d => d);
      
      // Create radio buttons
      var radio = d3.select(".menu")
        .append("form").attr("id", "select-metric")
        .on("change", () => {dispatch.call("statechange", this, d)});
      
      const metricOptions = ["income", "population", "lifeExpectancy"];
      radio.selectAll("input")
       .data(metricOptions)
       .enter()
       .append("label").text(d => d)
       .append("input").attr("type", "radio")
       .attr("class", "metric-button")
       .attr("name", "metric")
       .attr("value", d => d);
     radio.select(".metric-button").attr("checked", true);
      
      // Set statechange handler
      // dispatch.on("statechange.menu", (country) =>{
      //   console.log(d3.select(".dropdown").property("value"));
      //   dropdown.property("value", country);
      //   let radioVal = d3.select(".metric-button:checked").property("value");
      //   radio.property("value", radioVal);
      // });
    });
    
    // Create chart and load up default data
    dispatch.on("load.area", d => {
      console.log("load area");
      var initialArea = updateChart(chart, d, "United States", "lifeExpectancy");
      chart.append("g").append("path")
        .attr("class", "area")
        .attr("id", "area-1")
        .attr("d", initialArea);
      
      dispatch.on("statechange.area", d => {
        
        let metricVal = d3.select(".metric-button:checked").property("value");
        let countryVal = d3.select(".dropdown").property("value");
        
        console.log(d);
        var updatedArea = updateChart(chart, d, countryVal, metricVal);
        d3.select("#area-1")
          .transition(1000)
          .ease(d3.easeLinear)
          .attr("d", updatedArea);
        
      });
      
    });
    
  </script>
</body>

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