Built with blockbuilder.org
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
svg {
border:1px solid #f0f;
}
.axis line,
.axis path {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 2px;
}
.bars {
stroke: #000;
stroke-width: 4;
}
.good {
stroke: #00f;
}
.bad {
stroke: #f00;
}
</style>
</head>
<body>
<script>
// Feel free to change or delete any of the code you see!
var margin = {top: 20, right: 20, bottom: 30, left: 50},
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,
height: height + margin.top + margin.bottom
})
.append("g")
.attr("transform", "translate(" + [margin.left, margin.top] + ")");
var xscale = d3.time.scale()
.range([0, width]);
var yscale = d3.scale.linear()
.range([height, 0]);
var yscaleJobChange = d3.scale.linear()
.range([height, 0]);
var xaxis = d3.svg.axis()
.scale(xscale)
.orient("bottom")
.ticks(5)
.tickFormat(d3.time.format("%Y-%b"));
var yaxis = d3.svg.axis()
.scale(yscale)
.orient("right");
var yaxisJobChange = d3.svg.axis()
.scale(yscaleJobChange)
.orient("left");
d3.tsv("jobs.tsv", function(err, data) {
if (err) throw err;
// Convert string to numbers
data.forEach(function(d) {
d.jobs_change = +d.jobs_change;
d.date = new Date(d.month_year);
d.private_job_change = +d.private_job_change;
d.unemployment_rate = +d.unemployment_rate;
});
console.log(data);
xscale.domain(d3.extent(data, function(d) { return d.date; }));
yscale.domain([0, d3.max(data, function(d) { return d.unemployment_rate; })]);
yscaleJobChange.domain(d3.extent(data, function(d) { return d.jobs_change; }));
var line = d3.svg.line()
.x(function(d) { return xscale(d.date); })
.y(function(d) { return yscale(d.unemployment_rate);});
svg.selectAll("path.line")
.data([data])
.enter()
.append("path")
.attr("class", "line")
.attr("d", line);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(" + [0, height] + ")")
.call(xaxis);
svg.append("g")
.attr("class", "y axis")
.call(yaxisJobChange);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + [width, 0] + ")")
.call(yaxis);
svg.selectAll("circle.rate")
.data(data)
.enter()
.append("circle")
.attr({
"class": "rate",
"cx": function(d) { return xscale(d.date); },
"cy": function(d) { return yscale(d.unemployment_rate); },
"r": 2
});
svg.selectAll("line.bars")
.data(data)
.enter()
.append("line")
.attr({
"class": function(d) {
return yscaleJobChange(d.jobs_change) < yscaleJobChange(0) ? "bars good" : "bars bad";
},
"x1": function(d) { return xscale(d.date); },
"y1": yscaleJobChange(0),
"x2": function(d) { return xscale(d.date); },
"y2": function(d) { return yscaleJobChange(d.jobs_change)}
})
});
</script>
</body>
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