Choropleth U.S. county map

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Independent Farms by County - Choropleth</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;
	 	stroke-width: 1px;
	}
	 
	body {
	 	font-family: 'Proxima Nova', sans-serif;
	}
	 
	.county {
	 	font: 14px sans-serif;
	 	font-weight: bold;
	}
	 
	.legend {
	 	font-size: 14px;
	 	font-family: 'Proxima Nova', sans-serif;
	}

.legend_title {
	 	font-size: 14px;
	 	font-family: 'Proxima Nova', sans-serif;
	 	font-weight: bold;
	}
	 
	div.tooltip {
	 	position: absolute;
	 	left: 75px;
	 	text-align: center;
	 	height: 16px;
	 	padding: 10px;
	 	font-size: 14px;
	 	background: #FFFFFF;
	 	border: 1px solid #989898;
 		pointer-events: none;
	}

p {
		font-family: 'Proxima Nova', sans-serif;
		font-size:10px;
		margin: 20px 0 0 10px;
	}

@media (max-width: 400px) {
    .d3map {
        display: none;
    }
}
</style>

<body>
	<h1>Independent Farms in the USA</h1>
		 <script type="text/javascript">
		 var width = 960, height = 600;
		 var color_domain = [500, 1000, 1500, 2000, 2500, 3000, 3500, 4000, 4500, 5000, 5500, 6000]
		 var ext_color_domain = [0, 500, 1000, 1500, 2000, 2500, 3000, 3500, 4000, 4500, 5000, 5500, 6000]
		 var legend_labels = ["< 500", "500+", "1000+", "1500+", "2000+", "2500+", "3000+", "3500+", "4000+", "4500+", "5000+", "5500+", "6000+"]
		 var color = d3.scale.threshold()
		 
		 .domain(color_domain)
		 .range(["#dcdcdc", "#d0d6cd", "#bdc9be", "#aabdaf", "#97b0a0", "#84a491", "#719782", "#5e8b73", "#4b7e64", "#387255", "#256546", "#125937", "#004d28"]);
		 
			var div = d3.select("body").append("div")
		 .attr("class", "tooltip")
		 .style("opacity", 0);
		 
		var svg = d3.select("body").append("svg")
		 .attr("width", width)
		 .attr("height", height)
		 .style("margin", "-15px auto");
		 var path = d3.geo.path()
		 
		queue()
		 .defer(d3.json, "us.json")
		 .defer(d3.csv, "data.csv")
		 .await(ready);
		 
		function ready(error, us, data) {
		 var pairRateWithId = {};
		 var pairNameWithId = {};

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

data.forEach(function(d) {
		 pairRateWithId[d.id] = +d.rate;
		 pairNameWithId[d.id] = d.name;
		 });
		 svg.append("g")
		 .attr("class", "county")
		 .selectAll("path")
		 .data(topojson.feature(us, us.objects.counties).features)
		 .enter().append("path")
		 .attr("d", path)
		 .style ( "fill" , function (d) {
		 return color (pairRateWithId[d.id]);
		 })
		 .style("opacity", 0.8)
		 .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(pairNameWithId[d.id] + ": " + pairRateWithId[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': 0.8, 'stroke': 'white', 'stroke-width': 1});
		 div.transition().duration(300)
		 .style("opacity", 0);
		 })
		 
		 };
		 
		var legend = svg.selectAll("g.legend")
		 .data(ext_color_domain)
		 .enter().append("g")
		 .attr("class", "legend");
		 
		var ls_w = 73, ls_h = 20;
		 
		legend.append("rect")
		 .attr("x", function(d, i){ return width - (i*ls_w) - ls_w;})
		 .attr("y", 550)
		 .attr("width", ls_w)
		 .attr("height", ls_h)
		 .style("fill", function(d, i) { return color(d); })
		 .style("opacity", 0.8);
		 
		legend.append("text")
		 .attr("x", function(d, i){ return width - (i*ls_w) - ls_w;})
		 .attr("y", 590)
		 .text(function(d, i){ return legend_labels[i]; });

var legend_title = "Number of independent farms";

svg.append("text")
		 .attr("x", 10)
		 .attr("y", 540)
		 .attr("class", "legend_title")
		 .text(function(){return legend_title});

</script>

<p>Source: U.S. Census</p>		
</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