anbnyc · October 4, 2015 17:28
diff --git a/electoral.csv b/electoral.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8">
 		<title>Module 6 Line Graphs</title>
 		<script type="text/javascript" src="http://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>
 	</head>
 	<body>

 		<h1>Winner's Electoral College Vote Share</h1>

 		<p>Electoral votes received by winner and loser in US Presidential Elections, 1968 - 2012. Source: <a href="https://en.wikipedia.org/wiki/List_of_United_States_presidential_elections_by_Electoral_College_margin">Wikipedia</a>, 2015</p>

 		<script type="text/javascript">		


 			//Dimensions and padding
 			var w = 700;
 			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(12)
 							.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 the empty SVG image
 			var svg = d3.select("body")
 						.append("svg")
 						.attr("width", w)
 						.attr("height", h);



 			//Load USA data
 			d3.csv("electoral.csv", function(data) {
 				
 				//New array with all the years, for referencing later
 				var years = ["1964", "1968", "1972", "1976", "1980", "1984", "1988", "1992", "1996", "2000", "2004", "2008", "2012"];

 				//Create a new, empty array to hold our restructured dataset
 				var dataset = [
 					{
 						candidate: "winner",
 						votes: []
 					},
 					{
 						candidate: "loser",
 						votes: []
 					}
 				];
 				
 				//Loop through all the years
 				for (var j = 0; j < data.length; j++) {
 					dataset[0].votes.push({
 						year: data[j].year,
 						amount: data[j].evFor
 					});
 				}
 					
 				for (var j = 0; j < data.length; j++) {
 					dataset[1].votes.push({
 						year: data[j].year,
 						amount: data[j].evAgainst
 					});
 				}

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

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

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

 						if (d.candidate == "winner") {
 							return true;
 						} else {
 							return false;
 						}

 					});

 				//Append a title with the name (so we get easy tooltips)
 				groups.append("title")
 					.text(function(d) {
 						return d.candidate;
 					});
 					
 				//Within each group, create a new line/path,
 				//binding just the data to each one
 				groups.selectAll("path")
 					.data(function(d) {
 						return [ d.votes ];
 					})
 					.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);

 			});
 			//End data load function


 		</script>

 	</body>
 </html>
year	winner	totVote	evFor	evAgainst	pctVote
2012	Barack Obama	538	332	206	61.71%
2008	Barack Obama	538	365	173	67.84%
2004	George W. Bush	538	286	251	53.16%
2000	George W. Bush	538	271	266	50.37%
1996	Bill Clinton	538	379	159	70.45%
1992	Bill Clinton	538	370	168	68.77%
1988	George H. W. Bush	538	426	111	79.18%
1984	Ronald Reagan	538	525	13	97.58%
1980	Ronald Reagan	538	489	49	90.89%
1976	Jimmy Carter	538	297	240	55.20%
1972	Richard Nixon	538	520	17	96.65%
1968	Richard Nixon	538	301	191	55.95%
1964	Lyndon B. Johnson	538	486	52	90.33%
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Module 6 Line Graphs</title>
	<script type="text/javascript" src="http://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>
	</head>
	<body>

	<h1>Winner's Electoral College Vote Share</h1>

	<p>Electoral votes received by winner and loser in US Presidential Elections, 1968 - 2012. Source: <a href="https://en.wikipedia.org/wiki/List_of_United_States_presidential_elections_by_Electoral_College_margin">Wikipedia</a>, 2015</p>

	<script type="text/javascript">


	//Dimensions and padding
	var w = 700;
	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(12)
	.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 the empty SVG image
	var svg = d3.select("body")
	.append("svg")
	.attr("width", w)
	.attr("height", h);



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

	//New array with all the years, for referencing later
	var years = ["1964", "1968", "1972", "1976", "1980", "1984", "1988", "1992", "1996", "2000", "2004", "2008", "2012"];

	//Create a new, empty array to hold our restructured dataset
	var dataset = [
	{
	candidate: "winner",
	votes: []
	},
	{
	candidate: "loser",
	votes: []
	}
	];

	//Loop through all the years
	for (var j = 0; j < data.length; j++) {
	dataset[0].votes.push({
	year: data[j].year,
	amount: data[j].evFor
	});
	}

	for (var j = 0; j < data.length; j++) {
	dataset[1].votes.push({
	year: data[j].year,
	amount: data[j].evAgainst
	});
	}


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

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

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

	if (d.candidate == "winner") {
	return true;
	} else {
	return false;
	}

	});

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

	//Within each group, create a new line/path,
	//binding just the data to each one
	groups.selectAll("path")
	.data(function(d) {
	return [ d.votes ];
	})
	.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);

	});
	//End data load function


	</script>

	</body>
	</html>