forked from threestory's block: California Net Migration by County: 2013-2014
xxxxxxxxxx<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="https://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= "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