alecrajeev/index.html

## index.html
<!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>

## jobs.tsv

          
            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
	<!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