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;
    }
  </style>
</head>
​
<body>
  <!-- creating a dropdown -->
​
  
  <script>
    
var select = 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
   
//    var optionsData = originalData.forEach(function(nation) /*calling each object nation*/{
//      originalData[nation.name] = 
//    });
console.log(originalData.entries)
    
//     var options = select
//      .selectAll('options')
//      .data(optionsData)
//     .enter()
//     .append('options')
//      .text(function(d) {
//       return d;
//     })
​
   var selection = originalData[0]
    
  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>
​
    