Renewable energy, styled

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Use of renewable energy</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
		<style type="text/css">
			
			body {
				background-color: #563734;
				font-family: arial, sans-serif;
			}
h1{
	font-size:24px;
	color:#b9bc79;
	margin-bottom: 0px;
}
h3{
	font-size:14px;
	font-weight:normal;
	color:#fff;
	margin-top: 5px;
	margin-bottom: 5px;
}
h1,
h3{
	margin-left:17px;
}
h3 a{
	color:#9bf;
	text-decoration: none;
}
h3 a:hover{
	color:#fff;
}
svg {
	background-color: #563734;
	font-size: 11px;
}
			.axis path,
			.axis line {
			fill:none;
			stroke: #b9bc79;
			shape-rendering:crispEdges;
			}
			.axis text{
				font-family: sans-serif;
				font-size: 11px;
				fill: #b9bc79;
			}
			.y.axis path,
			.y.axis line{
				opacity: 0;
			}
			rect {
				fill: #fff;
				stroke:none;
			}
			rect:hover {
				fill: #9bf;
				stroke:none;
			}
		</style>
	</head>
	<body>
		<h1>Use of renewable energy in various countries for 2012</h1>
		<h3>Percentage of total energy generation. Source: <a href="https://data.oecd.org/energy/renewable-energy.htm#indicator-chart" target="_blank">OECD</a>, 2014</h3>

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

//generate axis
var xAxis = d3.svg.axis()
	.scale(widthScale)
	.orient("bottom");

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

var svg = d3.select("body")
		.append("svg")
		.attr("width", w)
		.attr("height", h);	
//load data
	d3.csv("renewable-energy-perc-of-total-energy-generation.csv", function(data){
		data.sort(function(a,b){
//+a and +b because probably some values are written as text instead of numbers
return d3.descending(+a.y2012, +b.y2012)
		});
dataset=data;

widthScale.domain([0, d3.max(dataset, function(d){
	return +d.y2012;
}) ]);
heightScale.domain(dataset.map(function(d){ return d.Country; }));

//alle rectangles in vari
var rects= svg.selectAll("rect")
	.data(dataset)
	.enter()
	.append("rect");

rects.attr("x", padding[3])
	.attr("y", function(d){
		return heightScale(d.Country);
	})
	.attr("width", function(d){

return widthScale(d.y2012);
	})
	.attr("height", heightScale.rangeBand())
	.append("title")
	.text(function(d){
	return "energy generation " + d.Country + " 2012: " + d.y2012 +"%";
	})

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

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

});
</script>

</body>
</html>

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

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