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: blue;
      stroke-width: 3;
    }
  </style>
</head>
​
<body>
  <div class="g-chart-container">
  <h3>Line Graph</h3>
</div>
  </body>
  <script>
    
    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(".g-chart-container").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
           .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
  /*
  //extents
  var xExtent = d3.extent(function(originalData){
    return(d.income[0])
  })
  
  var yExtent = d3.extent(function(originalData){
    return(d.income[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)
        .tickSize(-height)
  
  var yAxis = d3.axisLeft()
        .scale(yScale)
    .tickSize(-width)
  
  
​
  //defining callback function, which reshapes the data
  //var countryName = "Angola" //toggle this
  
  var line = d3.line()
        .x(function(d){ return xScale(d.year);
                    })
        .y(function(d) { return yScale(d.life);
                     });
    
  //reading the data file & setting callback function
    d3.json("nations.json", main);
​
  function main(error, data){
        if(error) { 
        throw(error);
        
        data.forEach(function(d){
          d.life = +d.lifeExpectancy[1];
          d.year = +d.lifeExpectancy[0]
          
        })
        
    };
   
    
    
      
//       svg.append("path")
//          .datum(originalData)
//          .attr("d", line);
​
  
  
    
     xScale.domain(d3.extent(data, function(d) { return d.year; }));
      yScale.domain(d3.extent(data, function(d) { return d.life; }));
     
    countryfilt = data.filter(function(d) { return d.name == "Angola" });
    
     var xAxisGroup = svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + (height) + ")")
      .call(xAxis);
​
  var yAxisGroup = svg.append("g")
      .attr("class", "y axis")
      .attr("transform", "translate(" + (width) + ",0)")
      .call(yAxis);
​
  svg.append("path")
      .datum(countryfilt)
      .attr("d", line);
​
  
    console.log(data)
   }; 
    
  </script>
​
​
    