dougdowson · August 29, 2015 14:02
diff --git a/chart.js b/chart.js
 var margin = {top: 15, right: 30, bottom: 20, left: 0},
 	width = 575 - margin.left - margin.right,
 	height = 400 - margin.top - margin.bottom;

 var parseDate = d3.time.format("%m-%d-%Y").parse;

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

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

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

 var yAxis = d3.svg.axis()
 	.scale(y)
 	.orient("right")
 	.tickSize(width);

 var slideValue;
 var marker;

 d3.csv("data.csv", function(error, data) {
 	data.forEach(function(d) {
 		d.date = parseDate(d.date);
 		d.rate = +d.rate;
 		d.idnumber = +d.idnumber;
 	});

 var startData = data.filter(function(d) { return d.idnumber < 20140712; });

 var staticDataOne = data.filter(function(d) { return d.idnumber < 20070101; });
 var staticDataTwo = data.filter(function(d) { return d.idnumber < 20080804; });
 var staticDataThree = data.filter(function(d) { return d.idnumber < 20081206; });
 var staticDataFour = data.filter(function(d) { return d.idnumber < 20101028; });
 var staticDataFive = data.filter(function(d) { return d.idnumber < 20110727; });
 var staticDataSix = data.filter(function(d) { return d.idnumber < 20120524; });
 var staticDataSeven = data.filter(function(d) { return d.idnumber < 20130823; });
 var staticDataEight = data.filter(function(d) { return d.idnumber < 20131017; });

 var animatedDataOne = data.filter(function(d) { return d.idnumber < 20080804; });
 var animatedDataTwo = data.filter(function(d) { return d.idnumber > 20080802 && d.idnumber < 20081206; });
 var animatedDataThree = data.filter(function(d) { return d.idnumber > 20081204 && d.idnumber < 20101028; });
 var animatedDataFour = data.filter(function(d) { return d.idnumber > 20101026 && d.idnumber < 20110727; });
 var animatedDataFive = data.filter(function(d) { return d.idnumber > 20110725 && d.idnumber < 20120524; });
 var animatedDataSix = data.filter(function(d) { return d.idnumber > 20120522 && d.idnumber < 20130823; });
 var animatedDataSeven = data.filter(function(d) { return d.idnumber > 20130821 && d.idnumber < 20131017; });
 var animatedDataEight = data.filter(function(d) { return d.idnumber > 20131015 && d.idnumber < 20140712; });

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

 var svg = d3.select("#chart").append("svg")
 	.datum(startData)
 	.attr("width", width + margin.left + margin.right)
 	.attr("height", height + margin.top + margin.bottom)
 	.append("g")
 		.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

 svg.append("text")
 	.attr("class", "right label")
 	.text("real/$")
 	.attr("x", width-11)
 	.attr("y", -5);

 x.domain([parseDate("1-1-2007"),parseDate("4-30-2015")]);
 y.domain([d3.min(data,function (d) { return 0.95*d.rate}),d3.max(data,function (d) { return 1.05*d.rate})]);

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

 d3.selectAll(".x.axis text")
 	.attr("dx", 34);

 d3.select(".x.axis text")
 	.text("2007");

 d3.selectAll(".x.axis").selectAll("text")
 	.attr("id", function(d,i) {return "xlabel" + i});

 d3.select("#xlabel8")
 	.style("display", "none")
 	.style("opacity", 0);

 svg.append("g")
 	.attr("class", "y axis")
 	.call(yAxis);

 var startPath = svg.append("path")
 	.datum(startData)
    .style("stroke", "#00a1ce")
    .attr("d", line)
    .attr("id", "startPath");

 var staticPath = svg.append("path")
 	.attr("class", "static");

 var animatedPath = svg.append("path")
 	.attr("class", "animated");


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

 var circles = group.append("circle")
 	.attr("class", "circle")
 	.attr("transform", function(d) { return "translate(" + x(d.date) + "," + y(d.rate) + ")"; } )
 	.attr("r", 3)
 	.attr("id", function(d) { return "circle" + [d.idnumber]; });

 var slides = group.append("text")
 	.attr("x", function(d) { return x(d.date) + 10; })
 	.attr("y", function(d) { return y(d.rate) + 5; })
 	.attr("id", function(d) { return "slide" + [d.idnumber]; });

 d3.select("#slide20080801").text("The run-up to")
 	.attr("x", function(d) { return x(d.date) - 100; })
 	.attr("y", function(d) { return y(d.rate) + 2; });
 d3.select("#group20080801").append("text").text("the crisis")
 	.attr("x", function(d) { return x(d.date) - 100; })
 	.attr("y", function(d) { return y(d.rate) + 22; });

 d3.select("#slide20081205").text("The effect of the")
 	.attr("x", function(d) { return x(d.date) + 10; })
 	.attr("y", function(d) { return y(d.rate) + 0; });
 d3.select("#group20081205").append("text").text("financial crisis")
 	.attr("x", function(d) { return x(d.date) + 10; })
 	.attr("y", function(d) { return y(d.rate) + 20; });

 d3.select("#slide20101027").text('The "currency war"')
 	.attr("x", function(d) { return x(d.date) - 97; })
 	.attr("y", function(d) { return y(d.rate) - 27; });

 d3.select("#slide20110726").text("A 12-year high")
 	.attr("x", function(d) { return x(d.date) + 15; })
 	.attr("y", function(d) { return y(d.rate) + 5; });
 d3.select("#group20110726").append("text").text("for the real")
 	.attr("x", function(d) { return x(d.date) + 15; })
 	.attr("y", function(d) { return y(d.rate) + 25; });

 d3.select("#slide20120523").text("A period of")
 	.attr("x", function(d) { return x(d.date) - 85; })
 	.attr("y", function(d) { return y(d.rate) + 5; });
 d3.select("#group20120523").append("text").text("depreciation")
 	.attr("x", function(d) { return x(d.date) - 85; })
 	.attr("y", function(d) { return y(d.rate) + 25; });

 d3.select("#slide20130822").text("The dawn of tapering")
 	.attr("x", function(d) { return x(d.date) - 65; })
 	.attr("y", function(d) { return y(d.rate) + 25; });

 d3.select("#slide20131016").text("A different")
 	.attr("x", function(d) { return x(d.date) - 20; })
 	.attr("y", function(d) { return y(d.rate) - 35; });
 d3.select("#group20131016").append("text").text("currency war")
 	.attr("x", function(d) { return x(d.date) - 20; })
 	.attr("y", function(d) { return y(d.rate) - 15; });

 d3.select("#slide20140711").text("Gyrations")
 	.attr("x", function(d) { return x(d.date) - 10; })
 	.attr("y", function(d) { return y(d.rate) + 35; });
 d3.select("#group20140711").append("text").text("continue")
 	.attr("x", function(d) { return x(d.date) - 10; })
 	.attr("y", function(d) { return y(d.rate) + 55; });


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

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

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

 	if (slideValue=="start") {
 		d3.select("#startPath")
 			.transition()
 			.duration(500)
 			.style("opacity", 0);

 		d3.select(".static")
 			.style("opacity", 1);

 		d3.select(".animated")
 			.style("opacity", 1);

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

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

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

 		document.getElementById("next").setAttribute("value", "one");
 		document.getElementById("back").setAttribute("value", "one");
 		staticPath.datum(staticDataOne)
 			.attr("d", line);
 		animatedPath.datum(animatedDataOne)
 			.attr("d", line)
 			.call(transition);

 	} else if (slideValue=="one") {
 		d3.selectAll("#group20080801 text")
 			.transition()
 			.duration(500)
 			.style("opacity", 0.5);

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

 		document.getElementById("next").setAttribute("value", "two");
 		document.getElementById("back").setAttribute("value", "two");
 		staticPath.datum(staticDataTwo)
 			.attr("d", line);
 		animatedPath.datum(animatedDataTwo)
 			.attr("d", line)
 			.call(transition);

 	} else if (slideValue=="two") {
 		d3.selectAll("#group20081205 text")
 			.transition()
 			.duration(500)
 			.style("opacity", 0.5);

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

 		document.getElementById("next").setAttribute("value", "three");
 		document.getElementById("back").setAttribute("value", "three");
 		staticPath.datum(staticDataThree)
 			.attr("d", line);
 		animatedPath.datum(animatedDataThree)
 			.attr("d", line)
 			.call(transition);

 	} else if (slideValue=="three") {
 		d3.selectAll("#group20101027 text")
 			.transition()
 			.duration(500)
 			.style("opacity", 0.5);

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

 		document.getElementById("next").setAttribute("value", "four");
 		document.getElementById("back").setAttribute("value", "four");
 		staticPath.datum(staticDataFour)
 			.attr("d", line);
 		animatedPath.datum(animatedDataFour)
 			.attr("d", line)
 			.call(transition);

 	} else if (slideValue=="four") {
 		d3.selectAll("#group20110726 text")
 			.transition()
 			.duration(500)
 			.style("opacity", 0.5);

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

 		document.getElementById("next").setAttribute("value", "five");
 		document.getElementById("back").setAttribute("value", "five");
 		staticPath.datum(staticDataFive)
 			.attr("d", line);
 		animatedPath.datum(animatedDataFive)
 			.attr("d", line)
 			.call(transition);

 	} else if (slideValue=="five") {
 		d3.selectAll("#group20120523 text")
 			.transition()
 			.duration(500)
 			.style("opacity", 0.5);

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

 		document.getElementById("next").setAttribute("value", "six");
 		document.getElementById("back").setAttribute("value", "six");
 		staticPath.datum(staticDataSix)
 			.attr("d", line);
 		animatedPath.datum(animatedDataSix)
 			.attr("d", line)
 			.call(transition);

 	} else if (slideValue=="six") {
 		d3.selectAll("#group20130822 text")
 			.transition()
 			.duration(500)
 			.style("opacity", 0.5);

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

 		document.getElementById("next").setAttribute("value", "seven");
 		document.getElementById("back").setAttribute("value", "seven");
 		staticPath.datum(staticDataSeven)
 			.attr("d", line);
 		animatedPath.datum(animatedDataSeven)
 			.attr("d", line)
 			.call(transition);
 	} else if (slideValue=="seven") {
 		d3.selectAll("#group20131016 text")
 			.transition()
 			.duration(500)
 			.style("opacity", 0.5);

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

 		document.getElementById("next").setAttribute("value", "end");
 		document.getElementById("back").setAttribute("value", "end");
 		staticPath.datum(staticDataEight)
 			.attr("d", line);
 		animatedPath.datum(animatedDataEight)
 			.attr("d", line)
 			.call(transition);
 	} else if (slideValue=="end") {

 		d3.select(".static")
 			.style("opacity", 0);

 		d3.select("#startPath")
 			.style("opacity", 1);

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

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

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

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

 		d3.selectAll(".slideeight")
 			.transition()
 			.delay(500)
 			.style("display", "none");

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

 		document.getElementById("next").setAttribute("value", "start");
 		document.getElementById("back").setAttribute("value", "start");

 		setTimeout(function() {
 			d3.select("#buttons #next")
 				.html("Start<span class='fa fa-caret-right'></span>");
 			d3.select("#buttons #back")
 				.style("display", "none");
 		}, 500);

 	}
 });

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

 	if (slideValue=="one") {
 		d3.selectAll("#group20080801 text")
 			.style("opacity", 0);

 		d3.select("#circle20080801")
 			.style("opacity", 0);

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

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

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

 		d3.select("#buttons #back")
 			.style("display", "none");

 		document.getElementById("next").setAttribute("value", "start");
 		document.getElementById("back").setAttribute("value", "start");

 		d3.selectAll(".slideone")
 			.style("display", "none");

 		d3.selectAll(".slideintro")
 			.style("display", "block")
 			.style("opacity", 1);

 	} else if (slideValue=="two") {
 		d3.selectAll("#group20081205 text")
 			.style("opacity", 0);

 		d3.select("#circle20081205")
 			.style("opacity", 0);

 		d3.selectAll("#group20080801 text")
 			.transition()
 			.duration(750)
 			.style("opacity", 1);

 		marker = "#circle20080801";
 		highlight(marker);

 		document.getElementById("next").setAttribute("value", "one");
 		document.getElementById("back").setAttribute("value", "one");
 		staticPath.datum(staticDataTwo)
 			.attr("d", line);
 		animatedPath.datum(staticDataOne)
 			.attr("d", line);

 		d3.selectAll(".slidetwo")
 			.style("display", "none");

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

 	} else if (slideValue=="three") {
 		d3.selectAll("#group20101027 text")
 			.style("opacity", 0);

 		d3.select("#circle20101027")
 			.style("opacity", 0);

 		d3.selectAll("#group20081205 text")
 			.transition()
 			.duration(750)
 			.style("opacity", 1);

 		marker = "#circle20081205";
 		highlight(marker);

 		document.getElementById("next").setAttribute("value", "two");
 		document.getElementById("back").setAttribute("value", "two");
 		staticPath.datum(staticDataThree)
 			.attr("d", line);
 		animatedPath.datum(staticDataOne)
 			.attr("d", line);

 		d3.selectAll(".slidethree")
 			.style("display", "none");

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

 	} else if (slideValue=="four") {
 		d3.selectAll("#group20110726 text")
 			.style("opacity", 0);

 		d3.select("#circle20110726")
 			.style("opacity", 0);

 		d3.selectAll("#group20101027 text")
 			.transition()
 			.duration(750)
 			.style("opacity", 1);

 		marker = "#circle20101027";
 		highlight(marker);

 		document.getElementById("next").setAttribute("value", "three");
 		document.getElementById("back").setAttribute("value", "three");
 		staticPath.datum(staticDataFour)
 			.attr("d", line);
 		animatedPath.datum(staticDataOne)
 			.attr("d", line);

 		d3.selectAll(".slidefour")
 			.style("display", "none");

 		d3.selectAll(".slidethree")
 			.style("display", "block")
 			.style("opacity", 1);
 	} else if (slideValue=="five") {
 		d3.selectAll("#group20120523 text")
 			.style("opacity", 0);

 		d3.select("#circle20120523")
 			.style("opacity", 0);

 		d3.selectAll("#group20110726 text")
 			.transition()
 			.duration(750)
 			.style("opacity", 1);

 		marker = "#circle20110726";
 		highlight(marker);

 		document.getElementById("next").setAttribute("value", "four");
 		document.getElementById("back").setAttribute("value", "four");
 		staticPath.datum(staticDataFive)
 			.attr("d", line);
 		animatedPath.datum(staticDataOne)
 			.attr("d", line);

 		d3.selectAll(".slidefive")
 			.style("display", "none");

 		d3.selectAll(".slidefour")
 			.style("display", "block")
 			.style("opacity", 1);
 	} else if (slideValue=="six") {
 		d3.selectAll("#group20130822 text")
 			.style("opacity", 0);

 		d3.select("#circle20130822")
 			.style("opacity", 0);

 		d3.selectAll("#group20120523 text")
 			.transition()
 			.duration(750)
 			.style("opacity", 1);

 		marker = "#circle20120523";
 		highlight(marker);

 		document.getElementById("next").setAttribute("value", "five");
 		document.getElementById("back").setAttribute("value", "five");
 		staticPath.datum(staticDataSix)
 			.attr("d", line);
 		animatedPath.datum(staticDataOne)
 			.attr("d", line);

 		d3.selectAll(".slidesix")
 			.style("display", "none");

 		d3.selectAll(".slidefive")
 			.style("display", "block")
 			.style("opacity", 1);
 	} else if (slideValue=="seven") {
 		d3.selectAll("#group20131016 text")
 			.style("opacity", 0);

 		d3.select("#circle20131016")
 			.style("opacity", 0);

 		d3.selectAll("#group20130822 text")
 			.transition()
 			.duration(750)
 			.style("opacity", 1);

 		marker = "#circle20130822";
 		highlight(marker);

 		document.getElementById("next").setAttribute("value", "six");
 		document.getElementById("back").setAttribute("value", "six");
 		staticPath.datum(staticDataSeven)
 			.attr("d", line);
 		animatedPath.datum(staticDataOne)
 			.attr("d", line);

 		d3.selectAll(".slideseven")
 			.style("display", "none");

 		d3.selectAll(".slidesix")
 			.style("display", "block")
 			.style("opacity", 1);
 	} else if (slideValue=="end") {
 		d3.select("#buttons #next").text("Next");
 		d3.selectAll("#group20140711 text")
 			.style("opacity", 0);

 		d3.select("#circle20140711")
 			.style("opacity", 0);

 		d3.selectAll("#group20131016 text")
 			.transition()
 			.duration(750)
 			.style("opacity", 1);

 		marker = "#circle20131016";
 		highlight(marker);

 		document.getElementById("next").setAttribute("value", "seven");
 		document.getElementById("back").setAttribute("value", "seven");
 		staticPath.datum(staticDataEight)
 			.attr("d", line);
 		animatedPath.datum(staticDataOne)
 			.attr("d", line);

 		d3.selectAll(".slideeight")
 			.style("display", "none");

 		d3.selectAll(".slideseven")
 			.style("display", "block")
 			.style("opacity", 1);
 	}
 });

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

 function transition() {
 	d3.select(".animated")
 		.transition()
 		.duration(2500)
 		.ease("cubic-in-out")
 		.attrTween("stroke-dasharray", animateLine)
 		.each("end", function() {

 			if (slideValue=="start") {
 				d3.select("#buttons #next").html("Next<span class='fa fa-caret-right'></span>");
 				d3.select("#buttons #back").style("display", "inline-block");
 				marker = "#circle20080801";
 				highlight(marker);
 				d3.selectAll("#group20080801 text")
 					.transition()
 					.duration(750)
 					.style("opacity", 1);

 				d3.selectAll(".slideintro")
 					.style("display", "none");

 				d3.selectAll("#slides div")
 					.transition()
 					.duration(750)
 					.style("opacity", 1);

 				d3.selectAll(".slideone")
 					.transition()
 					.duration(750)
 					.style("display", "block")
 					.style("opacity", 1);

 			} else if (slideValue=="one") {
 				marker = "#circle20081205";
 				highlight(marker);
 				d3.selectAll("#group20081205 text")
 					.transition()
 					.duration(750)
 					.style("opacity", 1);

 				d3.selectAll(".slideone")
 					.style("display", "none");

 				d3.selectAll("#slides div")
 					.transition()
 					.duration(750)
 					.style("opacity", 1);

 				d3.selectAll(".slidetwo")
 					.transition()
 					.duration(750)
 					.style("display", "block")
 					.style("opacity", 1);

 			} else if (slideValue=="two") {
 				marker = "#circle20101027";
 				highlight(marker);
 				d3.selectAll("#group20101027 text")
 					.transition()
 					.duration(750)
 					.style("opacity", 1);
 				d3.selectAll(".slidetwo")
 					.style("display", "none");

 				d3.selectAll("#slides div")
 					.transition()
 					.duration(750)
 					.style("opacity", 1);

 				d3.selectAll(".slidethree")
 					.transition()
 					.duration(750)
 					.style("display", "block")
 					.style("opacity", 1);

 			} else if (slideValue=="three") {
 				marker = "#circle20110726";
 				highlight(marker);
 				d3.selectAll("#group20110726 text")
 					.transition()
 					.duration(750)
 					.style("opacity", 1);
 				d3.selectAll(".slidethree")
 					.style("display", "none");

 				d3.selectAll("#slides div")
 					.transition()
 					.duration(750)
 					.style("opacity", 1);

 				d3.selectAll(".slidefour")
 					.transition()
 					.duration(750)
 					.style("display", "block")
 					.style("opacity", 1);
 			} else if (slideValue=="four") {
 				marker = "#circle20120523";
 				highlight(marker);
 				d3.selectAll("#group20120523 text")
 					.transition()
 					.duration(750)
 					.style("opacity", 1);
 				d3.selectAll(".slidefour")
 					.style("display", "none");

 				d3.selectAll("#slides div")
 					.transition()
 					.duration(750)
 					.style("opacity", 1);

 				d3.selectAll(".slidefive")
 					.transition()
 					.duration(750)
 					.style("display", "block")
 					.style("opacity", 1);
 			} else if (slideValue=="five") {
 				marker = "#circle20130822";
 				highlight(marker);
 				d3.selectAll("#group20130822 text")
 					.transition()
 					.duration(750)
 					.style("opacity", 1);
 				d3.selectAll(".slidefive")
 					.style("display", "none");

 				d3.selectAll("#slides div")
 					.transition()
 					.duration(750)
 					.style("opacity", 1);

 				d3.selectAll(".slidesix")
 					.transition()
 					.duration(750)
 					.style("display", "block")
 					.style("opacity", 1);
 			} else if (slideValue=="six") {
 				marker = "#circle20131016";
 				highlight(marker);
 				d3.selectAll("#group20131016 text")
 					.transition()
 					.duration(750)
 					.style("opacity", 1);
 				d3.selectAll(".slidesix")
 					.style("display", "none");
 				d3.selectAll("#slides div")
 					.transition()
 					.duration(750)
 					.style("opacity", 1);

 				d3.selectAll(".slideseven")
 					.transition()
 					.duration(750)
 					.style("display", "block")
 					.style("opacity", 1);
 			} else if (slideValue=="seven") {
 				marker = "#circle20140711";
 				highlight(marker);
 				d3.select("#buttons #next").html("Again<span class='fa fa-repeat'></span>");
 				d3.selectAll("#group20140711 text")
 					.transition()
 					.duration(750)
 					.style("opacity", 1);
 				d3.selectAll(".slideseven")
 					.style("display", "none");
 				d3.selectAll("#slides div")
 					.transition()
 					.duration(750)
 					.style("opacity", 1);

 				d3.selectAll(".slideeight")
 					.transition()
 					.duration(750)
 					.style("display", "block")
 					.style("opacity", 1);
 			}
 		});
 		d3.timer.flush();
 }

 d3.select("#slides")
 	.style("display","inline");

 });

 d3.select(self.frameElement).style("height", "770px");
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: #333;
 }

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

 #container {
  padding: 0px 15px 15px 15px;
  border: 1px solid #ccc;
  height: 692px;
  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;
 }

 #unit {
  padding: 13px 0px 0px 0px;
 }

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

 .right.label {
  font-size: 13px;
  fill: #333;
 }

 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: 1px;
  shape-rendering: crispEdges;
 }

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

 .axis line {
  stroke: #eee;
 }

 .x.axis text, .y.axis text {
  color: #333;
  font-size: 13px;
 }

 path {
  fill: none;
  stroke: #00a1ce;
  stroke-width: 2.5px;
 }

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

 #buttons #back {
  display: none;
 }

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

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

 .group text {
  font-size: 14px;
  color: #333;
 }

 #slides {
  margin: 0px;
  padding: 0px;
  display: none;
 }

 #slides h1 {
  margin: 0px;
  padding: 15px 0px 5px 0px;
  font-family: Arial, sans-serif;
  font-size: 16px;
  color: #000;
  font-weight: bold;
 }

 #slides p {
  margin: 0px;
  padding: 0px 0px 13px 0px;
 }

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

 </style>

 </head>

 <body>

 <div id="content">
 	<div id="header">
 		<div id="block"></div>
 		<h1>A real bumpy ride</h1>
 	</div>
 <div id="container">
 <p id="unit"><strong>Brazilian real against the US$</strong></p>
 <p>inverted scale</p>

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

 <p id="source">Source: Federal Reserve Board</p>

 <div id="slides">
 	<div>
 	<h1 class="slideintro">The Brazilian real's bumpy ride</h1>
 	<p class="slideintro">Over the past 12 months the Brazilian real has fluctuated more than almost all other emerging-market currencies. Such volatility is nothing new. This &ldquo;action chart&rdquo; examines the currency's performance over the past seven years.</p>

 	<h1 class="slideone">The run-up to the crisis</h1>
 	<p class="slideone">In the years leading up to the global financial crisis Brazil enjoyed rapid growth, fuelled partly by Chinese demand for commodities. The country became an emerging-market darling, boasting healthy trade surpluses, little foreign debt and more than $200 billion in foreign-exchange reserves. As foreign capital poured in, the real appreciated rapidly.</p>

 	<h1 class="slidetwo">The effect of the financial crisis</h1>
 	<p class="slidetwo">The global financial crisis sent investors fleeing emerging markets to safer assets like US treasury bonds. Six months after Lehman Brothers failed in September 2008, foreign investors had pulled $23 billion out of Brazil's equity and bond markets. Currency traders scrambled to unwind &ldquo;carry trades&rdquo;, in which they had borrowed money cheaply in developed countries with low interest rates and invested it in emerging markets like Brazil, where rates were higher. The real plummeted.</p>

 	<h1 class="slidethree">The &ldquo;currency war&rdquo;</h1>
 	<p class="slidethree">The Brazilian economy quickly rebounded, thanks largely to China's recovery from the crisis. By 2010 Brazil was growing by 7.5% a year. Rapid growth and low interest rates around the world led to an inflow of foreign capital, which drove up the value of the real again and made the country's exports less competitive. Warning of an international &ldquo;currency war&rdquo;, the Brazilian authorities counterattacked by selling reais on the spot market and imposing a 6% tax on foreign bond purchases to stifle inflows.</p>

 	<h1 class="slidefour">A 12-year high for the real</h1>
 	<p class="slidefour">Despite these salvos, by July 2011 the currency was trading at 1.5 reais to the US dollar. According to <em>The Economist</em>'s Big Mac Index, the real was one of the most overvalued currencies in the world. Brazilian businesses and consumers used the stronger currency to buy more imports: by 2011 imports had grown to $312 billion, three times more than in 2005.</p>

 	<h1 class="slidefive">A period of depreciation</h1>
 	<p class="slidefive">Over the course of the next year the real depreciated again. Currency interventions and low interest rates helped to weaken the currency; so did slowing growth and a loss of confidence in the economic policies of the government of Dilma Rousseff.</p>

 	<h1 class="slidesix">The dawn of tapering</h1>
 	<p class="slidesix">On May 22nd 2013, Fed Chairman Ben Bernanke hinted at reducing or &ldquo;tapering&rdquo; America's $85 billion monthly bond-buying program. Markets interpreted this as a signal that interest rates would rise in developed countries, and pulled money out of emerging markets. The real tumbled 20% in three months.</p>

 	<h1 class="slideseven">A different currency war</h1>
 	<p class="slideseven">The central bank responded to the fall in the real with a $60 billion intervention programme, auctioning dollars in a series of foreign exchange swaps and repurchase agreements. The bond-purchase tax was revoked in the summer of 2013, helping to send the real higher again.</p>

 	<h1 class="slideeight">Gyrations continue</h1>
 	<p class="slideeight">The real's turbulent ride has continued into 2014. The Fed's gradual withdrawal of stimulus continues to weigh on emerging markets, as does the sluggishness of the Brazilian economy. Yet rising interest rates, further interventions by the central bank and the prospect of change after October's election push the other way. As a result the real keeps yo-yoing.</p>

 	</div>

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

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

 </body>
 </html>
diff --git a/thumbnail.png b/thumbnail.png
	var margin = {top: 15, right: 30, bottom: 20, left: 0},
	width = 575 - margin.left - margin.right,
	height = 400 - margin.top - margin.bottom;

	var parseDate = d3.time.format("%m-%d-%Y").parse;

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

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

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

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("right")
	.tickSize(width);

	var slideValue;
	var marker;

	d3.csv("data.csv", function(error, data) {
	data.forEach(function(d) {
	d.date = parseDate(d.date);
	d.rate = +d.rate;
	d.idnumber = +d.idnumber;
	});

	var startData = data.filter(function(d) { return d.idnumber < 20140712; });

	var staticDataOne = data.filter(function(d) { return d.idnumber < 20070101; });
	var staticDataTwo = data.filter(function(d) { return d.idnumber < 20080804; });
	var staticDataThree = data.filter(function(d) { return d.idnumber < 20081206; });
	var staticDataFour = data.filter(function(d) { return d.idnumber < 20101028; });
	var staticDataFive = data.filter(function(d) { return d.idnumber < 20110727; });
	var staticDataSix = data.filter(function(d) { return d.idnumber < 20120524; });
	var staticDataSeven = data.filter(function(d) { return d.idnumber < 20130823; });
	var staticDataEight = data.filter(function(d) { return d.idnumber < 20131017; });

	var animatedDataOne = data.filter(function(d) { return d.idnumber < 20080804; });
	var animatedDataTwo = data.filter(function(d) { return d.idnumber > 20080802 && d.idnumber < 20081206; });
	var animatedDataThree = data.filter(function(d) { return d.idnumber > 20081204 && d.idnumber < 20101028; });
	var animatedDataFour = data.filter(function(d) { return d.idnumber > 20101026 && d.idnumber < 20110727; });
	var animatedDataFive = data.filter(function(d) { return d.idnumber > 20110725 && d.idnumber < 20120524; });
	var animatedDataSix = data.filter(function(d) { return d.idnumber > 20120522 && d.idnumber < 20130823; });
	var animatedDataSeven = data.filter(function(d) { return d.idnumber > 20130821 && d.idnumber < 20131017; });
	var animatedDataEight = data.filter(function(d) { return d.idnumber > 20131015 && d.idnumber < 20140712; });

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

	var svg = d3.select("#chart").append("svg")
	.datum(startData)
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	svg.append("text")
	.attr("class", "right label")
	.text("real/$")
	.attr("x", width-11)
	.attr("y", -5);

	x.domain([parseDate("1-1-2007"),parseDate("4-30-2015")]);
	y.domain([d3.min(data,function (d) { return 0.95d.rate}),d3.max(data,function (d) { return 1.05d.rate})]);

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

	d3.selectAll(".x.axis text")
	.attr("dx", 34);

	d3.select(".x.axis text")
	.text("2007");

	d3.selectAll(".x.axis").selectAll("text")
	.attr("id", function(d,i) {return "xlabel" + i});

	d3.select("#xlabel8")
	.style("display", "none")
	.style("opacity", 0);

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis);

	var startPath = svg.append("path")
	.datum(startData)
	.style("stroke", "#00a1ce")
	.attr("d", line)
	.attr("id", "startPath");

	var staticPath = svg.append("path")
	.attr("class", "static");

	var animatedPath = svg.append("path")
	.attr("class", "animated");


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

	var circles = group.append("circle")
	.attr("class", "circle")
	.attr("transform", function(d) { return "translate(" + x(d.date) + "," + y(d.rate) + ")"; } )
	.attr("r", 3)
	.attr("id", function(d) { return "circle" + [d.idnumber]; });

	var slides = group.append("text")
	.attr("x", function(d) { return x(d.date) + 10; })
	.attr("y", function(d) { return y(d.rate) + 5; })
	.attr("id", function(d) { return "slide" + [d.idnumber]; });

	d3.select("#slide20080801").text("The run-up to")
	.attr("x", function(d) { return x(d.date) - 100; })
	.attr("y", function(d) { return y(d.rate) + 2; });
	d3.select("#group20080801").append("text").text("the crisis")
	.attr("x", function(d) { return x(d.date) - 100; })
	.attr("y", function(d) { return y(d.rate) + 22; });

	d3.select("#slide20081205").text("The effect of the")
	.attr("x", function(d) { return x(d.date) + 10; })
	.attr("y", function(d) { return y(d.rate) + 0; });
	d3.select("#group20081205").append("text").text("financial crisis")
	.attr("x", function(d) { return x(d.date) + 10; })
	.attr("y", function(d) { return y(d.rate) + 20; });

	d3.select("#slide20101027").text('The "currency war"')
	.attr("x", function(d) { return x(d.date) - 97; })
	.attr("y", function(d) { return y(d.rate) - 27; });

	d3.select("#slide20110726").text("A 12-year high")
	.attr("x", function(d) { return x(d.date) + 15; })
	.attr("y", function(d) { return y(d.rate) + 5; });
	d3.select("#group20110726").append("text").text("for the real")
	.attr("x", function(d) { return x(d.date) + 15; })
	.attr("y", function(d) { return y(d.rate) + 25; });

	d3.select("#slide20120523").text("A period of")
	.attr("x", function(d) { return x(d.date) - 85; })
	.attr("y", function(d) { return y(d.rate) + 5; });
	d3.select("#group20120523").append("text").text("depreciation")
	.attr("x", function(d) { return x(d.date) - 85; })
	.attr("y", function(d) { return y(d.rate) + 25; });

	d3.select("#slide20130822").text("The dawn of tapering")
	.attr("x", function(d) { return x(d.date) - 65; })
	.attr("y", function(d) { return y(d.rate) + 25; });

	d3.select("#slide20131016").text("A different")
	.attr("x", function(d) { return x(d.date) - 20; })
	.attr("y", function(d) { return y(d.rate) - 35; });
	d3.select("#group20131016").append("text").text("currency war")
	.attr("x", function(d) { return x(d.date) - 20; })
	.attr("y", function(d) { return y(d.rate) - 15; });

	d3.select("#slide20140711").text("Gyrations")
	.attr("x", function(d) { return x(d.date) - 10; })
	.attr("y", function(d) { return y(d.rate) + 35; });
	d3.select("#group20140711").append("text").text("continue")
	.attr("x", function(d) { return x(d.date) - 10; })
	.attr("y", function(d) { return y(d.rate) + 55; });


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

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

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

	if (slideValue=="start") {
	d3.select("#startPath")
	.transition()
	.duration(500)
	.style("opacity", 0);

	d3.select(".static")
	.style("opacity", 1);

	d3.select(".animated")
	.style("opacity", 1);

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

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

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

	document.getElementById("next").setAttribute("value", "one");
	document.getElementById("back").setAttribute("value", "one");
	staticPath.datum(staticDataOne)
	.attr("d", line);
	animatedPath.datum(animatedDataOne)
	.attr("d", line)
	.call(transition);

	} else if (slideValue=="one") {
	d3.selectAll("#group20080801 text")
	.transition()
	.duration(500)
	.style("opacity", 0.5);

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

	document.getElementById("next").setAttribute("value", "two");
	document.getElementById("back").setAttribute("value", "two");
	staticPath.datum(staticDataTwo)
	.attr("d", line);
	animatedPath.datum(animatedDataTwo)
	.attr("d", line)
	.call(transition);

	} else if (slideValue=="two") {
	d3.selectAll("#group20081205 text")
	.transition()
	.duration(500)
	.style("opacity", 0.5);

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

	document.getElementById("next").setAttribute("value", "three");
	document.getElementById("back").setAttribute("value", "three");
	staticPath.datum(staticDataThree)
	.attr("d", line);
	animatedPath.datum(animatedDataThree)
	.attr("d", line)
	.call(transition);

	} else if (slideValue=="three") {
	d3.selectAll("#group20101027 text")
	.transition()
	.duration(500)
	.style("opacity", 0.5);

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

	document.getElementById("next").setAttribute("value", "four");
	document.getElementById("back").setAttribute("value", "four");
	staticPath.datum(staticDataFour)
	.attr("d", line);
	animatedPath.datum(animatedDataFour)
	.attr("d", line)
	.call(transition);

	} else if (slideValue=="four") {
	d3.selectAll("#group20110726 text")
	.transition()
	.duration(500)
	.style("opacity", 0.5);

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

	document.getElementById("next").setAttribute("value", "five");
	document.getElementById("back").setAttribute("value", "five");
	staticPath.datum(staticDataFive)
	.attr("d", line);
	animatedPath.datum(animatedDataFive)
	.attr("d", line)
	.call(transition);

	} else if (slideValue=="five") {
	d3.selectAll("#group20120523 text")
	.transition()
	.duration(500)
	.style("opacity", 0.5);

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

	document.getElementById("next").setAttribute("value", "six");
	document.getElementById("back").setAttribute("value", "six");
	staticPath.datum(staticDataSix)
	.attr("d", line);
	animatedPath.datum(animatedDataSix)
	.attr("d", line)
	.call(transition);

	} else if (slideValue=="six") {
	d3.selectAll("#group20130822 text")
	.transition()
	.duration(500)
	.style("opacity", 0.5);

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

	document.getElementById("next").setAttribute("value", "seven");
	document.getElementById("back").setAttribute("value", "seven");
	staticPath.datum(staticDataSeven)
	.attr("d", line);
	animatedPath.datum(animatedDataSeven)
	.attr("d", line)
	.call(transition);
	} else if (slideValue=="seven") {
	d3.selectAll("#group20131016 text")
	.transition()
	.duration(500)
	.style("opacity", 0.5);

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

	document.getElementById("next").setAttribute("value", "end");
	document.getElementById("back").setAttribute("value", "end");
	staticPath.datum(staticDataEight)
	.attr("d", line);
	animatedPath.datum(animatedDataEight)
	.attr("d", line)
	.call(transition);
	} else if (slideValue=="end") {

	d3.select(".static")
	.style("opacity", 0);

	d3.select("#startPath")
	.style("opacity", 1);

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

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

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

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

	d3.selectAll(".slideeight")
	.transition()
	.delay(500)
	.style("display", "none");

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

	document.getElementById("next").setAttribute("value", "start");
	document.getElementById("back").setAttribute("value", "start");

	setTimeout(function() {
	d3.select("#buttons #next")
	.html("Start<span class='fa fa-caret-right'></span>");
	d3.select("#buttons #back")
	.style("display", "none");
	}, 500);

	}
	});

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

	if (slideValue=="one") {
	d3.selectAll("#group20080801 text")
	.style("opacity", 0);

	d3.select("#circle20080801")
	.style("opacity", 0);

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

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

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

	d3.select("#buttons #back")
	.style("display", "none");

	document.getElementById("next").setAttribute("value", "start");
	document.getElementById("back").setAttribute("value", "start");

	d3.selectAll(".slideone")
	.style("display", "none");

	d3.selectAll(".slideintro")
	.style("display", "block")
	.style("opacity", 1);

	} else if (slideValue=="two") {
	d3.selectAll("#group20081205 text")
	.style("opacity", 0);

	d3.select("#circle20081205")
	.style("opacity", 0);

	d3.selectAll("#group20080801 text")
	.transition()
	.duration(750)
	.style("opacity", 1);

	marker = "#circle20080801";
	highlight(marker);

	document.getElementById("next").setAttribute("value", "one");
	document.getElementById("back").setAttribute("value", "one");
	staticPath.datum(staticDataTwo)
	.attr("d", line);
	animatedPath.datum(staticDataOne)
	.attr("d", line);

	d3.selectAll(".slidetwo")
	.style("display", "none");

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

	} else if (slideValue=="three") {
	d3.selectAll("#group20101027 text")
	.style("opacity", 0);

	d3.select("#circle20101027")
	.style("opacity", 0);

	d3.selectAll("#group20081205 text")
	.transition()
	.duration(750)
	.style("opacity", 1);

	marker = "#circle20081205";
	highlight(marker);

	document.getElementById("next").setAttribute("value", "two");
	document.getElementById("back").setAttribute("value", "two");
	staticPath.datum(staticDataThree)
	.attr("d", line);
	animatedPath.datum(staticDataOne)
	.attr("d", line);

	d3.selectAll(".slidethree")
	.style("display", "none");

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

	} else if (slideValue=="four") {
	d3.selectAll("#group20110726 text")
	.style("opacity", 0);

	d3.select("#circle20110726")
	.style("opacity", 0);

	d3.selectAll("#group20101027 text")
	.transition()
	.duration(750)
	.style("opacity", 1);

	marker = "#circle20101027";
	highlight(marker);

	document.getElementById("next").setAttribute("value", "three");
	document.getElementById("back").setAttribute("value", "three");
	staticPath.datum(staticDataFour)
	.attr("d", line);
	animatedPath.datum(staticDataOne)
	.attr("d", line);

	d3.selectAll(".slidefour")
	.style("display", "none");

	d3.selectAll(".slidethree")
	.style("display", "block")
	.style("opacity", 1);
	} else if (slideValue=="five") {
	d3.selectAll("#group20120523 text")
	.style("opacity", 0);

	d3.select("#circle20120523")
	.style("opacity", 0);

	d3.selectAll("#group20110726 text")
	.transition()
	.duration(750)
	.style("opacity", 1);

	marker = "#circle20110726";
	highlight(marker);

	document.getElementById("next").setAttribute("value", "four");
	document.getElementById("back").setAttribute("value", "four");
	staticPath.datum(staticDataFive)
	.attr("d", line);
	animatedPath.datum(staticDataOne)
	.attr("d", line);

	d3.selectAll(".slidefive")
	.style("display", "none");

	d3.selectAll(".slidefour")
	.style("display", "block")
	.style("opacity", 1);
	} else if (slideValue=="six") {
	d3.selectAll("#group20130822 text")
	.style("opacity", 0);

	d3.select("#circle20130822")
	.style("opacity", 0);

	d3.selectAll("#group20120523 text")
	.transition()
	.duration(750)
	.style("opacity", 1);

	marker = "#circle20120523";
	highlight(marker);

	document.getElementById("next").setAttribute("value", "five");
	document.getElementById("back").setAttribute("value", "five");
	staticPath.datum(staticDataSix)
	.attr("d", line);
	animatedPath.datum(staticDataOne)
	.attr("d", line);

	d3.selectAll(".slidesix")
	.style("display", "none");

	d3.selectAll(".slidefive")
	.style("display", "block")
	.style("opacity", 1);
	} else if (slideValue=="seven") {
	d3.selectAll("#group20131016 text")
	.style("opacity", 0);

	d3.select("#circle20131016")
	.style("opacity", 0);

	d3.selectAll("#group20130822 text")
	.transition()
	.duration(750)
	.style("opacity", 1);

	marker = "#circle20130822";
	highlight(marker);

	document.getElementById("next").setAttribute("value", "six");
	document.getElementById("back").setAttribute("value", "six");
	staticPath.datum(staticDataSeven)
	.attr("d", line);
	animatedPath.datum(staticDataOne)
	.attr("d", line);

	d3.selectAll(".slideseven")
	.style("display", "none");

	d3.selectAll(".slidesix")
	.style("display", "block")
	.style("opacity", 1);
	} else if (slideValue=="end") {
	d3.select("#buttons #next").text("Next");
	d3.selectAll("#group20140711 text")
	.style("opacity", 0);

	d3.select("#circle20140711")
	.style("opacity", 0);

	d3.selectAll("#group20131016 text")
	.transition()
	.duration(750)
	.style("opacity", 1);

	marker = "#circle20131016";
	highlight(marker);

	document.getElementById("next").setAttribute("value", "seven");
	document.getElementById("back").setAttribute("value", "seven");
	staticPath.datum(staticDataEight)
	.attr("d", line);
	animatedPath.datum(staticDataOne)
	.attr("d", line);

	d3.selectAll(".slideeight")
	.style("display", "none");

	d3.selectAll(".slideseven")
	.style("display", "block")
	.style("opacity", 1);
	}
	});

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

	function transition() {
	d3.select(".animated")
	.transition()
	.duration(2500)
	.ease("cubic-in-out")
	.attrTween("stroke-dasharray", animateLine)
	.each("end", function() {

	if (slideValue=="start") {
	d3.select("#buttons #next").html("Next<span class='fa fa-caret-right'></span>");
	d3.select("#buttons #back").style("display", "inline-block");
	marker = "#circle20080801";
	highlight(marker);
	d3.selectAll("#group20080801 text")
	.transition()
	.duration(750)
	.style("opacity", 1);

	d3.selectAll(".slideintro")
	.style("display", "none");

	d3.selectAll("#slides div")
	.transition()
	.duration(750)
	.style("opacity", 1);

	d3.selectAll(".slideone")
	.transition()
	.duration(750)
	.style("display", "block")
	.style("opacity", 1);

	} else if (slideValue=="one") {
	marker = "#circle20081205";
	highlight(marker);
	d3.selectAll("#group20081205 text")
	.transition()
	.duration(750)
	.style("opacity", 1);

	d3.selectAll(".slideone")
	.style("display", "none");

	d3.selectAll("#slides div")
	.transition()
	.duration(750)
	.style("opacity", 1);

	d3.selectAll(".slidetwo")
	.transition()
	.duration(750)
	.style("display", "block")
	.style("opacity", 1);

	} else if (slideValue=="two") {
	marker = "#circle20101027";
	highlight(marker);
	d3.selectAll("#group20101027 text")
	.transition()
	.duration(750)
	.style("opacity", 1);
	d3.selectAll(".slidetwo")
	.style("display", "none");

	d3.selectAll("#slides div")
	.transition()
	.duration(750)
	.style("opacity", 1);

	d3.selectAll(".slidethree")
	.transition()
	.duration(750)
	.style("display", "block")
	.style("opacity", 1);

	} else if (slideValue=="three") {
	marker = "#circle20110726";
	highlight(marker);
	d3.selectAll("#group20110726 text")
	.transition()
	.duration(750)
	.style("opacity", 1);
	d3.selectAll(".slidethree")
	.style("display", "none");

	d3.selectAll("#slides div")
	.transition()
	.duration(750)
	.style("opacity", 1);

	d3.selectAll(".slidefour")
	.transition()
	.duration(750)
	.style("display", "block")
	.style("opacity", 1);
	} else if (slideValue=="four") {
	marker = "#circle20120523";
	highlight(marker);
	d3.selectAll("#group20120523 text")
	.transition()
	.duration(750)
	.style("opacity", 1);
	d3.selectAll(".slidefour")
	.style("display", "none");

	d3.selectAll("#slides div")
	.transition()
	.duration(750)
	.style("opacity", 1);

	d3.selectAll(".slidefive")
	.transition()
	.duration(750)
	.style("display", "block")
	.style("opacity", 1);
	} else if (slideValue=="five") {
	marker = "#circle20130822";
	highlight(marker);
	d3.selectAll("#group20130822 text")
	.transition()
	.duration(750)
	.style("opacity", 1);
	d3.selectAll(".slidefive")
	.style("display", "none");

	d3.selectAll("#slides div")
	.transition()
	.duration(750)
	.style("opacity", 1);

	d3.selectAll(".slidesix")
	.transition()
	.duration(750)
	.style("display", "block")
	.style("opacity", 1);
	} else if (slideValue=="six") {
	marker = "#circle20131016";
	highlight(marker);
	d3.selectAll("#group20131016 text")
	.transition()
	.duration(750)
	.style("opacity", 1);
	d3.selectAll(".slidesix")
	.style("display", "none");
	d3.selectAll("#slides div")
	.transition()
	.duration(750)
	.style("opacity", 1);

	d3.selectAll(".slideseven")
	.transition()
	.duration(750)
	.style("display", "block")
	.style("opacity", 1);
	} else if (slideValue=="seven") {
	marker = "#circle20140711";
	highlight(marker);
	d3.select("#buttons #next").html("Again<span class='fa fa-repeat'></span>");
	d3.selectAll("#group20140711 text")
	.transition()
	.duration(750)
	.style("opacity", 1);
	d3.selectAll(".slideseven")
	.style("display", "none");
	d3.selectAll("#slides div")
	.transition()
	.duration(750)
	.style("opacity", 1);

	d3.selectAll(".slideeight")
	.transition()
	.duration(750)
	.style("display", "block")
	.style("opacity", 1);
	}
	});
	d3.timer.flush();
	}

	d3.select("#slides")
	.style("display","inline");

	});

	d3.select(self.frameElement).style("height", "770px");
	<!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: #333;
	}

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

	#container {
	padding: 0px 15px 15px 15px;
	border: 1px solid #ccc;
	height: 692px;
	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;
	}

	#unit {
	padding: 13px 0px 0px 0px;
	}

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

	.right.label {
	font-size: 13px;
	fill: #333;
	}

	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: 1px;
	shape-rendering: crispEdges;
	}

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

	.axis line {
	stroke: #eee;
	}

	.x.axis text, .y.axis text {
	color: #333;
	font-size: 13px;
	}

	path {
	fill: none;
	stroke: #00a1ce;
	stroke-width: 2.5px;
	}

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

	#buttons #back {
	display: none;
	}

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

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

	.group text {
	font-size: 14px;
	color: #333;
	}

	#slides {
	margin: 0px;
	padding: 0px;
	display: none;
	}

	#slides h1 {
	margin: 0px;
	padding: 15px 0px 5px 0px;
	font-family: Arial, sans-serif;
	font-size: 16px;
	color: #000;
	font-weight: bold;
	}

	#slides p {
	margin: 0px;
	padding: 0px 0px 13px 0px;
	}

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

	</style>

	</head>

	<body>

	<div id="content">
	<div id="header">
	<div id="block"></div>
	<h1>A real bumpy ride</h1>
	</div>
	<div id="container">
	<p id="unit"><strong>Brazilian real against the US$</strong></p>
	<p>inverted scale</p>

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

	<p id="source">Source: Federal Reserve Board</p>

	<div id="slides">
	<div>
	<h1 class="slideintro">The Brazilian real's bumpy ride</h1>
	<p class="slideintro">Over the past 12 months the Brazilian real has fluctuated more than almost all other emerging-market currencies. Such volatility is nothing new. This “action chart” examines the currency's performance over the past seven years.</p>

	<h1 class="slideone">The run-up to the crisis</h1>
	<p class="slideone">In the years leading up to the global financial crisis Brazil enjoyed rapid growth, fuelled partly by Chinese demand for commodities. The country became an emerging-market darling, boasting healthy trade surpluses, little foreign debt and more than $200 billion in foreign-exchange reserves. As foreign capital poured in, the real appreciated rapidly.</p>

	<h1 class="slidetwo">The effect of the financial crisis</h1>
	<p class="slidetwo">The global financial crisis sent investors fleeing emerging markets to safer assets like US treasury bonds. Six months after Lehman Brothers failed in September 2008, foreign investors had pulled $23 billion out of Brazil's equity and bond markets. Currency traders scrambled to unwind “carry trades”, in which they had borrowed money cheaply in developed countries with low interest rates and invested it in emerging markets like Brazil, where rates were higher. The real plummeted.</p>

	<h1 class="slidethree">The “currency war”</h1>
	<p class="slidethree">The Brazilian economy quickly rebounded, thanks largely to China's recovery from the crisis. By 2010 Brazil was growing by 7.5% a year. Rapid growth and low interest rates around the world led to an inflow of foreign capital, which drove up the value of the real again and made the country's exports less competitive. Warning of an international “currency war”, the Brazilian authorities counterattacked by selling reais on the spot market and imposing a 6% tax on foreign bond purchases to stifle inflows.</p>

	<h1 class="slidefour">A 12-year high for the real</h1>
	<p class="slidefour">Despite these salvos, by July 2011 the currency was trading at 1.5 reais to the US dollar. According to <em>The Economist</em>'s Big Mac Index, the real was one of the most overvalued currencies in the world. Brazilian businesses and consumers used the stronger currency to buy more imports: by 2011 imports had grown to $312 billion, three times more than in 2005.</p>

	<h1 class="slidefive">A period of depreciation</h1>
	<p class="slidefive">Over the course of the next year the real depreciated again. Currency interventions and low interest rates helped to weaken the currency; so did slowing growth and a loss of confidence in the economic policies of the government of Dilma Rousseff.</p>

	<h1 class="slidesix">The dawn of tapering</h1>
	<p class="slidesix">On May 22nd 2013, Fed Chairman Ben Bernanke hinted at reducing or “tapering” America's $85 billion monthly bond-buying program. Markets interpreted this as a signal that interest rates would rise in developed countries, and pulled money out of emerging markets. The real tumbled 20% in three months.</p>

	<h1 class="slideseven">A different currency war</h1>
	<p class="slideseven">The central bank responded to the fall in the real with a $60 billion intervention programme, auctioning dollars in a series of foreign exchange swaps and repurchase agreements. The bond-purchase tax was revoked in the summer of 2013, helping to send the real higher again.</p>

	<h1 class="slideeight">Gyrations continue</h1>
	<p class="slideeight">The real's turbulent ride has continued into 2014. The Fed's gradual withdrawal of stimulus continues to weigh on emerging markets, as does the sluggishness of the Brazilian economy. Yet rising interest rates, further interventions by the central bank and the prospect of change after October's election push the other way. As a result the real keeps yo-yoing.</p>

	</div>

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

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

	</body>
	</html>