Created
November 1, 2015 23:52
-
-
Save kcsluis/248493f0bb9fce3e8588 to your computer and use it in GitHub Desktop.
Line Graph, Two Ways
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> | |
<head> | |
<meta charset="utf-8"> | |
<title></title> | |
<style type="text/css"> | |
body { | |
font-family: sans-serif; | |
font-size: 10px; | |
} | |
.axis path { | |
display: none; | |
} | |
.axis line { | |
stroke-width:1px; | |
stroke: #ccc; | |
stroke-dasharray: 2px 2px; | |
} | |
.line1 { | |
fill: none; | |
stroke: #bbb; | |
stroke-width: 8px; | |
} | |
.line2 { | |
fill: none; | |
stroke: #000; | |
} | |
</style> | |
</head> | |
<body> | |
</body> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script> | |
<script> | |
var margin = {top: 20, right: 20, bottom: 20, left: 40}; | |
var width = 960 - margin.left - margin.right, | |
height = 500 - margin.top - margin.bottom; | |
var svg = d3.select("body").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 + ")"); | |
// write a custom parser to address the format your dates are in | |
var parseDate = d3.time.format("%Y-%m").parse; | |
var xScale = d3.time.scale() | |
.range([0,width]); | |
var yScale = d3.scale.linear() | |
.range([height,0]); | |
var xAxis = d3.svg.axis() | |
.scale(xScale) | |
.orient("bottom"); | |
var yAxis = d3.svg.axis() | |
.scale(yScale) | |
.tickSize(-width) | |
.tickPadding(8) | |
.orient("left"); | |
var line = d3.svg.line() | |
.x(function(d) { return xScale(d.date); }) | |
.y(function(d) { return yScale(d.private_job_change); }); | |
d3.tsv("jobs.tsv", ready); | |
function ready(error, data) { | |
if (error) return console.warn(error); | |
data.forEach(function(d) { | |
d.jobs_change = +d.jobs_change; | |
d.private_job_change = +d.private_job_change; | |
d.unemployment_rate = +d.unemployment_rate; | |
d.date = parseDate(d.month_year); | |
}); | |
xScale.domain(d3.extent(data, function (d) { return d.date; })); | |
yScale.domain(d3.extent(data, function (d) { return d.private_job_change; })); | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + (height) + ")") | |
.call(xAxis); | |
svg.append("g") | |
.attr("class", "y axis") | |
.call(yAxis); | |
svg.append("path") | |
.attr("class", "line1") | |
.attr("d", line(data) ); | |
// "d" is the attribute that sets the path | |
// this doesn't preserve data join | |
svg.append("path") | |
.datum(data) | |
.attr("class", "line2") | |
.attr("d", line); | |
// just like data, but you're only doing one thing (datum) | |
// this one does preserve the data join | |
// NEITHER use enter. D3 is weird. | |
}; | |
</script> |
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
month_year | jobs_change | private_job_change | unemployment_rate | |
---|---|---|---|---|
2008-11 | -803 | -797 | 6.8 | |
2008-12 | -661 | -658 | 7.3 | |
2009-01 | -818 | -839 | 7.8 | |
2009-02 | -724 | -725 | 8.3 | |
2009-03 | -799 | -787 | 8.7 | |
2009-04 | -692 | -802 | 8.9 | |
2009-05 | -361 | -312 | 9.4 | |
2009-06 | -482 | -426 | 9.5 | |
2009-07 | -339 | -296 | 9.5 | |
2009-08 | -231 | -219 | 9.6 | |
2009-09 | -199 | -184 | 9.8 | |
2009-10 | -202 | -232 | 10 | |
2009-11 | -42 | -42 | 9.9 | |
2009-12 | -171 | -120 | 9.9 | |
2010-01 | -40 | -40 | 9.7 | |
2010-02 | -35 | -27 | 9.8 | |
2010-03 | 189 | 141 | 9.8 | |
2010-04 | 239 | 193 | 9.9 | |
2010-05 | 516 | 84 | 9.6 | |
2010-06 | -167 | 92 | 9.4 | |
2010-07 | -58 | 92 | 9.5 | |
2010-08 | -51 | 128 | 9.6 | |
2010-09 | -27 | 115 | 9.5 | |
2010-10 | 220 | 196 | 9.5 | |
2010-11 | 121 | 134 | 9.8 | |
2010-12 | 120 | 140 | 9.4 | |
2011-01 | 110 | 119 | 9.1 | |
2011-02 | 220 | 257 | 9 | |
2011-03 | 246 | 261 | 8.9 | |
2011-04 | 251 | 264 | 9 | |
2011-05 | 54 | 108 | 9 | |
2011-06 | 84 | 102 | 9.1 | |
2011-07 | 96 | 175 | 9.1 | |
2011-08 | 85 | 52 | 9.1 | |
2011-09 | 202 | 216 | 9 | |
2011-10 | 112 | 139 | 8.9 | |
2011-11 | 157 | 178 | 8.7 | |
2011-12 | 223 | 234 | 8.5 | |
2012-01 | 275 | 277 | 8.3 | |
2012-02 | 259 | 254 | 8.3 | |
2012-03 | 143 | 147 | 8.2 | |
2012-04 | 68 | 85 | 8.1 | |
2012-05 | 87 | 116 | 8.2 | |
2012-06 | 45 | 63 | 8.2 | |
2012-07 | 181 | 163 | 8.3 | |
2012-08 | 142 | 97 | 8.1 | |
2012-09 | 114 | 104 | 7.8 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment