Haggin Health & Wealth Bar Chart

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

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

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

// set min and max
      var xExtent = d3.extent(data, function(d) { return d.income });
      var yExtent = d3.extent(data, function(d) { return d.lifeExpectancy });

// set scales
      var xScale = d3.scaleLinear()
      			.domain(xExtent)
      			.range([margin.left, width - margin.right]);
      //var yMax = d3.max(data, function(d) {return d.lifeExpectancy});
      var yScale = d3.scaleLinear()
      			.domain(yExtent)
      			.range([height - margin.bottom, margin.top]);
      var heightScale = d3.scaleLinear()
      			.domain(yExtent)
      			.range([0, height - margin.top - margin.bottom]);

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

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

// create rects
			var rect = svg.selectAll("rect")
      			.data(data)
      			.enter()
      			.append("rect")
            .attr("width", 2)
            .attr("height", function(d) {return heightScale(d.lifeExpectancy)})
            .attr("x", function(d)  {return xScale(d.income) })
      			.attr("y", function(d) {return yScale(d.lifeExpectancy)})
      			.attr("class", "rect");
     
	// create 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