Line Chart Issues

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Loading CSV Data with D3</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
	
		<style>
		h1 {
			border-bottom: 2px solid green;
			width: auto;
		}
/*		.axis line {
			stroke: #000;
			stroke-width: .1;
		}
		.axis path {
			display:none;
		}
		.axis text {
			font-size: 14px;
		}*/
		
		</style>

</head>
	<body>
		<div class="allContent">
			<div class="barGraph-title"></div>
			<div class="playAll">
					<div class="switch"></div>
			</div>
			<div class="buttonContainer"></div>
			<div class="clearfix"></div>
			<div class="lineGraph"></div>
			<div class="source"
				<span>Source:</span><a href="https://data.oecd.org/energy/renewable-energy.htm#indicator-chart">https://data.oecd.org/energy</a>
			</div>
		</div>

var margin = {top:50,right:80,bottom:50,left:40};
			var width = 300 - margin.left - margin.right;
			var height = 200- margin.top - margin.bottom;

var color = d3.scale.linear().range(['#B8B800','#296629'])

var tempColor, playInterval, worldTotal;
 			var activeCircle,innerCircle,tooltipcolor,oldColor;
 			var years = ["2002","2003","2004","2005","2006","2007","2008","2009","2010","2011","2012"]
 			//var years = d3.range(2002, 2012+1)
 			var currentYear = 2002;	
 			var dateFormat = d3.time.format("%Y")
 			// var testdate = dateFormat.parse(currentYear)
 			// console.log(testdate)

var source = d3.select("body")
			var svg = d3.select("body").append("svg")
				.attr("width", width + margin.left + margin.right)
				.attr("height", height + margin.top + margin.bottom)		
				.append("g").attr("transform","translate(90,30)")
			var dateFormat = d3.time.format("%Y")

//Define Y
			var yScale = d3.scale.linear().range(height,0)//.domain([100,0])
			var yAxis = d3.svg.axis().orient("left").scale(yScale)

//Define X
			var xScale = d3.time.scale().range([0,width])//.domain([0,100])	
			var xAxis = d3.svg.axis().orient("bottom").scale(xScale)
				.tickFormat(function(d) { return dateFormat(d) } ) //.tickFormat(dateFormat)

//svg.append("g").attr("class", "y axis").call(yAxis)
			svg.append("g").attr("class", "x axis").call(xAxis)//.attr("transform","translate(0,100)")

//valueLine
			var valueLine = d3.svg.line()
				.x(function(d) { console.log( dateFormat.parse(d.year)); return xScale(dateFormat.parse(d.year)) })
				.y(function(d) { return yScale(+d.amount)})
		
			// barGraphTitle.insert("h2").text("Renewable Energy (%) of Total Energy Generation")
			// barGraphTitle.insert("h2").attr("class", "worldTotal").text("World Total: " )
			var dataNest =[];
			var dataset = [];

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

for(i = 0; i < data.length; i++) {
					dataset[i] = { country: data[i].Location,
					years: []
					}

for(j = 0; j < years.length; j++) {
						dataset[i].years.push({ 
							year: years[j],
							amount: data[i][years[j]]
						})
					}
				}
					console.log(dataset)

xScale.domain([2002,2012])
				// .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.years, function(d) { 
						return +d.amount 
							})
					})
				])

var groups = svg.selectAll("g").data(dataset).enter().append("g")

groups.append("title").text(function(d) { return d.country })

groups.selectAll("path").data(function(d) {  return [d.years] })
					.enter()
					.append("path")
					.attr("class", "line")
					.attr("d", valueLine)
					.attr("fill", "none")
					.attr("stroke", "#981E32")
					.attr("stroke-width", 2);

svg.append("g").attr("class", "x axis").attr("transform","translate(0," + width + ")").call(xAxis)
			svg.append("g").attr("class", "y axis").call(yAxis)

})
	
		</script>
	</body>
</html>

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

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