Skip to content

Instantly share code, notes, and snippets.

@dougdowson

dougdowson/chart.js

Last active August 29, 2015 14:05
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 dougdowson/14223f50f045b8b55a72 to your computer and use it in GitHub Desktop.
Save dougdowson/14223f50f045b8b55a72 to your computer and use it in GitHub Desktop.
Download ZIP
Line Chart: Recent College Graduates
Raw
chart.js
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");
Raw
data.csv
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
Raw
index.html
<!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