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
              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
              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>UK Immigration: Daily Mail Headlines</title>
		<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
				<script type="text/javascript" src="/../js/d3.min.js"></script>
		<style type="text/css">

			body {
				background-color: white;
				font-family: Helvetica, Arial, sans-serif;
				}

			h1 {
				font-size: 24px;
				margin: 0;
				}

       h2 {
          font-size: 16px;
          margin:0;
      	}

			p {
				font-size: 14px;
				margin: 10px 0 0 0;
				}

			svg {
				background-color: white;
				}

			path:hover {
				fill: #EED6A5;
			}

			.axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}

			.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}

			.line {
			stroke: black;
			stroke-width: 1px;
			opacity: 0.5;
			fill: none;
			}
			.line:hover {
				stroke: green;
				stroke-width:2px;
				opacity:1;
			}
			.label{
				font-size: small;
				font-family: avenir;
			}

			.tooltip {
		  position: absolute;
			padding: 5px;
		  pointer-events: none;
		  border: 1px solid green;
		/*  border-radius: 12px;*/
			line-height: 20px;
		  opacity: .07;
		  background-color:white;

		}

			.tooltipTail {
					position: absolute;
					width: 0;
					height: 0;
					border-top: 8px solid transparent;
					border-bottom: 8px solid transparent;
					border-right:25px solid green;
				}
			.tooltipTail.hidden{
				display:none;
				opacity:0;
			}


		</style>
	</head>
	<body>

		<div class="line-graph"></div>

		<script type="text/javascript">

			//Dimensions and padding
				var margin = {top:20,right:30,bottom:50,left:50}
			var w = 900 - margin.left - margin.bottom;
			var h = 600 - margin.top - margin.right;

			var padding = [ 20, 10, 50, 50 ];  //Top, right, bottom, left

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

			//Set up date formatting and years
			var dateFormat = d3.time.format("%Y");

			//Set up scales
			var xScale = d3.time.scale()
								.range([ margin.left, w - margin.left - margin.right]);

			var yScale = d3.scale.linear()
								.range([ margin.top, h - margin.bottom ]);

			//Configure axis generators
			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");


			//Configure line generator
			var line = d3.svg.line()
				.x(function(d) {
					return xScale(dateFormat.parse(d.year));
				})
				.y(function(d) {
					return yScale(+d.amount);
				});

			//Create main SVG
			var svg = d3.select(".line-graph")
						.append("svg")
						.attr("width", w + margin.left + margin.right)
						.attr("height", h);

			var tooltip = d3.select("body").append("div")
						.attr("class","tooltip")

			var tooltipTail = d3.select("body").append('div')
					.attr("class","tooltipTail")
					.classed("hidden",true)

			//Load data
			d3.csv("data.csv", function(data) {

				//Data is loaded in, but we need to restructure it.
				//Remember, each line requires an array of x/y pairs;
				//that is, an array of arrays, like so:
				//
				//	[ [x: 1, y: 1], [x: 2, y: 2], [x: 3, y: 3] ]
				//
				//We, however, are using 'year' as x and 'amount' as y.
				//We also need to know which country belongs to each
				//line, so we will build an array of objects that is
				//structured like this:
				/*

					[
						{
							location: "Australia",
							values: [
										{ year: 1961, amount: 90589.568 },
										{ year: 1962, amount: 94912.961 },
										{ year: 1963, amount: 101029.517 },
										…
									   ]
						},
						{
							location: "Bermuda",
							values: [
										{ year: 1961, amount: 176.016 },
										{ year: 1962, amount: 157.681 },
										{ year: 1963, amount: 150.347 },
										…
									   ]
						},
						…
					 ]

				*/

				//New array with all the years, for referencing later
				var years = ["2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012"];
				var years = d3.keys(data[0]).filter( function(key) { return key != "Location" } )
				//Create a new, empty array to hold our restructured dataset
				var dataset = [];

				//Loop once for each row in data
				for (var i = 0; i < data.length; i++) {

					//Create new object with Location name and empty array
					dataset[i] = {
						location: data[i].Location,
						headlines: []
					};

					//Loop through all the years
					for (var j = 0; j < years.length; j++) {

						// If value is not empty
						if (data[i][years[j]]) {
							//Add a new object to the emissions data array
							//for this country
							dataset[i].headlines.push({
								year: years[j],
								amount: data[i][years[j]]

							});
						}

					}

				}


				//Uncomment to log the original data to the console
				 console.log(data);

				//Uncomment to log the newly restructured dataset to the console
				 console.log(dataset);


				//Set scale domains
				// xScale.domain([
				// 	d3.min(years, function(d) {
				// 		return dateFormat.parse(d);
				// 	}),
				// 	d3.max(years, function(d) {
				// 		return dateFormat.parse(d);
				// 	})
				// ]);
				xScale.domain(
					d3.extent(years, function(d) { return dateFormat.parse(d)}))

				yScale.domain([
					d3.max(dataset, function(d) {
						return d3.max(d.headlines, function(d) {
							return +d.amount;
						});
					}),
					0
				]);

				//Make a group for each Nationality
				var groups = svg.selectAll("g")
					.data(dataset)
					.enter()
					.append("g");

				//Append a title with the Nationality name (so we get easy tooltips)
				// groups.append("title")
				// 	.text(function(d) {
				// 		return d.location;
				// 	});

				var text = groups.append("text")
					.attr("class", "label")
					.attr("x", w - 40 )

				//Within each group, create a new line/path,
				//binding just the headlines data to each one
				groups.selectAll("path")
					//.data(dataset) //using this format will warp the line color and append World as the
					//title for every line
					.data(function(d) { return [d]})
					.enter()
					.append("path")
					.attr("class", "line")
					.on("mouseover", function(d) {
						tooltip1(d);
						//tooltip2(d)
					})
					.on("mouseout", function(d) {
						mouseout(d)
					})
					//.attr("d", line)
						.attr("d", function(d) { return line(d.headlines)} )
					//.attr("fill", function(d,i) { color(d)})
					.attr("fill", "none")
					.append("title").text(function(d) { return d.location})


				function mouseout(d){
					tooltip.transition().duration(200).style("opacity",0)
				}

				function tooltip1 (d){
						var yl = yScale(+d.headlines[d.headlines.length -1 ].amount)
						tooltipTail(d)
						text.attr("y", yScale(+d.headlines[d.headlines.length -1 ].amount) + 4 )

						tooltip.style("opacity",0)
		  				tooltip.style("border" , "3px solid green").transition().duration(1000).style("opacity",1)
      				tooltip.html(
							'<span class="countryName">' + d.location + '</span><br/>') //+
							// '2012: <span class="value">' + d. + '%</span><br/>'  +
							// "2012"+ ": " + '<span class="value">' + "2010" + '%</span>')
						//.style("left", (d3.event.pageX - 30) + "px")
						//.style("top", (d3.event.pageY -50 ) + "px")
				// 	var tailX = w -70;
				// var tailY = yScale(+d.headlines[d.headlines.length -1 ].amount)
						 	.style("left", w - 47 + "px")
							.style("top", yl - 10 + "px")

				}

				function tooltip2 (d) {
						var length = d.location

						console.log(length)
						var yl = yScale(+d.headlines[d.headlines.length -1 ].amount)
						text.attr("y", yScale(+d.headlines[d.headlines.length -1 ].amount) + 4 )

						tooltip.style("opacity",0)
				  	tooltip.style("border" , "3px solid green").transition().duration(1000).style("opacity",1)
          	tooltip.html(
									'<span class="countryName">' + d.location + '</span><br/>') //+
									// '2012: <span class="value">' + d. + '%</span><br/>'  +
									// "2012"+ ": " + '<span class="value">' + "2010" + '%</span>')
								.style("left", (d3.event.pageX - (length.length * 4)) + "px")
								.style("top", (d3.event.pageY -50 ) + "px")
				}

				function tooltipTail (d) {

						var currentYear = d.headlines
						var tailX = w -70;
						var tailY = yScale(+d.headlines[d.headlines.length -1 ].amount)
					  d3.select(".tooltipTail")
					  	.classed("hidden",false)
					  	.transition().duration(1000)
							.style("left", tailX + "px")
							.style("top", tailY + "px")
				}

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

				svg.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + (padding[3]) + ",0)")
					.call(yAxis)
                // Add rotated "Number of Headlines" unit of measure text to x-axis
                        .append("text")
                        .attr("class", "label")
                        .attr("transform", "rotate(-90)")
                        .attr("x", -20)
                        .attr("y", 5)
                        .attr("dy", ".91em")
                        .style("text-anchor", "end")
                        .text("Percent of Engery Generation ");


			});
			//End USA data load function


		</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	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	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>UK Immigration: Daily Mail Headlines</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
	<script type="text/javascript" src="/../js/d3.min.js"></script>
	<style type="text/css">

	body {
	background-color: white;
	font-family: Helvetica, Arial, sans-serif;
	}

	h1 {
	font-size: 24px;
	margin: 0;
	}

	h2 {
	font-size: 16px;
	margin:0;
	}

	p {
	font-size: 14px;
	margin: 10px 0 0 0;
	}

	svg {
	background-color: white;
	}

	path:hover {
	fill: #EED6A5;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}

	.axis text {
	font-family: sans-serif;
	font-size: 11px;
	}

	.line {
	stroke: black;
	stroke-width: 1px;
	opacity: 0.5;
	fill: none;
	}
	.line:hover {
	stroke: green;
	stroke-width:2px;
	opacity:1;
	}
	.label{
	font-size: small;
	font-family: avenir;
	}

	.tooltip {
	position: absolute;
	padding: 5px;
	pointer-events: none;
	border: 1px solid green;
	/* border-radius: 12px;*/
	line-height: 20px;
	opacity: .07;
	background-color:white;

	}

	.tooltipTail {
	position: absolute;
	width: 0;
	height: 0;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-right:25px solid green;
	}
	.tooltipTail.hidden{
	display:none;
	opacity:0;
	}


	</style>
	</head>
	<body>

	<div class="line-graph"></div>

	<script type="text/javascript">

	//Dimensions and padding
	var margin = {top:20,right:30,bottom:50,left:50}
	var w = 900 - margin.left - margin.bottom;
	var h = 600 - margin.top - margin.right;

	var padding = [ 20, 10, 50, 50 ]; //Top, right, bottom, left

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

	//Set up date formatting and years
	var dateFormat = d3.time.format("%Y");

	//Set up scales
	var xScale = d3.time.scale()
	.range([ margin.left, w - margin.left - margin.right]);

	var yScale = d3.scale.linear()
	.range([ margin.top, h - margin.bottom ]);

	//Configure axis generators
	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");


	//Configure line generator
	var line = d3.svg.line()
	.x(function(d) {
	return xScale(dateFormat.parse(d.year));
	})
	.y(function(d) {
	return yScale(+d.amount);
	});

	//Create main SVG
	var svg = d3.select(".line-graph")
	.append("svg")
	.attr("width", w + margin.left + margin.right)
	.attr("height", h);

	var tooltip = d3.select("body").append("div")
	.attr("class","tooltip")

	var tooltipTail = d3.select("body").append('div')
	.attr("class","tooltipTail")
	.classed("hidden",true)

	//Load data
	d3.csv("data.csv", function(data) {

	//Data is loaded in, but we need to restructure it.
	//Remember, each line requires an array of x/y pairs;
	//that is, an array of arrays, like so:
	//
	// [ [x: 1, y: 1], [x: 2, y: 2], [x: 3, y: 3] ]
	//
	//We, however, are using 'year' as x and 'amount' as y.
	//We also need to know which country belongs to each
	//line, so we will build an array of objects that is
	//structured like this:
	/*

	[
	{
	location: "Australia",
	values: [
	{ year: 1961, amount: 90589.568 },
	{ year: 1962, amount: 94912.961 },
	{ year: 1963, amount: 101029.517 },
	…
	]
	},
	{
	location: "Bermuda",
	values: [
	{ year: 1961, amount: 176.016 },
	{ year: 1962, amount: 157.681 },
	{ year: 1963, amount: 150.347 },
	…
	]
	},
	…
	]

	*/

	//New array with all the years, for referencing later
	var years = ["2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012"];
	var years = d3.keys(data[0]).filter( function(key) { return key != "Location" } )
	//Create a new, empty array to hold our restructured dataset
	var dataset = [];

	//Loop once for each row in data
	for (var i = 0; i < data.length; i++) {

	//Create new object with Location name and empty array
	dataset[i] = {
	location: data[i].Location,
	headlines: []
	};

	//Loop through all the years
	for (var j = 0; j < years.length; j++) {

	// If value is not empty
	if (data[i][years[j]]) {
	//Add a new object to the emissions data array
	//for this country
	dataset[i].headlines.push({
	year: years[j],
	amount: data[i][years[j]]

	});
	}

	}

	}




	//Uncomment to log the original data to the console
	console.log(data);

	//Uncomment to log the newly restructured dataset to the console
	console.log(dataset);



	//Set scale domains
	// xScale.domain([
	// d3.min(years, function(d) {
	// return dateFormat.parse(d);
	// }),
	// d3.max(years, function(d) {
	// return dateFormat.parse(d);
	// })
	// ]);
	xScale.domain(
	d3.extent(years, function(d) { return dateFormat.parse(d)}))

	yScale.domain([
	d3.max(dataset, function(d) {
	return d3.max(d.headlines, function(d) {
	return +d.amount;
	});
	}),
	0
	]);

	//Make a group for each Nationality
	var groups = svg.selectAll("g")
	.data(dataset)
	.enter()
	.append("g");

	//Append a title with the Nationality name (so we get easy tooltips)
	// groups.append("title")
	// .text(function(d) {
	// return d.location;
	// });

	var text = groups.append("text")
	.attr("class", "label")
	.attr("x", w - 40 )

	//Within each group, create a new line/path,
	//binding just the headlines data to each one
	groups.selectAll("path")
	//.data(dataset) //using this format will warp the line color and append World as the
	//title for every line
	.data(function(d) { return [d]})
	.enter()
	.append("path")
	.attr("class", "line")
	.on("mouseover", function(d) {
	tooltip1(d);
	//tooltip2(d)
	})
	.on("mouseout", function(d) {
	mouseout(d)
	})
	//.attr("d", line)
	.attr("d", function(d) { return line(d.headlines)} )
	//.attr("fill", function(d,i) { color(d)})
	.attr("fill", "none")
	.append("title").text(function(d) { return d.location})


	function mouseout(d){
	tooltip.transition().duration(200).style("opacity",0)
	}

	function tooltip1 (d){
	var yl = yScale(+d.headlines[d.headlines.length -1 ].amount)
	tooltipTail(d)
	text.attr("y", yScale(+d.headlines[d.headlines.length -1 ].amount) + 4 )

	tooltip.style("opacity",0)
	tooltip.style("border" , "3px solid green").transition().duration(1000).style("opacity",1)
	tooltip.html(
	'<span class="countryName">' + d.location + '</span><br/>') //+
	// '2012: <span class="value">' + d. + '%</span><br/>' +
	// "2012"+ ": " + '<span class="value">' + "2010" + '%</span>')
	//.style("left", (d3.event.pageX - 30) + "px")
	//.style("top", (d3.event.pageY -50 ) + "px")
	// var tailX = w -70;
	// var tailY = yScale(+d.headlines[d.headlines.length -1 ].amount)
	.style("left", w - 47 + "px")
	.style("top", yl - 10 + "px")

	}

	function tooltip2 (d) {
	var length = d.location

	console.log(length)
	var yl = yScale(+d.headlines[d.headlines.length -1 ].amount)
	text.attr("y", yScale(+d.headlines[d.headlines.length -1 ].amount) + 4 )

	tooltip.style("opacity",0)
	tooltip.style("border" , "3px solid green").transition().duration(1000).style("opacity",1)
	tooltip.html(
	'<span class="countryName">' + d.location + '</span><br/>') //+
	// '2012: <span class="value">' + d. + '%</span><br/>' +
	// "2012"+ ": " + '<span class="value">' + "2010" + '%</span>')
	.style("left", (d3.event.pageX - (length.length * 4)) + "px")
	.style("top", (d3.event.pageY -50 ) + "px")
	}

	function tooltipTail (d) {

	var currentYear = d.headlines
	var tailX = w -70;
	var tailY = yScale(+d.headlines[d.headlines.length -1 ].amount)
	d3.select(".tooltipTail")
	.classed("hidden",false)
	.transition().duration(1000)
	.style("left", tailX + "px")
	.style("top", tailY + "px")
	}

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

	svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(" + (padding[3]) + ",0)")
	.call(yAxis)
	// Add rotated "Number of Headlines" unit of measure text to x-axis
	.append("text")
	.attr("class", "label")
	.attr("transform", "rotate(-90)")
	.attr("x", -20)
	.attr("y", 5)
	.attr("dy", ".91em")
	.style("text-anchor", "end")
	.text("Percent of Engery Generation ");


	});
	//End USA data load function


	</script>

	</body>
	</html>