Annual GDP By Country (1950-1983)

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Line Chart with Multiple Lines</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
		<style type="text/css">
			
			body {
				background-color: white;
				font-family: Helvetica, Arial, sans-serif;
			}

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

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

svg {
				background-color: white;
			}

circle:hover {
				fill: orange;
			}

path {
				stroke: gray;
				stroke-width: 1;
				opacity: 0.3;
			}

g.highlightUSA path {
				stroke: steelblue;
				stroke-width:3;
				opacity: 0.8;
				z-index: 5;
			}
			
			.axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}
			
			.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}

path:hover {
				fill: none;
				stroke-width: 1.5;
				stroke: #E20177;
			}

</style>
	</head>
	<body>

<h1>Annual GDP By Country</h1>

<p>Per capita annual GDP for several countries (Austria, Canada, France, Germany, Greece, Italy, Sweden, UK, and USA) during 1950-1983. One interest lies in studying the "periodic" behaviour of such series in connection with understanding business cycles. Another lies in forecasting turning points. Another lies in comparisons of characteristics of the series across national economies. Notice the GDP of Greece soar from the 60s until the end of 70s. Source: <a href="https://stat.duke.edu/~mw/data-sets/ts_data/gdp">Department of Statistical Science, Duke University</a>, 2015</p>

//Dimensions and padding
			var w = 1080;
			var h = 600;
			var padding = [ 20, 10, 50, 100 ];  //Top, right, bottom, left

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

//Set up scales
			var xScale = d3.time.scale()
								.range([ padding[3], w - padding[1] - padding[3] ]);
			
			var yScale = d3.scale.linear()
								.range([ padding[0], h - padding[2] ]);

//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.gdp);
				});

//Create the empty SVG image
			var svg = d3.select("body")
						.append("svg")
						.attr("width", w)
						.attr("height", h);

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

//New array with all the years, for referencing later

var countryName = ["AUSTRIA", "CANADA", "FRANCE", "GERMANY", "GREECE", "ITALY", "SWEDEN", "UK", "USA"];
				//Create a new, empty array to hold our restructured dataset
				var dataset = [];

//Loop once for each country name
				for (var i = 0; i < countryName.length; i++) {
					dataset[i] = {
						country: countryName[i],
						wealth: []
					};
				}
				console.log(dataset)
				for (var j = 0; j < data.length; j++) {

//Create new object with this country's name and empty array

//Loop through all the countries
					for (var i = 0; i < countryName.length; i++) {

//console.log(dataset)

// If value is not empty
						if (data[j][countryName[i]]) {
							//Add a new object to the emissions data array
							//for this country
							dataset[i].wealth.push({
								year: data[j]["YEAR"],
								gdp: data[j][countryName[i]]
							});
						}

}

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

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

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

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

//Within each group, create a new line/path,
				//binding just the gdp data to each one
				groups.selectAll("path")
					.data(function(d) {
						return [ d.wealth ];
					})
					.enter()
					.append("path")
					.attr("class", "line")
					.attr("d", line)
					.attr("fill", "none")
					.attr("stroke", "steelblue")
					.attr("stroke-width", 2);

groups.classed("highlightUSA", function(d) {
							if (d.country == "USA") {
								return true;
							}
							else {
								return false;
							}

});

//ADDING HERE FOR LABELS
				var datalabel = svg.selectAll("text")
						.data(dataset.filter(function(d) {
							return (d.country == "USA");
						}))
						.enter()
						.append("text");

datalabel.attr("x", [w - padding[1] - padding[3]])
						.attr("y", (function(d) {
							return yScale( d.wealth[8].gdp );
						}))
						.attr("fill", "black")
						.attr("font-size", "12px")
						.attr("font-family", "Georgia")
						.text(function(d) {
							return d.country;
						});

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

svg.append("g")
						.attr("transform", "translate(115," + 60 + ")")
						.append("text")
						.attr("transform","rotate(270)")
						.text("GDP")
						.attr("font-size",11)

});

</script>

</body>
</html>

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

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