Nations Line Graph v2

forked from VirginiaHNg's block: Nations Line Graph v2

<!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 {
      fill: none;
      stroke: pink;
      stroke-width: 3;
    }
    
  	#countrySelect{
      position:absolute;
      top:10px;
      left:100px;
		}
  </style>
</head>

<body>

<select id="#countrySelect"></select>
  <script>
    
var dropdown = d3.select('body')
  	.append('select')
  	.attr('class','select')
		.attr('id','countrySelect')
    .on('change',onchange)

var margin = {top: 20, right: 20, bottom: 20, left: 20};
    var width = 960 - margin.left - margin.right
    var height = 500 - margin.top- margin.bottom
    
    var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    
 
  //reading the data file & setting callback function
	var data = d3.json("nations.json", main)

function main(error, originalData){
    	if(error) { 
     		throw(error)
    	};
    
   //console.log(originalData)

//set variable to country + field
   
//  function getCountries(input, field) {
//     var countryOptions = [];
//     for (var i=0; i < input.length ; ++i)
//         countryOptions.push({text: input[i][field], value: input[i][field]});
//     return countryOptions;
//  }   
        
    var countryOptions = originalData.map(function(a) {
      	return {text: a.name, value: a.name}
    });
    console.log(countryOptions)
    
    
  var options = dropdown
      .selectAll('option')
      .data(countryOptions)
      .property("selected", function(d){ return d === 'Botswana'; })
      .enter()
      .append('option')
      .attr("value", function(option) { 
        return option.value; 
      })
      .text(function(option) {
        return option.text;
      })

console.log(countryOptions);

var yAxis = d3.axisLeft()
		.scale(yScale)
  
  svg.append("g")
  	.attr("transform", "translate (20, 460)")
  	.call(xAxis);

svg.append("g")
  	.attr("transform", "translate (20,0)")
  	.call(yAxis);
 	  
      svg.append("path")
      	.datum(selection.lifeExpectancy)
      	.attr("d", line);
    
   
  };    
    
    
  </script>
</body>

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