Last active
August 29, 2015 14:05
-
-
Save dougdowson/14223f50f045b8b55a72 to your computer and use it in GitHub Desktop.
Line Chart: Recent College Graduates
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
var margin = {top: 15, right: 38, bottom: 20, left: 12}, | |
width = 575 - margin.left - margin.right, | |
height = 460 - margin.top - margin.bottom; | |
var parseYear = d3.time.format("%Y").parse, | |
parseMonth = d3.time.format("%m-%Y").parse, | |
formatPercent = d3.format("%"), | |
formatPercentDetailed = d3.format(".1%"); | |
var x = d3.time.scale() | |
.range([0, width]); | |
var y = d3.scale.linear() | |
.range([height, 0]); | |
var xAxis = d3.svg.axis() | |
.scale(x) | |
.orient("bottom"); | |
var yAxis = d3.svg.axis() | |
.scale(y) | |
.orient("right") | |
.tickFormat(formatPercent) | |
.tickSize(width); | |
var line = d3.svg.line() | |
.x(function(d) { return x(d.date); }) | |
.y(function(d) { return y(d.lfpr_rate); }); | |
var svg = d3.select("#chart").append("svg") | |
.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom) | |
.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
svg.append("text") | |
.attr("class", "right label") | |
.text("Percent") | |
.attr("x", width-16) | |
.attr("y", 0); | |
var group; | |
var selectedVariable; | |
d3.csv("data.csv", function(error, data) { | |
data.forEach(function(d) { | |
d.date = parseYear(d.date); | |
d.lfpr_rate = +d.lfpr_rate; | |
d.unemp_rate = +d.unemp_rate; | |
d.emp_pop_ratio = +d.emp_pop_ratio; | |
}); | |
x.domain([parseYear("1994"),parseYear("2014")]); | |
y.domain([d3.min(data,function (d) { return 0.95*d.lfpr_rate}),d3.max(data,function (d) { return 1.05*d.lfpr_rate})]); | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + height + ")") | |
.call(xAxis); | |
svg.append("rect") | |
.attr("x", x(parseMonth("04-2001"))) | |
.attr("y", 0) | |
.attr("width", 19) | |
.attr("height", height-1) | |
.attr("fill", "#eee"); | |
svg.append("rect") | |
.attr("x", x(parseMonth("01-2008"))) | |
.attr("y", 0) | |
.attr("width", 43) | |
.attr("height", height-1) | |
.attr("fill", "#eee"); | |
svg.append("g") | |
.attr("class", "y axis") | |
.call(yAxis); | |
svg.append("path") | |
.datum(data) | |
.attr("class", "line") | |
.attr("d", line); | |
group = svg.selectAll(".group") | |
.data(data) | |
.enter().append("g") | |
.attr("class", "group"); | |
group.append("circle") | |
.attr("class", "circle") | |
.attr("transform", function(d) { return "translate(" + x(d.date) + "," + y(d.lfpr_rate) + ")"; } ) | |
.attr("r", 4); | |
d3.selectAll(".circle") | |
.on("mouseover", function(d) { | |
d3.select(".tooltip") | |
.style("display", "block") | |
.style("opacity", 1) | |
.html(formatPercentDetailed(d.lfpr_rate)) | |
.style("left", x(d.date)+18 + "px") | |
.style("top", y(d.lfpr_rate)-686 + "px"); | |
}) | |
.on("mouseout", function(d) { | |
d3.select(".tooltip") | |
.style("opacity", 0) | |
.style("display", "none"); | |
}); | |
d3.selectAll(".button").on("click", function(){ | |
selectedVariable = d3.select(this).attr("id"); | |
if (d3.select(this).classed("selected")) { | |
} else { | |
d3.selectAll(".button").classed("selected", false); | |
d3.select(this).classed("selected", true); | |
y = d3.scale.linear() | |
.range([height, 0]) | |
.domain([d3.min(data,function (d) { return 0.95*d[selectedVariable]}),d3.max(data,function (d) { return 1.05*d[selectedVariable]})]); | |
yAxis = d3.svg.axis() | |
.scale(y) | |
.orient("right") | |
.tickFormat(formatPercent) | |
.tickSize(width); | |
line = d3.svg.line() | |
.x(function(d) { return x(d.date); }) | |
.y(function(d) { return y(d[selectedVariable]); }); | |
d3.select(".y.axis") | |
.transition() | |
.duration(250) | |
.call(yAxis); | |
d3.select(".line") | |
.datum(data) | |
.transition() | |
.duration(250) | |
.attr("d", line); | |
d3.selectAll(".group") | |
.data(data); | |
d3.selectAll(".circle") | |
.transition() | |
.duration(250) | |
.attr("transform", function(d) { return "translate(" + x(d.date) + "," + y(d[selectedVariable]) + ")"; } ); | |
d3.selectAll(".circle") | |
.on("mouseover", function(d) { | |
d3.select(".tooltip") | |
.style("display", "block") | |
.style("opacity", 1) | |
.html(formatPercentDetailed(d[selectedVariable])) | |
.style("left", x(d.date)+18 + "px") | |
.style("top", y(d[selectedVariable])-686 + "px"); | |
}) | |
.on("mouseout", function(d) { | |
d3.select(".tooltip") | |
.style("opacity", 0) | |
.style("display", "none"); | |
}); | |
} | |
}); | |
}); | |
d3.select(self.frameElement).style("height", "585px"); |
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
date | emp_pop_ratio | unemp_rate | lfpr_rate | |
---|---|---|---|---|
1994 | 0.8081111 | 0.0838416 | 0.8820649 | |
1995 | 0.7821659 | 0.0867997 | 0.8565108 | |
1996 | 0.8073241 | 0.057078 | 0.8561939 | |
1997 | 0.8000984 | 0.0559891 | 0.8475521 | |
1998 | 0.847037 | 0.0492323 | 0.8908979 | |
1999 | 0.7894079 | 0.0884795 | 0.8660342 | |
2000 | 0.8119436 | 0.0726602 | 0.8755621 | |
2001 | 0.8104295 | 0.0567332 | 0.8591731 | |
2002 | 0.7857985 | 0.0976973 | 0.8708813 | |
2003 | 0.7455956 | 0.1013828 | 0.8297144 | |
2004 | 0.7909328 | 0.0850836 | 0.8644865 | |
2005 | 0.7810228 | 0.0782767 | 0.8473505 | |
2006 | 0.7883615 | 0.1058047 | 0.8816435 | |
2007 | 0.8027232 | 0.0770112 | 0.8696999 | |
2008 | 0.7810785 | 0.1164887 | 0.8840617 | |
2009 | 0.7194738 | 0.1550964 | 0.8515455 | |
2010 | 0.7226173 | 0.1322234 | 0.8327227 | |
2011 | 0.7429902 | 0.1256175 | 0.8497314 | |
2012 | 0.7334625 | 0.1331116 | 0.8460863 | |
2013 | 0.7363226 | 0.1115522 | 0.8287742 |
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> | |
<meta charset="utf-8"> | |
<html> | |
<head> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<style> | |
body, h1, h2, h3, p { | |
margin: 0px; | |
padding: 0px; | |
font-family: Arial, sans-serif; | |
font-size: 14px; | |
line-height: 1.5em; | |
color: #4a4a4a; | |
} | |
#content { | |
margin: 5px; | |
padding: 0px 0px 150px 0px; | |
width: 595px; | |
text-align: left; | |
} | |
#container { | |
padding: 15px; | |
border: 1px solid #ccc; | |
height: 510px; | |
clear: both; | |
} | |
#header h1 { | |
margin: 0px 0px 0px 10px; | |
padding: 4px 0px 0px 7px; | |
font-family: Georgia, "Times New Roman", serif; | |
font-size: 18px; | |
font-weight: normal; | |
color: #fff; | |
} | |
p { | |
margin: 5px 0px 0px 0px; | |
} | |
g.y.axis path.domain { | |
stroke-width: 0px; | |
} | |
g.x.axis path.domain, g.x.axis g.tick.major line, g.x.axis g.tick line { | |
stroke: #333; | |
stroke-width: 2px; | |
shape-rendering: crispEdges; | |
} | |
.axis path, .axis line { | |
fill: none; | |
shape-rendering: crispEdges; | |
border-width: 2px; | |
} | |
.axis line { | |
stroke: #eee; | |
stroke-width: 1; | |
shape-rendering: crispEdges; | |
} | |
.x.axis text, .y.axis text, #unit { | |
color: #4a4a4a; | |
font-size: 12px; | |
} | |
#buttons { | |
margin: 0px; | |
padding: 0px; | |
} | |
.button { | |
display: inline-block; | |
margin: 0px 2px 0px 0px; | |
padding: 4px 6px; | |
line-height: 20px; | |
background:#FF0000; | |
min-width: 60px; | |
border: 1px solid #E60000; | |
border-width: 1px; | |
border-radius: 3px; | |
text-align: center; | |
color: #fff; | |
font-family: Arial, sans-serif; | |
font-size: 12px; | |
font-weight: bold; | |
text-transform: uppercase; | |
} | |
.button:hover, .selected { | |
background:#CC0000; | |
color: #fff; | |
cursor: pointer; | |
border: 1px solid #B30000; | |
} | |
.line { | |
fill: none; | |
stroke: #00a1ce; | |
stroke-width: 3px; | |
} | |
.circle { | |
stroke: #00a1ce; | |
stroke-width: 3px; | |
fill: #fff; | |
} | |
#header { | |
margin: 0px; | |
padding: 0px; | |
height: 34px; | |
background: #747474; | |
} | |
#block { | |
float: left; | |
margin: 0px; | |
padding: 0px; | |
height: 100%; | |
width: 10px; | |
background: #ff0000; | |
} | |
.right.label { | |
font-size: 13px; | |
fill: #333; | |
} | |
#source { | |
margin: 0px 0px 20px 0px; | |
padding: 0px; | |
font-size: 11px; | |
} | |
p.tooltip { | |
position: relative; | |
margin: 0px; | |
padding: 0px 10px; | |
width: 40px; | |
height: 30px; | |
line-height: 30px; | |
color: #fff; | |
text-align: center; | |
background: #CC0000; | |
-webkit-border-radius: 5px; | |
-moz-border-radius: 5px; | |
border-radius: 5px; | |
border: 1px solid #B30000; | |
-moz-box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.25); | |
-webkit-box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.25); | |
box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.25); | |
opacity: 0; | |
display: none; | |
} | |
p.tooltip:before { | |
content: ' '; | |
position: absolute; | |
width: 0; | |
height: 0; | |
left: 16px; | |
top: 30px; | |
border: 6px solid; | |
border-color: #B30000 transparent transparent #B30000; | |
} | |
p.tooltip:after { | |
content: ' '; | |
position: absolute; | |
width: 0; | |
height: 0; | |
left: 17px; | |
top: 30px; | |
border: 5px solid; | |
border-color: #CC0000 transparent transparent #CC0000; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="content"> | |
<div id="header"> | |
<div id="block"></div> | |
<h1>Recent college graduates entering labour force at lowest rate in 20 years</h1> | |
</div> | |
<div id="container"> | |
<div id="buttons"> | |
<div class="button selected" id="lfpr_rate">Labor Force Participation Rate</div> | |
<div class="button" id="emp_pop_ratio">Emp-Pop Ratio</div> | |
<div class="button" id="unemp_rate">Unemployment Rate</div> | |
</div> | |
<div id="chart"></div> | |
<p id="source">Source: October Supplement to the Current Population Survey, US Bureau of Labour Statistics</p> | |
</div> | |
</div> | |
<p class="tooltip"></p> | |
<script type="text/javascript" src="chart.js"></script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment