nations-columnchart

<!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: "Georgia";
			font-size: 32px;
			fill: #000;
		}

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

.bar {
			fill: pink;
			fill-opacity: 1;
		}
	</style>
</head>
<body>
	<script>
		d3.json("nations.json", function(error, json) {
			if (error) throw error;

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

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

// scales
			var heightScale = d3.scaleLinear()
				.domain(yExtent)
				.range([0, height - margin.bottom - margin.top]);
			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);

// bar
			var bar = svg.selectAll("rect")
				.data(data)
				.enter()
				.append("rect")
				.attr("x", function(d, i) { return xScale(d.income) })
				.attr("y", function(d) { return yScale(d.lifeExpectancy) })
				.attr("width", 3)
				.attr("height", function(d) { return heightScale(d.lifeExpectancy) })
				.attr("class", "bar");

});
	</script>
</body>
</html>

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