Week 6: My Line Plot.

<!DOCTYPE html>

<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Line Chart with Multiple Lines</title>

#text_p {
			max-width: 900px;
			margin: 0 auto;
		}

h1{
			font-family: "Open Sans", sans-serif;
			font-size: 45px;
			text-transform: uppercase;
			font-weight: 700;
			color: #0099FF;
			margin-top: 40px;
			margin-bottom: 15px;
		}

h2 {
			margin-top: 10px;
			font-weight: 400;
		}

p {
			width: 800px;
			font-family: "Open Sans";
			font-size: 18px;
			font-weight: 100;
			line-height: 1.7;
		}

#source p {
			font-size: 13px;
			margin-bottom: 50px;
		}

a, a:visited {
			text-decoration: none;
			color: #0099FF;
		}

a:hover {
			color: black;
		}

path.line {
				fill: none;
				stroke: rgba(0,128,255,0.3);
				stroke-width: 1px;
			}

.line.unfocused {
				stroke-opacity: 0.3;

}

.line.focused {
				stroke-width: 1.7px;
				stroke: rgba(0,128,255,1);
			}

/*.axis path,
			.axis line {
				fill: none;
				stroke: black;
				stroke-width: 1px;
			}*/

.axis path {
  			display: none;
				}

.axis line {
  			shape-rendering: crispEdges;
  			stroke: rgba(230,230,230,1);
				}

.axis text {
				font-family: "Open Sans", sans-serif;
				font-size: 12px;
				fill: rgba(75,75,75,1);
			}

.axis .minor line {
  			stroke: rgba(189,189,189,1);
  			stroke-dasharray: 1.2,4;
				}

.label {
				font-family: "Open Sans", sans-serif;
				font-size: 14px;
				font-weight: 600;
				fill: rgba(75,75,75,1);
			}

.tooltip {
					position: absolute;
					z-index: 10;
				}

.tooltip p {
					width: initial;
					font-family: "Open Sans", sans-serif;
					color: rgba(0,128,255,1);
					font-size: 15px;
					background-color: rgba(230,230,230,0.9);
					border: rgba(230,230,230,1) 1px solid;
					padding: 5px 7px 5px 7px;

}

</style>
	</head>

<h1>Infant Mortality under 5 years old since 2000</h1>

<p>Although death among children has decreased around the world within the last decade, some countries, like India, keep an alarming infant mortality. This graphic shows the change in infant mortality since 2000 to 2013.</p>
		<div id="source">
		<p>Source: <a href="https://www.who.int/gho/en/">Global Health Observatory (GHO)</a>.</p>
		</div>
		</div>

//Dimensions and padding
			var width = 1100;
			var height = 600;
			var margin = {top: 20, right: 0, bottom: 40, left:260};

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

var bycountry = [];

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

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

//Configure axis generators
			var xAxis = d3.svg.axis()
							.scale(xScale)
							.orient("bottom")
							.ticks(5)
							.tickFormat(function(d) {
								return dateFormat(d);
							})
							.outerTickSize([0]);

var yAxis = d3.svg.axis()
							.scale(yScale)
							.orient("right")
							.ticks(5)
							.tickSize(width - margin.left - 260);

//Configure line generator
			// each line dataset must have a d.year and a d.amount for this to work.
			var line = d3.svg.line()
				.x(function(d) {
					return xScale(dateFormat.parse(d.Year));
				})
				.y(function(d) {
					return yScale(+d.Total);
				});

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

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

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

var years = ["Year 2000", "Year 2001", "Year 2002", "Year 2003", "Year 2004", "Year 2005", "Year 2006", "Year 2007", "Year 2008", "Year 2009", "Year 2010", "Year 2011", "Year 2012", "Year 2013"];
					//Loop once for each row in data
				var bycountry = d3.nest().key(function (d) {
                      return d.Country;
                                      })
                      .entries(data);

console.log(data)
				console.log(bycountry)

//Set scale domains - max and mine of the years
				xScale.domain(
					d3.extent(years, function(d) {
						return dateFormat.parse(d);
					}));

// max of emissions to 0 (reversed, remember)
				yScale.domain([
					d3.max(bycountry, function(d) {
						return d3.max(d.values, function(d) {
							return +d.Total;
						});
					}),
					0
				]);

//Make a group for each country
				var groups = svg.selectAll("g.lines")
					.data(bycountry)
					.enter()
					.append("g")
					.attr("class", "lines");

//Within each group, create a new line/path,
				//binding just the emissions data to each one
				groups.selectAll("path")
					.data(function(d) { // because there's a group with data already...
						return [ d.values ]; // it has to be an array for the line function
					})
					.enter()
					.append("path")
					.attr("class", "line")
					.attr("d", line)
					.attr("stroke", "#FF0099");

//Axes
				svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(0," + (height - margin.bottom) + ")")
					.call(xAxis);

svg.append("text")
						.attr("class", "y label")
						.attr("transform", "translate(" + (width - margin.left * 3.4) + " ," +
										(height / 2.3 + margin.top) + ") rotate(-90)")
						.style("text-anchor", "middle")
						.attr("dy", "-67")
						.text("Infant Mortality under 5 years old");

var gy = svg.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + margin.left + ",0)")
					.call(yAxis);

gy.selectAll("g").filter(function(d) { return d; })
    			.classed("minor", true);

gy.selectAll("text")
	    		.attr("x", -70)
	    		.attr("dy", 0);

d3.selectAll("g.lines")
						.on("mouseover", mouseoverFunc)
						.on("mouseout", mouseoutFunc)
						.on("mousemove", mousemoveFunc);

}); // end of data csv

</script>
	 </div>
	</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js