lorenzopub/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    forked from dougdowson's block: Line Chart: Prime-Age Workers

  
## chart.js
var margin = {top: 30, right: 25, bottom: 20, left: 23},
	width = 565 - margin.left - margin.right,
	height = 400 - margin.top - margin.bottom;

var parseDate = d3.time.format("%m-%d-%Y").parse,
	formatPercent = d3.format(".0"),
	formatPercentDetailed = d3.format(".1%"),
	numberFormat = d3.format(",.0f");

var x = d3.time.scale()
	.range([0, width]);

var y0 = d3.scale.linear()
	.range([height, 0]);

var y1 = d3.scale.linear()
	.range([height, 0]);

var xAxis = d3.svg.axis()
	.scale(x)
	.tickFormat(d3.time.format("%Y"))
	.ticks(5)
	.orient("bottom");

var yAxisRight = d3.svg.axis()
	.scale(y1)
	.orient("right")
	.tickFormat(formatPercent)
	.tickSize(width);

var yAxisLeft = d3.svg.axis()
	.scale(y0)
	.orient("left")
	.ticks(5)
	.tickFormat(formatPercent);

var empLine = d3.svg.line()
	.x(function(d) { return x(d.date); })
	.y(function(d) { return y1(d.employment); });

var unempLine = d3.svg.line()
	.x(function(d) { return x(d.date); })
	.y(function(d) { return y0(d.unemploymentrate); });

var svg = d3.select("#chart").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 + ")");

var areaUnder25 = d3.svg.area()
	.x(function(d) { return x(d.date); })
	.y0(height)
	.y1(function(d) { return y1(d.jobgainsunder25); });

var area2554 = d3.svg.area()
	.x(function(d) { return x(d.date); })
	.y0(function(d) { return y1(d.jobgainsunder25); })
	.y1(function(d) { return y1(d.jobgainsunder25+d.jobgains2554); });

var areaOver54 = d3.svg.area()
	.x(function(d) { return x(d.date); })
	.y0(function(d) { return y1(d.jobgainsunder25+d.jobgains2554); })
	.y1(function(d) { return y1(d.jobgainsunder25+d.jobgains2554+d.jobgainsover54)+1.5; });

var lineUnder25 = d3.svg.line()
	.x(function(d) { return x(d.date); })
	.y(function(d) { return y1(d.jobgainsunder25); });

var line2554 = d3.svg.line()
	.x(function(d) { return x(d.date); })
	.y(function(d) { return y1(d.jobgainsunder25+d.jobgains2554); });

var unempLineTwo = d3.svg.line()
	.x(function(d) { return x(d.date); })
	.y(function(d) { return y0(d.unemployment2554); });

var slideValue;

d3.csv("data.csv", function(error, data) {
	data.forEach(function(d) {
		d.date = parseDate(d.date);
		d.employment = +d.employment;
		d.unemploymentrate = +d.unemploymentrate;
		d.idnumber = +d.idnumber;
		d.jobgainsunder25 = +d.jobgainsunder25;
		d.jobgains2554 = +d.jobgains2554;
		d.jobgainsover54 = +d.jobgainsover54;
		d.jobgrowthunder25 = +d.jobgrowthunder25;
		d.jobgrowth2554 = +d.jobgrowth2554;
		d.jobgrowthover54 = +d.jobgrowthover54;
		d.unemployment2554 = +d.unemployment2554;
	});

	var filteredData = data.filter(function(d) { return d.idnumber > 201001; });

	x.domain([parseDate("1-1-2010"),parseDate("9-31-2014")]);
	y1.domain([0,d3.max(data,function (d) { return 1.05*d.jobgrowthover54})]);
	y0.domain([d3.min(data,function (d) { return 0.9*d.unemploymentrate}),d3.max(data,function (d) { return 1.1*d.unemploymentrate})]);

	svg.append("g")
		.attr("class", "right axis")
		.call(yAxisRight);

	svg.append("g")
		.attr("class", "left axis")
		.style("fill", "#772210")
		.call(yAxisLeft);

	svg.append("text")
		.attr("class", "left label")
		.text("Unemployment rate, %")
		.attr("x", -margin.left)
		.attr("y", 10)
		.style("opacity", 0);

	svg.append("text")
		.attr("class", "right label")
		.text("Employment growth by age, %")
		.attr("x", width-148)
		.attr("y", -15)
		.style("fill", "#333");

	d3.selectAll(".left.axis")
		.style("opacity", 0);

	var employmentPath = svg.append("path")
		.attr("class", "employment");

	var unemploymentPath = svg.append("path")
		.attr("class", "unemploymentrate");

	var growthUnder25 = d3.svg.line()
		.x(function(d) { return x(d.date); })
		.y(function(d) { return y1(d.jobgrowthunder25); });

	var growth2554 = d3.svg.line()
		.x(function(d) { return x(d.date); })
		.y(function(d) { return y1(d.jobgrowth2554); });

	var growthOver54 = d3.svg.line()
		.x(function(d) { return x(d.date); })
		.y(function(d) { return y1(d.jobgrowthover54); });

	svg.append("path")
		.attr("class", "growthlineUnder25")
		.datum(filteredData)
		.style("stroke", "#648d9e")
		.attr("d", growthUnder25);

	svg.append("path")
		.attr("class", "growthline2554")
		.datum(filteredData)
		.style("stroke", "#00485d")
		.attr("d", growth2554);

	svg.append("path")
		.attr("class", "jobgains")
		.datum(filteredData)
		.style("stroke", "#00a1ce")
		.attr("d", growthOver54);

	svg.append("g")
		.attr("class", "x axis")
		.attr("transform", "translate(0," + height + ")")
		.call(xAxis);

	var group = svg.selectAll(".group")
		.data(data)
		.enter().append("g")
		.attr("class", "group")
		.attr("id", function(d) { return "group" + [d.idnumber]; });

	group.append("circle")
		.attr("class", "circleUnder25")
		.attr("transform", function(d) { return "translate(" + x(d.date) + "," + y1(d.jobgrowthunder25) + ")"; } )
		.attr("r", 4)
		.style("opacity", 0)
		.attr("id", function(d) { return "circleUnder25" + [d.idnumber]; });

	group.append("circle")
		.attr("class", "circle2554")
		.attr("transform", function(d) { return "translate(" + x(d.date) + "," + y1(d.jobgrowth2554) + ")"; } )
		.attr("r", 4)
		.style("opacity", 0)
		.attr("id", function(d) { return "circle2554" + [d.idnumber]; });

	group.append("circle")
		.attr("class", "circleOver54")
		.attr("transform", function(d) { return "translate(" + x(d.date) + "," + y1(d.jobgrowthover54) + ")"; } )
		.attr("r", 4)
		.style("opacity", 0)
		.attr("id", function(d) { return "circleOver54" + [d.idnumber]; });

	d3.selectAll("#group201407 circle")
		.style("opacity", 1);

	svg.append("text")
		.text("Under 25")
		.attr("class", "areaLabel")
		.attr("id", "areaLabelUnder25")
		.attr("x", 455)
		.attr("y", 179)
		.style("fill", "#648d9e");

	svg.append("text")
		.text("25-54")
		.attr("class", "areaLabel")
		.attr("id", "areaLabel2554")
        .attr("x", 471)
		.attr("y", 310)
		.style("fill", "#00485d");

	svg.append("text")
		.text("Over 54")
		.attr("class", "areaLabel")
		.attr("id", "areaLabelOver54")
		.attr("x", 460)
		.attr("y", 5)
		.style("fill", "#00a1ce");

	d3.select("#next").on("click", function(){
		slideValue = d3.select("#next").attr("value");
		if (slideValue=="start") {
			employmentLine();
		} else if (slideValue=="one") {
			jobGains();
		} else if (slideValue=="two") {
			jobGrowthByAge();
		} else if (slideValue=="three") {
			fadeOut();
		} else if (slideValue=="four") {
			employmentLine();
		}
	});


	function animateLine() {
		var l = this.getTotalLength();
		i = d3.interpolateString("0," + l, l + "," + l);
		return function(t) { return i(t); };
	}

	function highlight(marker) {
		d3.select(marker)
			.style("opacity", 1)
			.transition()
			.duration(250)
			.attr("r", 6)
			.style("stroke-width",3.75)
			.transition()
			.duration(250)
			.attr("r", 4)
			.style("stroke-width",2.5);
	}

	function employmentLine() {

		setTimeout(function(){
		d3.select("#next").html("Next<span class='fa fa-caret-right'></span>");
		}, 500);

		d3.select("#next").on('click', null);

		setTimeout(function(){
		d3.select("#text")
			.style("padding-top", "25px");
		}, 500);

		d3.select("svg")
			.transition()
			.duration(500)
			.style("opacity", 1);

		d3.selectAll(".dot")
			.transition()
			.duration(250)
			.style("color", "#ccc");

		d3.select("#dotone")
			.transition()
			.duration(250)
			.style("color", "#747474");

		d3.selectAll(".group circle")
			.style("opacity", 0);

		d3.selectAll("#slides")
			.transition()
			.duration(500)
			.style("opacity", 0)
			.transition()
			.delay(500)
			.duration(500)
			.style("opacity", 1);

		d3.selectAll("#buttons")
			.transition()
			.delay(500)
			.style("opacity", 0)
			.style("display", "none");

		d3.selectAll(".slideintro")
			.transition()
			.delay(500)
			.style("opacity", 0)
			.style("display", "none");

		d3.selectAll(".slideseven")
			.transition()
			.delay(500)
			.style("opacity", 0)
			.style("display", "none");

		d3.selectAll(".slideone")
			.transition()
			.delay(500)
			.style("opacity", 1)
			.style("display", "block");

		d3.select(".growthlineUnder25")
			.transition()
			.duration(500)
			.style("opacity", 0);

		d3.select(".growthline2554")
			.transition()
			.duration(500)
			.style("opacity", 0);

		d3.select(".jobgains")
			.transition()
			.duration(500)
			.style("opacity", 0);

		d3.selectAll(".areaLabel")
			.transition()
			.duration(500)
			.style("opacity", 0)
			.remove();

		x = d3.time.scale()
			.range([0, width])
			.domain([parseDate("1-1-2008"),parseDate("12-31-2014")]);

		xAxis = d3.svg.axis()
			.scale(x)
			.tickFormat(d3.time.format("%Y"))
			.ticks(7)
			.orient("bottom");

		d3.select(".x.axis")
			.transition()
        	.delay(500)
			.duration(500)
			.ease("linear")
			.call(xAxis);

		y1 = d3.scale.linear()
			.range([height, 0])
			.domain([d3.min(data,function (d) { return 0.98*d.employment}),d3.max(data,function (d) { return 1.02*d.employment})]);

		yAxisRight = d3.svg.axis()
			.scale(y1)
			.orient("right")
			.tickSize(width);

		d3.select(".right.axis")
			.transition()
			.duration(500)
			.style("opacity", 0)
			.transition()
			.duration(50)
			.style("fill", "#00a1ce")
			.call(yAxisRight)
			.transition()
			.delay(550)
			.duration(500)
			.style("opacity", 1);

		d3.selectAll(".circleUnder25")
			.attr("class", "empcircle")
			.attr("transform", function(d) { return "translate(" + x(d.date) + "," + y1(d.employment) + ")"; } )
			.attr("r", 4)
			.attr("id", function(d) { return "empCircle" + [d.idnumber]; });

		d3.selectAll(".circle2554")
			.attr("class", "unempcircle")
			.attr("transform", function(d) { return "translate(" + x(d.date) + "," + y0(d.unemploymentrate) + ")"; } )
			.attr("r", 4)
			.attr("id", function(d) { return "unempCircle" + [d.idnumber]; });

		d3.select("#group201407").append("text")
			.attr("x", function(d) { return x(d.date) + 10; })
			.attr("y", function(d) { return y1(d.employment) + 4; })
			.attr("id", function(d) { return "empSlide" + [d.idnumber]; });

		d3.select("#group201407").append("text")
			.attr("x", function(d) { return x(d.date) + 10; })
			.attr("y", function(d) { return y0(d.unemploymentrate) + 4; })
			.attr("id", function(d) { return "unempSlide" + [d.idnumber]; });

		d3.select("#empSlide201407")
			.text(function(d) { return numberFormat([d.employment]); })
			.style("fill", "#00a1ce");

		d3.select("#unempSlide201407")
			.text(function(d) { return formatPercentDetailed([d.unemploymentrate]/100); })
			.style("fill", "#772210");

		d3.select(".right.label")
			.transition()
			.duration(500)
			.style("opacity", 0)
			.transition()
			.duration(50)
			.style("fill", "#00a1ce")
			.text("Total non-farm employment, m")
			.attr("x", width-145)
			.attr("y", 10)
			.transition()
			.delay(550)
			.duration(500)
			.style("opacity", 1);

		d3.select(".employment")
			.datum(data)
			.attr("d", empLine)
			.transition()
			.duration(2500)
			.ease("linear")
			.attrTween("stroke-dasharray", animateLine)
			.each("start", function() {
				d3.select(".employment")
					.style("opacity", 1);
			})
			.each("end", function() {
				marker = "#empCircle201407";
				highlight(marker);
				d3.select("#empSlide201407")
					.transition()
					.duration(500)
					.style("opacity", 1);

			setTimeout(unemploymentLine, 4000);
			});
		d3.timer.flush();
	}

	function unemploymentLine() {

		document.getElementById("next").setAttribute("value", "one");

		d3.select("#dottwo")
			.transition()
			.duration(250)
			.style("color", "#747474");

		d3.selectAll(".slidetwo")
			.transition()
			.delay(500)
			.style("opacity", 1)
			.style("display", "block");

		d3.select(".unemploymentrate")
			.datum(data)
			.attr("d", unempLine)
			.transition()
			.duration(2500)
			.ease("linear")
			.attrTween("stroke-dasharray", animateLine)
			.each("start", function() {
				d3.select(".unemploymentrate")
					.style("opacity", 1);
				d3.selectAll(".left.axis")
					.transition()
					.duration(750)
					.style("opacity", 1);
				d3.selectAll(".left.label")
					.transition()
					.duration(750)
					.style("opacity", 1)
			})
			.each("end", function() {
				marker = "#unempCircle201407";
				highlight(marker);
				d3.select("#unempSlide201407")
					.transition()
					.duration(500)
					.style("opacity", 1);

			});

		setTimeout(function(){
			d3.select("#next").on("click", function(){jobGains();});
			d3.selectAll("#buttons")
				.transition()
				.delay(1000)
				.duration(750)
				.style("opacity", 1)
				.style("display", "block");
		}, 4000);
	}


	function jobGains() {
		d3.select("#next").on('click', null);

		setTimeout(function(){
		d3.select("#text")
			.style("padding-top", "15px");
		}, 500);

		d3.select("#dotthree")
			.transition()
			.duration(250)
			.style("color", "#747474");

		d3.selectAll("#slides")
			.transition()
			.duration(500)
			.style("opacity", 0)
			.transition()
			.delay(1500)
			.duration(500)
			.style("opacity", 1);

		d3.selectAll("#buttons")
			.transition()
			.delay(500)
			.style("opacity", 0)
			.style("display", "none");

		d3.selectAll(".slideone")
			.transition()
			.delay(500)
			.style("opacity", 0)
			.style("display", "none");

		d3.selectAll(".slidetwo")
			.transition()
			.delay(500)
			.style("opacity", 0)
			.style("display", "none");

		d3.selectAll(".slidethree")
			.transition()
			.delay(2000)
			.style("opacity", 1)
			.style("display", "block");

		d3.select(".employment")
			.transition()
			.duration(750)
			.style("opacity", 0);

		d3.select(".right.label")
			.transition()
			.duration(500)
			.style("opacity", 0)
			.transition()
			.duration(0)
			.style("fill", "#333")
			.text("Employment gains, m")
			.attr("x", width-110)
			.attr("y", 0)
			.transition()
			.delay(1950)
			.duration(500)
			.style("opacity", 1);

		d3.select(".left.label")
			.transition()
			.duration(500)
			.style("opacity", 0);

		d3.select(".unemploymentrate")
			.transition()
        	.duration(500)
			.style("opacity", 0);

		d3.selectAll(".left.axis")
			.transition()
        	.duration(500)
			.style("opacity", 0);

		d3.selectAll(".group circle")
			.style("opacity", 0);

		d3.selectAll(".group text")
			.style("opacity", 0)
			.remove();

		d3.select(".jobgains")
			.style("opacity", 1)
			.datum(filteredData)
			.attr("d", empLine);

		x = d3.time.scale()
			.range([0, width])
			.domain([parseDate("1-1-2010"),parseDate("7-1-2014")]);

		xAxis = d3.svg.axis()
			.scale(x)
			.tickFormat(d3.time.format("%Y"))
			.ticks(5)
			.orient("bottom");

		d3.select(".x.axis")
			.transition()
        	.delay(500)
			.duration(1500)
			.ease("linear")
			.call(xAxis);

		y1 = d3.scale.linear()
			.range([height, 0])
			.domain([0,d3.max(filteredData,function (d) { return 1.05*d.jobgains})]);

		yAxisRight = d3.svg.axis()
			.scale(y1)
			.orient("right")
			.tickSize(width);

		d3.select(".right.axis")
			.transition()
			.duration(500)
			.style("opacity", 0)
			.style("fill", "#333")
			.transition()
			.delay(1500)
			.call(yAxisRight)
			.transition()
			.duration(500)
			.style("opacity", 1);

		var jobgains = d3.svg.line()
			.x(function(d) { return x(d.date); })
			.y(function(d) { return y1(d.jobgains); });

		d3.select(".jobgains")
			.transition()
        	.delay(500)
        	.duration(1500)
        	.ease("linear")
			.attr("d", jobgains);

		setTimeout(jobGainsByAge, 6000);
	}


	function jobGainsByAge() {

		document.getElementById("next").setAttribute("value", "two");

		var delay = 5500;

		d3.select("#dotfour")
			.transition()
			.delay(delay)
			.duration(250)
			.style("color", "#747474");

		d3.select("#dotfive")
			.transition()
			.delay(2*delay)
			.duration(250)
			.style("color", "#747474");

		d3.select("#dotsix")
			.transition()
			.delay(3*delay)
			.duration(250)
			.style("color", "#747474");

		d3.selectAll("#slides")
			.transition()
			.delay(delay)
			.duration(500)
			.style("opacity", 0)
			.transition()
			.delay(delay)
			.duration(500)
			.style("opacity", 1);

		d3.selectAll(".slidefourone")
			.transition()
			.delay(delay)
			.duration(500)
			.style("opacity", 1)
			.style("display", "block");

		d3.selectAll(".slidefourtwo")
			.transition()
			.delay(2*delay)
			.duration(500)
			.style("opacity", 1)
			.style("display", "block");

		d3.selectAll(".slidefourthree")
			.transition()
			.delay(3*delay)
			.duration(500)
			.style("opacity", 1)
			.style("display", "block");

		svg.append("path")
			.style("opacity", 0)
			.datum(filteredData)
			.attr("class", "areaUnder25")
			.attr("d", areaUnder25)
			.transition()
        	.delay(500)
        	.duration(1000)
			.style("opacity", 1)
			.transition()
        	.delay(2*delay)
        	.duration(500)
			.style("opacity", 0.5)
			.transition()
        	.delay(4*delay)
        	.duration(500)
			.style("opacity", 1);

		svg.append("path")
			.style("opacity", 0)
			.datum(filteredData)
			.attr("class", "area2554")
			.attr("d", area2554)
			.transition()
        	.delay(500)
        	.duration(1000)
			.style("opacity", 1)
			.transition()
        	.delay(delay)
        	.duration(500)
			.style("opacity", 0.5)
			.transition()
        	.delay(2*delay)
        	.duration(500)
			.style("opacity", 1)
			.transition()
        	.delay(3*delay)
        	.duration(500)
			.style("opacity", 0.5)
			.transition()
        	.delay(4*delay)
        	.duration(500)
			.style("opacity", 1);

		svg.append("path")
			.style("opacity", 0)
			.datum(filteredData)
			.attr("class", "areaOver54")
			.attr("d", areaOver54)
			.transition()
        	.delay(500)
        	.duration(1000)
			.style("opacity", 1)
			.transition()
        	.delay(delay)
        	.duration(500)
			.style("opacity", 0.5)
			.transition()
        	.delay(3*delay)
        	.duration(500)
			.style("opacity", 1);

		svg.append("path")
			.style("opacity", 0)
			.attr("class", "stackedlineUnder25")
			.datum(filteredData)
			.attr("d", lineUnder25)
			.transition()
        	.delay(500)
        	.duration(1000)
			.style("opacity", 1);

		svg.append("path")
			.style("opacity", 0)
			.attr("class", "stackedline2554")
			.datum(filteredData)
			.attr("d", line2554)
			.transition()
        	.delay(500)
        	.duration(1000)
			.style("opacity", 1);

		d3.select(".jobgains")
			.transition()
        	.delay(500)
        	.duration(1000)
			.style("stroke", "#151515");

		svg.append("text").text("Under 25")
			.style("opacity", 0)
			.attr("class", "areaLabel")
			.attr("id", "areaLabelUnder25")
			.attr("x", 440)
			.attr("y", 333)
			.transition()
        	.delay(delay)
        	.duration(1000)
			.style("opacity", 1);

		svg.append("text").text("25-54")
			.style("opacity", 0)
			.attr("class", "areaLabel")
			.attr("id", "areaLabel2554")
			.attr("x", 465)
			.attr("y", 264)
			.transition()
        	.delay(2*delay)
        	.duration(1000)
			.style("opacity", 1);

		svg.append("text").text("Over 54")
			.style("opacity", 0)
			.attr("class", "areaLabel")
			.attr("id", "areaLabelOver54")
			.attr("x", 448)
			.attr("y", 140)
			.transition()
        	.delay(3*delay)
        	.duration(1000)
			.style("opacity", 1);

		d3.select(".growthlineUnder25")
			.datum(filteredData)
			.attr("d", lineUnder25)
			.transition()
        	.delay(4*delay)
			.style("opacity", 1);

		d3.select(".growthline2554")
			.datum(filteredData)
			.attr("d", line2554)
			.transition()
        	.delay(4*delay)
			.style("opacity", 1);

		setTimeout(function(){
			d3.select("#next").on("click", function(){jobGrowthByAge();});
			d3.selectAll("#buttons")
				.transition()
				.delay(1000)
				.duration(750)
				.style("opacity", 1)
				.style("display", "block");
		}, 4*delay+750);

	}


	function jobGrowthByAge() {
		d3.select("#next").on('click', null);

		setTimeout(function(){
		d3.select("#text")
			.style("padding-top", "0px");
		}, 500);

		document.getElementById("next").setAttribute("value", "three");

		d3.select("#dotseven")
			.transition()
			.duration(250)
			.style("color", "#747474");

		d3.select("#doteight")
			.transition()
			.delay(10000)
			.duration(250)
			.style("color", "#747474");

		d3.selectAll("#slides")
			.transition()
			.duration(500)
			.style("opacity", 0)
			.transition()
			.delay(2000)
			.duration(500)
			.style("opacity", 1);

		d3.selectAll("#buttons")
			.transition()
			.delay(500)
			.style("opacity", 0)
			.style("display", "none");

		d3.selectAll(".slidethree")
			.transition()
			.delay(500)
			.style("opacity", 0)
			.style("display", "none");

		d3.selectAll(".slidefourone")
			.transition()
			.delay(500)
			.style("opacity", 0)
			.style("display", "none");

		d3.selectAll(".slidefourtwo")
			.transition()
			.delay(500)
			.style("opacity", 0)
			.style("display", "none");

		d3.selectAll(".slidefourthree")
			.transition()
			.delay(500)
			.style("opacity", 0)
			.style("display", "none");

		d3.selectAll(".slidefive")
			.transition()
			.delay(2000)
			.style("opacity", 1)
			.style("display", "block");

		d3.selectAll(".slidesix")
			.transition()
			.delay(10000)
        	.duration(500)
			.style("opacity", 1)
			.style("display", "block");

		d3.select(".stackedlineUnder25")
			.remove();

		d3.select(".stackedline2554")
			.remove();

		d3.select(".areaUnder25")
			.transition()
        	.duration(500)
			.style("opacity", 0)
			.remove();

		d3.select(".area2554")
			.transition()
        	.duration(500)
			.style("opacity", 0)
			.remove();

		d3.select(".areaOver54")
			.transition()
        	.duration(500)
			.style("opacity", 0)
			.remove();

		d3.select(".right.label")
			.transition()
        	.duration(500)
			.style("opacity", 0)
			.transition()
			.duration(0)
			.text("Employment growth by age, %")
			.attr("x", width-148)
			.attr("y", -15)
			.transition()
        	.delay(2000)
        	.duration(500)
			.style("opacity", 1);

		d3.select("#areaLabelUnder25")
			.style("opacity", 0)
			.attr("x", 455)
			.attr("y", 179)
			.style("fill", "#648d9e")
			.text("Under 25")
			.transition()
        	.delay(2000)
        	.duration(500)
			.style("opacity", 1);

		d3.select("#areaLabel2554")
			.style("opacity", 0)
        	.attr("x", 471)
			.attr("y", 310)
			.style("fill", "#00485d")
			.text("25-54")
			.transition()
        	.delay(2000)
        	.duration(500)
			.style("opacity", 1);

		d3.select("#areaLabelOver54")
			.style("opacity", 0)
			.attr("x", 460)
			.attr("y", 5)
			.style("fill", "#00a1ce")
			.text("Over 54")
			.transition()
        	.delay(2000)
        	.duration(500)
			.style("opacity", 1);

		x = d3.time.scale()
			.range([0, width])
			.domain([parseDate("1-1-2010"),parseDate("9-31-2014")]);

		xAxis = d3.svg.axis()
			.scale(x)
			.tickFormat(d3.time.format("%Y"))
			.ticks(5)
			.orient("bottom");

		y1 = d3.scale.linear()
			.range([height, 0])
			.domain([0,d3.max(data,function (d) { return 1.05*d.jobgrowthover54})]);

		yAxisRight = d3.svg.axis()
			.scale(y1)
			.orient("right")
			.tickFormat(formatPercent)
			.tickSize(width);

		d3.select(".right.axis")
			.transition()
			.duration(500)
			.style("opacity", 0)
			.style("fill", "#333")
			.transition()
			.duration(1500)
			.call(yAxisRight)
			.transition()
			.duration(500)
			.style("opacity", 1);

		var growthUnder25 = d3.svg.line()
			.x(function(d) { return x(d.date); })
			.y(function(d) { return y1(d.jobgrowthunder25); });

		var growth2554 = d3.svg.line()
			.x(function(d) { return x(d.date); })
			.y(function(d) { return y1(d.jobgrowth2554); });

		var growthOver54 = d3.svg.line()
			.x(function(d) { return x(d.date); })
			.y(function(d) { return y1(d.jobgrowthover54); });

		d3.select(".growthlineUnder25")
			.datum(filteredData)
			.transition()
        	.duration(2000)
        	.ease("linear")
			.style("stroke", "#648d9e")
			.attr("d", growthUnder25);

		d3.select(".growthline2554")
			.transition()
        	.duration(2000)
        	.ease("linear")
			.style("stroke", "#00485d")
			.attr("d", growth2554);

		d3.select(".jobgains")
			.transition()
        	.duration(2000)
        	.ease("linear")
			.style("stroke", "#00a1ce")
			.attr("d", growthOver54);

		d3.select(".x.axis")
			.transition()
        	.delay(500)
			.duration(1500)
			.ease("linear")
			.call(xAxis);

		d3.selectAll(".empcircle")
			.attr("class", "circleUnder25")
			.attr("transform", function(d) { return "translate(" + x(d.date) + "," + y1(d.jobgrowthunder25) + ")"; } )
			.attr("r", 4)
			.style("opacity", 0)
			.attr("id", function(d) { return "circleUnder25" + [d.idnumber]; });

		d3.selectAll(".unempcircle")
			.attr("class", "circle2554")
			.attr("transform", function(d) { return "translate(" + x(d.date) + "," + y1(d.jobgrowth2554) + ")"; } )
			.attr("r", 4)
			.style("opacity", 0)
			.attr("id", function(d) { return "circle2554" + [d.idnumber]; });

		d3.selectAll(".circleOver54")
			.attr("transform", function(d) { return "translate(" + x(d.date) + "," + y1(d.jobgrowthover54) + ")"; } )
			.attr("r", 4)
			.style("opacity", 0)
			.attr("id", function(d) { return "circleOver54" + [d.idnumber]; });

		d3.selectAll("#group201407 circle")
			.transition()
        	.delay(2000)
        	.duration(500)
			.style("opacity", 1);

		setTimeout(function(){
			d3.select("#next").on("click", function(){fadeOut();});
			d3.selectAll("#buttons")
				.transition()
				.delay(1000)
				.duration(750)
				.style("opacity", 1)
				.style("display", "block");
		}, 17000);

	}

	function fadeOut() {

		d3.select("#next").on('click', null);

		setTimeout(function(){
		d3.select("#text")
			.style("padding-top", "0px");
		}, 500);

		document.getElementById("next").setAttribute("value", "four");

		d3.select("svg")
			.transition()
			.duration(500)
			.style("opacity", 0.5);

		d3.select("#dotnine")
			.transition()
			.duration(250)
			.style("color", "#747474");

		d3.selectAll("#slides")
			.transition()
			.duration(500)
			.style("opacity", 0)
			.transition()
			.delay(500)
			.duration(500)
			.style("opacity", 1);

		d3.selectAll("#buttons")
			.transition()
			.delay(500)
			.style("opacity", 0)
			.style("display", "none");

		d3.selectAll(".slidefive")
			.transition()
			.delay(500)
			.style("opacity", 0)
			.style("display", "none");

		d3.selectAll(".slidesix")
			.transition()
			.delay(500)
			.style("opacity", 0)
			.style("display", "none");

		d3.selectAll(".slideseven")
			.transition()
			.delay(500)
        	.duration(500)
			.style("opacity", 1)
			.style("display", "block");

		d3.select(".slideseven")
			.transition()
			.delay(500)
        	.duration(500)
			.style("font-weight", "bold")
			.style("opacity", 1)
			.style("display", "block");

		setTimeout(function(){
			d3.select("#next").on("click", function(){employmentLine();});
			d3.select("#next").html("Again<span class='fa fa-repeat'></span>");
			d3.selectAll("#buttons")
				.transition()
				.delay(1000)
				.duration(750)
				.style("opacity", 1)
				.style("display", "block");
		}, 4000);


	}

});

d3.select(self.frameElement).style("height", "615px");

## data.csv

          
            date
            employment
            unemploymentrate
            month
            day
            year
            idnumber
            jobgains
            jobgainsunder25
            jobgains2554
            jobgainsover54
            jobgrowthunder25
            jobgrowth2554
            jobgrowthover54

            
              1-1-2008
              138.365
              4.988219105
              1
              1
              2008
              200801

            
              2-1-2008
              138.279
              4.879175805
              2
              1
              2008
              200802

            
              3-1-2008
              138.199
              5.082256933
              3
              1
              2008
              200803

            
              4-1-2008
              137.985
              4.96654072
              4
              1
              2008
              200804

            
              5-1-2008
              137.803
              5.440594156
              5
              1
              2008
              200805

            
              6-1-2008
              137.631
              5.556923635
              6
              1
              2008
              200806

            
              7-1-2008
              137.421
              5.78562689
              7
              1
              2008
              200807

            
              8-1-2008
              137.162
              6.103167983
              8
              1
              2008
              200808

            
              9-1-2008
              136.71
              6.142200945
              9
              1
              2008
              200809

            
              10-1-2008
              136.236
              6.504558485
              10
              1
              2008
              200810

            
              11-1-2008
              135.471
              6.814625124
              11
              1
              2008
              200811

            
              12-1-2008
              134.774
              7.297533219
              12
              1
              2008
              200812

            
              1-1-2009
              133.976
              7.819207574
              1
              1
              2009
              200901

            
              2-1-2009
              133.275
              8.346167286
              2
              1
              2009
              200902

            
              3-1-2009
              132.449
              8.710658976
              3
              1
              2009
              200903

            
              4-1-2009
              131.765
              8.965820761
              4
              1
              2009
              200904

            
              5-1-2009
              131.411
              9.369486969
              5
              1
              2009
              200905

            
              6-1-2009
              130.944
              9.505804183
              6
              1
              2009
              200906

            
              7-1-2009
              130.617
              9.450363102
              7
              1
              2009
              200907

            
              8-1-2009
              130.401
              9.600404391
              8
              1
              2009
              200908

            
              9-1-2009
              130.174
              9.757064755
              9
              1
              2009
              200909

            
              10-1-2009
              129.976
              9.982833065
              10
              1
              2009
              200910

            
              11-1-2009
              129.97
              9.890302707
              11
              1
              2009
              200911

            
              12-1-2009
              129.687
              9.860819928
              12
              1
              2009
              200912

            
              1-1-2010
              129.705
              9.747464212
              1
              1
              2010
              201001

            
              2-1-2010
              129.655
              9.836716107
              2
              1
              2010
              201002
              0
              0
              0
              0
              0
              0
              0

            
              3-1-2010
              129.811
              9.880231742
              3
              1
              2010
              201003
              0.156
              0.004756231
              -0.035738756
              0.186982525
              0.070480442
              0
              0.768250501

            
              4-1-2010
              130.062
              9.915158883
              4
              1
              2010
              201004
              0.407
              0.008265852
              0.142752768
              0.25598138
              0.270175026
              0.380749801
              1.21609321

            
              5-1-2010
              130.578
              9.641478213
              5
              1
              2010
              201005
              0.923
              0.230701667
              0.225849713
              0.46644862
              1.26864795
              0.07976602
              1.634807937

            
              6-1-2010
              130.456
              9.427133847
              6
              1
              2010
              201006
              0.801
              -0.018282186
              0.294421931
              0.524860255
              -0.234934806
              0.213772933
              1.918805753

            
              7-1-2010
              130.395
              9.451160007
              7
              1
              2010
              201007
              0.74
              0.040133499
              0.102549222
              0.597317279
              0.158580994
              0.023398032
              2.228290552

            
              8-1-2010
              130.353
              9.514105668
              8
              1
              2010
              201008
              0.698
              0.257859452
              -0.095164932
              0.535305481
              1.756137672
              0.02765222
              2.221008556

            
              9-1-2010
              130.296
              9.468016704
              9
              1
              2010
              201009
              0.641
              0.046651517
              -0.054698247
              0.64904673
              0.40526254
              0.049986706
              2.639723284

            
              10-1-2010
              130.537
              9.451217528
              10
              1
              2010
              201010
              0.882
              0.069352366
              0.296931504
              0.515716129
              0.187947844
              0.090401489
              1.754960859

            
              11-1-2010
              130.674
              9.795168919
              11
              1
              2010
              201011
              1.019
              0.173623909
              0.172568177
              0.672807914
              0.681310936
              -0.208455198
              2.202803568

            
              12-1-2010
              130.745
              9.35504657
              12
              1
              2010
              201012
              1.09
              0.033513857
              0.236716157
              0.819769985
              -0.01174674
              0.046796065
              2.960131076

            
              1-1-2011
              130.815
              9.079812268
              1
              1
              2011
              201101
              1.16
              0.291017058
              0.043630135
              0.825352807
              1.438975684
              -0.330763095
              2.818132168

            
              2-1-2011
              130.983
              9.040970772
              2
              1
              2011
              201102
              1.328
              0.266999953
              0.045216668
              1.015783379
              1.26864795
              -0.348843393
              3.535408702

            
              3-1-2011
              131.195
              8.962015084
              3
              1
              2011
              201103
              1.54
              0.357359981
              0.126882873
              1.055757146
              1.902971925
              -0.188247806
              3.761150555

            
              4-1-2011
              131.517
              9.080134926
              4
              1
              2011
              201104
              1.862
              0.341775176
              0.177036275
              1.343188549
              1.462469165
              -0.467960649
              4.522119061

            
              5-1-2011
              131.619
              9.036254446
              5
              1
              2011
              201105
              1.964
              0.298934027
              0.357469935
              1.307596038
              1.198167509
              -0.261632545
              4.387402148

            
              6-1-2011
              131.836
              9.108749511
              6
              1
              2011
              201106
              2.181
              0.349899735
              0.422323061
              1.408777204
              1.168800658
              -0.529646371
              4.420171127

            
              7-1-2011
              131.942
              8.991644326
              7
              1
              2011
              201107
              2.287
              0.283421418
              0.525213746
              1.478364836
              0.687184306
              -0.481786759
              4.616784999

            
              8-1-2011
              132.064
              8.99013817
              8
              1
              2011
              201108
              2.409
              0.453890538
              0.377056514
              1.578052947
              1.991072477
              -0.408402021
              5.253959585

            
              9-1-2011
              132.285
              9.025762857
              9
              1
              2011
              201109
              2.63
              0.543099806
              0.198748016
              1.888152178
              2.5372959
              -0.617920766
              6.440924813

            
              10-1-2011
              132.468
              8.83726671
              10
              1
              2011
              201110
              2.813
              0.779344672
              0.175759715
              1.857895613
              4.064372137
              -0.589204999
              6.382668851

            
              11-1-2011
              132.632
              8.649146833
              11
              1
              2011
              201111
              2.977
              0.623793816
              0.444183615
              1.909022568
              3.218606837
              -0.168040415
              6.706717641

            
              12-1-2011
              132.828
              8.504086379
              12
              1
              2011
              201112
              3.173
              0.593625857
              0.591192513
              1.98818163
              3.013038882
              -0.019143845
              6.994356454

            
              1-1-2012
              133.188
              8.19688065
              1
              1
              2012
              201201
              3.533
              0.718254278
              0.421267019
              2.393478704
              3.988018325
              -0.020207392
              8.767522301

            
              2-1-2012
              133.414
              8.320953845
              2
              1
              2012
              201202
              3.759
              0.74931844
              0.361698995
              2.647982565
              4.269940092
              -0.003190641
              9.845257601

            
              3-1-2012
              133.657
              8.224221793
              3
              1
              2012
              201203
              4.002
              0.766649695
              0.584435827
              2.650914478
              4.305180312
              0.178675884
              9.779719643

            
              4-1-2012
              133.753
              8.153798377
              4
              1
              2012
              201204
              4.098
              0.761909946
              0.711412994
              2.62467706
              4.046752026
              0.102100505
              9.437465866

            
              5-1-2012
              133.863
              8.189304661
              5
              1
              2012
              201205
              4.208
              0.880006268
              0.561427735
              2.766565996
              4.992364619
              0.132943366
              10.20571637

            
              6-1-2012
              133.951
              8.187760259
              6
              1
              2012
              201206
              4.296
              0.892616246
              0.460832872
              2.942550882
              5.115705392
              0.061685722
              10.93391589

            
              7-1-2012
              134.111
              8.19384397
              7
              1
              2012
              201207
              4.456
              0.945336546
              0.678564153
              2.832099301
              5.092211911
              -0.02765222
              10.13653741

            
              8-1-2012
              134.261
              8.058551219
              8
              1
              2012
              201208
              4.606
              0.595342673
              0.819259036
              3.191398292
              2.836837778
              0.056367987
              11.44001456

            
              9-1-2012
              134.422
              7.786242799
              9
              1
              2012
              201209
              4.767
              0.902121059
              0.683037922
              3.18184102
              5.180312463
              0.318000532
              11.86601129

            
              10-1-2012
              134.647
              7.805436411
              10
              1
              2012
              201210
              4.992
              0.965816835
              0.655587875
              3.37059529
              5.814636438
              0.511566073
              12.84908065

            
              11-1-2012
              134.85
              7.757055088
              11
              1
              2012
              201211
              5.195
              1.0416727
              0.577047485
              3.576279815
              5.937977211
              0.090401489
              13.27143637

            
              12-1-2012
              135.064
              7.89336592
              12
              1
              2012
              201212
              5.409
              0.921312855
              0.820259233
              3.667427912
              5.06284506
              0.246742888
              13.48989623

            
              1-1-2013
              135.261
              7.909492033
              1
              1
              2013
              201301
              5.606
              1.006671629
              0.888967358
              3.710361013
              5.403500529
              0.142515288
              13.44984526

            
              2-1-2013
              135.541
              7.746718882
              2
              1
              2013
              201302
              5.886
              0.945096908
              1.176893235
              3.764009857
              4.957124398
              0.406274927
              13.58820317

            
              3-1-2013
              135.682
              7.547437443
              3
              1
              2013
              201303
              6.027
              0.853293964
              1.337181966
              3.83652407
              4.19358628
              0.400957192
              13.65738212

            
              4-1-2013
              135.885
              7.52000206
              4
              1
              2013
              201304
              6.23
              1.032591351
              1.302864697
              3.894543952
              5.338893457
              0.393512364
              13.91589295

            
              5-1-2013
              136.084
              7.512418947
              5
              1
              2013
              201305
              6.429
              0.987403247
              1.379546128
              4.062050625
              5.145072242
              0.562616325
              14.65501547

            
              6-1-2013
              136.285
              7.538730089
              6
              1
              2013
              201306
              6.63
              1.194102877
              1.338627054
              4.097270069
              6.360859861
              0.452007445
              14.71691243

            
              7-1-2013
              136.434
              7.327240146
              7
              1
              2013
              201307
              6.779
              1.216424141
              1.402167045
              4.160408815
              6.466580524
              0.492422228
              14.9244493

            
              8-1-2013
              136.636
              7.241612249
              8
              1
              2013
              201308
              6.981
              1.110803979
              1.479288853
              4.390907168
              5.656055445
              0.431800053
              15.64172583

            
              9-1-2013
              136.8
              7.205752767
              9
              1
              2013
              201309
              7.145
              1.384797859
              1.581817599
              4.178384543
              7.300599084
              0.496676416
              14.7678864

            
              10-1-2013
              137.037
              7.204527082
              10
              1
              2013
              201310
              7.382
              1.361166771
              1.674638067
              4.346195162
              6.501820745
              -0.011699016
              14.70963044

            
              11-1-2013
              137.311
              6.981401819
              11
              1
              2013
              201311
              7.656
              1.412358352
              1.854790029
              4.388851619
              7.224245272
              0.571124701
              15.31039505

            
              12-1-2013
              137.395
              6.68077993
              12
              1
              2013
              201312
              7.74
              1.51653033
              1.892200077
              4.331269594
              7.934923059
              0.6753523
              15.16111415

            
              1-1-2014
              137.539
              6.584330374
              1
              1
              2014
              201401
              7.884
              1.270705206
              2.208144982
              4.405149813
              6.660401739
              1.262430205
              15.71090479

            
              2-1-2014
              137.761
              6.716326858
              2
              1
              2014
              201402
              8.106
              1.139740984
              2.309730553
              4.656528463
              5.761776107
              1.293273066
              16.58110322

            
              3-1-2014
              137.964
              6.711985047
              3
              1
              2014
              201403
              8.309
              1.499294115
              2.315208277
              4.494497608
              8.116997533
              1.41983515
              16.09685054

            
              4-1-2014
              138.268
              6.275173399
              4
              1
              2014
              201404
              8.613
              1.500425555
              2.368578719
              4.743995726
              7.823329026
              1.197553842
              16.73038413

            
              5-1-2014
              138.497
              6.297031739
              5
              1
              2014
              201405
              8.842
              1.640951462
              2.28334957
              4.917698968
              8.669094326
              1.08056368
              17.37119971

            
              6-1-2014
              138.795
              6.084973827
              6
              1
              2014
              201406
              9.14
              1.521719655
              2.659458547
              4.958821798
              8.011276871
              1.576176549
              17.61514655

            
              7-1-2014
              139.004
              6.198445101
              7
              1
              2014
              201407
              9.349
              1.618239017
              2.59652628
              5.134234703
              8.522260073
              1.425152885
              18.19406517

## index.html
<!DOCTYPE HTML>
<meta charset="utf-8">
<html>
<head>

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<script src="http://d3js.org/d3.v3.min.js"></script>

<style>

body, h1, h2, h3, p {
  margin: 0px;
  padding: 0px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5em;
  color: #4a4a4a;
}

a, a:visited, a:active, a:hover {
  color: #4a4a4a;
  text-decoration: none;
}

a {
  text-decoration: underline;
}

#content {
  margin: 5px;
  padding: 0px 0px 50px 0px;
  width: 850px;
  text-align: left;
}

p.body {
  margin: 0px;
  padding: 15px 0px 13px 0px;
  line-height: 1.5rem;
}

#slides {
  margin: 0px;
  padding: 0px;
  background: #fff;
  height: 400px;
  width: 250px;
  float: right;
}

#slides p {
  margin: 0px;
  padding: 0px 0px 13px 15px;
  color: #4a4a4a;
  font-weight: normal;
}

#container {
  padding: 15px;
  border: 1px solid #ccc;
  height: 450px;
  clear: both;
}

#chart {
  margin: 0px;
  padding: 0px;
}

#header {
  margin: 0px;
  padding: 0px;
  height: 34px;
  background: #747474;
}

#block {
  float: left;
  margin: 0px;
  padding: 0px;
  height: 100%;
  width: 10px;
  background: #ff0000;
}

#header h1 {
  margin: 0px 0px 0px 10px;
  padding: 4px 0px 0px 7px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: normal;
  color: #fff;
}

p {
  margin: 0px;
  padding: 0px 0px 13px 15px;
}


#unit {
  padding: 13px 0px 0px 0px;
  font-weight: bold;
}

#date {
  margin: 0px;
  padding: 0px;
}

#source {
  margin: 0px 0px 20px 0px;
  padding: 0px;
  font-size: 11px;
}

.areaLabel {
  fill: #fff;
  font-weight: bold;
}

g.right.axis path.domain, g.left.axis path.domain {
  stroke-width: 0px;
}

g.left.axis g.tick line {
  stroke-width: 0px;
}

g.x.axis path.domain, g.x.axis g.tick.major line, g.x.axis g.tick line {
  stroke: #4a4a4a;
  stroke-width: 1px;
  shape-rendering: crispEdges;
}

.axis path, .axis line {
  fill: none;
  stroke: #ccc;
  shape-rendering: crispEdges;
}

.axis line {
  stroke: #ddd;
  stroke-width: 1;
  shape-rendering: crispEdges;
}

g.group text, g.tick text {
  color: #4a4a4a;
  font-size: 12px;
}

.left.label {
  fill: #772210;
  font-size: 12px;
}

.right.label {
  font-size: 12px;
  fill: #4a4a4a;
}

g.group text {
  opacity: 0;
}

.employment, .jobgains, .nilfLine {
  fill: none;
  stroke: #00a1ce;
  stroke-width: 2.5px;
}

.unemploymentrate {
  fill: none;
  stroke: #772210;
  stroke-width: 2.5px;
  opacity: 0;
}

.unempLineTwo {
  fill: none;
  stroke: #772210;
  stroke-width: 2.5px;
}

#buttons {
  margin: 0px 0px 0px 15px;
  padding: 0px;
}

.button {
  display: inline-block;
  margin: 0px 2px 0px 0px;
  padding: 4px 6px;
  line-height: 20px;
  background:#ff0000;
  min-width: 60px;
  border-radius: 3px;
  text-align: center;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
}

.button:hover {
  background:#e3120b;
  color: #fff;
  cursor: pointer;
}

.button span {
  margin: 0px;
  padding: 0px 3px;
}

.empcircle, .unempcircle, .nilfcircle {
  stroke: #00a1ce;
  stroke-width: 2.5px;
  fill: #fff;
  opacity: 0;
}

.circleUnder25, .circle2554, .circleOver54 {
  stroke: #648d9e;
  stroke-width: 2.5px;
  fill: #fff;
}

.circle2554 {
  stroke: #00485d;
}

.circleOver54 {
  stroke: #00a1ce;
}

.group .unempcircle {
  stroke: #772210;
}

.areaUnder25 {
  fill: #648d9e;
  stroke-width: 0;
}

.area2554 {
  fill: #00485d;
  stroke-width: 0;
}

.areaOver54 {
  fill: #00a1ce;
  stroke-width: 0;
}
.stackedlineUnder25, .stackedline2554, .growthlineUnder25, .growthline2554 {
  stroke: #fff;
  stroke-width: 2.5;
  fill: none;
}

.slideone, .slidetwo, .slidethree, .slidefourone, .slidefourtwo, .slidefourthree, .slidefive, .slidesix, .slideseven {
  opacity: 0;
  display: none;
}

#text {
  margin: 0px;
  padding: 0px;
}

#progress {
  text-align: center;
  margin: 0px;
  padding: 7px 0px 0px 0px;
  display: block;
}

#next span {
  margin: 0px;
  padding: 0px 3px;
}

.dot {
  line-height: 12px;
  font-size: 30px;
  width: 12px;
  height: 20px;
  margin: 0px;
  padding: 0px;
  color: #ccc;
}

span.lightblue {
  color: #00a1ce;
  font-weight: bold;
}

span.darkblue {
  color: #00485d;
  font-weight: bold;
}

span.grayblue {
  color: #648d9e;
  font-weight: bold;
}

span.darkred {
  color: #772210;
  font-weight: bold;
}

</style>
<body>

<div id="content">
	<div id="header">
		<div id="block"></div>
		<h1>What happened to America's &ldquo;prime-age&rdquo; workers?</h1>
	</div>

	<div id="container">

		<div id="progress">
		<span class="dot" id="dotone">&bull;</span>
		<span class="dot" id="dottwo">&bull;</span>
		<span class="dot">&nbsp;</span>
		<span class="dot" id="dotthree">&bull;</span>
		<span class="dot" id="dotfour">&bull;</span>
		<span class="dot" id="dotfive">&bull;</span>
		<span class="dot" id="dotsix">&bull;</span>
		<span class="dot">&nbsp;</span>
		<span class="dot" id="dotseven">&bull;</span>
		<span class="dot" id="doteight">&bull;</span>
		<span class="dot">&nbsp;</span>
		<span class="dot" id="dotnine">&bull;</span>
		</div>

		<div id="slides">
			<div id="text">
				<p class="slideintro">Have America's prime-age workers been left out of the economic recovery?</p>
				<p class="slideone">Since the American labour market hit a bottom in early 2010, total nonfarm <span class="lightblue">employment</span> has grown steadily from 130m to 139m workers.</p>
				<p class="slidetwo">Meanwhile, the <span class="darkred">unemployment</span> rate has fallen from almost 10% to around 6%.</p>
				<p class="slidethree">But the 9m jobs created since 2010 have not been distributed evenly.</p>
				<p class="slidefourone"><span class="grayblue">Younger workers aged 16 to 24</span>, who represent 14% of the labour force, accounted for 17% of the job gains.</p>
				<p class="slidefourtwo"><span class="darkblue">Prime-age workers aged 25 to 54</span>, representing two-thirds of the labour force, accounted for just 28% of the job gains.</p>
				<p class="slidefourthree"><span class="lightblue">Older workers aged 55 and over</span>, who comprise a fifth of the labour force, accounted for more than half of all new jobs.</p>
				<p class="slidefive">Worryingly, <span class="darkblue">prime-age employment has grown just 1.4%</span> since 2010, compared to <span class="grayblue">8.5% for younger workers</span> and <span class="lightblue">18.2% for older workers</span>.</p>
				<p class="slidesix">Much of this growth is due to aging: the number of people over 55 is growing more rapidly than those aged 25 to 54. But it also reflects the difficulty that prime-aged workers -- especially men without college education -- have finding jobs.</p>
				<p class="slideseven">As America recovers from the Great Recession, the good economic news hides weaknesses. Employment has returned to pre-recession levels, but for many people a real recovery has yet to come.</p>
				<p class="slideseven">See story in our recent issue <a href="http://www.economist.com/news/briefing/21607810-new-figures-show-speed-which-americas-economy-can-grow-without-stoking-inflation-has">here</a>.</p>
			</div>

			<div id="buttons">
				<div class="button" id="next" value="start">Start<span class="fa fa-caret-right"></span></div>
			</div>

		</div>

		<div id="chart"></div>

		<p id="source">Source: US Bureau of Labour Statistics</p>

	</div>

	<p class="body">American businesses added 209,000 jobs in July marking the sixth straight month of job growth above 200,000. But the favourable employment figures belie concerns about the economic recovery, from declining labour-force participation and anaemic wage growth, to high rates of long-term unemployment. This &ldquo;action chart&rdquo; highlights one troubling aspect of the economic climate: the lack of job growth among prime-age workers aged 25 to 54.</p>

</div>

<script type="text/javascript" src="chart.js"></script>

</body>
</html>
date	employment	unemploymentrate	month	day	year	idnumber	jobgains	jobgainsunder25	jobgains2554	jobgainsover54	jobgrowthunder25	jobgrowth2554	jobgrowthover54
1-1-2008	138.365	4.988219105	1	1	2008	200801
2-1-2008	138.279	4.879175805	2	1	2008	200802
3-1-2008	138.199	5.082256933	3	1	2008	200803
4-1-2008	137.985	4.96654072	4	1	2008	200804
5-1-2008	137.803	5.440594156	5	1	2008	200805
6-1-2008	137.631	5.556923635	6	1	2008	200806
7-1-2008	137.421	5.78562689	7	1	2008	200807
8-1-2008	137.162	6.103167983	8	1	2008	200808
9-1-2008	136.71	6.142200945	9	1	2008	200809
10-1-2008	136.236	6.504558485	10	1	2008	200810
11-1-2008	135.471	6.814625124	11	1	2008	200811
12-1-2008	134.774	7.297533219	12	1	2008	200812
1-1-2009	133.976	7.819207574	1	1	2009	200901
2-1-2009	133.275	8.346167286	2	1	2009	200902
3-1-2009	132.449	8.710658976	3	1	2009	200903
4-1-2009	131.765	8.965820761	4	1	2009	200904
5-1-2009	131.411	9.369486969	5	1	2009	200905
6-1-2009	130.944	9.505804183	6	1	2009	200906
7-1-2009	130.617	9.450363102	7	1	2009	200907
8-1-2009	130.401	9.600404391	8	1	2009	200908
9-1-2009	130.174	9.757064755	9	1	2009	200909
10-1-2009	129.976	9.982833065	10	1	2009	200910
11-1-2009	129.97	9.890302707	11	1	2009	200911
12-1-2009	129.687	9.860819928	12	1	2009	200912
1-1-2010	129.705	9.747464212	1	1	2010	201001
2-1-2010	129.655	9.836716107	2	1	2010	201002	0	0	0	0	0	0	0
3-1-2010	129.811	9.880231742	3	1	2010	201003	0.156	0.004756231	-0.035738756	0.186982525	0.070480442	0	0.768250501
4-1-2010	130.062	9.915158883	4	1	2010	201004	0.407	0.008265852	0.142752768	0.25598138	0.270175026	0.380749801	1.21609321
5-1-2010	130.578	9.641478213	5	1	2010	201005	0.923	0.230701667	0.225849713	0.46644862	1.26864795	0.07976602	1.634807937
6-1-2010	130.456	9.427133847	6	1	2010	201006	0.801	-0.018282186	0.294421931	0.524860255	-0.234934806	0.213772933	1.918805753
7-1-2010	130.395	9.451160007	7	1	2010	201007	0.74	0.040133499	0.102549222	0.597317279	0.158580994	0.023398032	2.228290552
8-1-2010	130.353	9.514105668	8	1	2010	201008	0.698	0.257859452	-0.095164932	0.535305481	1.756137672	0.02765222	2.221008556
9-1-2010	130.296	9.468016704	9	1	2010	201009	0.641	0.046651517	-0.054698247	0.64904673	0.40526254	0.049986706	2.639723284
10-1-2010	130.537	9.451217528	10	1	2010	201010	0.882	0.069352366	0.296931504	0.515716129	0.187947844	0.090401489	1.754960859
11-1-2010	130.674	9.795168919	11	1	2010	201011	1.019	0.173623909	0.172568177	0.672807914	0.681310936	-0.208455198	2.202803568
12-1-2010	130.745	9.35504657	12	1	2010	201012	1.09	0.033513857	0.236716157	0.819769985	-0.01174674	0.046796065	2.960131076
1-1-2011	130.815	9.079812268	1	1	2011	201101	1.16	0.291017058	0.043630135	0.825352807	1.438975684	-0.330763095	2.818132168
2-1-2011	130.983	9.040970772	2	1	2011	201102	1.328	0.266999953	0.045216668	1.015783379	1.26864795	-0.348843393	3.535408702
3-1-2011	131.195	8.962015084	3	1	2011	201103	1.54	0.357359981	0.126882873	1.055757146	1.902971925	-0.188247806	3.761150555
4-1-2011	131.517	9.080134926	4	1	2011	201104	1.862	0.341775176	0.177036275	1.343188549	1.462469165	-0.467960649	4.522119061
5-1-2011	131.619	9.036254446	5	1	2011	201105	1.964	0.298934027	0.357469935	1.307596038	1.198167509	-0.261632545	4.387402148
6-1-2011	131.836	9.108749511	6	1	2011	201106	2.181	0.349899735	0.422323061	1.408777204	1.168800658	-0.529646371	4.420171127
7-1-2011	131.942	8.991644326	7	1	2011	201107	2.287	0.283421418	0.525213746	1.478364836	0.687184306	-0.481786759	4.616784999
8-1-2011	132.064	8.99013817	8	1	2011	201108	2.409	0.453890538	0.377056514	1.578052947	1.991072477	-0.408402021	5.253959585
9-1-2011	132.285	9.025762857	9	1	2011	201109	2.63	0.543099806	0.198748016	1.888152178	2.5372959	-0.617920766	6.440924813
10-1-2011	132.468	8.83726671	10	1	2011	201110	2.813	0.779344672	0.175759715	1.857895613	4.064372137	-0.589204999	6.382668851
11-1-2011	132.632	8.649146833	11	1	2011	201111	2.977	0.623793816	0.444183615	1.909022568	3.218606837	-0.168040415	6.706717641
12-1-2011	132.828	8.504086379	12	1	2011	201112	3.173	0.593625857	0.591192513	1.98818163	3.013038882	-0.019143845	6.994356454
1-1-2012	133.188	8.19688065	1	1	2012	201201	3.533	0.718254278	0.421267019	2.393478704	3.988018325	-0.020207392	8.767522301
2-1-2012	133.414	8.320953845	2	1	2012	201202	3.759	0.74931844	0.361698995	2.647982565	4.269940092	-0.003190641	9.845257601
3-1-2012	133.657	8.224221793	3	1	2012	201203	4.002	0.766649695	0.584435827	2.650914478	4.305180312	0.178675884	9.779719643
4-1-2012	133.753	8.153798377	4	1	2012	201204	4.098	0.761909946	0.711412994	2.62467706	4.046752026	0.102100505	9.437465866
5-1-2012	133.863	8.189304661	5	1	2012	201205	4.208	0.880006268	0.561427735	2.766565996	4.992364619	0.132943366	10.20571637
6-1-2012	133.951	8.187760259	6	1	2012	201206	4.296	0.892616246	0.460832872	2.942550882	5.115705392	0.061685722	10.93391589
7-1-2012	134.111	8.19384397	7	1	2012	201207	4.456	0.945336546	0.678564153	2.832099301	5.092211911	-0.02765222	10.13653741
8-1-2012	134.261	8.058551219	8	1	2012	201208	4.606	0.595342673	0.819259036	3.191398292	2.836837778	0.056367987	11.44001456
9-1-2012	134.422	7.786242799	9	1	2012	201209	4.767	0.902121059	0.683037922	3.18184102	5.180312463	0.318000532	11.86601129
10-1-2012	134.647	7.805436411	10	1	2012	201210	4.992	0.965816835	0.655587875	3.37059529	5.814636438	0.511566073	12.84908065
11-1-2012	134.85	7.757055088	11	1	2012	201211	5.195	1.0416727	0.577047485	3.576279815	5.937977211	0.090401489	13.27143637
12-1-2012	135.064	7.89336592	12	1	2012	201212	5.409	0.921312855	0.820259233	3.667427912	5.06284506	0.246742888	13.48989623
1-1-2013	135.261	7.909492033	1	1	2013	201301	5.606	1.006671629	0.888967358	3.710361013	5.403500529	0.142515288	13.44984526
2-1-2013	135.541	7.746718882	2	1	2013	201302	5.886	0.945096908	1.176893235	3.764009857	4.957124398	0.406274927	13.58820317
3-1-2013	135.682	7.547437443	3	1	2013	201303	6.027	0.853293964	1.337181966	3.83652407	4.19358628	0.400957192	13.65738212
4-1-2013	135.885	7.52000206	4	1	2013	201304	6.23	1.032591351	1.302864697	3.894543952	5.338893457	0.393512364	13.91589295
5-1-2013	136.084	7.512418947	5	1	2013	201305	6.429	0.987403247	1.379546128	4.062050625	5.145072242	0.562616325	14.65501547
6-1-2013	136.285	7.538730089	6	1	2013	201306	6.63	1.194102877	1.338627054	4.097270069	6.360859861	0.452007445	14.71691243
7-1-2013	136.434	7.327240146	7	1	2013	201307	6.779	1.216424141	1.402167045	4.160408815	6.466580524	0.492422228	14.9244493
8-1-2013	136.636	7.241612249	8	1	2013	201308	6.981	1.110803979	1.479288853	4.390907168	5.656055445	0.431800053	15.64172583
9-1-2013	136.8	7.205752767	9	1	2013	201309	7.145	1.384797859	1.581817599	4.178384543	7.300599084	0.496676416	14.7678864
10-1-2013	137.037	7.204527082	10	1	2013	201310	7.382	1.361166771	1.674638067	4.346195162	6.501820745	-0.011699016	14.70963044
11-1-2013	137.311	6.981401819	11	1	2013	201311	7.656	1.412358352	1.854790029	4.388851619	7.224245272	0.571124701	15.31039505
12-1-2013	137.395	6.68077993	12	1	2013	201312	7.74	1.51653033	1.892200077	4.331269594	7.934923059	0.6753523	15.16111415
1-1-2014	137.539	6.584330374	1	1	2014	201401	7.884	1.270705206	2.208144982	4.405149813	6.660401739	1.262430205	15.71090479
2-1-2014	137.761	6.716326858	2	1	2014	201402	8.106	1.139740984	2.309730553	4.656528463	5.761776107	1.293273066	16.58110322
3-1-2014	137.964	6.711985047	3	1	2014	201403	8.309	1.499294115	2.315208277	4.494497608	8.116997533	1.41983515	16.09685054
4-1-2014	138.268	6.275173399	4	1	2014	201404	8.613	1.500425555	2.368578719	4.743995726	7.823329026	1.197553842	16.73038413
5-1-2014	138.497	6.297031739	5	1	2014	201405	8.842	1.640951462	2.28334957	4.917698968	8.669094326	1.08056368	17.37119971
6-1-2014	138.795	6.084973827	6	1	2014	201406	9.14	1.521719655	2.659458547	4.958821798	8.011276871	1.576176549	17.61514655
7-1-2014	139.004	6.198445101	7	1	2014	201407	9.349	1.618239017	2.59652628	5.134234703	8.522260073	1.425152885	18.19406517
	<!DOCTYPE HTML>
	<meta charset="utf-8">
	<html>
	<head>

	<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
	<script src="http://d3js.org/d3.v3.min.js"></script>

	<style>

	body, h1, h2, h3, p {
	margin: 0px;
	padding: 0px;
	font-family: Arial, sans-serif;
	font-size: 14px;
	line-height: 1.5em;
	color: #4a4a4a;
	}

	a, a:visited, a:active, a:hover {
	color: #4a4a4a;
	text-decoration: none;
	}

	a {
	text-decoration: underline;
	}

	#content {
	margin: 5px;
	padding: 0px 0px 50px 0px;
	width: 850px;
	text-align: left;
	}

	p.body {
	margin: 0px;
	padding: 15px 0px 13px 0px;
	line-height: 1.5rem;
	}

	#slides {
	margin: 0px;
	padding: 0px;
	background: #fff;
	height: 400px;
	width: 250px;
	float: right;
	}

	#slides p {
	margin: 0px;
	padding: 0px 0px 13px 15px;
	color: #4a4a4a;
	font-weight: normal;
	}

	#container {
	padding: 15px;
	border: 1px solid #ccc;
	height: 450px;
	clear: both;
	}

	#chart {
	margin: 0px;
	padding: 0px;
	}

	#header {
	margin: 0px;
	padding: 0px;
	height: 34px;
	background: #747474;
	}

	#block {
	float: left;
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 10px;
	background: #ff0000;
	}

	#header h1 {
	margin: 0px 0px 0px 10px;
	padding: 4px 0px 0px 7px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 18px;
	font-weight: normal;
	color: #fff;
	}

	p {
	margin: 0px;
	padding: 0px 0px 13px 15px;
	}


	#unit {
	padding: 13px 0px 0px 0px;
	font-weight: bold;
	}

	#date {
	margin: 0px;
	padding: 0px;
	}

	#source {
	margin: 0px 0px 20px 0px;
	padding: 0px;
	font-size: 11px;
	}

	.areaLabel {
	fill: #fff;
	font-weight: bold;
	}

	g.right.axis path.domain, g.left.axis path.domain {
	stroke-width: 0px;
	}

	g.left.axis g.tick line {
	stroke-width: 0px;
	}

	g.x.axis path.domain, g.x.axis g.tick.major line, g.x.axis g.tick line {
	stroke: #4a4a4a;
	stroke-width: 1px;
	shape-rendering: crispEdges;
	}

	.axis path, .axis line {
	fill: none;
	stroke: #ccc;
	shape-rendering: crispEdges;
	}

	.axis line {
	stroke: #ddd;
	stroke-width: 1;
	shape-rendering: crispEdges;
	}

	g.group text, g.tick text {
	color: #4a4a4a;
	font-size: 12px;
	}

	.left.label {
	fill: #772210;
	font-size: 12px;
	}

	.right.label {
	font-size: 12px;
	fill: #4a4a4a;
	}

	g.group text {
	opacity: 0;
	}

	.employment, .jobgains, .nilfLine {
	fill: none;
	stroke: #00a1ce;
	stroke-width: 2.5px;
	}

	.unemploymentrate {
	fill: none;
	stroke: #772210;
	stroke-width: 2.5px;
	opacity: 0;
	}

	.unempLineTwo {
	fill: none;
	stroke: #772210;
	stroke-width: 2.5px;
	}

	#buttons {
	margin: 0px 0px 0px 15px;
	padding: 0px;
	}

	.button {
	display: inline-block;
	margin: 0px 2px 0px 0px;
	padding: 4px 6px;
	line-height: 20px;
	background:#ff0000;
	min-width: 60px;
	border-radius: 3px;
	text-align: center;
	color: #fff;
	font-family: Arial, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	}

	.button:hover {
	background:#e3120b;
	color: #fff;
	cursor: pointer;
	}

	.button span {
	margin: 0px;
	padding: 0px 3px;
	}

	.empcircle, .unempcircle, .nilfcircle {
	stroke: #00a1ce;
	stroke-width: 2.5px;
	fill: #fff;
	opacity: 0;
	}

	.circleUnder25, .circle2554, .circleOver54 {
	stroke: #648d9e;
	stroke-width: 2.5px;
	fill: #fff;
	}

	.circle2554 {
	stroke: #00485d;
	}

	.circleOver54 {
	stroke: #00a1ce;
	}

	.group .unempcircle {
	stroke: #772210;
	}

	.areaUnder25 {
	fill: #648d9e;
	stroke-width: 0;
	}

	.area2554 {
	fill: #00485d;
	stroke-width: 0;
	}

	.areaOver54 {
	fill: #00a1ce;
	stroke-width: 0;
	}
	.stackedlineUnder25, .stackedline2554, .growthlineUnder25, .growthline2554 {
	stroke: #fff;
	stroke-width: 2.5;
	fill: none;
	}

	.slideone, .slidetwo, .slidethree, .slidefourone, .slidefourtwo, .slidefourthree, .slidefive, .slidesix, .slideseven {
	opacity: 0;
	display: none;
	}

	#text {
	margin: 0px;
	padding: 0px;
	}

	#progress {
	text-align: center;
	margin: 0px;
	padding: 7px 0px 0px 0px;
	display: block;
	}

	#next span {
	margin: 0px;
	padding: 0px 3px;
	}

	.dot {
	line-height: 12px;
	font-size: 30px;
	width: 12px;
	height: 20px;
	margin: 0px;
	padding: 0px;
	color: #ccc;
	}

	span.lightblue {
	color: #00a1ce;
	font-weight: bold;
	}

	span.darkblue {
	color: #00485d;
	font-weight: bold;
	}

	span.grayblue {
	color: #648d9e;
	font-weight: bold;
	}

	span.darkred {
	color: #772210;
	font-weight: bold;
	}

	</style>
	<body>

	<div id="content">
	<div id="header">
	<div id="block"></div>
	<h1>What happened to America's “prime-age” workers?</h1>
	</div>

	<div id="container">

	<div id="progress">
	<span class="dot" id="dotone">•</span>
	<span class="dot" id="dottwo">•</span>
	<span class="dot"> </span>
	<span class="dot" id="dotthree">•</span>
	<span class="dot" id="dotfour">•</span>
	<span class="dot" id="dotfive">•</span>
	<span class="dot" id="dotsix">•</span>
	<span class="dot"> </span>
	<span class="dot" id="dotseven">•</span>
	<span class="dot" id="doteight">•</span>
	<span class="dot"> </span>
	<span class="dot" id="dotnine">•</span>
	</div>

	<div id="slides">
	<div id="text">
	<p class="slideintro">Have America's prime-age workers been left out of the economic recovery?</p>
	<p class="slideone">Since the American labour market hit a bottom in early 2010, total nonfarm <span class="lightblue">employment</span> has grown steadily from 130m to 139m workers.</p>
	<p class="slidetwo">Meanwhile, the <span class="darkred">unemployment</span> rate has fallen from almost 10% to around 6%.</p>
	<p class="slidethree">But the 9m jobs created since 2010 have not been distributed evenly.</p>
	<p class="slidefourone"><span class="grayblue">Younger workers aged 16 to 24</span>, who represent 14% of the labour force, accounted for 17% of the job gains.</p>
	<p class="slidefourtwo"><span class="darkblue">Prime-age workers aged 25 to 54</span>, representing two-thirds of the labour force, accounted for just 28% of the job gains.</p>
	<p class="slidefourthree"><span class="lightblue">Older workers aged 55 and over</span>, who comprise a fifth of the labour force, accounted for more than half of all new jobs.</p>
	<p class="slidefive">Worryingly, <span class="darkblue">prime-age employment has grown just 1.4%</span> since 2010, compared to <span class="grayblue">8.5% for younger workers</span> and <span class="lightblue">18.2% for older workers</span>.</p>
	<p class="slidesix">Much of this growth is due to aging: the number of people over 55 is growing more rapidly than those aged 25 to 54. But it also reflects the difficulty that prime-aged workers -- especially men without college education -- have finding jobs.</p>
	<p class="slideseven">As America recovers from the Great Recession, the good economic news hides weaknesses. Employment has returned to pre-recession levels, but for many people a real recovery has yet to come.</p>
	<p class="slideseven">See story in our recent issue <a href="http://www.economist.com/news/briefing/21607810-new-figures-show-speed-which-americas-economy-can-grow-without-stoking-inflation-has">here</a>.</p>
	</div>

	<div id="buttons">
	<div class="button" id="next" value="start">Start<span class="fa fa-caret-right"></span></div>
	</div>

	</div>

	<div id="chart"></div>

	<p id="source">Source: US Bureau of Labour Statistics</p>

	</div>

	<p class="body">American businesses added 209,000 jobs in July marking the sixth straight month of job growth above 200,000. But the favourable employment figures belie concerns about the economic recovery, from declining labour-force participation and anaemic wage growth, to high rates of long-term unemployment. This “action chart” highlights one troubling aspect of the economic climate: the lack of job growth among prime-age workers aged 25 to 54.</p>

	</div>

	<script type="text/javascript" src="chart.js"></script>

	</body>
	</html>