Exports and Imports, % of GDP

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Trade in goods and services</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
		<style type="text/css">
									
		    body {
	        	background-color: white;
		        font-family: Helvetica, Arial, sans-serif;
	        }
		
			svg {
				background-color: #EBF2DE;
			}
			
			circles {
				background-color: #000000;
				shape-rendering: crispEdges;
			}
			
			circle:hover { 
		        fill: #C2E3E8;
	        } 
	        
	        .axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}
			
			.axis text {
				font-family: sans-serif;
				font-size: 12px;
			}
			
			</style>
	</head>
	<body>
 
		<svg width="1000">
			<ellipse cx="10" cy="10" rx="100" ry="100" fill="#B8CCB8" />
			<ellipse cx="75" cy="75" rx="50" ry="50" fill="#D9FFFF" />
			<text x="65" y="80" fill="charcoal" font-size="36" font-weight="bold" font-family="Helvetica">Trade in goods and services</text>
		    <text x="65" y="105" fill="charcoal" font-size="14" font-weight="bold" font-family="Helvetica">Exports and Imports, % of GDP, 2013 - Source: National Accounts at a Glance</text>
					
		
        <script type="text/javascript">		
            
            var w = 1000;
            var h = 700;
            var padding = [10, 10, 40, 100];//[top, right, bottom, left]

var svg = d3.select("body")
						.append("svg")
						.attr("width", w)
						.attr("height", h);		
			
		    var xScale = d3.scale.linear() 
						.range([ padding[3], h + padding[3] ]);
	
	        var yScale = d3.scale.linear()
						.range([ padding[2], h - padding[2] ]);
						
			var xAxis = d3.svg.axis()
				    	.scale(xScale)
					    .orient("bottom")
						.tickFormat(function(d) {
								return d + "%";
							});
	
			var yAxis = d3.svg.axis()
					    .scale(yScale)
					    .orient("left")
						.tickFormat(function(d) {
								return d + "%";
							});						
												
			d3.csv("exportsimports.csv", function(data) {

data.sort(function(a, b) {
					return d3.descending(+a.EXP2013, +b.EXP2013);
					
				});
				
				xScale.domain([ 0, 100]);

yScale.domain([ 100, 0]);

var circles = svg.selectAll("circle")
							.data(data)
							.enter()
							.append("circle");

circles.attr("cx", 100)
					.attr("cy", 650)
					.attr("r", 0.1)
					.attr("height", yScale())
					.attr("fill", "#87A7C4")
					.append("title")
					.text(function(d) {
						return d.Location + "'s Net Trade is " + d.EXP2013 - d.IMP2013});
						
							
				circles.sort(function(a, b) {
					return d3.ascending(+a.EXP2013, +b.EXP2013);
				})
				
					.transition()
					.delay(function(d, i) {
						return i *50;
					})
					.duration(2000)
					.attr("cx", function(d) {
						return xScale(d.EXP2013);
					})
					.attr("cy", function(d) {
						return yScale(d.IMP2013);
					})
					.attr("r", 4);
					
			svg.append("g")
		        .attr("class", "x axis")
		        .attr("transform", "translate(0," + (h - padding[2]) + ")")
		        .call(xAxis);

svg.append("g")
		        .attr("class", "y axis")
		        .attr("transform", "translate(" + (padding[3]) + ",0)")
		        .call(yAxis);

});

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

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js