jkeohan/data.csv

## data.csv

          
            Location
            2002
            2003
            2004
            2005
            2006
            2007
            2008
            2009
            2010
            2011
            2012

            
              Australia
              6.2
              6
              5.8
              5.7
              5.8
              5.8
              5.8
              4.6
              4.8
              5.1
              4.6

            
              Austria
              21.3
              18.7
              19.7
              21
              22.1
              24.1
              25.3
              27.8
              27.2
              26.6
              29.5

            
              Belgium
              1.3
              1.5
              1.6
              2
              2.3
              2.7
              3.1
              3.8
              4.2
              4.9
              5.1

            
              Brazil
              39.4
              42
              42.3
              42.9
              43.3
              44.4
              44.5
              45.8
              44
              42.7
              42.2

            
              Canada
              16.9
              15.6
              15.6
              15.9
              15.7
              16.2
              16.8
              17.5
              17.1
              18
              17.9

            
              Chile
              26.2
              24.8
              24.2
              25.1
              25.3
              23.5
              24.4
              26.1
              22
              23.1
              24.1

            
              China (People's Republic of)
              18.4
              16.2
              14.5
              13.7
              12.8
              12.5
              12.6
              12.1
              11.4
              10.7
              9.8

            
              Czech Republic
              3.7
              3.4
              3.8
              4
              4.2
              4.7
              4.9
              5.8
              6.3
              6.9
              7.5

            
              Denmark
              11
              11.9
              13.6
              15
              14.2
              16.1
              16.7
              17.8
              20
              22.2
              24.4

            
              Estonia
              11.7
              11.2
              11.4
              11.4
              10.5
              10.7
              11.9
              15.2
              15.3
              14.8
              14.5

            
              Finland
              22.4
              21.3
              23.4
              23.6
              23.3
              23.5
              25.8
              24
              25.4
              26.1
              29.1

            
              France
              5.8
              5.8
              5.8
              5.7
              5.9
              6.3
              7.1
              7.5
              7.9
              7.2
              7.9

            
              Germany
              3.2
              3.8
              4.4
              5
              5.8
              7.9
              8
              8.8
              9.9
              10
              10.7

            
              Greece
              4.9
              5.3
              5.3
              5.4
              5.9
              5.7
              5.6
              6.4
              7.7
              7.9
              8.7

            
              Hungary
              3.4
              3.5
              3.6
              4.3
              4.5
              5.1
              6
              7.4
              7.6
              7.6
              8

            
              Iceland
              75
              75.2
              74.8
              75.9
              78.4
              81.6
              81.3
              81.8
              82.5
              83.8
              84.7

            
              India
              33.2
              32.9
              31.7
              31.2
              30.4
              29.9
              28.9
              26.8
              26.5
              26.5
              26.4

            
              Indonesia
              37.3
              37.4
              35.5
              34.9
              34.7
              35.3
              36.2
              34.8
              33.9
              33.6
              33.4

            
              Ireland
              1.8
              1.7
              2
              2.5
              2.9
              3.2
              3.9
              4.6
              4.7
              6.2
              6.1

            
              Israel
              3.6
              3.5
              3.8
              4
              3.7
              3.7
              4.7
              5
              5
              4.9
              4.8

            
              Italy
              5.8
              6
              6.6
              6.3
              6.9
              6.7
              7.7
              9.7
              10.6
              11.9
              13.2

            
              Japan
              3.2
              3.4
              3.3
              3.2
              3.4
              3.2
              3.3
              3.4
              3.9
              4.2
              4.2

            
              Korea
              0.4
              0.5
              0.5
              0.5
              0.6
              0.6
              0.6
              0.7
              0.7
              0.7
              0.7

            
              Luxembourg
              1.1
              1
              1.2
              1.6
              1.8
              3.1
              3.1
              3.3
              3.1
              2.9
              3.2

            
              Mexico
              10.2
              10.2
              10.4
              10.3
              9.9
              9.9
              10
              9.5
              9.8
              9.3
              8.7

            
              Netherlands
              1.9
              1.8
              2.1
              2.7
              3
              3
              3.5
              4
              3.8
              4.3
              4.3

            
              New Zealand
              29.8
              29.7
              31.3
              31.6
              32
              32.2
              32.9
              35.8
              38.9
              40.4
              38.3

            
              Norway
              49.5
              38.2
              40
              48.5
              42.6
              46.5
              44.9
              40.9
              36.1
              42.8
              46.9

            
              Poland
              4.7
              4.6
              4.7
              4.8
              4.8
              5
              5.7
              6.7
              7.2
              7.8
              8.8

            
              Portugal
              13.7
              16.9
              14.7
              13.1
              17.1
              17.7
              17.7
              19.9
              23.3
              22.3
              21.2

            
              Russia
              2.8
              2.7
              2.9
              2.9
              2.8
              2.9
              2.6
              2.8
              2.5
              2.4
              2.3

            
              Slovak Republic
              4
              3.5
              4
              4.3
              4.5
              5.3
              5.1
              6.8
              7.4
              7.4
              7.6

            
              Slovenia
              10.5
              10.3
              11.5
              10.6
              10.5
              10.1
              11
              14.2
              14.7
              13.1
              13.9

            
              South Africa
              12.1
              11.3
              10.5
              10.7
              11
              10.2
              9.7
              10.1
              10.3
              10.5
              10.6

            
              Spain
              5.4
              6.9
              6.3
              5.9
              6.5
              7
              7.6
              9.7
              11.7
              11.7
              11.9

            
              Sweden
              25.3
              24.5
              25
              28.8
              28.7
              30.5
              31.5
              34.8
              33.9
              32.1
              35.6

            
              Switzerland
              16.8
              16.8
              16.4
              16
              15.5
              17.8
              17.8
              17.8
              19
              18.1
              20.5

            
              Turkey
              13.5
              12.9
              13.3
              12
              11.1
              9.6
              9.5
              10.2
              11.1
              10
              10.2

            
              United Kingdom
              1.2
              1.2
              1.5
              1.8
              1.9
              2.2
              2.6
              3.2
              3.3
              4.1
              4.5

            
              United States
              4
              4.3
              4.4
              4.5
              4.8
              4.7
              5.1
              5.4
              5.6
              6.1
              6.3

            
              European Union (28 countries)
              5.7
              5.9
              6.3
              6.5
              6.9
              7.6
              8.2
              9.2
              10
              10.2
              10.5

            
              World
              12.7
              12.6
              12.4
              12.4
              12.4
              12.5
              12.7
              13.1
              13
              13
              13

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Loading CSV Data with D3</title>
		<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
	<!-- 	// <script type="text/javascript" src="/../js/d3.min.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>


		<script type="text/javascript">

			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>
Location	2002	2003	2004	2005	2006	2007	2008	2009	2010	2011	2012
Australia	6.2	6	5.8	5.7	5.8	5.8	5.8	4.6	4.8	5.1	4.6
Austria	21.3	18.7	19.7	21	22.1	24.1	25.3	27.8	27.2	26.6	29.5
Belgium	1.3	1.5	1.6	2	2.3	2.7	3.1	3.8	4.2	4.9	5.1
Brazil	39.4	42	42.3	42.9	43.3	44.4	44.5	45.8	44	42.7	42.2
Canada	16.9	15.6	15.6	15.9	15.7	16.2	16.8	17.5	17.1	18	17.9
Chile	26.2	24.8	24.2	25.1	25.3	23.5	24.4	26.1	22	23.1	24.1
China (People's Republic of)	18.4	16.2	14.5	13.7	12.8	12.5	12.6	12.1	11.4	10.7	9.8
Czech Republic	3.7	3.4	3.8	4	4.2	4.7	4.9	5.8	6.3	6.9	7.5
Denmark	11	11.9	13.6	15	14.2	16.1	16.7	17.8	20	22.2	24.4
Estonia	11.7	11.2	11.4	11.4	10.5	10.7	11.9	15.2	15.3	14.8	14.5
Finland	22.4	21.3	23.4	23.6	23.3	23.5	25.8	24	25.4	26.1	29.1
France	5.8	5.8	5.8	5.7	5.9	6.3	7.1	7.5	7.9	7.2	7.9
Germany	3.2	3.8	4.4	5	5.8	7.9	8	8.8	9.9	10	10.7
Greece	4.9	5.3	5.3	5.4	5.9	5.7	5.6	6.4	7.7	7.9	8.7
Hungary	3.4	3.5	3.6	4.3	4.5	5.1	6	7.4	7.6	7.6	8
Iceland	75	75.2	74.8	75.9	78.4	81.6	81.3	81.8	82.5	83.8	84.7
India	33.2	32.9	31.7	31.2	30.4	29.9	28.9	26.8	26.5	26.5	26.4
Indonesia	37.3	37.4	35.5	34.9	34.7	35.3	36.2	34.8	33.9	33.6	33.4
Ireland	1.8	1.7	2	2.5	2.9	3.2	3.9	4.6	4.7	6.2	6.1
Israel	3.6	3.5	3.8	4	3.7	3.7	4.7	5	5	4.9	4.8
Italy	5.8	6	6.6	6.3	6.9	6.7	7.7	9.7	10.6	11.9	13.2
Japan	3.2	3.4	3.3	3.2	3.4	3.2	3.3	3.4	3.9	4.2	4.2
Korea	0.4	0.5	0.5	0.5	0.6	0.6	0.6	0.7	0.7	0.7	0.7
Luxembourg	1.1	1	1.2	1.6	1.8	3.1	3.1	3.3	3.1	2.9	3.2
Mexico	10.2	10.2	10.4	10.3	9.9	9.9	10	9.5	9.8	9.3	8.7
Netherlands	1.9	1.8	2.1	2.7	3	3	3.5	4	3.8	4.3	4.3
New Zealand	29.8	29.7	31.3	31.6	32	32.2	32.9	35.8	38.9	40.4	38.3
Norway	49.5	38.2	40	48.5	42.6	46.5	44.9	40.9	36.1	42.8	46.9
Poland	4.7	4.6	4.7	4.8	4.8	5	5.7	6.7	7.2	7.8	8.8
Portugal	13.7	16.9	14.7	13.1	17.1	17.7	17.7	19.9	23.3	22.3	21.2
Russia	2.8	2.7	2.9	2.9	2.8	2.9	2.6	2.8	2.5	2.4	2.3
Slovak Republic	4	3.5	4	4.3	4.5	5.3	5.1	6.8	7.4	7.4	7.6
Slovenia	10.5	10.3	11.5	10.6	10.5	10.1	11	14.2	14.7	13.1	13.9
South Africa	12.1	11.3	10.5	10.7	11	10.2	9.7	10.1	10.3	10.5	10.6
Spain	5.4	6.9	6.3	5.9	6.5	7	7.6	9.7	11.7	11.7	11.9
Sweden	25.3	24.5	25	28.8	28.7	30.5	31.5	34.8	33.9	32.1	35.6
Switzerland	16.8	16.8	16.4	16	15.5	17.8	17.8	17.8	19	18.1	20.5
Turkey	13.5	12.9	13.3	12	11.1	9.6	9.5	10.2	11.1	10	10.2
United Kingdom	1.2	1.2	1.5	1.8	1.9	2.2	2.6	3.2	3.3	4.1	4.5
United States	4	4.3	4.4	4.5	4.8	4.7	5.1	5.4	5.6	6.1	6.3
European Union (28 countries)	5.7	5.9	6.3	6.5	6.9	7.6	8.2	9.2	10	10.2	10.5
World	12.7	12.6	12.4	12.4	12.4	12.5	12.7	13.1	13	13	13
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Loading CSV Data with D3</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
	<!-- // <script type="text/javascript" src="/../js/d3.min.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>


	<script type="text/javascript">

	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>