Line_chart_with_dropdown

<!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;
}

// 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>

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