Jobs Growth Under Obama

<!DOCTYPE html>
<meta charset="utf-8">

// additional data sourced from
	// https://data.bls.gov/timeseries/CES0000000001?output_view=net_1mth

// okay to keep these global
	var marginCore = 20;
	var margin = {top: 60, right: marginCore, bottom: 20, left: marginCore};
	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 + ")");

d3.tsv("jobs.tsv", function(error, data) {
		if (error) throw error;

// data is an object, but now we need arrays
		data.forEach( function (d) {

d.jobs_change = +d.jobs_change;
			d.private_job_change = +d.private_job_change;
			d.private_job_change = +d.private_job_change;

var s = d.month_year.split("-");
			d.date = new Date(s[0], (+s[1]-1) );

});

// use map to strip out jobs_change
		var jobs = data.map( function (d) { return d.jobs_change; });
		var months = data.map( function (d) { return d.month_year; });
		// reduce, anyone?
		var totalJobsChange = jobs.reduce( function (a, b) {
			return a+b;
		});
		var totalJobsIncrease = jobs.reduce ( function (a, b) {
			return (b > 0) ? a+b : a;
		});

data.sort( function (a,b) { return a.date - b.date; });
		
		// console.log(data);
		// console.log(jobs);
		// console.log(months);

var jobsMin = d3.min(jobs);
		var jobsMax = d3.max(jobs);

// console.log(jobsMin, jobsMax);

var xScale = d3.scale.ordinal()
		    .rangeRoundBands([0, width], 0.333)
		    .domain(months);

var yScale = d3.scale.linear()
		    .range([height, 0])
		    .domain([jobsMin, jobsMax]);

var yAxis = d3.svg.axis()
    		.scale(yScale)
    		.tickSize(-width+35)
    		.tickPadding(6)
    		.orient("left");

// could use some pointers about abstracting out this function / variable access
    	// kFormat = function (number) {
    	// 	return (number > 0) ? "+" + d + "k" : d + "k";
    	// };
    	// var changeLabel;
    	// function kFormat(number) {
    	// 	return (number > 0) ? "+" + d + "k" : d + "k";
    	// };

// adding yAxis up so it draws below bars
    	svg.append("g")
			.attr("class", "axis")
			.call(yAxis)
			.attr("transform", "translate(18,0)")
			.selectAll("text")
			.text( function	(d) { 
				var changeLabel = d;
				return d = (changeLabel > 0) ? "+" + d + "k" : d + "k";
			});
			// .text( function	(d) { 
			// 	console.log(d);
			// 	var changeLabel = d;
			// 	return kFormat(changeLabel);
			// });

var xAxis = d3.svg.axis()
    		.scale(xScale)
    		.tickSize(0)
    		.tickPadding(6)
    		.orient("bottom");

svg.append("line")
	      .attr('x1', 17)
	      .attr("x2", width-17)
	      .attr("y1", yScale(0))
	      .attr("y2", yScale(0))
	      .style("stroke", "#333")
	      .style("stroke-width", 1);

svg.append("g")
			.attr("class", "xAxis")
			.call(xAxis)
			.attr("transform", "translate(0," + yScale(0) + ")")
			.selectAll("g")
			// yadda yadda yadda, use if then to add custom classes
			.attr("class", function (d) { return d })
			.selectAll("text")
			.text(function (d) { 
				var dateSplit = d.split("-");
				if ( dateSplit[1] === "01" ) {
					return dateSplit[0];
				};
 			});

function formatNumber (num) {
		    return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
		};

// labels
 		svg.append("text")
 			.attr("class", "label")
 			.attr("transform", "translate(-10,-25)")
 			.style("font-size", "13px")
 			.text(function() {
 				var tJS = "+" + formatNumber(totalJobsChange) + "k";
 				var tJI = "+" + formatNumber(totalJobsIncrease) + "k";
 				return "Overall Increase in Jobs: " + tJS + " | Total Jobs Added: " + tJI;
 			});

svg.append("text")
 			.attr("class", "label")
 			.attr("transform", "translate(-10,-40)")
 			.text("Monthly Change in U.S. Nonfarm Jobs for Extent of Obama Administration");

// streak label
 		// draw a line from october 2010 to last positive month
 		// then below and centered
 		// add a label that counts number of positive months

var mnth, stopStreakMonth;
 		var startStreakMonth = 21;
 		// there's probably a more elegant way to do this
		for (mnth = startStreakMonth; mnth < data.length; mnth++) {
			if (data[mnth].jobs_change < 0) {
				stopStreakMonth = mnth;
				mnth = data.length;
			} else {
				stopStreakMonth = data.length-1;
			};
		};

var firstStreakMonth = xScale(months[startStreakMonth]);
 		var lastStreakMonth = xScale(months[stopStreakMonth]);
 		var lengthOfStreak = stopStreakMonth - startStreakMonth;
 		var labelBelowZero = yScale(0)+25;

svg.append("g")
 			.attr("class", "streakLabel")
 			.attr("transform", "translate(" + xScale.rangeBand()/2 + ",0)")
 			.append("line")
 			.attr("class", "streakLine")
			.attr('x1', firstStreakMonth)
			.attr("x2", lastStreakMonth)
			.attr("y1", labelBelowZero)
			.attr("y2", labelBelowZero);

svg.select(".streakLabel")
			.append("text")
			.attr("x", (lastStreakMonth - firstStreakMonth)/2 + firstStreakMonth)
			.attr("y", labelBelowZero+20)
			.text(lengthOfStreak + " Months of Continued Jobs Growth");

});

</script>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js