anbnyc · September 8, 2015 13:11
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>Adding Tooltips</title>
 		<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
 		<style type="text/css">
 			
 			body {
 				background-color: #ddddff;
 			}

 			svg {
 				background-color: white;
 			}

 		</style>
 	</head>
 	<body>

 		<script type="text/javascript">		


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



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

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

 					//If your numeric values aren't sorting properly,
 					//try commenting out the line above, and instead using:
 					//
 					//return d3.descending(+a.lifeSatisfaction, +b.lifeSatisfaction);
 					//
 					//Data coming in from the CSV is saved as strings (text),
 					//so the + signs here force JavaScript to treat those
 					//strings instead as numeric values, thereby fixing the
 					//sort order (hopefully!).
 				});

 				var rects = svg.selectAll("rect")
 								.data(data)
 								.enter()
 								.append("rect");

 				rects.attr("x", function(d){
 						if(+d.netEv > 0){
 							return 100;
 						} else {
 							return 50 + (50 + +d.netEv);
 						}
 					})
 					.attr("y", function(d, i) {
 						return i * 10;
 					})
 					.attr("width", function(d) {
 						return Math.abs(+d.netEv);
 					})
 					.attr("height", 8)
 					.style("fill", function(d){
 						if(+d.netEv > 0){
 							return "blue";
 						} else {
 							return "red";
 						}
 					})
 					.append("title")
 					.text(function(d) {
 						if(+d.netEv > 0){
 							return d.state + " gave Obama " + d.obamaEv + " electoral votes in 2012";
 						} else {
 							return d.state + " gave Romney " + d.romneyEv + " electoral votes in 2012";
 						}
 				});
 				
 			});


 		</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>Adding Tooltips</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
	<style type="text/css">

	body {
	background-color: #ddddff;
	}

	svg {
	background-color: white;
	}

	</style>
	</head>
	<body>

	<script type="text/javascript">


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



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

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

	//If your numeric values aren't sorting properly,
	//try commenting out the line above, and instead using:
	//
	//return d3.descending(+a.lifeSatisfaction, +b.lifeSatisfaction);
	//
	//Data coming in from the CSV is saved as strings (text),
	//so the + signs here force JavaScript to treat those
	//strings instead as numeric values, thereby fixing the
	//sort order (hopefully!).
	});

	var rects = svg.selectAll("rect")
	.data(data)
	.enter()
	.append("rect");

	rects.attr("x", function(d){
	if(+d.netEv > 0){
	return 100;
	} else {
	return 50 + (50 + +d.netEv);
	}
	})
	.attr("y", function(d, i) {
	return i * 10;
	})
	.attr("width", function(d) {
	return Math.abs(+d.netEv);
	})
	.attr("height", 8)
	.style("fill", function(d){
	if(+d.netEv > 0){
	return "blue";
	} else {
	return "red";
	}
	})
	.append("title")
	.text(function(d) {
	if(+d.netEv > 0){
	return d.state + " gave Obama " + d.obamaEv + " electoral votes in 2012";
	} else {
	return d.state + " gave Romney " + d.romneyEv + " electoral votes in 2012";
	}
	});

	});


	</script>

	</body>
	</html>