dougdowson · August 29, 2015 14:06
diff --git a/chart.js b/chart.js
 var margin = {top: 15, right: 45, bottom: 40, left: 25},
    width = 565 - margin.left - margin.right,
    height = 460 - margin.top - margin.bottom;

 var parseYear = d3.time.format("%Y").parse,
    parseDate = d3.time.format("%Y%m").parse,
    parseMonth = d3.time.format("%m-%Y").parse,
    numberFormat = d3.format(",.0f"),
    numberFormatDetailed = d3.format(",.1f");

 var x = d3.scale.linear()
 	.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)
    .orient("bottom")
    .tickFormat(numberFormatDetailed);

 var yAxisLeft = d3.svg.axis()
 	.scale(y1)
 	.orient("left")
 	.tickFormat(numberFormatDetailed)
 	.tickSize(-width);

 var yAxisRight = d3.svg.axis()
 	.scale(y0)
 	.orient("right")
 	.tickFormat(numberFormatDetailed);

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

 var lfprLine = d3.svg.line()
    .x(function(d) { return x(d.dateid); })
    .y(function(d) { return y0(d.lfpr); });

 var unempLine = d3.svg.line()
    .x(function(d) { return x(d.dateid); })
    .y(function(d) { return y1(d.unemprate); });

 var regLine = d3.svg.line()
 	.x(function(d) { return x(d.lfpr); })
 	.y(function(d) { return y1(d.fitted); });

 var regLine2000s = d3.svg.line()
 	.x(function(d) { return x(d.fitted); })
 	.y(function(d) { return y1(d.unemprate); });

 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 group;
 var selectedVariable;
 var twodigits = d3.format("02d");
 var year;
 var month;
 var dateid;
 var duration;
 var formatDate = d3.time.format("%B, %Y");
 var slideout;
 var slidein;
 var delay;
 var legendText = ["1970s", "1980s", "1990s", "2000s", "2009-present"];
 var legendColors = ["#648d9e", "#00485d", "#772210", "#a5a6a7", "#00a1ce"];

 d3.csv("data.csv", function(error, data) {

 	d3.select("#next").on("click", function(){
 		slideValue = d3.select("#next").attr("value");

 		if (slideValue=="start") {
 			document.getElementById("next").setAttribute("value", "one");
 			document.getElementById("again").setAttribute("value", "one");
 			linechart();
 			setTimeout(unemployment, 250);
 			setTimeout(lfpr, 5000);
 		} else if (slideValue=="one") {
 			document.getElementById("next").setAttribute("value", "two");
 			document.getElementById("again").setAttribute("value", "two");
 			formatDate = d3.time.format("%B, %Y");
 			duration = 240;
 			year = 1976;
 			month = 1;
 			dateid = year + twodigits(month);
 			scatter();
 			setTimeout(changeView1970s, 250);
 			setTimeout(showDots1970s, 250);
 		} else if (slideValue=="two") {
 			document.getElementById("next").setAttribute("value", "three");
 			document.getElementById("again").setAttribute("value", "three");
 			duration = 50;
 			year = 1982;
 			month = 12;
 			dateid = year + twodigits(month);
 			setTimeout(changeView1980s, 250);
 			setTimeout(showDots1980s, 250);
 		} else if (slideValue=="three") {
 			document.getElementById("next").setAttribute("value", "four");
 			document.getElementById("again").setAttribute("value", "four");
 			year = 1992;
 			month = 6;
 			dateid = year + twodigits(month);
 			setTimeout(changeView1990s, 250);
 			setTimeout(showDots1990s, 250);
 		} else if (slideValue=="four") {
 			document.getElementById("next").setAttribute("value", "five");
 			document.getElementById("again").setAttribute("value", "five");
 			year = 2003;
 			month = 7;
 			dateid = year + twodigits(month);
 			setTimeout(changeView2000s, 250);
 			setTimeout(showDots2000s, 250);
 		} else if (slideValue=="five") {
 			document.getElementById("next").setAttribute("value", "six");
 			document.getElementById("again").setAttribute("value", "six");
 			year = 2009;
 			month = 10;
 			dateid = year + twodigits(month);
 			setTimeout(changeViewCurrent, 250);
 			setTimeout(showDotsCurrent, 250);
 		} else if (slideValue=="six") {
 			document.getElementById("next").setAttribute("value", "seven");
 			document.getElementById("again").setAttribute("value", "seven");
 			setTimeout(changeViewAll, 250);
 			setTimeout(showDotsAll, 500);
 		} else if (slideValue=="seven") {
 			document.getElementById("next").setAttribute("value", "one");
 			d3.select("#next").html("Next<span class='fa fa-caret-right'></span>");
 			linechart();
 			setTimeout(unemployment, 250);
 			setTimeout(lfpr, 5000);
 		}
 	});


 	d3.select("#again").on("click", function(){
 		if (slideValue=="one") {

 			formatDate = d3.time.format("%B, %Y");
 			duration = 240;
 			year = 1976;
 			month = 1;
 			dateid = year + twodigits(month);

 			d3.select("#line1970s")
 				.transition()
 				.duration(250)
 				.style("opacity", 0);

 			d3.selectAll(".dot1970s")
 				.transition()
 				.duration(250)
 				.style("opacity", 0);

 			d3.select("#buttons")
 				.transition()
 				.duration(250)
 				.style("opacity", 0)
 				.style("display", "none")
 				.transition()
 				.delay(delay)
 				.duration(500)
 				.style("opacity", 1)
 				.style("display", "block");

 			d3.select("#again")
 				.transition()
 				.duration(250)
 				.style("opacity", 0)
 				.style("display", "none")
 				.transition()
 				.delay(delay)
 				.duration(500)
 				.style("opacity", 1)
 				.style("display", "block");

 			setTimeout(showDots1970s, 250);
 		} else if (slideValue=="two") {

 			duration = 50;
 			year = 1982;
 			month = 12;
 			dateid = year + twodigits(month);

 			d3.select("#line1980s")
 				.transition()
 				.duration(250)
 				.style("opacity", 0);

 			d3.selectAll(".dot1980s")
 				.transition()
 				.duration(250)
 				.style("opacity", 0);

 			d3.select("#buttons")
 				.transition()
 				.duration(250)
 				.style("opacity", 0)
 				.style("display", "none")
 				.transition()
 				.delay(delay)
 				.duration(500)
 				.style("opacity", 1)
 				.style("display", "block");

 			d3.select("#again")
 				.transition()
 				.duration(250)
 				.style("opacity", 0)
 				.style("display", "none")
 				.transition()
 				.delay(delay)
 				.duration(500)
 				.style("opacity", 1)
 				.style("display", "block");

 			setTimeout(showDots1980s, 250);

 		} else if (slideValue=="three") {

 			year = 1992;
 			month = 6;
 			dateid = year + twodigits(month);

 			d3.select("#line1990s")
 				.transition()
 				.duration(250)
 				.style("opacity", 0);

 			d3.selectAll(".dot1990s")
 				.transition()
 				.duration(250)
 				.style("opacity", 0);

 			d3.select("#buttons")
 				.transition()
 				.duration(250)
 				.style("opacity", 0)
 				.style("display", "none")
 				.transition()
 				.delay(delay)
 				.duration(500)
 				.style("opacity", 1)
 				.style("display", "block");

 			d3.select("#again")
 				.transition()
 				.duration(250)
 				.style("opacity", 0)
 				.style("display", "none")
 				.transition()
 				.delay(delay)
 				.duration(500)
 				.style("opacity", 1)
 				.style("display", "block");

 			setTimeout(showDots1990s, 250);

 		} else if (slideValue=="four") {

 			year = 2003;
 			month = 7;
 			dateid = year + twodigits(month);

 			d3.select("#line2000s")
 				.transition()
 				.duration(250)
 				.style("opacity", 0);

 			d3.selectAll(".dot2000s")
 				.transition()
 				.duration(250)
 				.style("opacity", 0);

 			d3.select("#buttons")
 				.transition()
 				.duration(250)
 				.style("opacity", 0)
 				.style("display", "none")
 				.transition()
 				.delay(delay)
 				.duration(500)
 				.style("opacity", 1)
 				.style("display", "block");

 			d3.select("#again")
 				.transition()
 				.duration(250)
 				.style("opacity", 0)
 				.style("display", "none")
 				.transition()
 				.delay(delay)
 				.duration(500)
 				.style("opacity", 1)
 				.style("display", "block");

 			setTimeout(showDots2000s, 250);

 		} else if (slideValue=="five") {

 			year = 2009;
 			month = 10;
 			dateid = year + twodigits(month);

 			d3.select("#lineCurrent")
 				.transition()
 				.duration(250)
 				.style("opacity", 0);

 			d3.selectAll(".dotcurrent")
 				.transition()
 				.duration(250)
 				.style("opacity", 0);

 			d3.select("#buttons")
 				.transition()
 				.duration(250)
 				.style("opacity", 0)
 				.style("display", "none")
 				.transition()
 				.delay(delay)
 				.duration(500)
 				.style("opacity", 1)
 				.style("display", "block");

 			d3.select("#again")
 				.transition()
 				.duration(250)
 				.style("opacity", 0)
 				.style("display", "none")
 				.transition()
 				.delay(delay)
 				.duration(500)
 				.style("opacity", 1)
 				.style("display", "block");

 			setTimeout(showDotsCurrent, 250);

 		}
 	});





 	data.forEach(function(d) {
 		d.year = +d.year;
 		d.dateid = parseDate(d.dateid);
 		d.idnumber = +d.idnumber;
 		d.lfpr = +d.lfpr;
 		d.unemprate = +d.unemprate;
 		d.fitted = +d.fitted;
 	});

 	var startData = data.filter(function(d) { return d.year > 1999; });

 	var data1970s = data.filter(function(d) { return d.expansion=="1970s"; });
 	var data1980s = data.filter(function(d) { return d.idnumber > 198211 && d.idnumber < 199007; });
 	var data1990s = data.filter(function(d) { return d.idnumber > 199205 && d.idnumber < 200103; });
 	var data2000s = data.filter(function(d) { return d.idnumber > 200306 && d.idnumber < 200712; });
 	var dataCurrent = data.filter(function(d) { return d.idnumber > 200909; });

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

 	function highlight() {
 		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 fade() {
 		d3.selectAll("#slides")
 			.transition()
 			.duration(500)
 			.style("opacity", 0)
 			.transition()
 			.delay(500)
 			.duration(500)
 			.style("opacity", 1);

 		d3.select("#buttons")
 			.transition()
 			.delay(500)
 			.style("opacity", 0)
 			.style("display", "none")
 			.transition()
 			.delay(delay)
 			.duration(500)
 			.style("opacity", 1)
 			.style("display", "block");

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

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

 	}

 	x.domain([d3.min(dataCurrent,function (d) { return 0.99*d.lfpr}),d3.max(dataCurrent,function (d) { return 1.01*d.lfpr})]);
 	y1.domain([d3.min(dataCurrent,function (d) { return 0.90*d.unemprate}),d3.max(dataCurrent,function (d) { return 1.1*d.unemprate})]);

 	svg.append("g")
 		.attr("class", "x axis")
 		.attr("transform", "translate(0," + height + ")")
 		.call(xAxis)
 			.append("text")
 			.attr("dy", "2.8em")
 			.attr("dx", width/1.5)
 			.style("text-anchor","end")
 			.attr("class", "xlabel")
 			.text("Labour force participation rate, %");

 	svg.append("g")
 		.attr("class", "left axis")
 		.call(yAxisLeft);

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

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

 	currentgroup.append("circle")
 		.attr("class", function(d) { return "dot" + [d.expansion]; })
 		.attr("id", function(d) { return "dot" + [d.idnumber]; })
 		.attr("r", 3.5)
 		.attr("cx", function(d) { return x(d.lfpr); })
 		.attr("cy", function(d) { return y1(d.unemprate); })
 		.style("opacity", 1);

 	svg.append("path")
 		.datum(dataCurrent)
 		.attr("class", "regLine")
 		.attr("id", "lineCurrent")
 		.attr("d", line)
 		.style("opacity", 1);

 	d3.selectAll("#dot200910")
 		.style("stroke", "#ff0000");

 	d3.select("#dot201408")
 		.style("stroke", "#ff0000");

 	d3.select("#currentgroup200910").append("text")
 		.attr("x", function(d) { return x(d.lfpr) + 3; })
 		.attr("y", function(d) { return y1(d.unemprate) - 7; })
 		.text("Start of recovery")
 		.attr("class", "currentlabel")
 		.style("opacity", 1);

 	d3.select("#currentgroup201408").append("text")
 		.attr("x", function(d) { return x(d.lfpr) + 8; })
 		.attr("y", function(d) { return y1(d.unemprate) + 15; })
 		.text("Today")
 		.attr("class", "currentlabel")
 		.style("opacity", 1);

 	svg.append("text")
 		.attr("id", "yearmonth")
 		.attr("dy", height-20)
 		.attr("dx", width/2-20);


 	function linechart() {

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

 		slideout = ".slideintro";
 		slidein = ".slideone";
 		delay = 9000;
 		fade();

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

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

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

 		d3.selectAll("circle")
 			.transition()
 			.duration(250)
 			.style("opacity", 0)
 			.remove();

 		d3.select("#legend")
 			.transition()
 			.duration(250)
 			.style("opacity", 0)
 			.remove();

 		d3.selectAll(".currentlabel")
 			.transition()
 			.duration(250)
 			.style("opacity", 0)
 			.remove();

 		d3.select("#lineCurrent")
 			.transition()
 			.duration(250)
 			.style("opacity", 0)
 			.remove();

 		d3.select(".left.label")
 			.transition()
 			.duration(250)
 			.attr("x", -margin.left + 10)
 			.attr("y", 0);

 		svg.append("text")
 			.attr("class", "right label")
 			.text("Labour force participation rate, %")
 			.attr("x", width-160)
 			.attr("y", 0)
 			.style("opacity", 0);

 		d3.select(".xlabel")
 			.transition()
 			.duration(250)
 			.style("opacity", 0);

 		x = d3.time.scale()
 			.range([0, width])
 			.domain([parseDate("200001"),parseDate("201512")]);

 		y0 = d3.scale.linear()
 			.range([height, 0])
 			.domain([d3.min(startData,function (d) { return 0.9792*d.lfpr}),d3.max(startData,function (d) { return 1.0245*d.lfpr})]);

 		y1 = d3.scale.linear()
 			.range([height, 0])
 			.domain([d3.min(startData,function (d) { return 0.90*d.unemprate}),d3.max(startData,function (d) { return 1.1*d.unemprate})]);

 		xAxis = d3.svg.axis()
 			.scale(x)
 			.orient("bottom");

 		yAxisLeft = d3.svg.axis()
 			.scale(y1)
 			.orient("left")
 			.tickFormat(numberFormat)
 			.tickSize(-width);

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

 		d3.select(".x.axis")
 			.attr("transform", "translate(0," + height + ")")
 			.transition()
 			.duration(250)
 			.call(xAxis);

 		d3.select(".left.axis")
 			.transition()
 			.duration(250)
 			.call(yAxisLeft);

 		svg.append("g")
 			.attr("class", "right axis")
 			.style("fill", "#772210")
 			.call(yAxisRight)
 			.style("opacity", 0);

 		svg.append("rect")
 			.attr("x", x(parseDate("200104")))
 			.attr("y", 0)
 			.attr("width", 19)
 			.attr("height", height-1)
 			.attr("fill", "#eee")
 			.style("opacity", 0);

 		svg.append("rect")
 			.attr("x", x(parseDate("200801")))
 			.attr("y", 0)
 			.attr("width", 43)
 			.attr("height", height-1)
 			.attr("fill", "#eee")
 			.style("opacity", 0);

 		svg.append("path")
 			.attr("class", "lfprLine");

 		svg.append("path")
 			.attr("class", "unempLine");

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

 		group.append("circle")
 			.attr("class", "unempCircle")
 			.attr("transform", function(d) { return "translate(" + x(d.dateid) + "," + y1(d.unemprate) + ")"; } )
 			.attr("r", 4)
 			.attr("id", function(d) { return "unempCircle" + [d.idnumber]; });

 		d3.select("#group201408").append("text")
 			.attr("x", function(d) { return x(d.dateid) + 10; })
 			.attr("y", function(d) { return y1(d.unemprate) + 5; })
 			.attr("id", function(d) { return "unempSlide" + [d.idnumber]; })
 			.text(function(d) { return numberFormatDetailed([d.unemprate]); })
 			.style("fill", "#00a1ce");

 		group.append("circle")
 			.attr("class", "lfprCircle")
 			.attr("transform", function(d) { return "translate(" + x(d.dateid) + "," + y0(d.lfpr) + ")"; } )
 			.attr("r", 4)
 			.attr("id", function(d) { return "lfprCircle" + [d.idnumber]; });

 		d3.select("#group201408").append("text")
 			.attr("x", function(d) { return x(d.dateid) + 10; })
 			.attr("y", function(d) { return y0(d.lfpr) + 5; })
 			.attr("id", function(d) { return "lfprSlide" + [d.idnumber]; })
 			.text(function(d) { return numberFormatDetailed([d.lfpr]); })
 			.style("fill", "#772210");

 	}


 	function unemployment() {
 		d3.selectAll("rect")
 			.transition()
 			.duration(250)
 			.style("opacity", 1);
 		d3.select(".unempLine")
 			.datum(startData)
 			.attr("d", unempLine)
 			.transition()
 			.duration(2500)
 			.ease("linear")
 			.attrTween("stroke-dasharray", animateLine)
 			.each("end", function() {
 				marker = "#unempCircle201408";
 				highlight(marker);
 				d3.select("#unempSlide201408")
 					.transition()
 					.duration(500)
 					.style("opacity", 1);
 			});
 		d3.timer.flush();
 	}


 	function lfpr() {

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

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

 		d3.selectAll(".left.axis text")
 			.transition()
 			.duration(500)
 			.style("fill", "#00a1ce");

 		d3.select(".left.label")
 			.transition()
 			.duration(500)
 			.style("fill", "#00a1ce");

 		d3.select(".lfprLine")
 			.datum(startData)
 			.attr("d", lfprLine)
 			.transition()
 			.duration(2500)
 			.ease("linear")
 			.attrTween("stroke-dasharray", animateLine)
 			.each("end", function() {
 				marker = "#lfprCircle201408";
 				highlight(marker);
 				d3.select("#lfprSlide201408")
 					.transition()
 					.duration(500)
 					.style("opacity", 1);
 			});
 		d3.timer.flush();
 	}


 	function scatter() {

 		slideout = ".slideone";
 		slidein = ".slidetwo";
 		delay = 8000;
 		fade();

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

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

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

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

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

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

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

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

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

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

 		d3.selectAll(".left.axis text")
 			.transition()
 			.duration(500)
 			.style("fill", "#4a4a4a");

 		d3.select(".left.label")
 			.transition()
 			.duration(500)
 			.attr("x", -margin.left + 5)
 			.style("fill", "#4a4a4a");

 		d3.select(".xlabel")
 			.transition()
 			.duration(250)
 			.style("opacity", 1);

 		svg.append("path")
 			.datum(data1970s)
 			.attr("class", "regLine")
 			.attr("id", "line1970s")
 			.attr("d", regLine);

 		svg.append("path")
 			.datum(data1980s)
 			.attr("class", "regLine")
 			.attr("id", "line1980s")
 			.attr("d", regLine);

 		svg.append("path")
 			.datum(data1990s)
 			.attr("class", "regLine")
 			.attr("id", "line1990s")
 			.attr("d", regLine);

 		svg.append("path")
 			.datum(data2000s)
 			.attr("class", "regLine")
 			.attr("id", "line2000s")
 			.attr("d", regLine2000s);

 		svg.append("path")
 			.datum(dataCurrent)
 			.attr("class", "regLine")
 			.attr("id", "lineCurrent")
 			.attr("d", regLine);

 	}


 	function changeView1970s() {

 		x = d3.scale.linear()
 			.range([0, width])
 			.domain([d3.min(data1970s,function (d) { return 0.99*d.lfpr}),d3.max(data1970s,function (d) { return 1.01*d.lfpr})]);

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

 		xAxis = d3.svg.axis()
 			.scale(x)
 			.orient("bottom")
 			.tickFormat(numberFormatDetailed);

 		yAxisLeft = d3.svg.axis()
 			.scale(y1)
 			.orient("left")
 			.tickFormat(numberFormatDetailed)
 			.tickSize(-width);

 		regLine = d3.svg.line()
 			.x(function(d) { return x(d.lfpr); })
 			.y(function(d) { return y1(d.fitted); });

 		d3.select(".x.axis")
 			.attr("transform", "translate(0," + height + ")")
 			.transition()
 			.duration(250)
 			.call(xAxis);

 		d3.select(".left.axis")
 			.transition()
 			.duration(250)
 			.call(yAxisLeft);

 		d3.selectAll(".left.axis text")
 			.transition()
 			.duration(250)
 			.style("fill", "#4a4a4a");

 		svg.selectAll(".dot1970s")
 			.data(data1970s)
 			.enter().append("circle")
 			.attr("class", function(d) { return "dot" + [d.expansion]; })
 			.attr("id", function(d) { return "dot" + [d.idnumber]; })
 			.attr("r", 3.5)
 			.attr("cx", function(d) { return x(d.lfpr); })
 			.attr("cy", function(d) { return y1(d.unemprate); });

 		d3.selectAll(".regLine")
 			.transition()
 			.duration(250)
 			.attr("d", regLine);

 	}


 	function showDots1970s() {
 		d3.select("#dot" + dateid)
 			.transition()
 			.duration(250)
 			.style("opacity", 1);

 		d3.select("#yearmonth")
 			.text(formatDate(parseDate(dateid)))
 			.attr("value", dateid)
 			.style("opacity", 1);

 		month = month + 1;
 		if (month==13) {
 			year = year + 1;
 			month = 1;
 		};
 		dateid = year + twodigits(month);
 		duration = duration - 5;

 		if (dateid==197701) {
 			formatDate = d3.time.format("%Y");
 		};

 		if (dateid==198001) {
 			d3.select("#line1970s")
 				.transition()
 				.delay(500)
 				.duration(500)
 				.style("opacity", 1);

 			d3.select("#yearmonth")
 				.transition()
 				.delay(750)
 				.duration(500)
 				.style("opacity", 0)
 				.transition()
 				.duration(0)
 				.text("1976-1979")
 				.transition()
 				.duration(500)
 				.style("opacity", 1);

 		} else {
 		setTimeout(showDots1970s, duration);
 		};
 	}


 	function changeView1980s() {

 		slideout = ".slidetwo";
 		slidein = ".slidethree";
 		delay = 6500;
 		fade();

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

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

 		d3.select(".left.label")
 			.transition()
 			.duration(250)
 			.attr("x", -margin.left + 10)
 			.attr("y", 0);

 		d3.select("#line1970s")
 			.transition()
 			.duration(250)
 			.style("opacity", 0);

 		d3.selectAll(".dot1970s")
 			.transition()
 			.duration(250)
 			.style("opacity", 0);


 		x = d3.scale.linear()
 			.range([0, width])
 			.domain([d3.min(data1980s,function (d) { return 0.99*d.lfpr}),d3.max(data1980s,function (d) { return 1.01*d.lfpr})]);

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

 		xAxis = d3.svg.axis()
 			.scale(x)
 			.orient("bottom")
 			.tickFormat(numberFormatDetailed);

 		yAxisLeft = d3.svg.axis()
 			.scale(y1)
 			.orient("left")
 			.tickFormat(numberFormat)
 			.tickSize(-width);

 		regLine = d3.svg.line()
 			.x(function(d) { return x(d.lfpr); })
 			.y(function(d) { return y1(d.fitted); });

 		d3.select(".x.axis")
 			.attr("transform", "translate(0," + height + ")")
 			.transition()
 			.duration(250)
 			.call(xAxis);

 		d3.select(".left.axis")
 			.transition()
 			.duration(250)
 			.call(yAxisLeft);

 		d3.selectAll(".left.axis text")
 			.transition()
 			.duration(250)
 			.style("fill", "#4a4a4a");

 		svg.selectAll(".dot1980s")
 			.data(data1980s)
 			.enter().append("circle")
 			.attr("class", function(d) { return "dot" + [d.expansion]; })
 			.attr("id", function(d) { return "dot" + [d.idnumber]; })
 			.attr("r", 3.5)
 			.attr("cx", function(d) { return x(d.lfpr); })
 			.attr("cy", function(d) { return y1(d.unemprate); });

 		d3.selectAll("#line1980s")
 			.transition()
 			.duration(250)
 			.attr("d", regLine);

 	}


 	function showDots1980s() {
 		d3.select("#dot" + dateid)
 			.transition()
 			.duration(250)
 			.style("opacity", 1);

 		d3.select("#yearmonth")
 			.text(formatDate(parseDate(dateid)))
 			.attr("value", dateid);

 		month = month + 1;
 		if (month==13) {
 			year = year + 1;
 			month = 1;
 		}
 		dateid = year + twodigits(month);

 		if (dateid==199007) {
 			d3.select("#line1980s")
 				.transition()
 				.delay(500)
 				.duration(500)
 				.style("opacity", 1);

 			d3.select("#yearmonth")
 				.transition()
 				.delay(750)
 				.duration(500)
 				.style("opacity", 0)
 				.transition()
 				.duration(0)
 				.text("1982-1990")
 				.transition()
 				.duration(500)
 				.style("opacity", 1);

 		} else {
 		setTimeout(showDots1980s, duration);
 		}
 	}


 	function changeView1990s() {

 		slideout = ".slidethree";
 		slidein = ".slidefour";
 		delay = 6500;
 		fade();

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

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

 		d3.select(".left.label")
 			.transition()
 			.duration(250)
 			.attr("x", -margin.left + 5)
 			.attr("y", 0);

 		d3.select("#line1980s")
 			.transition()
 			.duration(250)
 			.style("opacity", 0);

 		d3.selectAll(".dot1980s")
 			.transition()
 			.duration(250)
 			.style("opacity", 0);

 		x = d3.scale.linear()
 			.range([0, width])
 			.domain([d3.min(data1990s,function (d) { return 0.995*d.lfpr}),d3.max(data1990s,function (d) { return 1.005*d.lfpr})]);

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

 		xAxis = d3.svg.axis()
 			.scale(x)
 			.orient("bottom")
 			.ticks(5)
 			.tickFormat(numberFormatDetailed);

 		yAxisLeft = d3.svg.axis()
 			.scale(y1)
 			.orient("left")
 			.tickFormat(numberFormatDetailed)
 			.tickSize(-width);

 		regLine = d3.svg.line()
 			.x(function(d) { return x(d.lfpr); })
 			.y(function(d) { return y1(d.fitted); });

 		d3.select(".x.axis")
 			.attr("transform", "translate(0," + height + ")")
 			.transition()
 			.duration(250)
 			.call(xAxis);

 		d3.select(".left.axis")
 			.transition()
 			.duration(250)
 			.call(yAxisLeft);

 		d3.selectAll(".left.axis text")
 			.transition()
 			.duration(250)
 			.style("fill", "#4a4a4a");

 		svg.selectAll(".dot1990s")
 			.data(data1990s)
 			.enter().append("circle")
 			.attr("class", function(d) { return "dot" + [d.expansion]; })
 			.attr("id", function(d) { return "dot" + [d.idnumber]; })
 			.attr("r", 3.5)
 			.attr("cx", function(d) { return x(d.lfpr); })
 			.attr("cy", function(d) { return y1(d.unemprate); });

 		d3.selectAll("#line1990s")
 			.transition()
 			.duration(250)
 			.attr("d", regLine);


 	}


 	function showDots1990s() {
 		d3.select("#dot" + dateid)
 			.transition()
 			.duration(250)
 			.style("opacity", 1);

 		d3.select("#yearmonth")
 			.text(formatDate(parseDate(dateid)))
 			.attr("value", dateid);

 		month = month + 1;
 		if (month==13) {
 			year = year + 1;
 			month = 1;
 		}
 		dateid = year + twodigits(month);

 		if (dateid==200103) {
 			d3.select("#line1990s")
 				.transition()
 				.delay(500)
 				.duration(500)
 				.style("opacity", 1);

 			d3.select("#yearmonth")
 				.transition()
 				.delay(750)
 				.duration(500)
 				.style("opacity", 0)
 				.transition()
 				.duration(0)
 				.text("1992-2001")
 				.transition()
 				.duration(500)
 				.style("opacity", 1);

 		} else {
 		setTimeout(showDots1990s, duration);
 		}
 	}


 	function changeView2000s() {

 		slideout = ".slidefour";
 		slidein = ".slidefive";
 		delay = 4500;
 		fade();

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

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

 		d3.select(".left.label")
 			.transition()
 			.duration(250)
 			.attr("x", -margin.left + 5)
 			.attr("y", 0);

 		d3.select("#line1990s")
 			.transition()
 			.duration(250)
 			.style("opacity", 0);

 		d3.selectAll(".dot1990s")
 			.transition()
 			.duration(250)
 			.style("opacity", 0);

 		x = d3.scale.linear()
 			.range([0, width])
 			.domain([d3.min(data2000s,function (d) { return 0.99*d.lfpr}),d3.max(data2000s,function (d) { return 1.01*d.lfpr})]);

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

 		xAxis = d3.svg.axis()
 			.scale(x)
 			.orient("bottom")
 			.ticks(5)
 			.tickFormat(numberFormatDetailed);

 		yAxisLeft = d3.svg.axis()
 			.scale(y1)
 			.orient("left")
 			.tickFormat(numberFormatDetailed)
 			.tickSize(-width);

 		regLine2000s = d3.svg.line()
 			.x(function(d) { return x(d.fitted); })
 			.y(function(d) { return y1(d.unemprate); });

 		d3.select(".x.axis")
 			.attr("transform", "translate(0," + height + ")")
 			.transition()
 			.duration(250)
 			.call(xAxis);

 		d3.select(".left.axis")
 			.transition()
 			.duration(250)
 			.call(yAxisLeft);

 		d3.selectAll(".left.axis text")
 			.transition()
 			.duration(250)
 			.style("fill", "#4a4a4a");

 		svg.selectAll(".dot2000s")
 			.data(data2000s)
 			.enter().append("circle")
 			.attr("class", function(d) { return "dot" + [d.expansion]; })
 			.attr("id", function(d) { return "dot" + [d.idnumber]; })
 			.attr("r", 3.5)
 			.attr("cx", function(d) { return x(d.lfpr); })
 			.attr("cy", function(d) { return y1(d.unemprate); });

 		d3.selectAll("#line2000s")
 			.transition()
 			.duration(250)
 			.attr("d", regLine2000s);

 	}


 	function showDots2000s() {
 		d3.select("#dot" + dateid)
 			.transition()
 			.duration(250)
 			.style("opacity", 1);

 		d3.select("#yearmonth")
 			.text(formatDate(parseDate(dateid)))
 			.attr("value", dateid);

 		month = month + 1;
 		if (month==13) {
 			year = year + 1;
 			month = 1;
 		}
 		dateid = year + twodigits(month);

 		if (dateid==200712) {
 			d3.select("#line2000s")
 				.transition()
 				.delay(500)
 				.duration(500)
 				.style("opacity", 1);

 			d3.select("#yearmonth")
 				.transition()
 				.delay(750)
 				.duration(500)
 				.style("opacity", 0)
 				.transition()
 				.duration(0)
 				.text("2003-2007")
 				.transition()
 				.duration(500)
 				.style("opacity", 1);

 		} else {
 		setTimeout(showDots2000s, duration);
 		}
 	}


 	function changeViewCurrent() {

 		slideout = ".slidefive";
 		slidein = ".slidesix";
 		delay = 5000;
 		fade();

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

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

 		d3.select(".left.label")
 			.transition()
 			.duration(250)
 			.attr("x", -margin.left)
 			.attr("y", 0);

 		d3.select("#line2000s")
 			.transition()
 			.duration(250)
 			.style("opacity", 0);

 		d3.selectAll(".dot2000s")
 			.transition()
 			.duration(250)
 			.style("opacity", 0);

 		x = d3.scale.linear()
 			.range([0, width])
 			.domain([d3.min(dataCurrent,function (d) { return 0.99*d.lfpr}),d3.max(dataCurrent,function (d) { return 1.01*d.lfpr})]);

 		y1 = d3.scale.linear()
 			.range([height, 0])
 			.domain([d3.min(dataCurrent,function (d) { return 0.9*d.unemprate}),d3.max(dataCurrent,function (d) { return 1.1*d.unemprate})]);

 		xAxis = d3.svg.axis()
 			.scale(x)
 			.orient("bottom")
 			.tickFormat(numberFormatDetailed);

 		yAxisLeft = d3.svg.axis()
 			.scale(y1)
 			.orient("left")
 			.tickFormat(numberFormatDetailed)
 			.tickSize(-width);

 		regLine = d3.svg.line()
 			.x(function(d) { return x(d.lfpr); })
 			.y(function(d) { return y1(d.fitted); });

 		d3.select(".x.axis")
 			.attr("transform", "translate(0," + height + ")")
 			.transition()
 			.duration(250)
 			.call(xAxis);

 		d3.select(".left.axis")
 			.transition()
 			.duration(250)
 			.call(yAxisLeft);

 		d3.selectAll(".left.axis text")
 			.transition()
 			.duration(250)
 			.style("fill", "#4a4a4a");

 		svg.selectAll(".dotcurrent")
 			.data(dataCurrent)
 			.enter().append("circle")
 			.attr("class", function(d) { return "dot" + [d.expansion]; })
 			.attr("id", function(d) { return "dot" + [d.idnumber]; })
 			.attr("r", 3.5)
 			.attr("cx", function(d) { return x(d.lfpr); })
 			.attr("cy", function(d) { return y1(d.unemprate); });

 		d3.selectAll("#lineCurrent")
 			.transition()
 			.duration(250)
 			.attr("d", regLine);


 	}


 	function showDotsCurrent() {
 		d3.select("#dot" + dateid)
 			.transition()
 			.duration(250)
 			.style("opacity", 1);

 		d3.select("#yearmonth")
 			.text(formatDate(parseDate(dateid)))
 			.attr("value", dateid);

 		month = month + 1;
 		if (month==13) {
 			year = year + 1;
 			month = 1;
 		}
 		dateid = year + twodigits(month);

 		if (dateid==201409) {
 			d3.select("#lineCurrent")
 				.transition()
 				.delay(500)
 				.duration(500)
 				.style("opacity", 1);

 			d3.select("#yearmonth")
 				.transition()
 				.delay(750)
 				.duration(500)
 				.style("opacity", 0)
 				.transition()
 				.duration(0)
 				.text("2009-present")
 				.transition()
 				.duration(500)
 				.style("opacity", 1);

 		} else {
 		setTimeout(showDotsCurrent, duration);
 		}
 	}


 	function changeViewAll() {

 		slideout = ".slidesix";
 		slidein = ".slideseven";
 		delay = 2000;
 		fade();

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

 		d3.select(".left.label")
 			.transition()
 			.duration(250)
 			.attr("x", -margin.left + 10)
 			.attr("y", 0);

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

 		d3.select("#lineCurrent")
 			.transition()
 			.duration(250)
 			.style("opacity", 0);

 		d3.selectAll(".dotcurrent")
 			.transition()
 			.duration(250)
 			.style("opacity", 0);

 		d3.select("#yearmonth")
 			.transition()
 			.duration(250)
 			.style("opacity", 0);

 		x = d3.scale.linear()
 			.range([0, width])
 			.domain([d3.min(data,function (d) { return 0.99*d.lfpr}),d3.max(data,function (d) { return 1.01*d.lfpr})]);

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

 		xAxis = d3.svg.axis()
 			.scale(x)
 			.orient("bottom")
 			.tickFormat(numberFormat);

 		yAxisLeft = d3.svg.axis()
 			.scale(y1)
 			.orient("left")
 			.tickFormat(numberFormat)
 			.tickSize(-width);

 		d3.select(".x.axis")
 			.attr("transform", "translate(0," + height + ")")
 			.transition()
 			.duration(250)
 			.call(xAxis);

 		d3.select(".left.axis")
 			.transition()
 			.duration(250)
 			.call(yAxisLeft);

 		d3.selectAll(".left.axis text")
 			.transition()
 			.duration(250)
 			.style("fill", "#4a4a4a");

 		setTimeout(function(){
 			d3.select("#next").html("Again<span class='fa fa-repeat'></span>");
 		}, 2000);

 	}


 	function showDotsAll() {
 		d3.selectAll(".dot1970s")
 			.attr("cx", function(d) { return x(d.lfpr); })
 			.attr("cy", function(d) { return y1(d.unemprate); });

 		d3.selectAll(".dot1980s")
 			.attr("cx", function(d) { return x(d.lfpr); })
 			.attr("cy", function(d) { return y1(d.unemprate); });

 		d3.selectAll(".dot1990s")
 			.attr("cx", function(d) { return x(d.lfpr); })
 			.attr("cy", function(d) { return y1(d.unemprate); });

 		d3.selectAll(".dot2000s")
 			.attr("cx", function(d) { return x(d.lfpr); })
 			.attr("cy", function(d) { return y1(d.unemprate); });

 		d3.selectAll(".dotcurrent")
 			.attr("cx", function(d) { return x(d.lfpr); })
 			.attr("cy", function(d) { return y1(d.unemprate); });

 		var legend = svg.append("g")
 			.attr("id", "legend")
 			.attr("transform", "translate(212,0)");

 		var legenditem = legend.selectAll(".legenditem")
 			.data(d3.range(5))
 			.enter()
 			.append("g")
 				.attr("class", "legenditem")
 				.attr("transform", function(d, i) { return "translate(" + i * 50 + ",0)"; });

 		legenditem.append("circle")
 			.attr("cx", 5)
 			.attr("cy", 0)
 			.attr("r", 4)
 			.attr("class", "legendbullet")
 			.style("stroke", function(d, i) { return legendColors[i]; });

 		legenditem.append("text")
 			.attr("x", 12)
 			.attr("y", 5)
 			.text(function(d, i) { return legendText[i]; });

 		d3.selectAll("circle")
 			.transition()
 			.duration(500)
 			.style("opacity", 1);

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


 	}


 });

 d3.select(self.frameElement).style("height", "590px");
diff --git a/data.csv b/data.csv
diff --git a/index.html b/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;
 }

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

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

 #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 15px 0px;
  color: #4a4a4a;
  font-weight: normal;
  line-height: 1.5rem;
 }

 p.body {
  padding: 15px 0px 15px 0px;
 }

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

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

 #yearmonth {
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #4a4a4a;
  font-weight: bold;
 }

 g.y.axis path.domain {
  stroke-width: 0px;
 }

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

 .axis path, .axis line {
  fill: none;
  shape-rendering: crispEdges;
  border-width: 2px;
 }

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

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

 #buttons {
  margin: 0px;
  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;
 }

 .regLine {
  fill: none;
  stroke: #00a1ce;
  stroke-width: 2.5;
  opacity: 0;
 }

 .unempLine {
  fill: none;
  stroke: #00a1ce;
  stroke-width: 3px;
 }

 .lfprLine {
  fill: none;
  stroke: #772210;
  stroke-width: 3px;
 }

 .unempCircle {
  stroke: #00a1ce;
  stroke-width: 3px;
  fill: #fff;
  opacity: 0;
 }

 .lfprCircle {
  stroke: #772210;
  stroke-width: 3px;
  fill: #fff;
  opacity: 0;
 }

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

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

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

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

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

 g.group text {
  opacity: 0;
 }

 .dot1970s, .dot1980s, .dot1990s, .dot2000s, .dotcurrent {
  fill: #fff;
  stroke: #00a1ce;
  stroke-width: 2.5;
  opacity: 0;
 }

 .dot1970s, #line1970s {
  stroke: #648d9e;
 }

 .dot1980s, #line1980s {
  stroke: #00485d;
 }

 .dot1990s, #line1990s {
  stroke: #772210;
 }

 .dot2000s, #line2000s {
  stroke: #a5a6a7;
 }

 .dotcurrent, #lineCurrent {
  stroke: #00a1ce;
 }

 .currentlabel {
  font-family: Arial, sans-serif;
  font-size: 12px;
  color: #4a4a4a;
  font-weight: bold;
 }

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

 .legendbullet {
  fill: #fff;
  stroke-width: 3;
 }

 #legend text {
  font-family: Arial, sans-serif;
  font-size: 12px;
  color: #4a4a4a;
 }

 #again {
  position: absolute;
  margin: 20px 0px 0px 449px;
  background:#f4f4f4;
  color: #747474;
  font-weight: normal;
  opacity: 0;
 }

 #again:hover {
  background:#f4f4f4;
  color: #4a4a4a;
  cursor: pointer;
 }

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

 .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.darkred {
  color: #772210;
  font-weight: bold;
 }

 </style>

 </head>

 <body>

 <div id="content">

 	<div id="header">
 		<div id="block"></div>
 		<h1>Unemployment and labour force participation</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" 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" id="dotseven">&bull;</span>
 		</div>

 		<div id="slides">
 			<div id="text">
 				<p class="slideintro">The American economic recovery is underway, and employment has improved. But this is not pulling workers back into the labour market.</p>
 				<p class="slideone">Since the height of the Great Recession in 2009, America's <span class="lightblue">unemployment rate</span> has fallen from 10% to 6.1%.</p>
 				<p class="slideone">During this period, the <span class="darkred">labour force participation rate</span> -- the share of the population 16 and over that is either working or looking for work -- has fallen to 62.8 percent, a 36-year low.</p>
 				<p class="slideone">This combination is unusual. In past recoveries, declining unemployment has led to rising, not falling, labour force participation.</p>
 				<p class="slidetwo">During the economic recovery of the late 1970s, as unemployment fell from 8% to 5.5%, the labour force participation increased from 61% to 64%.</p>
 				<p class="slidethree">During the 1980s recovery, it was the same story. As unemployment dropped from 11% to 5%, the labour force participation increased from 63.5% to 67%.</p>
 				<p class="slidefour">During the 1990s, as unemployment fell from 8% to 4%, labour force participation edged up from 66% to nearly 67.5%.</p>
 				<p class="slidefive">In the 2000s, as unemployment declined from 6.2% to 4.4%, the labour force participation remained steady at 66%.</p>
 				<p class="slidesix">The current recovery has been different. Though unemployment has fallen from 10% to 6.1%, labour force participation has not increased. In fact, it has declined to its lowest level since 1978.</p>
 				<p class="slidesix">This is controversial. Some economists say long-term structural factors, mainly aging, explain most of the recent drop in the labour force. Others argue that short-term, cyclical factors are mostly to blame: workers are sitting out the job hunt, waiting for better opportunities.</p>
 				<p class="slideseven">This debate will shape the Federal Reserve's monetary policy decisions in the coming months.</p>
 				<p class="slideseven">If the decline in labour force participation is mostly structural, then the unemployment rate is a reasonable measure of the remaining slack in the labour market, and the Fed will have to move relatively soon to raise interest rates to prevent the economy from overheating. But if there is a cyclical component to the depressed level of participation, then there is more slack than the unemployment rate suggests and the Fed can take its time about tightening.</p>
 				<p class="slideseven">For now, though, the post-crisis economy looks unique: there are more people back at work -- and more people out of work too.</p>
 			</div>

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

 		<div class="button" id="again" value="start">Again<span class='fa fa-repeat'></span></div>

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

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

 	</div>

 	<p class="body">AMERICA has experienced a puzzling decline in the proportion of people either working or looking for work. Historically the &ldquo;labour force participation rate&rdquo; fell during recessions as some of the unemployed gave up looking for work, and rose amid recoveries as discouraged workers returned.</p>
 	<p>Not this time. The recovery is now five years old, yet the participation rate continues to drop, currently 62.8% from 66% in 2007. Cyclical factors may be at play: the slow recovery has driven an inordinate number of people out of the work force (or into part time work); they may return as the economy improves. Yet the aging population means a growing portion of people have retired, and are not coming back.</p>
 	<p>The relative contribution of these two factors is crucial to the Federal Reserve. If cyclical factors are significant, then the unemployment rate understates slack in the labour market and the Fed can take its time about raising interest rates. If structural factors predominate, then the unemployment rate, at 6.1%, is a fair reading of slack and the Fed may need to move soon.</p>
 	<p>On September 17th Janet Yellen, the Fed chairman, suggested that she held the former view. &ldquo;There is,&rdquo; she said, &ldquo;a meaningful cyclical shortfall.&rdquo; But that may not last if both unemployment and participation continue to slip.</p>

 </div>

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

 </body>
 </html>
diff --git a/thumbnail.png b/thumbnail.png
	<!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;
	}

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

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

	#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 15px 0px;
	color: #4a4a4a;
	font-weight: normal;
	line-height: 1.5rem;
	}

	p.body {
	padding: 15px 0px 15px 0px;
	}

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

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

	#yearmonth {
	font-family: Arial, sans-serif;
	font-size: 14px;
	color: #4a4a4a;
	font-weight: bold;
	}

	g.y.axis path.domain {
	stroke-width: 0px;
	}

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

	.axis path, .axis line {
	fill: none;
	shape-rendering: crispEdges;
	border-width: 2px;
	}

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

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

	#buttons {
	margin: 0px;
	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;
	}

	.regLine {
	fill: none;
	stroke: #00a1ce;
	stroke-width: 2.5;
	opacity: 0;
	}

	.unempLine {
	fill: none;
	stroke: #00a1ce;
	stroke-width: 3px;
	}

	.lfprLine {
	fill: none;
	stroke: #772210;
	stroke-width: 3px;
	}

	.unempCircle {
	stroke: #00a1ce;
	stroke-width: 3px;
	fill: #fff;
	opacity: 0;
	}

	.lfprCircle {
	stroke: #772210;
	stroke-width: 3px;
	fill: #fff;
	opacity: 0;
	}

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

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

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

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

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

	g.group text {
	opacity: 0;
	}

	.dot1970s, .dot1980s, .dot1990s, .dot2000s, .dotcurrent {
	fill: #fff;
	stroke: #00a1ce;
	stroke-width: 2.5;
	opacity: 0;
	}

	.dot1970s, #line1970s {
	stroke: #648d9e;
	}

	.dot1980s, #line1980s {
	stroke: #00485d;
	}

	.dot1990s, #line1990s {
	stroke: #772210;
	}

	.dot2000s, #line2000s {
	stroke: #a5a6a7;
	}

	.dotcurrent, #lineCurrent {
	stroke: #00a1ce;
	}

	.currentlabel {
	font-family: Arial, sans-serif;
	font-size: 12px;
	color: #4a4a4a;
	font-weight: bold;
	}

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

	.legendbullet {
	fill: #fff;
	stroke-width: 3;
	}

	#legend text {
	font-family: Arial, sans-serif;
	font-size: 12px;
	color: #4a4a4a;
	}

	#again {
	position: absolute;
	margin: 20px 0px 0px 449px;
	background:#f4f4f4;
	color: #747474;
	font-weight: normal;
	opacity: 0;
	}

	#again:hover {
	background:#f4f4f4;
	color: #4a4a4a;
	cursor: pointer;
	}

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

	.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.darkred {
	color: #772210;
	font-weight: bold;
	}

	</style>

	</head>

	<body>

	<div id="content">

	<div id="header">
	<div id="block"></div>
	<h1>Unemployment and labour force participation</h1>
	</div>

	<div id="container">

	<div id="progress">
	<span class="dot" id="dotone">•</span>
	<span class="dot" id="dottwo">•</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" id="dotseven">•</span>
	</div>

	<div id="slides">
	<div id="text">
	<p class="slideintro">The American economic recovery is underway, and employment has improved. But this is not pulling workers back into the labour market.</p>
	<p class="slideone">Since the height of the Great Recession in 2009, America's <span class="lightblue">unemployment rate</span> has fallen from 10% to 6.1%.</p>
	<p class="slideone">During this period, the <span class="darkred">labour force participation rate</span> -- the share of the population 16 and over that is either working or looking for work -- has fallen to 62.8 percent, a 36-year low.</p>
	<p class="slideone">This combination is unusual. In past recoveries, declining unemployment has led to rising, not falling, labour force participation.</p>
	<p class="slidetwo">During the economic recovery of the late 1970s, as unemployment fell from 8% to 5.5%, the labour force participation increased from 61% to 64%.</p>
	<p class="slidethree">During the 1980s recovery, it was the same story. As unemployment dropped from 11% to 5%, the labour force participation increased from 63.5% to 67%.</p>
	<p class="slidefour">During the 1990s, as unemployment fell from 8% to 4%, labour force participation edged up from 66% to nearly 67.5%.</p>
	<p class="slidefive">In the 2000s, as unemployment declined from 6.2% to 4.4%, the labour force participation remained steady at 66%.</p>
	<p class="slidesix">The current recovery has been different. Though unemployment has fallen from 10% to 6.1%, labour force participation has not increased. In fact, it has declined to its lowest level since 1978.</p>
	<p class="slidesix">This is controversial. Some economists say long-term structural factors, mainly aging, explain most of the recent drop in the labour force. Others argue that short-term, cyclical factors are mostly to blame: workers are sitting out the job hunt, waiting for better opportunities.</p>
	<p class="slideseven">This debate will shape the Federal Reserve's monetary policy decisions in the coming months.</p>
	<p class="slideseven">If the decline in labour force participation is mostly structural, then the unemployment rate is a reasonable measure of the remaining slack in the labour market, and the Fed will have to move relatively soon to raise interest rates to prevent the economy from overheating. But if there is a cyclical component to the depressed level of participation, then there is more slack than the unemployment rate suggests and the Fed can take its time about tightening.</p>
	<p class="slideseven">For now, though, the post-crisis economy looks unique: there are more people back at work -- and more people out of work too.</p>
	</div>

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

	<div class="button" id="again" value="start">Again<span class='fa fa-repeat'></span></div>

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

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

	</div>

	<p class="body">AMERICA has experienced a puzzling decline in the proportion of people either working or looking for work. Historically the “labour force participation rate” fell during recessions as some of the unemployed gave up looking for work, and rose amid recoveries as discouraged workers returned.</p>
	<p>Not this time. The recovery is now five years old, yet the participation rate continues to drop, currently 62.8% from 66% in 2007. Cyclical factors may be at play: the slow recovery has driven an inordinate number of people out of the work force (or into part time work); they may return as the economy improves. Yet the aging population means a growing portion of people have retired, and are not coming back.</p>
	<p>The relative contribution of these two factors is crucial to the Federal Reserve. If cyclical factors are significant, then the unemployment rate understates slack in the labour market and the Fed can take its time about raising interest rates. If structural factors predominate, then the unemployment rate, at 6.1%, is a fair reading of slack and the Fed may need to move soon.</p>
	<p>On September 17th Janet Yellen, the Fed chairman, suggested that she held the former view. “There is,” she said, “a meaningful cyclical shortfall.” But that may not last if both unemployment and participation continue to slip.</p>

	</div>

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

	</body>
	</html>