scatterplot renewable energy

<!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: #99BBFF;
				font-family: arial, sans-serif;
			}
h1{
	font-size:24px;
	color:#000;
	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:#ff0;
	text-decoration: none;
}
h3 a:hover{
	color:#f90;
}
svg {
	background-color: #99BBFF;
	font-size: 11px;
}
line{
	stroke:#f00;
stroke-width:1px;
}
			.axis path,
			.axis line {
			fill:none;
			stroke: #fff;
			shape-rendering:crispEdges;
			}
			.axis text{
				font-family: sans-serif;
				font-size: 11px;
				fill: #fff;
			}
			.y.axis path,
			.y.axis line{
				opacity: 1;
			}
			circle {
				fill: #ff0;
				stroke:none;
			}
			circle:hover {
				fill: #f90;
				stroke:none;
			}
		</style>
	</head>
	<body>
		<h1>Use of renewable energy in various countries 2002-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 yScale = d3.scale.linear()
	.range([ padding[0], h-padding[2] ]);

//generate axis
var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	.tickFormat(function(d){
		return d +"%";
	});

var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left")
	.ticks(15)
	.tickFormat(function(d){
		return d +"%";
	});

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.ascending(+a.y2002, +b.y2002)
		});
dataset=data;

xScale.domain([0, d3.max(dataset, function(d){
	return +d.y2002;
}) ]);
yScale.domain([d3.max(dataset, function(d){
	return +d.y2012}), d3.min(dataset, function(d){
	return +d.y2012;
}) ]);

svg.append("polygon")
//.attr("points", padding[3]+","+(h-padding[2])+", 10,"+(h-padding[2])+", 568,500")

.attr("points", padding[3]+","+(h-padding[2])+", "+(padding[3]+d3.max(dataset, function(d){return xScale(d.y2012);}))+","+(h-padding[2])+", "+(padding[3]+d3.max(dataset, function(d){return xScale(d.y2012);}))+","+(h-d3.max(dataset, function(d){return xScale(d.y2012);})-padding[0]))
.attr("fill","rgba(255,0,0,0.8)")

;

//alle circles in vari
var circs= svg.selectAll("circle")
	.data(dataset)
	.enter()
	.append("circle");

circs.attr("cx",padding[3])

.attr("cy",h-padding[2])
	.attr("r", 0,1)	
	.append("title")
	.text(function(d){
	return "energy generation " + d.Country + " 2002: " + d.y2002 +"%"+ " 2012: " + d.y2012 +"%";

});

//transition
circs.transition()
	.duration(500)
	//dynamical delay  index/legte dataset*1sec. max =1sec+delay
	.delay(function(d,i){
		return(i/dataset.length*2000);
	})
	.attr("cx",function(d){
	return padding[3]+xScale(d.y2002);
})
	.attr("cy", function(d){
		return yScale(d.y2012);
	})
	.attr("r",5)
;

//axes
	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);

//axes labels
svg.append("text")
.attr("class", "xText")
.attr("x",w/2)
.attr("y",(h-padding[2])+40)
.text("use of renewable energy in 2002");

svg.append("text")
.attr("class", "yText")
.attr("transform","rotate(-90 10 10)")
.attr("x",-250)
.attr("y",padding[3]/2)

.text("use of renewable energy in 2012");

//increase decrease

svg.append("text")
.attr("class", "xText")
.attr("x",250)
.attr("y",250)
.attr("fill","#ddf")
.text("increase");

svg.append("text")
.attr("class", "yText")
.attr("x",400)
.attr("y",400)
.attr("fill","#fdd")
.text("decrease");

});

</script>

</body>
</html>

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

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