Haggin Health & Wealth Animated

<!DOCTYPE html>
<head>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
    	body { 
    		margin: 0;
    		position: fixed;
    		top: 0;
    		right: 0;
    		bottom: 0;
    		left: 0;
		}

.title {
			font-family: "Courier";
			font-size: 32px;
			fill: #000;
		}

.axis {
			font-family: "Courier";
			font-size: 11px;
			fill: #808080;
		}

.circle {
			fill: lime;
			fill-opacity: 1.0;
			stroke: limegreen;
		}
	</style>
</head>
<body>
	<script>
		d3.json("nations.json", function(error, json) {
			if (error) throw error;

// var
      var data = json;
      var width = 960;
      var height = 500;
      var margin = { top: 50, right: 50, bottom: 50, left: 50};

// write function to select for year
      var year = 1800;
      var selectForYear = function(data, year) {
        var selection = data.find(function(i) {
        return i[0] == year
      });
      if(selection) {
        return selection[1]
      }
      };

d3.json("nations.json", function(error, json) {
			if (error) throw error;
      
      
     var = nation_array = array.map(function map_function(d, i, data) {
        //d is the array item
       return 
      });
      
	// extents
      var xExtent = d3.extent(data, function(d) { return d.income });
      var yExtent = d3.extent(data, function(d) { return d.lifeExpectancy });

// scales
      var xScale = d3.scaleLinear()
      			.domain(xExtent)
      			.range([margin.left, width - margin.right]);
      var yScale = d3.scaleLinear()
      			.domain(yExtent)
      			.range([height - margin.bottom, margin.top]);

// axes
      var xAxis = d3.axisBottom()
      			.scale(xScale);
      var yAxis = d3.axisLeft()
      			.scale(yScale);

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

// circles
			var circle = svg.selectAll("circle")
      			.data(data)
      			.enter()
      			.append("circle")
      			.attr("cx", function(d)  { return xScale(d.income) })
            .attr("cy", function(d) { return yScale(d.lifeExpectancy)} )
      			.attr("r", 10)
      			.attr("class", "circle");
     
	// axes
			var axisX = svg.append("g")
				.call(xAxis)
				.attr("transform", "translate(" + [0, height - margin.bottom] + ")")
				.attr("class", "axes")
			var axisY = svg.append("g")
				.call(yAxis)				
				.attr("transform", "translate(" + [margin.left, 0] + ")")
				.attr("class", "axes");
		});
	</script>
</body>
</html>

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