sampathweb/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

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

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