California Net Migration by County: 2013-2014

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Net Migration in California: 2013-2014</title>

#container {
				width: 800px;
				margin-left: 30px;
				margin-right: auto;
				margin-top: 30px;
				padding: 30px;
				background-color: white;
				box-shadow: 3px 3px 7px #222;
			}
			
			h1 {
				font-size: 24px;
				margin: 0;
			}

p {
				font-size: 16px;
				margin: 15px 0 10px 0;
			}

a {
			  color: #799DCB;
			  text-decoration: none;
			  transition: color .3s, background .3s, border .3s;
			}
			a:hover {
			  color: #48494b;
			  background: #e7e8e9;
			}

svg {
				background-color: white;
				padding-left: 20px;
			}
			
			path {
				fill: #799dcb;
				stroke-width: 1;
				stroke: #ddd;
/*				opacity: 0.7;
*/				}
			path:hover {
				fill:#48494b;
				cursor:pointer;
				stroke-width: 2;
				stroke: #bbb;
				opacity: 1;
			}

#tooltip {
				width: 150px;
				height: auto;
				padding: 5px;
				background-color: #fff;
				color: #000;
				-webkit-border-radius: 5px;
				-moz-border-radius: 5px;
				border-radius: 5px;
				-webkit-box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4);
				-moz-box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4);
				box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4);
				pointer-events: none;
				position: absolute;
				}
				
			#tooltip.hidden {
				display: none;
			}
			
			#tooltip p {
			margin: 0;
			font-size: 14px;
			line-height: 18px;
			}

</style>
	</head>
	<body>
    
    	<body>

<h1>Net Migration in California: 2013-2014</h1>
			<p>This map shows net migration from 2013 to 2014 for California counties based on tax return data (with the exception of Alpine County where the data is from 2012 to 2013). Number of exemptions claimed is a rough proxy for number of residents. The data is limited to people filing tax returns, so it doesn't reflect the entire population.<br><span style="font-size:12px">
Sources: The IRS, <a href= "https://www.governing.com/gov-data/census/county-migration-flows-tax-returns-data.html">governing.com</a>, <a href="https://www.census.gov/geo/maps-data/data/cbf/cbf_counties.html" target="new">U.S. Census Bureau</a></span></p>
        
             <div id="key" class="barlabel"><p>Counties shaded by number of net migrants.</p> </div>

</div>

<div id="tooltip" class="hidden">
            <p>County: <span id="county">County Name</span></p>
            <p>Net Migration: <span id="migration">Migration</span></p>
        </div>
		<script type="text/javascript">

//Width and height
			var w = 760;
			var h = 600;

//Define map projection
			var projection = d3.geo.mercator()
								   .center([ -120, 37 ])
								   .translate([ w/2, h/2 ])
								   .scale([ w*3.3 ]);
			//Colors by Cynthia Brewer (colorbrewer2.org)
//			var color = d3.scale.linear()
//								.range([ "#762a83", "#f7f7f7", "#1b7837" ]);

var color = d3.scale.quantize()
								.range(['#762a83','#9970ab','#c2a5cf','#e7d4e8','#f7f7f7','#d9f0d3','#a6dba0','#5aae61','#1b7837']);

//			var color = d3.scale.quantize()
//								.range([ "#762a83", "#af8dc3", "#e7d4e8", "#f7f7f7", "#d9f0d3" , "#7fbf7b" , "#1b7837" ]);

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

//Create SVG
			var svg = d3.select("#container")
						.append("svg")
						.attr("width", w)
						.attr("height", h);

d3.csv("ca_migration.csv", function(data) {

console.log(data);
				
				//color scale input domain 
				color.domain([
					-d3.max(data, function(d) { return +d.netMigration; }), 
					d3.max(data, function(d) { return +d.netMigration; })
				]);
			
				//Load in GeoJSON data
				d3.json("cb_2014_us_county_5m.json", function(json) {
					console.log(json);
					
					//Loop through once for each migration data value
					for (var i = 0; i < data.length; i++) {
				
						//Grab country name
						var dataCounty  = data[i].County;
						
						//Grab data value, and convert from string to float
						var dataValue = +data[i].netMigration;
				
						//Find the corresponding county inside the GeoJSON
						for (var j = 0; j < json.features.length; j++) {
						
							//We'll check the official ISO country code
							var jsonCounty = json.features[j].properties.NAME;
				
							if (dataCounty == jsonCounty) {
						
								//Copy the data value into the GeoJSON
								json.features[j].properties.migration = dataValue;
								
								//Stop looking through the JSON
								break;
								
							}
						}		
					}
					
					
					//Bind data and create one path per GeoJSON feature
					svg.selectAll("path")
						.data(json.features)
						.enter()
						.append("path")
						.attr("d", path)
						.style("fill", function(d){

var value = d.properties.migration;

if (value) {
								//If value exists…
								return color(value);
							} else {
								//If value is undefined…
								return "#ccc";
							}
							
							})
						.on("mouseover", function(d){
							var xPosition = w/2 + 150;
							var yPosition = h/2;
//							d3.select("path")
//							.attr("stroke-width", 2)
//							.attr("stroke", "#222");
							d3.select("#tooltip")
							.style("left", xPosition + "px")
							.style("top", yPosition + "px");
							d3.select("#county")
							.text(d.properties.NAME);
							d3.select("#migration")
							.text(d.properties.migration);
							d3.select("#tooltip")
							.classed("hidden", false);
							})
							.on("mouseout", function(){
							d3.select("#tooltip").classed("hidden", true);
							});
							
			// Create key bar
					//Define gradient
					var gradient = svg.append("svg:defs")
						.append("svg:linearGradient")
						.attr("id", "gradient")
						.attr("x1", "0%")
						.attr("y1", "0%")
						.attr("x2", "100%")
						.attr("y2", "0%")
						.attr("spreadMethod", "pad");
			
					//Define gradient colors
					gradient.append("svg:stop")
						.attr("offset", "0%")
						.attr("stop-color", "#762a83")
						.attr("stop-opacity", 1);
		
					gradient.append("svg:stop")
						.attr("offset", "50%")
						.attr("stop-color", "#f7f7f7")
						.attr("stop-opacity", 1);

gradient.append("svg:stop")
						.attr("offset", "100%")
						.attr("stop-color", "#1b7837")
						.attr("stop-opacity", 1);
					
					//key bar variables				
					var keybarW = 200,
						keybarH = 12,
						keybarPad = 10;					
					
					var keybar = d3.select("#key")
					.append("svg")
					.attr("width", keybarW * 1.8)
					.attr("height", keybarH * 1.5);
					
					keybar.append("rect")
					.attr("x", keybarPad * 3)
					.attr("y", 0)
					.attr("width", keybarW)
					.attr("height", keybarH)
					.attr("fill", "url(#gradient)");
		
					// Key bar text front
					keybar.append("text")
						.text("-54,000")
						.attr("x", keybarPad + 13)
						.attr("y", keybarPad)
						.attr("font-size", "11px")
						.attr("font-weight", "bold")
						.attr("text-anchor", "end")
						.style("fill", "black");
		
					// Key bar text back
					keybar.append("text")
						.text("+10,000")
						.attr("x", keybarW + keybarPad * 3 + 3)
						.attr("y", keybarPad)
						.attr("font-size", "11px")
						.attr("font-weight", "bold")
						.attr("text-anchor", "start")
						.style("fill", "black");

// Key bar text middle
					keybar.append("text")
						.text("zero")
						.attr("x", keybarW/2 + keybarPad * 3)
						.attr("y", keybarPad - 1)
						.attr("font-weight", "bold")
						.attr("font-size", "11px")
						.attr("text-anchor", "middle")
						.style("fill", "black");
			
				});
			});

</script>
        
	</body>
</html>

Modified http://use.typekit.com/brf5jpj.js to a secure url

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

https://use.typekit.com/brf5jpj.js

https://use.typekit.net/drk2sev.js