D3 Examples - Nations Line Graph v2

xxxxxxxxxx
 
<!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 countryName = 'Botswana'
//    var selection = originalData[0]
   
   function getDataForCountry(originalData, countryName) {
      return originalData.filter(function(nation) {
        if (nation.name === countryName ) {
          return nation
        }
      })
   };
   
    var selection = getDataForCountry(originalData, countryName)[0]
//       console.log(selection)
    
    d3.select('#countrySelect')
    .on('change', function() {
        var newCountry = eval(d3.select(this).property('value'));
     var selection = getDataForCountry(originalData, newCountry)[0]
    
    console.log(newCountry)
   })
      
  var line = d3.line()
        .x(function(d){ return xScale(d[0])
                    })
        .y(function(d) { return yScale(d[1])
                     });  
    
  //extents: d3.extent(data, function)
  var xExtent = d3.extent(selection.lifeExpectancy, function(d){
    return(d[0])
  });
 //console.log(xExtent)
  
  var yExtent = d3.extent(selection.lifeExpectancy, function(d){
    return d[1]
  });
  
  //set scales
  var xScale = d3.scaleLinear()
        .domain(xExtent)
        .range([0, width]);
    
  var yScale = d3.scaleLinear()
        .domain(yExtent)
        .range([height, 0]);
  
  
  //set axis & call axis
  var xAxis = d3.axisBottom()
        .scale(xScale)
​
​
  
  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>
​
    