D3 Examples - Line_chart_with

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:black;
      stroke-width:2;
    }
  </style>
</head>
​
<body>
  <select></select>
  
  <script>
    
// function filterJSON(json, key, value) {
//   var result = [];
//   json.forEach(function(val,idx,arr){
//     if(val[key] == value){
    
//       result.push(val)
//     }
//   })
//   return result;
// }
    
function filterJSON(json, location, value){
        var result = [];
  json.forEach( function(val, idx, arr){
    if(val.name == location){
//       result.push(val.value)
      result.push(val[value])
      
    }
  })
    return result;
}
​
​
​
var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    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)
        .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
  // set up scales
    var x = d3.scaleLinear()
        .range([margin.left,width])
    var y = d3.scaleLinear()
        .range([height,margin.bottom])
    
var line = d3.line()
    .x(function(d){return x(d[0])})
    .y(function(d){return y(d[1])})
    
d3.json("nations.json", function(error, json) {
  if (error) throw error;
  
    var databycountry = d3.nest()
        .key(function (d){return d.name})
        .map(json);
​
// console.log(databycountry.get("Angola")[0].income)
// set up dropdown menu
        var dropdown = d3.select("select")
            .attr("id", "ddSel");
  
    var options = dropdown.selectAll("option")
        .data(json)
    options.enter()
        .append("option")
        .text(function(d){return d.name})
​
      
d3.select("#ddSel")
        .on("change", function(){
      var sect = document.getElementById("ddSel");
      var country = sect.options[sect.selectedIndex].value;
        data = filterJSON(json, country, "income")
      updateGraph(data)
    }
         );
  data = filterJSON(json, "Angola", "income")
  updateGraph(data)
​
​
​
//data block ends here
});
    
  function updateGraph (data){
    //scale to the data
    x.domain(d3.extent(data, function(d){return d[0]}))
    y.domain(d3.extent(data, function(d){return d[1]}))
    
    var country = svg.selectAll(".line")
        .data(data)
    country.enter().append("path")
    .attr("class", "line")
    country.transition()
    .attr("d", function(d){
      return line(d.values)
    })
  }  
    
    
    
    
    
    
//     THIS WORKS
//     console.log(filterJSON(data, "Angola", "income"))
  
//  do everything within the dropdown change function- is this a thing?
// var keyChange = dropdown.on("change", function(d){ //needs something else here
//  var countrySelection = d3.select(this).property('value');
//   return countrySelection
//   });
// console.log(keyChange)
  //re map dataset so key = name
​
​
  
// console.log(databycountry)
//   var selectedData = databycountry.get(KEY)
// var desiredSeries = radio buttons for this 
    
//work with income series by default
// var tsArray = selectedData;
// this is probably not the way to do thi? 
​
​
​
      
// get the extent of the data to change the scale based on the data
// var xExtent = d3.extent(tsArray, function (d){return d[0]})
// var yExtent = d3.extent(tsArray, function (d){return d[1]})
​
// var x = xScale.domain(xExtent) 
// var y = yScale.domain(yExtent)
//     var xAxis = d3.axisBottom()
//          .scale(xScale); 
//      var yAxis = d3.axisLeft()
//          .scale(yScale);
    
//    var line = d3.line()
//      .x(function (d){return d[0]}) // accessor
//          .y(function (d){return d[1]}) // accessor
// //           .curve() // curve type - optional
// ;
  
  
// svg.append("path")
​
//         .attr("class", "line")
//          .datum(tsArray)
//         .attr("d", line);
​
// line(data);
    
    
      
      
    
    
    
​
  </script>
</body>
​
    