anbnyc · September 20, 2015 13:46
diff --git a/2012pres.csv b/2012pres.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8">
 		<title>Module 5 Scatterplot</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,
 			form {
 				font-size: 14px;
 				margin: 10px 0 0 0;
 			}

 			svg {
 				background-color: white;
 			}

 			circle:hover {
 				fill: orange;
 			}
 			
 			text {
 				pointer-events: none;
 			}
 			
 			.axis path,
 			.axis line {
 				fill: none;
 				stroke: black;
 				shape-rendering: crispEdges;
 			}
 			
 			.axis text {
 				font-family: sans-serif;
 				font-size: 11px;
 			}

 		</style>
 	</head>
 	<body>
 	
 		<h1>2012 Electoral Vote</h1>

 		<p>Net electoral votes vs. net popular vote for Obama (vs. Romney) in 2012 general election by state. Source: <a href="http://www.fec.gov/pubrec/fe2012/federalelections2012.shtml">FEC</a>, 2015</p>

 		<p>
 			<form name="xtoggle" action="">
 				<input type="radio" name="xcalc" value="pct">Percentage<br>
 				<input type="radio" name="xcalc" value="tot">Total
 			</form>
 		</p>

 		<script type="text/javascript">		


 			var w = 800;
 			var h = 400;
 			var padding = [ 30, 20, 30, 40 ];  //Top, right, bottom, left

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

 			var xAxis = d3.svg.axis()
 							.scale(xScale)
 							.orient("top")
 							.ticks(15)
 							.tickFormat(function(d) {
 								return d*100 + "%";
 							});

 			var yAxis = d3.svg.axis()
 							.scale(yScale)
 							.orient("left")
 							.ticks(15);

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



 			d3.csv("2012pres.csv", function(data) {

 				data.sort(function(a, b) {
 					return d3.descending(+a.netEv, +b.netEv);
 				});
 				
 				// TOGGLE w/o totalVote, use +/- 100,000 
 				xScale.domain([ d3.min(data, function(d) {
 						return (d.obamaPv - d.romneyPv)/d.totalVote - .05;
 					}),
 					d3.max(data, function(d) {
 						return (d.obamaPv - d.romneyPv)/d.totalVote + .05;
 					})
 				]);

 				yScale.domain([ d3.min(data, function(d) {
 						return (d.obamaEv - d.romneyEv - 5);
 					}),
 					d3.max(data, function(d) {
 						return (d.obamaEv - d.romneyEv + 5);
 					})
 				]);

 				var circles = svg.selectAll("circle")
 								.data(data)
 								.enter()
 								.append("circle");

 				// TOGGLE remote totalVote
 				circles.attr("cx", function(d){
 						return xScale((d.obamaPv - d.romneyPv)/d.totalVote);
 					})
 					.attr("cy", function(d) {
 						return yScale(d.obamaEv - d.romneyEv);
 					})
 					.attr("r", .5)
 					.attr("height", 8)
 					.attr("fill", function(d){
 						if(+d.netEv > 0){
 							return "blue";
 						} else {
 							return "red";
 						}
 					})
 					.append("title")
 					.text(function(d) {
 						return d.state;
 					});
 				
 				circles.sort(function(a, b) {
 						return d3.ascending(+a.obamaPv, +b.obamaPv);
 					})
 					.transition()
 					.delay(function(d, i) {
 						return i * 50;
 					})
 					.duration(1500)
 					.attr("r", 4);
 				
 				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>

 	</body>
 </html>
state	obamaEv	romneyEv	netEv	obamaPv	romneyPv	otherPv	totalVote
AL	0	9	-9	795696	1255925	22717	2074338
AK	0	3	-3	122640	164676	13179	300495
AZ	0	11	-11	1025232	1233654	40368	2299254
AR	0	6	-6	394409	647744	27315	1069468
CA	55	0	55	7854285	4839958	344304	13038547
CO	9	0	9	1323102	1185243	61177	2569522
CT	7	0	7	905083	634892	18985	1558960
DE	3	0	3	242584	165484	5853	413921
DC	3	0	3	267070	21381	5313	293764
FL	29	0	29	4237756	4163447	72976	8474179
GA	0	16	-16	1773827	2078688	47535	3900050
HI	4	0	4	306658	121015	7024	434697
ID	0	4	-4	212787	420911	18576	652274
IL	20	0	20	3019512	2135216	87286	5242014
IN	0	11	-11	1152887	1420543	51104	2624534
IA	6	0	6	822544	730617	29019	1582180
KS	0	6	-6	440726	692634	26611	1159971
KY	0	8	-8	679370	1087190	30652	1797212
LA	0	8	-8	809141	1152262	32662	1994065
ME	4	0	4	401306	292276	19598	713180
MD	10	0	10	1677844	971869	57614	2707327
MA	11	0	11	1921290	1188314	58163	3167767
MI	16	0	16	2564569	2115256	51136	4730961
MN	10	0	10	1546167	1320225	70169	2936561
MS	0	6	-6	562949	710746	11889	1285584
MO	0	10	-10	1223796	1482440	51087	2757323
MT	0	3	-3	201839	267928	14281	484048
NE	0	5	-5	302081	475064	17234	794379
NV	6	0	6	531373	463567	19978	1014918
NH	4	0	4	369561	329918	11493	710972
NJ	14	0	14	2125101	1477568	37623	3640292
NM	5	0	5	415335	335788	32635	783758
NY	29	0	29	4485741	2490431	104987	7081159
NC	0	15	-15	2178391	2270395	56586	4505372
ND	0	3	-3	124827	188163	9637	322627
OH	18	0	18	2827709	2661437	91701	5580847
OK	0	7	-7	443547	891325	0	1334872
OR	7	0	7	970488	754175	64607	1789270
PA	20	0	20	2990274	2680434	82962	5753670
RI	4	0	4	279677	157204	9168	446049
SC	0	9	-9	865941	1071645	26532	1964118
SD	0	3	-3	145039	210610	8166	363815
TN	0	11	-11	960709	1462330	35538	2458577
TX	0	38	-38	3308124	4569843	115884	7993851
UT	0	6	-6	251813	740600	25027	1017440
VT	3	0	3	199239	92698	7353	299290
VA	13	0	13	1971820	1822522	60147	3854489
WA	12	0	12	1755396	1290670	79450	3125516
WV	0	5	-5	238269	417655	14514	670438
WI	10	0	10	1620985	1407966	39483	3068434
WY	0	3	-3	69286	170962	8813	249061
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Module 5 Scatterplot</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,
	form {
	font-size: 14px;
	margin: 10px 0 0 0;
	}

	svg {
	background-color: white;
	}

	circle:hover {
	fill: orange;
	}

	text {
	pointer-events: none;
	}

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

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

	</style>
	</head>
	<body>

	<h1>2012 Electoral Vote</h1>

	<p>Net electoral votes vs. net popular vote for Obama (vs. Romney) in 2012 general election by state. Source: <a href="http://www.fec.gov/pubrec/fe2012/federalelections2012.shtml">FEC</a>, 2015</p>

	<p>
	<form name="xtoggle" action="">
	<input type="radio" name="xcalc" value="pct">Percentage<br>
	<input type="radio" name="xcalc" value="tot">Total
	</form>
	</p>

	<script type="text/javascript">


	var w = 800;
	var h = 400;
	var padding = [ 30, 20, 30, 40 ]; //Top, right, bottom, left

	var yScale = d3.scale.linear()
	.range([h - padding[2], padding[0]]);

	var xScale = d3.scale.linear()
	.range([padding[3], w - padding[1] ]);

	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("top")
	.ticks(15)
	.tickFormat(function(d) {
	return d*100 + "%";
	});

	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left")
	.ticks(15);

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



	d3.csv("2012pres.csv", function(data) {

	data.sort(function(a, b) {
	return d3.descending(+a.netEv, +b.netEv);
	});

	// TOGGLE w/o totalVote, use +/- 100,000
	xScale.domain([ d3.min(data, function(d) {
	return (d.obamaPv - d.romneyPv)/d.totalVote - .05;
	}),
	d3.max(data, function(d) {
	return (d.obamaPv - d.romneyPv)/d.totalVote + .05;
	})
	]);

	yScale.domain([ d3.min(data, function(d) {
	return (d.obamaEv - d.romneyEv - 5);
	}),
	d3.max(data, function(d) {
	return (d.obamaEv - d.romneyEv + 5);
	})
	]);

	var circles = svg.selectAll("circle")
	.data(data)
	.enter()
	.append("circle");

	// TOGGLE remote totalVote
	circles.attr("cx", function(d){
	return xScale((d.obamaPv - d.romneyPv)/d.totalVote);
	})
	.attr("cy", function(d) {
	return yScale(d.obamaEv - d.romneyEv);
	})
	.attr("r", .5)
	.attr("height", 8)
	.attr("fill", function(d){
	if(+d.netEv > 0){
	return "blue";
	} else {
	return "red";
	}
	})
	.append("title")
	.text(function(d) {
	return d.state;
	});

	circles.sort(function(a, b) {
	return d3.ascending(+a.obamaPv, +b.obamaPv);
	})
	.transition()
	.delay(function(d, i) {
	return i * 50;
	})
	.duration(1500)
	.attr("r", 4);

	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>

	</body>
	</html>