Created
November 20, 2015 22:06
-
-
Save emagee/9fcb9e67331c342b5cc7 to your computer and use it in GitHub Desktop.
Average Annual Wages by State
This file contains 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>Average annual wages per employee - by US state</title> | |
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
<link href='https://fonts.googleapis.com/css?family=Amaranth:400,700' rel='stylesheet' type='text/css'> | |
<link href='https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,latin-ext' rel='stylesheet' type='text/css'> | |
<style type="text/css"> | |
div.tooltip { | |
text-align: center; | |
width: auto; | |
pointer-events: none; | |
margin-top: 40px; | |
} | |
body { | |
background-color: ivory; | |
position: relative; | |
} | |
#container { | |
width: 900px; | |
position: relative; | |
margin-left: auto; | |
margin-right: auto; | |
} | |
svg { | |
width: 900px; | |
position: relative; | |
padding: 0; | |
margin-top: -60px; | |
margin-bottom: -50px; | |
} | |
h1 { | |
font-size: 1.5em; | |
color: #004080; | |
text-align: center; | |
font-family: 'Amaranth', sans-serif; | |
font-weight: normal; | |
margin-bottom: 15px; | |
} | |
p { | |
font-size: 0.8em; | |
padding: 0px 120px 0px 120px; | |
color: black; | |
text-align: center; | |
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; | |
font-weight: normal; | |
} | |
.tooltip p { | |
font-size: 0.95em; | |
color: #e6550d; | |
text-align: center; | |
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; | |
font-weight: normal; | |
} | |
span.dataValue { | |
font-weight: bold; | |
color: #004080; | |
} | |
a:link { | |
text-decoration: none; | |
color: #004080; | |
font-weight: bold; | |
} | |
a:hover { | |
text-decoration: underline; | |
color: #004080; | |
} | |
a:visited { | |
color:004080; | |
} | |
a:active { | |
color: steelBlue; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="container"> | |
<h1>2014 Average Annual Wages, by US State</h1> | |
<p>This chart uses data from the US Bureau of Labor Statistics's <a href="http://www.bls.gov/cew/">Quarterly Census of Employment and Wages</a>, “a quarterly count of employment and wages reported by employers covering 98 percent of US jobs, available at the county, Metropolitan Statistical Area (MSA), state and national levels by industry.”</p> | |
<div class="tooltip"><p>Hover over any state to see the annual average wage for that state.<p></div> | |
</div> | |
<script type="text/javascript"> | |
/* | |
The addCommas function is from http://www.mredkj.com/javascript/nfbasic.html. It's used to format the dollar amounts in the titles/tooltips. | |
*/ | |
function addCommas(nStr) { | |
nStr += ''; | |
x = nStr.split('.'); | |
x1 = x[0]; | |
x2 = x.length > 1 ? '.' + x[1] : ''; | |
var rgx = /(\d+)(\d{3})/; | |
while (rgx.test(x1)) { | |
x1 = x1.replace(rgx, '$1' + ',' + '$2'); | |
} | |
return x1 + x2; | |
} | |
//Data column used for mapping | |
var datapoint = "Annual_Wages_per_Employee"; | |
//Width and height | |
var w = 900; | |
var h = 500; | |
//Define map projection | |
var projection = d3.geo.albersUsa() | |
.translate([ w/2, h/2 ]) | |
.scale([ 900 ]); | |
//Define path generator | |
var path = d3.geo.path() | |
.projection(projection); | |
//Define threshold scale to sort data values into meaningful buckets of color | |
//Colors by Cynthia Brewer (colorbrewer2.org) | |
var color = d3.scale.threshold() | |
.domain([30000, 40000, 50000, 60000, 70000, 80000,90000]) | |
.range(["#feedde","#fdd0a2","#fdae6b","#fd8d3c","#f16913","#d94801","#8c2d04"]); | |
//Create SVG | |
var svg = d3.select("#container") | |
.insert("svg") | |
.attr("width", w) | |
.attr("height", h); | |
//Load in salary data | |
d3.csv("salary_data-national-condensed.csv", function(data) { | |
//console.log(+data[0][datapoint]); | |
//Set input domain for color scale | |
/*color.domain([ | |
d3.min(data, function(d) { return +d[datapoint]; }), | |
d3.max(data, function(d) { return +d[datapoint]; }) | |
]);*/ | |
//Load in GeoJSON data | |
d3.json("states.json", function(json) { | |
//Merge the salary data and GeoJSON into a single array | |
// | |
//Loop through once for each state data value | |
for (var i = 0; i < data.length; i++) { | |
//Grab state name | |
var dataStateName = data[i].State; | |
//Grab data value, and convert from string to float | |
var dataValue = +data[i][datapoint]; | |
//Find the corresponding country inside the GeoJSON | |
for (var j = 0; j < json.features.length; j++) { | |
//We'll check by state names | |
var jsonStateName = json.features[j].properties["STATE_NAME"]; | |
if (dataStateName == jsonStateName) { | |
//Copy the data value into the GeoJSON | |
json.features[j].properties["ANNUAL_WAGE"] = dataValue; | |
//Stop looking through the JSON | |
break; | |
} | |
} | |
} | |
//Bind data and create one path per GeoJSON feature | |
// Code borrowed from unsuspecting classmate . . . | |
var groups = svg.selectAll("g") | |
.data(json.features) | |
.enter() | |
.append("g") | |
.attr("class", "area"); | |
var paths = groups.append("path") | |
.attr("d", path) | |
.attr("stroke", "ivory") | |
.attr("stroke-width", "1") | |
.on("mouseover", function(d){ | |
d3.select(this) | |
.style("fill", "#004080"); | |
var value = d.properties["ANNUAL_WAGE"]; | |
var state = d.properties["STATE_NAME"]; | |
// Though the coordinates were coming through correctly, I could not use | |
// them to position tooltips, so I aborted that endeavor | |
// and used a stationary div instead. | |
/*var xPosition = d3.mouse(d3.select("svg").node())[0] + 5; | |
var yPosition = d3.mouse(d3.select("svg").node())[1] + 5; | |
console.log(xPosition, yPosition);*/ | |
d3.select(".tooltip") | |
.html("<p>In <span class='dataValue'>" + state + ", </span>the average wage in 2014 was <span class='dataValue'>$" + addCommas(value) + "</span>.</p>"); | |
}) | |
.on("mouseout", function(){ | |
d3.select(this).style("fill", function(d) { | |
//Get data value | |
var value = d.properties["ANNUAL_WAGE"]; | |
if (value) { | |
//If value exists… | |
return color(value); | |
} else { | |
//If value is undefined… | |
return "#ccc"; | |
}; | |
}); | |
d3.select("div.tooltip").html("<p>Hover over any state to see the annual average wage for that state.<p>"); | |
}) | |
.style("fill", function(d) { | |
//Get data value | |
var value = d.properties["ANNUAL_WAGE"]; | |
if (value) { | |
//If value exists… | |
return color(value); | |
} else { | |
//If value is undefined… | |
return "#ccc"; | |
} | |
}); | |
}); //End d3.json() | |
}); //End d3.csv() | |
d3.select("#container") | |
.insert("img") | |
.attr("src", "legendCheat-d4.svg"); | |
</script> | |
</body> | |
</html> |
This file contains 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
State | Annual_Establishments | Annual_Average_Employment | Total_Annual_Wages | Annual_Average_Weekly_Wage | Annual_Wages_per_Employee | |
---|---|---|---|---|---|---|
Alabama | 117452 | 1863561 | 80668352987 | 832 | 43287 | |
Alaska | 22088 | 330105 | 17633468733 | 1027 | 53418 | |
Arizona | 146954 | 2539253 | 119138234452 | 902 | 46919 | |
Arkansas | 86833 | 1157630 | 46275850668 | 769 | 39975 | |
California | 1372950 | 15809082 | 933404857793 | 1135 | 59042 | |
Colorado | 179397 | 2417735 | 127473603671 | 1014 | 52724 | |
Connecticut | 113925 | 1653573 | 105694291522 | 1229 | 63919 | |
Delaware | 29975 | 423598 | 22540466748 | 1023 | 53212 | |
District of Columbia | 36246 | 729349 | 62634039161 | 1651 | 85877 | |
Florida | 637262 | 7755371 | 347460505024 | 862 | 44803 | |
Georgia | 280833 | 4032488 | 194116221925 | 926 | 48138 | |
Hawaii | 38412 | 626146 | 28307980376 | 869 | 45210 | |
Idaho | 54669 | 646305 | 24548286537 | 730 | 37982 | |
Illinois | 413479 | 5762156 | 311766666166 | 1040 | 54106 | |
Indiana | 158333 | 2890758 | 123010512990 | 818 | 42553 | |
Iowa | 99418 | 1515822 | 64480480136 | 818 | 42538 | |
Kansas | 85306 | 1357090 | 57968996125 | 821 | 42716 | |
Kentucky | 121114 | 1807068 | 75789850050 | 807 | 41941 | |
Louisiana | 124300 | 1923745 | 87215044364 | 872 | 45336 | |
Maine | 49253 | 590377 | 23876157421 | 778 | 40442 | |
Maryland | 167210 | 2552623 | 141387861365 | 1065 | 55389 | |
Massachusetts | 231749 | 3360035 | 215387225022 | 1233 | 64103 | |
Michigan | 236461 | 4090009 | 198310706147 | 932 | 48487 | |
Minnesota | 164799 | 2730301 | 140889422423 | 992 | 51602 | |
Mississippi | 71280 | 1102603 | 40918312781 | 714 | 37111 | |
Missouri | 184766 | 2667996 | 118080711856 | 851 | 44258 | |
Montana | 43902 | 440198 | 17114080042 | 748 | 38878 | |
Nebraska | 70336 | 946110 | 38965264975 | 792 | 41185 | |
Nevada | 76209 | 1202475 | 53783064306 | 860 | 44727 | |
New Hampshire | 49877 | 626566 | 32058224157 | 984 | 51165 | |
New Jersey | 260037 | 3841854 | 232804629204 | 1165 | 60597 | |
New Mexico | 56201 | 798912 | 33494759043 | 806 | 41925 | |
New York | 619870 | 8846774 | 582826673281 | 1267 | 65880 | |
North Carolina | 259966 | 4057439 | 182476291382 | 865 | 44973 | |
North Dakota | 31587 | 444652 | 22612622757 | 978 | 50855 | |
Ohio | 288995 | 5183462 | 238441262372 | 885 | 46000 | |
Oklahoma | 107012 | 1582712 | 69280452781 | 842 | 43773 | |
Oregon | 134891 | 1725906 | 80304610422 | 895 | 46529 | |
Pennsylvania | 346303 | 5644443 | 285425202246 | 972 | 50567 | |
Rhode Island | 35770 | 463303 | 22839461189 | 948 | 49297 | |
South Carolina | 117766 | 1895420 | 77326946258 | 785 | 40797 | |
South Dakota | 31976 | 410929 | 15898806373 | 744 | 38690 | |
Tennessee | 145729 | 2750032 | 124306750659 | 869 | 45202 | |
Texas | 623544 | 11379184 | 605573335013 | 1023 | 53218 | |
Utah | 90150 | 1291859 | 55474674847 | 826 | 42942 | |
Vermont | 24400 | 304472 | 13099942909 | 827 | 43025 | |
Virginia | 240112 | 3654831 | 193445363445 | 1018 | 52929 | |
Washington | 242942 | 3043562 | 167444529426 | 1058 | 55016 | |
West Virginia | 49866 | 700846 | 28875807243 | 792 | 41201 | |
Wisconsin | 163938 | 2758496 | 120902369229 | 843 | 43829 | |
Wyoming | 25518 | 284394 | 13222059999 | 894 | 46492 | |
Puerto Rico | 46942 | 907001 | 24577122510 | 521 | 27097 | |
Virgin Islands | 3454 | 37966 | 1455809247 | 737 | 38345 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment