xxxxxxxxxx<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>, “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 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