Dabble & Dawdle, module 1

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Marcia's Module 1 Bar Chart</title>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
		<link href='https://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
		<style type="text/css">
			
			body {
				margin: 0;
				background-color: lightGray;
				background-image: url(https://www.marciagray.net/images/green_cup.png);
				font-family: Helvetica, Arial, sans-serif;
			}
			
			header {
				width: 700px;
				margin-left: auto;
				margin-right: auto;
				margin-top: 20px;
				padding: 10px 50px 5px 50px;
			
			}
			
			#container {
				position: relative;
				width: 700px;
				height: auto;
				margin-left: auto;
				margin-right: auto;
				margin-top: 20px;
				padding: 20px 50px 10px 50px;
				background-color: white;
				opacity: 0.95;
				/* box-shadow: 3px 3px 5px 6px #ccc; */
				/* rounded corner assistance from cssround.com */
				-webkit-border-radius: 22px 20px 20px 20px;
				-moz-border-radius: 22px 20px 20px 20px;
				border-radius: 22px 20px 20px 20px;
				border:1px solid #000000;
				
				
			}
			
			#sideview {
				position: absolute;
				width: 225px;
				left: 525px;
				top: 475px;
				font-family: 'Copperplate Gothic Light', Copperplate,  fantasy;
				font-size: 22px;
				line-height: 32px;
				text-align: center;
				font-weight: normal;
				/*opacity: 0;*/
				letter-spacing: 1;
			}
			
			#sideview p.defaultText {
				font-family: 'Copperplate Gothic Light', Copperplate,  fantasy;
				color: black;
				font-size: 13px;
				line-height: 15px;
				margin: 15px 0 10px 0;
			}

h1 {
				font-family: 'Special Elite', cursive;
				font-size: 36px;
				margin: 0;
				color: white;
				opacity: 0.95;
				font-weight: normal;
			}

h2 {
				font-family: 'Copperplate Gothic Light', Copperplate,  fantasy;
				font-size: 24px;
				margin: 0;
			}

p {
				font-family: Palatino Linotype’, Palatino, Palladio, ‘URW Palladio L’, ‘Book Antiqua’, Baskerville, ‘Bookman Old Style’, ‘Bitstream Charter’, ‘Nimbus Roman No9 L’, Garamond, ‘Apple Garamond’, ‘ITC Garamond Narrow’, ‘New Century Schoolbook’, ‘Century Schoolbook’, ‘Century Schoolbook L’, Georgia, serif;
				font-size: 15px;
				line-height: 18px;
				margin: 15px 0 10px 0;
			}

a:link {
				text-decoration: none;
				color: #475140;
				font-weight: bold;
			}

a:hover {
				text-decoration: underline;
				color: #475140;
			}

a:visited {
				color:#475140;
			}

a:active {
				color: steelBlue;
			}

svg {
				background-color: white;
				cursor: pointer;
				margin-top: 0px;
			}

g.bar text {
				fill: white;
				font-size: 10px;
				font-weight: normal;
				text-anchor: end;
				opacity: 0;
				letter-spacing: 1;
			}

g.bar:hover rect {
				fill: #b051ba;
			}

g.bar:hover text {
				opacity: 1;
			}
			
			.axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}
			
			.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}
			
			.x path, .x line {
				stroke: lightgray;
				fill: none;
			}
			
			.x text {
				fill: gray;
			}

.y.axis path,
			.y.axis line {
				opacity: 0;
			}
			
			.y text {
				font-weight: bold;
			}

</style>
	</head>
	<body>

<header>
		<h1>Dabble & Dawdle, Partners in Data</h1>
		</header>
		
		<div id="container">

<h2>2014 Average Annual Wages, by US State</h2>

<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>
			
			<p>Why does the average annual wage in the District of Columbia outshine that of each individual state by such a large margin? Could it be that DC has the highest cost of living, or the highest concentration of certain high-powered professions, or the most generous employers? The amount of data included in this census is staggering &mdash; I'll leave it to the economists to figure all that out.
			</p>
			
			<div id="sideview">
				<p class="defaultText">Hover over a state's bar to see its average annual wage for 2014.</p>
			</div>

</div>

var w = 700;
			var h = 950;
			var padding = [ 20, 10, 30, 115 ];  //Top, right, bottom, left

var widthScale = d3.scale.linear()
								.range([ 0, w - padding[1] - padding[3] ]);
			
			var heightScale = d3.scale.ordinal()
								.rangeRoundBands([ padding[0], h - padding[2] ], 0.175);

var xAxis = d3.svg.axis()
							.scale(widthScale)
							.orient("bottom")
							.tickFormat( function(d) { return "$" + addCommas(d) } );

var yAxis = d3.svg.axis()
							.scale(heightScale)
							.orient("left");

//Now SVG goes into #container instead of body
			var svg = d3.select("#container")
						.append("svg")
						.attr("width", w)
						.attr("height", h);

d3.csv("salary_data-national-condensed.csv", function(data) {

data.sort(function(a, b) {
					return d3.descending(+a["Annual_Wages_per_Employee"], +b["Annual_Wages_per_Employee"]);
				});

widthScale.domain([ 0, d3.max(data, function(d) {
					return +d["Annual_Wages_per_Employee"];
				}) ]);

heightScale.domain(data.map(function(d) { return d.State; } ));

//Bind data to groups (not bars directly)
				var groups = svg.selectAll("g")
								.data(data)
								.enter()
								.append("g")
								.attr("class", "bar");

//Add a rect to each group
				var rects = groups.append("rect")
					.attr("x", padding[3])
					.attr("y", function(d) {
						return heightScale(d.State);
					})
					.attr("width", 0)
					.attr("height", heightScale.rangeBand())
					.attr("fill", function(d) {
								if(d.State=="U.S. TOTAL") {
									return "#475140" 
								} else {
									return "#77876B"}
							}
						);
					
				
				rects.on("mouseover", function(d) {
							
							if ((d.State) == "U.S. TOTAL") {
							
							d3.select("#sideview")
							.style("color", "#b051ba")
							.html("In <br /> the United States, <br />the average wage <br /> in 2014 was <br /> $" + addCommas(d["Annual_Wages_per_Employee"] + "."))
							}
							
							else
							{
							
							d3.select("#sideview")
							.style("color", "#b051ba")
							.html("In <br />" + d.State + ", <br /> the average wage <br /> in 2014 was <br /> $" + addCommas(d["Annual_Wages_per_Employee"] + "."))
							}
							
							}
						);

//Add a text element to each group
				groups.append("text")
					.attr("x", function(d) {
						return padding[3] + widthScale(d["Annual_Wages_per_Employee"]) -5;
					})
					.attr("y", function(d) {
						return heightScale(d.State) + 10;
					})
					.text(function(d) {
						return "$ " + addCommas(d["Annual_Wages_per_Employee"]);
					});

rects.transition()
					.delay(function(d, i) {
						return i * 7;
					})
					.duration(800)
					.attr("width", function(d) {
						return widthScale(+d["Annual_Wages_per_Employee"]);
					});

svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
					.call(xAxis);

svg.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + padding[3] + ",0)")
					.call(yAxis);
					
				
					
				// I could not find a good way to include a smooth mouseout transition!
				// Choosing the entire container did not work any better than
				// attaching mouseout to individual bar groups.
				/*d3.select("#container")
					.on("mouseout", function(d) {
						d3.select("#sideview")
							.style("color", "#b051ba")
							.html("Just testing for now.")}
							)
				*/

});

</script>

</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js