New Hampshire Democratic results map

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>New Hampshire 2016</title>
	<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
	<script type="text/javascript" src="https://d3js.org/queue.v1.min.js"></script>
	<script type="text/javascript" src="https://d3js.org/topojson.v1.min.js"></script> 
</head>

<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>

//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>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/queue.v1.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://d3js.org/queue.v1.min.js

https://d3js.org/topojson.v1.min.js