yearly export

<!DOCTYPE html>
<html>
  <head>
    <title>Yearly Export</title>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	*, body{
	   font-family: Helvetica, sans-serif;
       margin: 0;	
	}
	
	#content {
	  margin: auto;
	  width: 800px;
	}
	
	#viz {
	  border: solid 1px red;
	  height: 400px;
	}
	
	select, input,lable {
	  display: block;
	  margin: 10px 0 10px 0;
	}
	
	.tooltip{
	  border: 1px solid #dedede;
	  position: absolute;
	  display: none;
	}
	.tooltip p.subtitle{
	  font-size:smaller;
	}
	.tooltip table{
	  margin: 10px 0 0 0;
	  text-align: left;
	  vertical-align: top;
	}
	.tooltip table tr:first-child th,
	.tooltip table tr:first-child td{
	  border-bottom 1 solid #ccc;
	  padding: 5px 0;
	}
	.tooltip table td:nth-child(2){
	  padding: 0 0 0 10px;
	  text-align: right;
	}
    	
	</style>
  </head>
  <body>
    <div id="content">
	
	  <div id = "viz"></div>
	  <form>
	    <label for = "xaxis">X Axis</label>
		<select id = "xaxis">
		   <option>1995</option>
		   <option>1996</option>
		   <option>1997</option>
		   <option>1998</option>
		   <option>1999</option>
		   <option>2000</option>
		   <option>2001</option>
		   <option>2002</option>
		   <option>2003</option>
		   <option>2004</option>
		   <option>2005</option>
		   <option>2006</option>
		   <option>2007</option>
		   <option>2008</option>
		   <option>2009</option>
		   <option>2010</option>
		   <option>2011</option>
		   <option>2012</option>
		</select>
		<label for = "yaxis">Y Axis</label>
		<select id = "yaxis">
		   <option>1995</option>
		   <option>1996</option>
		   <option>1997</option>
		   <option>1998</option>
		   <option>1999</option>
		   <option>2000</option>
		   <option>2001</option>
		   <option>2002</option>
		   <option>2003</option>
		   <option>2004</option>
		   <option>2005</option>
		   <option>2006</option>
		   <option>2007</option>
		   <option>2008</option>
		   <option>2009</option>
		   <option>2010</option>
		   <option>2011</option>
		   <option>2012</option>
		</select>
		<label for = "labels">Labels?</label>
		<input type = "checkbox" id = "labels" value = "labels"/>
		<input type = "submit" id = "labels" value = "Update"/>
      </form>
	  
	  <div class = "tooltip">
	    <h2>Ghana</h2>
		<p class = "subtitle" id = "abbrv">GHA</p>
		<p class = "subtitle" id = "cont">Africa</p>
		<table>
		  <tr id = "val_2010">
		    <th>2010 Export Value</th>
			<td>$12,334,254,555 USD</td>
		  </tr>
		  <tr id = "val_2011">
		    <th>2011 Export Value</th>
			<td>$1,934,254,555 USD</td>
		  </tr>
		</table>
	  </div>
	</div>
    <script>
	 var data = {};
	 var country_attrs = null;
	  
	 var width = 800,
	      height = 400
		  padding = 20;
		  
	var format_usd = d3.format("$,.0f");
		  
	var x_scale = d3.scaleLog()
	                .range([0,width]);
	var y_scale = d3.scaleLog()
	                .range([height,0]);
					
	var x_axis = d3.axisBottom(x_scale)
	               .ticks(5)
	               .tickFormat(function(d){return d3.format(".2s")(d).replace("G","B");});
	var y_axis = d3.axisLeft(y_scale)
	               .ticks(5)
	               .tickFormat(function(d){return d3.format(".2s")(d).replace("G","B");});	  
	  
    var svg = d3.select("#viz").append("svg")
	            .style("margin", padding/2)
				.attr("width", width-padding)
				.attr("height", height-padding);

svg.append("g")
	     .attr("class","axis")
		 .attr("transform", "translate(30," + (height - 50) + ")")
		 .attr("id", "x_axis");	
		 
	svg.append("g")  
	    .attr("class","axis")
		.attr("transform", "translate(30,-50)")
		.attr("id", "y_axis"); 			
	
	  d3.select("form").on ("submit", function(d){
	     var x_year = document.getElementById("xaxis").value;
		 console.log(x_year);
		 var y_year = document.getElementById("yaxis").value;
		 //console.log(y_year);
		 var show_labels = document.getElementById("labels").checked;
		 //console.log(show_labels);
		 
		 fetch_data(x_year,y_year,show_labels);
		 
		 d3.event.preventDefault();
	  });
	  
	  
	function fetch_data(x_year,y_year,show_labels){
	  if (!country_attrs){
	    country_attrs ={};
		
		d3.json("https://atlas.media.mit.edu/attr/country/", function(error,countries){
	    if(error) return console.warn(error);
		countries.data.forEach(function(d){
		    country_attrs[d.id] = d;
		})
		});
		
		d3.json("https://atlas.media.mit.edu/hs/export/" +x_year+"/show/all/all/",function(error_x,json_x){
          if (error_x) return console.warn(error_x);
		  
		  d3.json("https://atlas.media.mit.edu/hs/export/" +y_year+"/show/all/all/",function(error_y,json_y){
		    if (error_y) return console.warn(error_y);
			
			console.log(json_x,json_y, country_attrs, show_labels);
			
			update(json_x,json_y,country_attrs, show_labels);
		  
		  });
          
        });
       };
	}
	
	function update(x_data,y_data, attrs, show_labels){
	  var x_year = x_data.data[0].year;
	  var y_year = y_data.data[0].year;
	  
	  data = {};
	  x_data.data.forEach(function(d){
        data[d.origin_id] = {
          id: d.origin_id
        };
		data[d.origin_id]["export_val_"+ x_year] = d.export_val;
      });
	  y_data.data.forEach(function(d){
	    if (data[d.origin_id]){
		  data[d.origin_id]["export_val_"+ y_year] = d.export_val;
		}
	  });
	  
	  //console.log(data);
	  
	  x_scale.domain(d3.extent(d3.values(data),function(d){return d["export_val_" + x_year];}));
	  y_scale.domain(d3.extent(d3.values(data),function(d){return d["export_val_" + y_year];}));
	  
	  d3.select("g#x_axis").call(x_axis);
	  d3.select("g#y_axis").call(y_axis);
	  
	  var country_g = svg.selectAll("g.country")
	                     .data(d3.values(data))
						 
      var country_g_enter = country_g.enter()
						 .append("g")
						 .attr("class","country")
						 .attr("transform", "translate(30,-50)");
						 
	  country_g_enter.append("circle");
	  country_g_enter.append("text");
	  
	  country_g_enter.select("circle")
	   .attr("cx", function(d){return x_scale(d["export_val_" + x_year])})
	   .attr("cy", function(d){
	      if (d["export_val_" + y_year]){
		  return y_scale(d["export_val_" + y_year]);}
		  return y_scale(0.01);
		  })
	   .attr("r", 5)
	   .attr("fill", function(d){return country_attrs[d.id]["color"];})
	   .on("mouseover", function(d,i){
	      d3.select(".tooltip h2")
		   .text(function(){
		      return country_attrs[d.id]["name"];
		   });
		   
		   d3.select(".tooltip p#abbrv")
		     .text(function(){
			    if(country_attrs[d.id]["display_id"]){
				   return country_attrs[d.id]["display_id"];
				}
			    return "-";
			});
			
			d3.select(".tooltip p#cont")
		    .text(function(){
			    var contenent_id = d.id.substr(0,2);
				return country_attrs[contenent_id]["name"];
			});
			
			d3.select(".tooltip #val_2010 td")
			  .text(function(){
			    return format_usd(d["export_val_" + x_year]);
			});
			
			d3.select(".tooltip #val_2011 td")
			  .text(function(){
			    if (d["export_val_" + y_year]){
				   return format_usd(d["export_val_" + y_year]);
				}
			    return "-";
			});
			
			d3.select(".tooltip")
			  .style("display","block")
			  .style("left", (d3.event.pageX) + "px")
			  .style("top", d3.event.pageY + "px");})
		.on("mouseout", function(d,i){
		    d3.select(".tooltip")
			  .style("display","none");});
		
		country_g_enter.select("text")
	   .attr("x", function(d){return x_scale(d["export_val_" + x_year])})
	   .attr("y", function(d){
	      if (d["export_val_" + y_year]){
		  return y_scale(d["export_val_" + y_year]);}
		  return y_scale(0.01);
		  })
	   .attr("fill", function(d){return country_attrs[d.id]["color"];})
	   .text(function(d){
	      if (show_labels){
		    if (country_attrs[d.id]["display_id"]){
		    return country_attrs[d.id]["display_id"].toUpperCase();
		  }
		  }
	   });	 
	  
	  country_g.exit().remove();
	
	}

</script>
  </body>
</html>

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