Skip to content

Instantly share code, notes, and snippets.

@emagee

emagee/index.html

Created October 31, 2015 15:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save emagee/1dfea665355a6c0e7101 to your computer and use it in GitHub Desktop.
Save emagee/1dfea665355a6c0e7101 to your computer and use it in GitHub Desktop.
Download ZIP
Dabble & Dawdle, module 1
Raw
index.html
<!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(http://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="http://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>
<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;
}
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>
Raw
salary_data-national-condensed.csv
State Annual_Establishments Annual_Average_Employment Total_Annual_Wages Annual_Average_Weekly_Wage Annual_Wages_per_Employee
U.S. TOTAL 9361354 136613609 7016975290001 988 51364
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