Intermediate D3 - Module 4

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Module 3 - MD County Map</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
		<style type="text/css">
			body {
				font-family: Helvetica, Arial, sans-serif;
				background-color: #ffcc99;
			}
			#container1 {
				width: 1000px;
				margin-left: auto;
				margin-right: auto;
				margin-top: 20px;
				padding: 10px;
				background-color: white;
				box-shadow: 2px 3px 5px 6px #c07e3f;
			}
			h1 {
				color: #000099;
				border-bottom: solid 5px #000099;
				text-align: center;
				font-size: 18pt;
			}
			svg {
				background-color: #9ed1e1; /* Light blue for water */
			}
			g.counties path {
				stroke: #b3b3b3;
				stroke-width: 2px;
			}
			g.states path {
				stroke: #bfbfbf;
				stroke-width: 1px;
			}
			g.counties path:hover{
				fill: #00e673;
			}
		</style>
	</head>

<body>

<div id="container1">
			<h1>Motor Vehicle Date Rates by County for the State of Maryland</h1>

// Tunable variables:
			var svgw = 1000;
			var svgh = 530;
			var meas = { base: "MVMort_rate", cil: "MVMort_cil", cih: "MVMort_cih"};
			var landColor = "#d9d9d9";

//Define map projection
			var projection = d3.geo.conicEqualArea()
								   .parallels([38.25, 39.64])
								   .rotate([77, 0])
 								   .center([0, 39])
								   .translate([ 555, 220 ])
								   .scale([ 16000 ]);

//Define path generator
			var pathgen = d3.geo.path()
							 .projection(projection);

//Define quantize scale to classify the data for the map
			var colorRamp = d3.scale.quantize()
				// ColorBrewer YlOrRd:
				.range([ "#ffffb2", "#fecc5c", "#fd8d3c", "#f03b20", "#bd0026" ]);
				// ColorBrewer RdYlBu
				// .range([ "#2c7bb6", "#abd9e9", "#ffffbf", "#fdae61", "#d7191c" ]);

//Create SVG
			var svg1 = d3.select("#container1")
						.append("svg")
						.attr("width", svgw)
						.attr("height", svgh)
						;

//Load in GeoJSON data for neighboring states
			d3.json("cb_2014_us_state_5m_DE.DC.NJ.PA.VA.WV.json", function(jsonStates) {
				//Bind data and create one path per GeoJSON feature
				svg1.append("g").attr("class", "states").selectAll("path")
					.data(jsonStates.features)
					.enter()
					.append("path")
					.attr("d", pathgen)
					.attr("fill", landColor);
			});
        
			//Load in GeoJSON data for Maryland counties
			d3.json("cb_2014_us_county_5m_MD.json", function(jsonCounties) {

//Read in County Health Ranking data
				d3.csv("MD County Health Rankings - additional_measures.csv", function(data) {

//Set input domain for color scale
					colorRamp.domain([
						d3.min(data, function(d) { return +d[meas.base]; }), 
						d3.max(data, function(d) { return +d[meas.base]; })
					]);

//Join the County Health Ranking data to the GeoJSON array
					//Loop through once for each data value
					for (var i = 0; i < data.length; i++) {
						//Grab country FIPS
						var dataCoFIPS = data[i].CoFIPS;
						//Grab data value, and convert from string to float
						var dataBase = +data[i][meas.base];
						var dataCil  = +data[i][meas.cil];
						var dataCih  = +data[i][meas.cih];
						// console.log("Start looking for dataCoFIPS:", dataCoFIPS)
						//Find the corresponding country inside the GeoJSON
						for (var j = 0; j < jsonCounties.features.length; j++) {
							//Grap the county FIPS (in GEOID)
							var jsonCoFIPS = jsonCounties.features[j].properties.GEOID;
							// console.log("Checking jsonCoFIPS:", jsonCoFIPS)
							if (dataCoFIPS == jsonCoFIPS) {
								//Copy the data values into the GeoJSON
								jsonCounties.features[j].properties.base = dataBase;
								jsonCounties.features[j].properties.cil = dataCil;
								jsonCounties.features[j].properties.cih = dataCih;
								//Stop looking through the JSON
								break;
							}
						}
						if (dataCoFIPS != jsonCoFIPS) {
							console.log("End join data loop", dataCoFIPS, jsonCoFIPS)
						}
					}  // End of data join

//Bind data and create one path per GeoJSON feature
				svg1.append("g").attr("class", "counties").selectAll("path")
					.data(jsonCounties.features)
					.enter()
					.append("path")
					.attr("d", pathgen)
					.attr("fill", function(d) {
						//Get data value
						var value = d.properties.base;
							if (value) {
								//If value exists…
								return colorRamp(value);
							} else {
								//If value is undefined…
								return "#cccccc";
							}
						});

});  //End d3.csv()

});  //End d3.json()

</script>

<p style="font-size:12px">
			Sources: County Health Rankings and the U.S. Census Bureau
			<br>
			Projection: Albers equal area conic
		</p>

</div>
	</body>
</html>

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

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