Skip to content

Instantly share code, notes, and snippets.

@alecrajeev
Last active August 29, 2015 14:23
Show Gist options
  • Save alecrajeev/0143693559cfd228dbd0 to your computer and use it in GitHub Desktop.
Save alecrajeev/0143693559cfd228dbd0 to your computer and use it in GitHub Desktop.
Job's Change
<!DOCTYPE html>
<meta charset="utf-8">
<title>Job's Numbers </title>
<style>
svg {
border: 1px solid #f0f;
}
rect:hover {
fill: #571A82;
}
.tick-minor {
display: none;
}
.tick-minor line{
shape-rendering: crispEdges;
}
.axis {
font: 12px sans-serif;
fill: #777
}
.axis path {
display: none;
}
.axis line {
stroke-width: 1px;
stroke: #ccc;
}
rect:first-of-type{
fill: grey;
}
</style>
<div class="current-value">Here</div>
<body>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
var margin = {top: 20, right: 10, bottom: 20, left: 10};
var width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var svg = d3.select("body").append("svg") // data join
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var xScale = d3.scale.ordinal()
.rangeRoundBands([width,0], .05,.1);
var yScale = d3.scale.linear()
.range([height,0])
var tickFormat = function(d) {
return d.split("-",2);
}
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.tickSize(-width)
.tickPadding(8)
d3.tsv("jobs.tsv", ready);
function ready(error, data) {
if (error)
throw (error);
data.forEach(function (d, i) { // type converts strings the numbers
d.jobs_change = +d.jobs_change;
var s = d.month_year.split("-",2);
d.date = new Date(+s[0],(+s[1])-1,1);
d.displayDate = (d.date.getMonth()+1) + "/" + d.date.getFullYear().toString();
});
data.sort(function(a,b) {return b.date - a.date; }); // corrects order, so left is the beginning (2008)
xScale.domain(data.map(function (d) {return d.displayDate; }));
yScale.domain(d3.extent(data, function(d) {return d.jobs_change; }));
var rect = svg.append("g").attr("class", "rect-container").selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("class", "jobs-change-bar")
.attr("width", xScale.rangeBand())
.attr("x", function (d) {return xScale(d.displayDate) + xScale.rangeBand()/2; })
.attr("height", function(d) {return Math.abs(yScale(d.jobs_change) - yScale(0)); })
.attr("y", function (d) {return yScale(Math.max(d.jobs_change,0)); })
.attr("fill", function (d) {
if (d.jobs_change > 0)
return "steelblue";
return "salmon"
});
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.tickSize(-height)
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (height) + ")")
.call(xAxis)
.selectAll("g")
.attr("class", function(d) { // post selection
if (d.charAt(0) == '1' && d.charAt(1) == '/') // can use ternary operator here
return "tick-major";
else
return "tick-minor";
})
.selectAll("text")
.text("moo");
// .classed("special", function(d) {return d.charAt(0) == '1';})
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (width) + ",0)")
.call(yAxis);
var last = data[data.length - 1];
d3.select("current-value").text(last.jobs_change);
// var circle = svg.selectAll("circle")
// .data(data)
// .enter()
// .append("circle")
// .attr("class", "circle")
// .attr("transform", function(d) {return "translate(" + xScale(d.displayDate) + "," + yScale(Math.max(d.jobs_change,0)) + ")"; })
// .attr("r", 5)
}
</script>
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