Average Annual Wages by State

<!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="https://www.bls.gov/cew/">Quarterly Census of Employment and Wages</a>, &ldquo;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.&rdquo;</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 https://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>

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