This dataset gives an insight about the mathematics skills of girls across 37 OECD countries.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Creating SVG Elements from Data</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
		<style type="text/css">
			
			body {
				background-color: white;
				font-family: Verdana;
			}

svg {
				background-color: white;
			}

rect {
				fill: rgb(60, 161, 189);
			}

rect:hover { 
				fill: rgb(33, 93, 109);
			}

text {
				fill: black;
			}

.axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}
			
			.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}

.y.axis path,
			.y.axis line {
				opacity: 0;
			}

</style>
	</head>
	<body>

<h2>Korean girls know how to count up</h2>
		<p>This dataset gives an insight about the mathematics skills of girls across 37 OECD countries.</p>

var w = 350
			var h = 550

var padding = [ 20, 10, 20, 120 ];  //Top, right, bottom, left

var widthScale = d3.scale.linear()
							.range ([ 0, w - padding[1] - padding[3] ]);

var heightScale = d3.scale.ordinal()
							.rangeBands([0, h - padding[0] - padding [2]]);

var xAxis = d3.svg.axis()
							.scale(widthScale)
							.orient("bottom")
							.ticks(5);

var yAxis = d3.svg.axis()
							.scale(heightScale)
							.orient("left")

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

d3.csv("OECD_ISA_2012.csv", function(data) {

data.sort(function(a,b){
					return d3.descending (a.mathGirls, b.mathGirls);
				})

widthScale.domain([ 0, d3.max(data, function(d) {
					return +d.mathGirls;
				}) ]);

heightScale.domain(data.map(function(d) {return d.country; }));

var rects = svg.selectAll("rect")
					.data(data)
					.enter()
					.append("rect")

rects.attr("x", padding[3])
					.attr("y", function(d, i){
						return i * heightScale.rangeBand();
					})
					.attr("width", function(d){
						return widthScale(d.mathGirls);
					})
					.attr("height", function(d){
						return heightScale.rangeBand()*0.9;
					})
					.append("title")
					.text(function(d){
						return "Girls from "+d.country+" scored "+d.mathGirls+" points in mathematics"
					});

// var labels = svg.selectAll("text")
			// 		.data(data)
			// 		.enter()
			// 		.append("text")

// 	labels.attr("x", 10)
			// 		.attr("y", function(d, i){
			// 			return i * heightScale.rangeBand()+heightScale.rangeBand()*0.7;
			// 		})
			// 		.attr("font-size", function(d){
			// 			return heightScale.rangeBand()*0.7;
			// 		})
			// 		.text(function(d){
			// 			return d.country;
			// 		})

svg.append("g")
				.attr("class", "x axis") //Assign "x axis" class
				.attr("transform", "translate(" + (padding[3]) + ", " + (h - padding[2]) + ")")
				.call(xAxis);

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

</script>

</body>
</html>

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

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