jadiehm · March 2, 2016 20:03
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="utf-8">
 	<title>New Hampshire 2016</title>
 	<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
 	<script type="text/javascript" src="http://d3js.org/queue.v1.min.js"></script>
 	<script type="text/javascript" src="http://d3js.org/topojson.v1.min.js"></script> 
 </head>

 <!-- CSS -->
 <style>
 	path {
 	 	stroke:white;
 	 	fill: #d3d3d3;
 	 	stroke-width: 1px;
 	}
 	 
 	body {
 	 	font-family: 'Proxima Nova', sans-serif;
 	}
 	 
 	.precinct {
 	 	font: .75em;
 	 	font-weight: bold;
 	}
 	 
 	div.tooltip {
 	 	position: absolute;
 	 	left: 75px;
 	 	text-align: center;
 	 	height: 16px;
 	 	padding: 10px;
 	 	font-size: .85em;
 	 	background: #FFFFFF;
 	 	border: 1px solid #989898;
 		pointer-events: none;
 	}

 	.chart {
 		max-width: 300px;
 	}

 	h1{
 		font-size: 1.25em;
 	}

 	.source{
 		font-size: 0.75em;
 	}

 	.Sanders {
 		color: #cfdceb;
 	}

 	.Clinton {
 		color: #2f5491;
 	}

 </style>

 <body>
 	<div class="info">
 		<h1>Democratic Primary Results</h1>
 		<p class="key">
 			<span class="Clinton">&#9632</span> Clinton &nbsp;
 			<span class="Sanders">&#9632</span> Sanders &nbsp;
 		</p>
 		<div class="g-chart"></div>	
 		<p class="source"> Source: ABC News analysis, Associated Press</p>
 	</div>

 <script type="text/javascript">
 	var width = 300, height = 520;
 			 
 	var div = d3.select(".g-chart").append("div")
 		 .attr("class", "tooltip")
 		 .style("opacity", 0);
 		 
 	var svg = d3.select(".g-chart").append("svg")
 		.attr("width", width)
 		.attr("height", height)
 		.style("margin", "-15px auto");
 		 
 	//Tells the nap what projection to use
 	var projection = d3.geo.albersUsa()
    	.scale(10000)
    	.translate([-3000, 1575]);

 	//Tells the map how to draw the paths from the projection
 	var path = d3.geo.path()
    	.projection(projection);
 		 
 	queue()
 		.defer(d3.json, "nh_final2.json")
 		.defer(d3.csv, "nhmap.csv")
 		.await(ready);
 		 
 	function ready(error, nh, data) {

  	//array map lookup (matching values from json to csv)
  	var winnerById = {};
  	data.forEach(function(d) { winnerById[d.id] = d.demwinner; });

  	console.log(winnerById);

 		//Moves selction to front
 		d3.selection.prototype.moveToFront = function() {
  			return this.each(function(){
    			this.parentNode.appendChild(this);
  			});
 		}; 

 		//Moves selction to back
 		d3.selection.prototype.moveToBack = function() { 
    		return this.each(function() { 
        		var firstChild = this.parentNode.firstChild; 
        		if (firstChild) { 
            		this.parentNode.insertBefore(this, firstChild); 
        		} 
    		}); 
 		};
 				
 		svg.append("g")
 			.attr("arcs", "precinct")
 			.selectAll("path")
 			.data(topojson.feature(nh, nh.objects.nh).features)
 			.enter().append("path")
 			.attr("d", path)
 			.style("opacity", 1)
 			.style("fill", function(d){
 				if (winnerById[d.id] === "Sanders") {return "#cfdceb";}
 					else if (winnerById[d.id] === "Clinton") {return "#2f5491";}
 					else {return "#d3d3d3";}
 			})

 			.on("mouseover", function(d) {
 				var sel = d3.select(this);
 		  		sel.moveToFront();
 				d3.select(this).transition().duration(300).style({'opacity': 1, 'stroke': 'black', 'stroke-width': 1.5});
 				div.transition().duration(300)
 				.style("opacity", 1)
 				div.text(d.id + ": " + winnerById[d.id])
 				.style("left", (d3.event.pageX) + "px")
 				.style("top", (d3.event.pageY -30) + "px");
 			})
 				
 			.on("mouseout", function() {
 				var sel = d3.select(this);
 		  		sel.moveToBack();
 				d3.select(this)
 				.transition().duration(300)
 				.style({'opacity': 1, 'stroke': 'white', 'stroke-width': 1});
 				div.transition().duration(300)
 				.style("opacity", 0);
 			})
 	};
 			 
 </script>
 		
 </body>

 </html>
diff --git a/nh_final2.json b/nh_final2.json
diff --git a/nhmap.csv b/nhmap.csv
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>New Hampshire 2016</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
	<script type="text/javascript" src="http://d3js.org/queue.v1.min.js"></script>
	<script type="text/javascript" src="http://d3js.org/topojson.v1.min.js"></script>
	</head>

	<!-- CSS -->
	<style>
	path {
	stroke:white;
	fill: #d3d3d3;
	stroke-width: 1px;
	}

	body {
	font-family: 'Proxima Nova', sans-serif;
	}

	.precinct {
	font: .75em;
	font-weight: bold;
	}

	div.tooltip {
	position: absolute;
	left: 75px;
	text-align: center;
	height: 16px;
	padding: 10px;
	font-size: .85em;
	background: #FFFFFF;
	border: 1px solid #989898;
	pointer-events: none;
	}

	.chart {
	max-width: 300px;
	}

	h1{
	font-size: 1.25em;
	}

	.source{
	font-size: 0.75em;
	}

	.Sanders {
	color: #cfdceb;
	}

	.Clinton {
	color: #2f5491;
	}

	</style>

	<body>
	<div class="info">
	<h1>Democratic Primary Results</h1>
	<p class="key">
	<span class="Clinton">&#9632</span> Clinton
	<span class="Sanders">&#9632</span> Sanders
	</p>
	<div class="g-chart"></div>
	<p class="source"> Source: ABC News analysis, Associated Press</p>
	</div>

	<script type="text/javascript">
	var width = 300, height = 520;

	var div = d3.select(".g-chart").append("div")
	.attr("class", "tooltip")
	.style("opacity", 0);

	var svg = d3.select(".g-chart").append("svg")
	.attr("width", width)
	.attr("height", height)
	.style("margin", "-15px auto");

	//Tells the nap what projection to use
	var projection = d3.geo.albersUsa()
	.scale(10000)
	.translate([-3000, 1575]);

	//Tells the map how to draw the paths from the projection
	var path = d3.geo.path()
	.projection(projection);

	queue()
	.defer(d3.json, "nh_final2.json")
	.defer(d3.csv, "nhmap.csv")
	.await(ready);

	function ready(error, nh, data) {

	//array map lookup (matching values from json to csv)
	var winnerById = {};
	data.forEach(function(d) { winnerById[d.id] = d.demwinner; });

	console.log(winnerById);

	//Moves selction to front
	d3.selection.prototype.moveToFront = function() {
	return this.each(function(){
	this.parentNode.appendChild(this);
	});
	};

	//Moves selction to back
	d3.selection.prototype.moveToBack = function() {
	return this.each(function() {
	var firstChild = this.parentNode.firstChild;
	if (firstChild) {
	this.parentNode.insertBefore(this, firstChild);
	}
	});
	};

	svg.append("g")
	.attr("arcs", "precinct")
	.selectAll("path")
	.data(topojson.feature(nh, nh.objects.nh).features)
	.enter().append("path")
	.attr("d", path)
	.style("opacity", 1)
	.style("fill", function(d){
	if (winnerById[d.id] === "Sanders") {return "#cfdceb";}
	else if (winnerById[d.id] === "Clinton") {return "#2f5491";}
	else {return "#d3d3d3";}
	})

	.on("mouseover", function(d) {
	var sel = d3.select(this);
	sel.moveToFront();
	d3.select(this).transition().duration(300).style({'opacity': 1, 'stroke': 'black', 'stroke-width': 1.5});
	div.transition().duration(300)
	.style("opacity", 1)
	div.text(d.id + ": " + winnerById[d.id])
	.style("left", (d3.event.pageX) + "px")
	.style("top", (d3.event.pageY -30) + "px");
	})

	.on("mouseout", function() {
	var sel = d3.select(this);
	sel.moveToBack();
	d3.select(this)
	.transition().duration(300)
	.style({'opacity': 1, 'stroke': 'white', 'stroke-width': 1});
	div.transition().duration(300)
	.style("opacity", 0);
	})
	};

	</script>

	</body>

	</html>
id	demwinner	gopwinner
Acworth	Sanders	Trump
Albany	Sanders	Trump
Alexandria	Sanders	Trump
Allenstown	Sanders	Trump
Alstead	Sanders	Trump
Alton	Sanders	Trump
Amherst	Sanders	Trump
Andover	Sanders	Trump
Antrim	Sanders	Trump
Ashland	Sanders	Trump
Atkinson	Sanders	Trump
Atkinson & Gilmanton
Auburn	Sanders	Trump
Barnstead	Sanders	Trump
Barrington	Sanders	Trump
Bartlett	Sanders	Kasich
Bath	Sanders	Trump
Beans Grant
Beans Purchase
Bedford	Clinton	Trump
Belmont	Sanders	Trump
Bennington	Sanders	Trump
Benton	Sanders	Trump
Berlin	Sanders	Trump
Bethlehem	Sanders	Trump
Boscawen	Sanders	Trump
Bow	Sanders	Trump
Bradford	Sanders	Trump
Brentwood	Sanders	Trump
Bridgewater	Sanders	Trump
Bristol	Sanders	Trump
Brookfield	Sanders	Trump
Brookline	Sanders	Trump
Cambridge
Campton	Sanders	Trump
Canaan	Sanders	Trump
Candia	Sanders	Trump
Canterbury	Sanders	Trump
Carroll	Sanders	Trump
Center Harbor	Sanders	Trump
Chandlers Purchase
Charlestown	Sanders	Trump
Chatham	Sanders	Trump
Chester	Sanders	Trump
Chesterfield
Chichester	Sanders	Trump
Claremont	Sanders	Trump
Clarksville	Sanders	Trump
Colebrook	Sanders	Trump
Columbia	Sanders	Trump
Concord	Sanders	Trump
Conway	Sanders	Trump
Cornish	Sanders	Trump
Crawfords Purchase
Croydon	Sanders	Trump
Cutts Grant
Dalton	Sanders	Trump
Danbury	Sanders	Trump
Danville	Sanders	Trump
Deerfield	Sanders	Trump
Deering	Sanders	Trump
Derry	Sanders	Trump
Dixs Grant
Dixville	Sanders	Kasich
Dorchester
Dover	Sanders	Trump
Dublin	Sanders	Trump
Dummer	Sanders	Trump
Dunbarton	Sanders	Trump
Durham
East Kingston	Sanders	Trump
Easton		Trump
Eaton	Sanders	Trump
Effingham	Sanders	Trump
Ellsworth	Sanders	Trump
Enfield	Sanders	Trump
Epping	Sanders	Trump
Epsom	Sanders	Trump
Errol	Sanders	Trump
Ervings Location
Exeter	Sanders	Trump
Farmington	Sanders	Trump
Fitzwilliam	Sanders	Trump
Francestown	Sanders	Trump
Franconia	Sanders	Trump
Franklin	Sanders	Trump
Freedom
Fremont
Gilford	Sanders	Trump
Gilmanton	Sanders	Trump
Gilsum	Sanders	Trump
Goffstown	Sanders	Trump
Gorham	Sanders	Trump
Goshen	Sanders	Trump
Grafton	Sanders	Trump
Grantham		Trump
Greenfield	Sanders	Trump
Greenland
Greens Grant
Greenville	Sanders	Trump
Groton	Sanders	Trump
Hadleys Purchase
Hales Location
Hampstead	Sanders	Trump
Hampton	Sanders	Trump
Hampton Falls	Sanders	Trump
Hancock	Sanders	Kasich
Hanover	Sanders	Kasich
Harrisville
Harts Location	Sanders	Kasich
Haverhill	Sanders	Trump
Hebron	Sanders	Trump
Henniker	Sanders	Trump
Hill	Sanders	Trump
Hillsborough	Sanders	Trump
Hinsdale	Sanders	Trump
Holderness	Sanders	Trump
Hollis	Sanders	Trump
Hooksett	Sanders	Trump
Hopkinton	Sanders	Trump
Hudson	Sanders	Trump
Jackson	Sanders	Kasich
Jaffrey	Sanders	Trump
Jefferson	Sanders	Trump
Keene	Sanders	Trump
Kensington	Sanders	Trump
Kilkenny
Kingston
Laconia	Sanders	Trump
Lancaster	Sanders	Trump
Landaff
Langdon
Lebanon	Sanders	Kasich
Lee	Sanders	Trump
Lempster	Sanders	Trump
Lincoln	Sanders	Trump
Lisbon	Sanders	Trump
Litchfield	Sanders	Trump
Littleton	Sanders	Trump
Londonderry	Sanders	Trump
Loudon	Sanders	Trump
Low & Burbanks
Lyman	Sanders	Trump
Lyme	Sanders	Kasich
Lyndeborough	Sanders	Trump
Madbury	Sanders	Trump
Madison	Sanders	Trump
Manchester	Sanders	Trump
Marlborough	Sanders	Trump
Marlow	Sanders	Trump
Martins Location
Mason	Sanders	Trump
Meredith	Sanders	Trump
Merrimack	Sanders	Trump
Middleton	Sanders	Trump
Milan
Milford	Sanders	Trump
Millsfield	Clinton	Cruz
Milton	Sanders	Trump
Monroe	Sanders	Trump
Mont Vernon	Sanders	Trump
Moultonborough	Sanders	Trump
Nashua	Sanders	Trump
Nelson	Sanders	Trump
New Boston	Sanders	Trump
New Castle
New Durham	Sanders	Trump
New Hampton	Sanders	Trump
New Ipswich
New London	Sanders	Kasich
Newbury	Sanders	Trump
Newfields	Sanders	Trump
Newington	Sanders	Trump
Newmarket	Sanders	Trump
Newport	Sanders	Trump
Newton	Sanders	Trump
North Hampton	Sanders	Trump
Northfield	Sanders	Trump
Northumberland	Sanders	Trump
Northwood	Sanders	Trump
Nottingham	Sanders	Trump
Odell
Orange
Orford	Sanders	Kasich
Ossipee	Sanders	Trump
Pelham	Sanders	Trump
Pembroke	Sanders	Trump
Peterborough	Sanders	Kasich
Piermont	Sanders	Trump
Pinkhams Grant
Pittsburg
Pittsfield	Sanders	Trump
Plainfield	Sanders	Trump
Plaistow	Sanders	Trump
Plymouth
Portsmouth	Sanders	Trump
Randolph	Sanders	Trump
Raymond	Sanders	Trump
Richmond	Sanders	Trump
Rindge	Sanders	Trump
Rochester	Sanders	Trump
Rollinsford	Sanders	Trump
Roxbury	Sanders	Trump
Rumney	Sanders	Trump
Rye	Sanders	Trump
Salem	Sanders	Trump
Salisbury	Sanders	Trump
Sanbornton	Sanders	Trump
Sandown	Sanders	Trump
Sandwich	Sanders	Trump
Sargents Purchase
Seabrook
Second College
Sharon	Sanders	Kasich
Shelburne	Sanders	Trump
Somersworth	Sanders	Trump
South Hampton
Springfield	Sanders	Trump
Stark	Sanders	Trump
Stewartstown	Sanders	Trump
Stoddard
Strafford	Sanders	Trump
Stratford	Sanders	Trump
Stratham	Sanders	Trump
Success
Sugar Hill	Sanders	Kasich
Sullivan	Sanders	Trump
Sunapee	Sanders	Trump
Surry
Sutton	Sanders	Trump
Swanzey	Sanders	Trump
Tamworth	Sanders	Trump
Temple	Sanders	Trump
Thompson & Meserve
Thornton	Sanders	Trump
Tilton
Troy	Sanders	Trump
Tuftonboro	Sanders	Trump
Unity
Unorg. Terr.
Wakefield	Sanders	Trump
Walpole	Sanders	Trump
Warner	Sanders	Trump
Warren	Sanders	Bush
Washington	Sanders	Trump
Waterville Valley	Clinton	Trump
Weare	Sanders	Trump
Webster	Sanders	Trump
Wentworth	Sanders	Trump
Wentworths Location	Sanders	Trump
Westmoreland	Sanders	Trump
Whitefield	Sanders	Trump
Wilmot	Sanders	Trump
Wilton	Sanders	Trump
Winchester	Sanders	Trump
Windham	Clinton	Trump
Windsor	Sanders	Trump
Wolfeboro	Sanders	Trump
Woodstock	Sanders	Trump