Girls' skills in mathematics

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

</style>
	</head>
	<body>

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

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

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

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

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

rects.attr("x", 0)
					.attr("y", function(d, i){
						return i * 25;
					})
					.attr("width", function(d){
						return d.mathGirls;
					})
					.attr("height", 20)
					.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 * 25+14;
					})
					.attr("font-size", 14)
					.text(function(d){
						return d.country;
					})

});

</script>

</body>
</html>

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

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