multiple line chart renewable energy

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Use of renewable energy European Countries</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
		<style type="text/css">
			
			body {
				background-color: #ccb;
				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:#887;
	text-decoration: none;
}
h3 a:hover{
	color:#000;
}
svg {
	background-color: #ccb;
	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;
}
path {
	stroke: #555;
	stroke-width: 1;
}
g path:hover{
	cursor:pointer;
}
g.green path{
	stroke: #f90;
	stroke-width:1
}
g.highlight path{
	stroke: #f00;
	stroke-width:2;
}

.text1,
.text2,
.text3{
	font-weight: bold;
	font-family: sans-serif;
	font-size: 13px;
}
.text1{ 
	fill:#f00;
}
.text2{
	fill:#f90;
}
.text3{
	fill:#555;
}
			
		</style>
	</head>
	<body>
		<h1>Renewable energy in various countries</h1>
		<h3>% use of renewable energy 2002 - 2012 <em>Source:</em> <a href="https://data.oecd.org/energy/renewable-energy.htm#indicator-chart" target="_blank">OECD</a>, 2015</h3>

//format date
var dateFormat = d3.time.format("%Y");

// scale width
var xScale = d3.time.scale()
	.range([0,w-padding[1]-padding[3]]);

var yScale = d3.scale.linear()
	.range([ padding[0], h-padding[2] ]);

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

var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left")
	.ticks(10);
//line
var line = d3.svg.line()
	.x(function(d){
		return xScale(dateFormat.parse(d.year))+padding[3];
	})
	.y(function(d){
		return yScale(+d.amount);
	})

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

//load data
	d3.csv("renewable-energy-perc-of-total-energy-generation2.csv", function(data){

//these correlate with keys array data
var years = ["2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012" ];
console.log(years);
// restructure dataset, groups with country name, year and energy values
// new dataset
var dataset = [];
// loop all rows once
for (var i =0; i < data.length; i++){
//create new object: country name and empty array (energy)
dataset[i] = {
country: data[i].Country,
energy: []
};
//loop through all the years

for (var j=0; j<years.length; j++){
	// if value not empty
	//console.log(data[i][years[j]]);
	if( data[i][years[j]]) {
		dataset[i].energy.push({
			year: years[j],
			amount: data[i][years[j]]
			});

}
}

}

xScale.domain([d3.min(years, function(d){
	return dateFormat.parse(d)
}), 
	d3.max(years, function(d){
	return dateFormat.parse(d);
}) ]);
yScale.domain([
	d3.max(dataset, function(d) {
		return d3.max(d.energy, function(d){
			return +d.amount;
		});
}), 
	0 
	]);

//make a group for each country//bind dataset to the group
var groups = svg.selectAll("g")
.data(dataset)
.enter()
.append("g")
.classed("green", function(d) {
	if (d.country == "Austria" ||
		d.country == "Belgium" ||
		d.country == "Czech Republic" ||
		d.country == "Denmark" ||
		d.country == "Estonia" ||
		d.country == "Finland" ||
		d.country == "France" ||
		d.country == "Germany" ||
		d.country == "Greece" ||
		d.country == "Hungary" ||
		d.country == "Ireland" ||
		d.country == "Iceland" ||
		d.country == "Italy" ||
		d.country == "Luxembourg" ||
		d.country == "Netherlands" ||
		d.country == "Norway" ||
		d.country == "Poland" ||
		d.country == "Portugal" ||
		d.country == "Russia" ||
		d.country == "Slovak Republic" ||
		d.country == "Slovenia" ||
		d.country == "Spain" ||
		d.country == "Switzerland" ||
		d.country == "Sweden"
		){
		return true;
	} else {
		return false;
	}
})
.classed("highlight", function(d) {
	if (d.country == "Norway"){
		return true;
	} else {
		return false;
	}
});
groups.append("title")
.text(function(d){
	return d.country;
});

//within each group, create a new line
//bind only the energy data to the path
groups.selectAll("path")
.data(function(d) {
	return [ d.energy ];
})
.enter()
.append("path")
.attr("class","line")
.attr("d", line)
.attr("fill", "none");

//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])+35)
.text("year");

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");

svg.append("text")
.attr("x",padding[3]+20)
.attr("y",padding[2]-20)
.text("Norway")
.attr("class","text1");

svg.append("text")
.attr("x",padding[3]+100)
.attr("y",padding[2]-20)
.text("European countries")
.attr("class","text2");
svg.append("text")

.attr("x",padding[3]+240)
.attr("y",padding[2]-20)
.text("Non-European Countries")
.attr("class","text3");

//end data
	});

</script>
 
	</body>
</html>

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

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