Created
November 19, 2015 01:49
-
-
Save threestory/e422ee708dd432f99879 to your computer and use it in GitHub Desktop.
California Net Migration by County: 2013-2014
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| County | netMigration | Year | |
|---|---|---|---|
| Alameda | 873 | 2014 | |
| Alpine | 22 | 2013 | |
| Amador | 282 | 2014 | |
| Butte | 124 | 2014 | |
| Calaveras | 153 | 2014 | |
| Colusa | -105 | 2014 | |
| Contra Costa | 6877 | 2014 | |
| Del Norte | -49 | 2014 | |
| El Dorado | 1552 | 2014 | |
| Fresno | 101 | 2014 | |
| Glenn | -118 | 2014 | |
| Humboldt | 21 | 2014 | |
| Imperial | -89 | 2014 | |
| Inyo | -97 | 2014 | |
| Kern | -1188 | 2014 | |
| Kings | -448 | 2014 | |
| Lake | 480 | 2014 | |
| Lassen | -197 | 2014 | |
| Los Angeles | -53670 | 2014 | |
| Madera | -384 | 2014 | |
| Marin | 915 | 2014 | |
| Mariposa | 106 | 2014 | |
| Mendocino | 71 | 2014 | |
| Merced | -287 | 2014 | |
| Modoc | -41 | 2014 | |
| Mono | -2 | 2014 | |
| Monterey | -1976 | 2014 | |
| Napa | 200 | 2014 | |
| Nevada | -414 | 2014 | |
| Orange | -9771 | 2014 | |
| Placer | 2527 | 2014 | |
| Plumas | -79 | 2014 | |
| Riverside | 10422 | 2014 | |
| Sacramento | 2956 | 2014 | |
| San Benito | 399 | 2014 | |
| San Bernardino | -1394 | 2014 | |
| San Diego | -5404 | 2014 | |
| San Francisco | -5797 | 2014 | |
| San Joaquin | 3782 | 2014 | |
| San Luis Obispo | 1164 | 2014 | |
| San Mateo | -1996 | 2014 | |
| Santa Barbara | -389 | 2014 | |
| Santa Clara | -11614 | 2014 | |
| Santa Cruz | -378 | 2014 | |
| Shasta | 111 | 2014 | |
| Sierra | 24 | 2014 | |
| Siskiyou | 342 | 2014 | |
| Solano | 1404 | 2014 | |
| Sonoma | 2066 | 2014 | |
| Stanislaus | 1745 | 2014 | |
| Sutter | -165 | 2014 | |
| Tehama | 300 | 2014 | |
| Trinity | 30 | 2014 | |
| Tulare | -1713 | 2014 | |
| Tuolumne | 161 | 2014 | |
| Ventura | -1117 | 2014 | |
| Yolo | 568 | 2014 | |
| Yuba | -328 | 2014 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Net Migration in California: 2013-2014</title> | |
| <script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script> | |
| <script type="text/javascript" src="http://use.typekit.com/brf5jpj.js"></script> | |
| <script src="//use.typekit.net/drk2sev.js"></script> | |
| <script type="text/javascript">try{Typekit.load();}catch(e){}</script> | |
| <style type="text/css"> | |
| body { | |
| margin: 0; | |
| background-color: #48494B; | |
| font-family: "proxima-nova", "Source Sans Pro", sans-serif; | |
| } | |
| #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> | |
| <div id="container"> | |
| <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= "http://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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment