Project Prototype

<!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; } 
    .scatterMark {}
    .graphGroup{}
    .xAxis, .yAxis {font-size: 30}
    .xAxisText, .yAxisText {}
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var margin = {top:5, bottom:5, left: 5, right: 5};
    var width = 960;
    var height = 500;
    var innerWidth = width - margin['left'];
    var innerHeight = height - margin['top'];

var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);

console.log(maxY)
      
      data = data.filter(function(d){return(d.Year == year1 || d.Year == year2);});
      //data = data.filter(function(d){return((!isNaN(d["Total GHG"])));})
      
      
			data = d3.nest()
      					.key(function(d){return(d.Country); })
      					.key(function(d){return(d.Year);}).sortKeys(d3.ascending)
      					.rollup(function(arr){return(d3.sum(arr, d => {return(d["Total GHG"]);}));})
      					.entries(data)
      		
    	
      
      var graphGroup = outerGroup.selectAll('.graphGroup').data([null]);
      		graphGroup = graphGroup.enter()
          								.append('g')
          								.merge(graphGroup)
          									.attr('transform', `translate(${offset.x},${offset.y} )`) //pass offset parameters here
      
      var updatePhase = graphGroup.selectAll('.scatterMark').data(data);
      var updatePhase = updatePhase.enter()
      										.append('circle')
      											.attr('class','.scatterMark')
      											.attr('r', 3)
      										.merge(updatePhase)
      											.attr('cx', function(d){return(
                          		xScale(  
                            	d['values'].filter(d => parseInt(d.key) == year1)[0]['value']
                            	)
                          
                          	);})
      											.attr('cy', function(d){return(
                           	 yScale(
                            		d['values'].filter(d => parseInt(d.key) == year2)[0]['value']
                            	)
                            
                            	);})
      											.attr('fill',
                               	function(d)
                                	{
                            			if(countries.indexOf(d['key']) >= 0)
                                  	return('red');
                            			else
                                		return("rgba(0,100,0,0.3)");   
                          	}
                               
                               	)
      
    ;
      
      
      var xAxisG = graphGroup.selectAll('.xAxis').data([null]);
      xAxisG = xAxisG.enter()
      			.append('g')
      			.attr('class', 'xAxis')
      			.attr('transform', `translate(${xScale(0)},${yScale(maxY)})`);
      var xAxis = d3.axisBottom()
      						.scale(xScale)
      						.tickPadding(2)
      						.ticks(5)
      						.tickFormat(d3.format('.0s'));

var xAxisText = xAxisG.selectAll('.xAxisText').data([null]);
      	xAxisText = xAxisText.enter()
        							.append('text')
        							.attr('class','xAxisText')
        							.text(year1)
        							.attr('stroke','black')
        							.attr('fill', 'black')
        							.merge(xAxisText)
        							  .attr('x', xScale(maxY)/2.24)
    										.attr('y', yScale(maxY)+39)
        								.attr('font-size', width/50);
      
      
      var yAxisG =  graphGroup.selectAll('.yAxis').data([null]);
      yAxisG = yAxisG.enter()
      					.append('g')
      					.attr('class', 'yAxis')
      					.merge(yAxisG)
//      					.attr('transform', 'rotate(-90)');
      
      var yAxis = d3.axisLeft()
      					.scale(yScale)
      					.tickPadding(2)
      					.ticks(5)
      					.tickFormat(d3.format('.0s'))
      					;

//    coordinates = {x1:  0, x2: 200, y1:0, y2:200};
//    offset = {x: 100, y:100};    
//        d3.csv('Data2.csv', row, function(d){return(render(d,['Albania', 'Zimbabwe', 'Zambia', ' United States', 'China'],2003, 2009, coordinates, offset));});

</script>
</body>

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