Life expectancy at birth - Module 6 exercise [multi-linechart]

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Life expectancy multiline chart: 1960 &ndash; 2011</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.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: 0.5;
			}
			g.highlight path {
				stroke: steelblue;
				stroke-width: 2;
			}
			.axis path,
			.axis line {
				fill: none;
				stroke: black;
				stroke-width: 1;
				shape-rendering: crispEdges;
			}
			.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}
		</style>
		<script>
			var buttons = "";
			var letters = "0ABCDEFGHIJKLMNOPQRSTUVWXYZ";
			var letterArray = letters.split("");
			for(var i = 0; i < 27; i++){
				var letter = letterArray.shift();
				if(letter == "0"){
					letter = "All";
				}
				buttons += '<INPUT TYPE="button" VALUE='+letter+' onClick="drawChart(\''+letter+'\');">&nbsp;';
			}
		</script>
	</head>
	<body>
		<header>
			<h1>Life expectancy (1960 &#151; 2012)</h1>
			<h3>
			With data from <a href="https://data.worldbank.org/indicator/SP.DYN.LE00.IN">World Bank</a></h2>
		</header>
		<script> document.write(buttons); </script>
		<script type="text/javascript">
			//Dimensions and padding
			var w = 1000;
			var h = 500;
			function drawChart(alphabet) {
				d3.select("#chart").selectAll('svg').remove();

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

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

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

//New array with all the years, for referencing later
					var years = ["1961", "1962", "1963", "1964", "1965", "1966", "1967", "1968", "1969", "1970", "1971", "1972", "1973", "1974", "1975", "1976", "1977", "1978", "1979", "1980", "1981", "1982", "1983", "1984", "1985", "1986", "1987", "1988", "1989", "1990", "1991", "1992", "1993", "1994", "1995", "1996", "1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012"];

//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 this country's name and empty array
						dataset[i] = {
							country: data[i].CountryName,
							leab: []
						};

//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 leab data array
								//for this country
								dataset[i].leab.push({
									year: years[j],
									amount: data[i][years[j]]
								});
							}
						}
					}
					if(alphabet != "All") {
						var subsetdata = [];
						var j = 0;
						for(k = 0; k < dataset.length; k += 1) {
							if(dataset[k].country.charAt(0) == alphabet) {
								subsetdata[j] = dataset[k];
								j++;
							}
						}
						dataset = subsetdata;
					}
					//Set scale domains
					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.leab, function(d) {
								return +d.amount;
							});
						}),
						0
					]);

//Make a group for each country
					var groups = svg.selectAll("g")
						.data(dataset)
						.enter()
						.append("g")
						.classed("highlight", function(d) {

if (d.country == "United States" ||
								d.country == "Sierra Leone" ||
								d.country == "Mali" ||
								d.country == "India" ||
								d.country == "China") {
								return true;
							} else {
								return false;
							}

});

//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 leab data to each one
					groups.selectAll("path")
						.data(function(d) {
							return [ d.leab ];
						})
						.enter()
						.append("path")
						.attr("class", "line")
						.attr("d", line)
						.attr("fill", "none")
						.attr("stroke-width", 2);

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

});
			}
		</script>
		<script>window.onload = function() {
			drawChart("All");
			};
		</script>
		<div id="chart"></div>
	</body>
</html>

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

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