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");
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");
}, 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");
}, 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");