var margin = {top: 30, right: 25, bottom: 20, left: 23},
width = 565 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
var parseDate = d3.time.format("%m-%d-%Y").parse,
formatPercent = d3.format(".0"),
formatPercentDetailed = d3.format(".1%"),
numberFormat = d3.format(",.0f");
var x = d3.time.scale()
.range([0, width]);
var y0 = d3.scale.linear()
.range([height, 0]);
var y1 = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.tickFormat(d3.time.format("%Y"))
.ticks(5)
.orient("bottom");
var yAxisRight = d3.svg.axis()
.scale(y1)
.orient("right")
.tickFormat(formatPercent)
.tickSize(width);
var yAxisLeft = d3.svg.axis()
.scale(y0)
.orient("left")
.ticks(5)
.tickFormat(formatPercent);
var empLine = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y1(d.employment); });
var unempLine = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y0(d.unemploymentrate); });
var svg = d3.select("#chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var areaUnder25 = d3.svg.area()
.x(function(d) { return x(d.date); })
.y0(height)
.y1(function(d) { return y1(d.jobgainsunder25); });
var area2554 = d3.svg.area()
.x(function(d) { return x(d.date); })
.y0(function(d) { return y1(d.jobgainsunder25); })
.y1(function(d) { return y1(d.jobgainsunder25+d.jobgains2554); });
var areaOver54 = d3.svg.area()
.x(function(d) { return x(d.date); })
.y0(function(d) { return y1(d.jobgainsunder25+d.jobgains2554); })
.y1(function(d) { return y1(d.jobgainsunder25+d.jobgains2554+d.jobgainsover54)+1.5; });
var lineUnder25 = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y1(d.jobgainsunder25); });
var line2554 = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y1(d.jobgainsunder25+d.jobgains2554); });
var unempLineTwo = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y0(d.unemployment2554); });
var slideValue;
d3.csv("data.csv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.employment = +d.employment;
d.unemploymentrate = +d.unemploymentrate;
d.idnumber = +d.idnumber;
d.jobgainsunder25 = +d.jobgainsunder25;
d.jobgains2554 = +d.jobgains2554;
d.jobgainsover54 = +d.jobgainsover54;
d.jobgrowthunder25 = +d.jobgrowthunder25;
d.jobgrowth2554 = +d.jobgrowth2554;
d.jobgrowthover54 = +d.jobgrowthover54;
d.unemployment2554 = +d.unemployment2554;
});
var filteredData = data.filter(function(d) { return d.idnumber > 201001; });
x.domain([parseDate("1-1-2010"),parseDate("9-31-2014")]);
y1.domain([0,d3.max(data,function (d) { return 1.05*d.jobgrowthover54})]);
y0.domain([d3.min(data,function (d) { return 0.9*d.unemploymentrate}),d3.max(data,function (d) { return 1.1*d.unemploymentrate})]);
svg.append("g")
.attr("class", "right axis")
.call(yAxisRight);
svg.append("g")
.attr("class", "left axis")
.style("fill", "#772210")
.call(yAxisLeft);
svg.append("text")
.attr("class", "left label")
.text("Unemployment rate, %")
.attr("x", -margin.left)
.attr("y", 10)
.style("opacity", 0);
svg.append("text")
.attr("class", "right label")
.text("Employment growth by age, %")
.attr("x", width-148)
.attr("y", -15)
.style("fill", "#333");
d3.selectAll(".left.axis")
.style("opacity", 0);
var employmentPath = svg.append("path")
.attr("class", "employment");
var unemploymentPath = svg.append("path")
.attr("class", "unemploymentrate");
var growthUnder25 = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y1(d.jobgrowthunder25); });
var growth2554 = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y1(d.jobgrowth2554); });
var growthOver54 = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y1(d.jobgrowthover54); });
svg.append("path")
.attr("class", "growthlineUnder25")
.datum(filteredData)
.style("stroke", "#648d9e")
.attr("d", growthUnder25);
svg.append("path")
.attr("class", "growthline2554")
.datum(filteredData)
.style("stroke", "#00485d")
.attr("d", growth2554);
svg.append("path")
.attr("class", "jobgains")
.datum(filteredData)
.style("stroke", "#00a1ce")
.attr("d", growthOver54);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
var group = svg.selectAll(".group")
.data(data)
.enter().append("g")
.attr("class", "group")
.attr("id", function(d) { return "group" + [d.idnumber]; });
group.append("circle")
.attr("class", "circleUnder25")
.attr("transform", function(d) { return "translate(" + x(d.date) + "," + y1(d.jobgrowthunder25) + ")"; } )
.attr("r", 4)
.style("opacity", 0)
.attr("id", function(d) { return "circleUnder25" + [d.idnumber]; });
group.append("circle")
.attr("class", "circle2554")
.attr("transform", function(d) { return "translate(" + x(d.date) + "," + y1(d.jobgrowth2554) + ")"; } )
.attr("r", 4)
.style("opacity", 0)
.attr("id", function(d) { return "circle2554" + [d.idnumber]; });
group.append("circle")
.attr("class", "circleOver54")
.attr("transform", function(d) { return "translate(" + x(d.date) + "," + y1(d.jobgrowthover54) + ")"; } )
.attr("r", 4)
.style("opacity", 0)
.attr("id", function(d) { return "circleOver54" + [d.idnumber]; });
d3.selectAll("#group201407 circle")
.style("opacity", 1);
svg.append("text")
.text("Under 25")
.attr("class", "areaLabel")
.attr("id", "areaLabelUnder25")
.attr("x", 455)
.attr("y", 179)
.style("fill", "#648d9e");
svg.append("text")
.text("25-54")
.attr("class", "areaLabel")
.attr("id", "areaLabel2554")
.attr("x", 471)
.attr("y", 310)
.style("fill", "#00485d");
svg.append("text")
.text("Over 54")
.attr("class", "areaLabel")
.attr("id", "areaLabelOver54")
.attr("x", 460)
.attr("y", 5)
.style("fill", "#00a1ce");
d3.select("#next").on("click", function(){
slideValue = d3.select("#next").attr("value");
if (slideValue=="start") {
employmentLine();
} else if (slideValue=="one") {
jobGains();
} else if (slideValue=="two") {
jobGrowthByAge();
} else if (slideValue=="three") {
fadeOut();
} else if (slideValue=="four") {
employmentLine();
}
});
function animateLine() {
var l = this.getTotalLength();
i = d3.interpolateString("0," + l, l + "," + l);
return function(t) { return i(t); };
}
function highlight(marker) {
d3.select(marker)
.style("opacity", 1)
.transition()
.duration(250)
.attr("r", 6)
.style("stroke-width",3.75)
.transition()
.duration(250)
.attr("r", 4)
.style("stroke-width",2.5);
}
function employmentLine() {
setTimeout(function(){
d3.select("#next").html("Next");
}, 500);
d3.select("#next").on('click', null);
setTimeout(function(){
d3.select("#text")
.style("padding-top", "25px");
}, 500);
d3.select("svg")
.transition()
.duration(500)
.style("opacity", 1);
d3.selectAll(".dot")
.transition()
.duration(250)
.style("color", "#ccc");
d3.select("#dotone")
.transition()
.duration(250)
.style("color", "#747474");
d3.selectAll(".group circle")
.style("opacity", 0);
d3.selectAll("#slides")
.transition()
.duration(500)
.style("opacity", 0)
.transition()
.delay(500)
.duration(500)
.style("opacity", 1);
d3.selectAll("#buttons")
.transition()
.delay(500)
.style("opacity", 0)
.style("display", "none");
d3.selectAll(".slideintro")
.transition()
.delay(500)
.style("opacity", 0)
.style("display", "none");
d3.selectAll(".slideseven")
.transition()
.delay(500)
.style("opacity", 0)
.style("display", "none");
d3.selectAll(".slideone")
.transition()
.delay(500)
.style("opacity", 1)
.style("display", "block");
d3.select(".growthlineUnder25")
.transition()
.duration(500)
.style("opacity", 0);
d3.select(".growthline2554")
.transition()
.duration(500)
.style("opacity", 0);
d3.select(".jobgains")
.transition()
.duration(500)
.style("opacity", 0);
d3.selectAll(".areaLabel")
.transition()
.duration(500)
.style("opacity", 0)
.remove();
x = d3.time.scale()
.range([0, width])
.domain([parseDate("1-1-2008"),parseDate("12-31-2014")]);
xAxis = d3.svg.axis()
.scale(x)
.tickFormat(d3.time.format("%Y"))
.ticks(7)
.orient("bottom");
d3.select(".x.axis")
.transition()
.delay(500)
.duration(500)
.ease("linear")
.call(xAxis);
y1 = d3.scale.linear()
.range([height, 0])
.domain([d3.min(data,function (d) { return 0.98*d.employment}),d3.max(data,function (d) { return 1.02*d.employment})]);
yAxisRight = d3.svg.axis()
.scale(y1)
.orient("right")
.tickSize(width);
d3.select(".right.axis")
.transition()
.duration(500)
.style("opacity", 0)
.transition()
.duration(50)
.style("fill", "#00a1ce")
.call(yAxisRight)
.transition()
.delay(550)
.duration(500)
.style("opacity", 1);
d3.selectAll(".circleUnder25")
.attr("class", "empcircle")
.attr("transform", function(d) { return "translate(" + x(d.date) + "," + y1(d.employment) + ")"; } )
.attr("r", 4)
.attr("id", function(d) { return "empCircle" + [d.idnumber]; });
d3.selectAll(".circle2554")
.attr("class", "unempcircle")
.attr("transform", function(d) { return "translate(" + x(d.date) + "," + y0(d.unemploymentrate) + ")"; } )
.attr("r", 4)
.attr("id", function(d) { return "unempCircle" + [d.idnumber]; });
d3.select("#group201407").append("text")
.attr("x", function(d) { return x(d.date) + 10; })
.attr("y", function(d) { return y1(d.employment) + 4; })
.attr("id", function(d) { return "empSlide" + [d.idnumber]; });
d3.select("#group201407").append("text")
.attr("x", function(d) { return x(d.date) + 10; })
.attr("y", function(d) { return y0(d.unemploymentrate) + 4; })
.attr("id", function(d) { return "unempSlide" + [d.idnumber]; });
d3.select("#empSlide201407")
.text(function(d) { return numberFormat([d.employment]); })
.style("fill", "#00a1ce");
d3.select("#unempSlide201407")
.text(function(d) { return formatPercentDetailed([d.unemploymentrate]/100); })
.style("fill", "#772210");
d3.select(".right.label")
.transition()
.duration(500)
.style("opacity", 0)
.transition()
.duration(50)
.style("fill", "#00a1ce")
.text("Total non-farm employment, m")
.attr("x", width-145)
.attr("y", 10)
.transition()
.delay(550)
.duration(500)
.style("opacity", 1);
d3.select(".employment")
.datum(data)
.attr("d", empLine)
.transition()
.duration(2500)
.ease("linear")
.attrTween("stroke-dasharray", animateLine)
.each("start", function() {
d3.select(".employment")
.style("opacity", 1);
})
.each("end", function() {
marker = "#empCircle201407";
highlight(marker);
d3.select("#empSlide201407")
.transition()
.duration(500)
.style("opacity", 1);
setTimeout(unemploymentLine, 4000);
});
d3.timer.flush();
}
function unemploymentLine() {
document.getElementById("next").setAttribute("value", "one");
d3.select("#dottwo")
.transition()
.duration(250)
.style("color", "#747474");
d3.selectAll(".slidetwo")
.transition()
.delay(500)
.style("opacity", 1)
.style("display", "block");
d3.select(".unemploymentrate")
.datum(data)
.attr("d", unempLine)
.transition()
.duration(2500)
.ease("linear")
.attrTween("stroke-dasharray", animateLine)
.each("start", function() {
d3.select(".unemploymentrate")
.style("opacity", 1);
d3.selectAll(".left.axis")
.transition()
.duration(750)
.style("opacity", 1);
d3.selectAll(".left.label")
.transition()
.duration(750)
.style("opacity", 1)
})
.each("end", function() {
marker = "#unempCircle201407";
highlight(marker);
d3.select("#unempSlide201407")
.transition()
.duration(500)
.style("opacity", 1);
});
setTimeout(function(){
d3.select("#next").on("click", function(){jobGains();});
d3.selectAll("#buttons")
.transition()
.delay(1000)
.duration(750)
.style("opacity", 1)
.style("display", "block");
}, 4000);
}
function jobGains() {
d3.select("#next").on('click', null);
setTimeout(function(){
d3.select("#text")
.style("padding-top", "15px");
}, 500);
d3.select("#dotthree")
.transition()
.duration(250)
.style("color", "#747474");
d3.selectAll("#slides")
.transition()
.duration(500)
.style("opacity", 0)
.transition()
.delay(1500)
.duration(500)
.style("opacity", 1);
d3.selectAll("#buttons")
.transition()
.delay(500)
.style("opacity", 0)
.style("display", "none");
d3.selectAll(".slideone")
.transition()
.delay(500)
.style("opacity", 0)
.style("display", "none");
d3.selectAll(".slidetwo")
.transition()
.delay(500)
.style("opacity", 0)
.style("display", "none");
d3.selectAll(".slidethree")
.transition()
.delay(2000)
.style("opacity", 1)
.style("display", "block");
d3.select(".employment")
.transition()
.duration(750)
.style("opacity", 0);
d3.select(".right.label")
.transition()
.duration(500)
.style("opacity", 0)
.transition()
.duration(0)
.style("fill", "#333")
.text("Employment gains, m")
.attr("x", width-110)
.attr("y", 0)
.transition()
.delay(1950)
.duration(500)
.style("opacity", 1);
d3.select(".left.label")
.transition()
.duration(500)
.style("opacity", 0);
d3.select(".unemploymentrate")
.transition()
.duration(500)
.style("opacity", 0);
d3.selectAll(".left.axis")
.transition()
.duration(500)
.style("opacity", 0);
d3.selectAll(".group circle")
.style("opacity", 0);
d3.selectAll(".group text")
.style("opacity", 0)
.remove();
d3.select(".jobgains")
.style("opacity", 1)
.datum(filteredData)
.attr("d", empLine);
x = d3.time.scale()
.range([0, width])
.domain([parseDate("1-1-2010"),parseDate("7-1-2014")]);
xAxis = d3.svg.axis()
.scale(x)
.tickFormat(d3.time.format("%Y"))
.ticks(5)
.orient("bottom");
d3.select(".x.axis")
.transition()
.delay(500)
.duration(1500)
.ease("linear")
.call(xAxis);
y1 = d3.scale.linear()
.range([height, 0])
.domain([0,d3.max(filteredData,function (d) { return 1.05*d.jobgains})]);
yAxisRight = d3.svg.axis()
.scale(y1)
.orient("right")
.tickSize(width);
d3.select(".right.axis")
.transition()
.duration(500)
.style("opacity", 0)
.style("fill", "#333")
.transition()
.delay(1500)
.call(yAxisRight)
.transition()
.duration(500)
.style("opacity", 1);
var jobgains = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y1(d.jobgains); });
d3.select(".jobgains")
.transition()
.delay(500)
.duration(1500)
.ease("linear")
.attr("d", jobgains);
setTimeout(jobGainsByAge, 6000);
}
function jobGainsByAge() {
document.getElementById("next").setAttribute("value", "two");
var delay = 5500;
d3.select("#dotfour")
.transition()
.delay(delay)
.duration(250)
.style("color", "#747474");
d3.select("#dotfive")
.transition()
.delay(2*delay)
.duration(250)
.style("color", "#747474");
d3.select("#dotsix")
.transition()
.delay(3*delay)
.duration(250)
.style("color", "#747474");
d3.selectAll("#slides")
.transition()
.delay(delay)
.duration(500)
.style("opacity", 0)
.transition()
.delay(delay)
.duration(500)
.style("opacity", 1);
d3.selectAll(".slidefourone")
.transition()
.delay(delay)
.duration(500)
.style("opacity", 1)
.style("display", "block");
d3.selectAll(".slidefourtwo")
.transition()
.delay(2*delay)
.duration(500)
.style("opacity", 1)
.style("display", "block");
d3.selectAll(".slidefourthree")
.transition()
.delay(3*delay)
.duration(500)
.style("opacity", 1)
.style("display", "block");
svg.append("path")
.style("opacity", 0)
.datum(filteredData)
.attr("class", "areaUnder25")
.attr("d", areaUnder25)
.transition()
.delay(500)
.duration(1000)
.style("opacity", 1)
.transition()
.delay(2*delay)
.duration(500)
.style("opacity", 0.5)
.transition()
.delay(4*delay)
.duration(500)
.style("opacity", 1);
svg.append("path")
.style("opacity", 0)
.datum(filteredData)
.attr("class", "area2554")
.attr("d", area2554)
.transition()
.delay(500)
.duration(1000)
.style("opacity", 1)
.transition()
.delay(delay)
.duration(500)
.style("opacity", 0.5)
.transition()
.delay(2*delay)
.duration(500)
.style("opacity", 1)
.transition()
.delay(3*delay)
.duration(500)
.style("opacity", 0.5)
.transition()
.delay(4*delay)
.duration(500)
.style("opacity", 1);
svg.append("path")
.style("opacity", 0)
.datum(filteredData)
.attr("class", "areaOver54")
.attr("d", areaOver54)
.transition()
.delay(500)
.duration(1000)
.style("opacity", 1)
.transition()
.delay(delay)
.duration(500)
.style("opacity", 0.5)
.transition()
.delay(3*delay)
.duration(500)
.style("opacity", 1);
svg.append("path")
.style("opacity", 0)
.attr("class", "stackedlineUnder25")
.datum(filteredData)
.attr("d", lineUnder25)
.transition()
.delay(500)
.duration(1000)
.style("opacity", 1);
svg.append("path")
.style("opacity", 0)
.attr("class", "stackedline2554")
.datum(filteredData)
.attr("d", line2554)
.transition()
.delay(500)
.duration(1000)
.style("opacity", 1);
d3.select(".jobgains")
.transition()
.delay(500)
.duration(1000)
.style("stroke", "#151515");
svg.append("text").text("Under 25")
.style("opacity", 0)
.attr("class", "areaLabel")
.attr("id", "areaLabelUnder25")
.attr("x", 440)
.attr("y", 333)
.transition()
.delay(delay)
.duration(1000)
.style("opacity", 1);
svg.append("text").text("25-54")
.style("opacity", 0)
.attr("class", "areaLabel")
.attr("id", "areaLabel2554")
.attr("x", 465)
.attr("y", 264)
.transition()
.delay(2*delay)
.duration(1000)
.style("opacity", 1);
svg.append("text").text("Over 54")
.style("opacity", 0)
.attr("class", "areaLabel")
.attr("id", "areaLabelOver54")
.attr("x", 448)
.attr("y", 140)
.transition()
.delay(3*delay)
.duration(1000)
.style("opacity", 1);
d3.select(".growthlineUnder25")
.datum(filteredData)
.attr("d", lineUnder25)
.transition()
.delay(4*delay)
.style("opacity", 1);
d3.select(".growthline2554")
.datum(filteredData)
.attr("d", line2554)
.transition()
.delay(4*delay)
.style("opacity", 1);
setTimeout(function(){
d3.select("#next").on("click", function(){jobGrowthByAge();});
d3.selectAll("#buttons")
.transition()
.delay(1000)
.duration(750)
.style("opacity", 1)
.style("display", "block");
}, 4*delay+750);
}
function jobGrowthByAge() {
d3.select("#next").on('click', null);
setTimeout(function(){
d3.select("#text")
.style("padding-top", "0px");
}, 500);
document.getElementById("next").setAttribute("value", "three");
d3.select("#dotseven")
.transition()
.duration(250)
.style("color", "#747474");
d3.select("#doteight")
.transition()
.delay(10000)
.duration(250)
.style("color", "#747474");
d3.selectAll("#slides")
.transition()
.duration(500)
.style("opacity", 0)
.transition()
.delay(2000)
.duration(500)
.style("opacity", 1);
d3.selectAll("#buttons")
.transition()
.delay(500)
.style("opacity", 0)
.style("display", "none");
d3.selectAll(".slidethree")
.transition()
.delay(500)
.style("opacity", 0)
.style("display", "none");
d3.selectAll(".slidefourone")
.transition()
.delay(500)
.style("opacity", 0)
.style("display", "none");
d3.selectAll(".slidefourtwo")
.transition()
.delay(500)
.style("opacity", 0)
.style("display", "none");
d3.selectAll(".slidefourthree")
.transition()
.delay(500)
.style("opacity", 0)
.style("display", "none");
d3.selectAll(".slidefive")
.transition()
.delay(2000)
.style("opacity", 1)
.style("display", "block");
d3.selectAll(".slidesix")
.transition()
.delay(10000)
.duration(500)
.style("opacity", 1)
.style("display", "block");
d3.select(".stackedlineUnder25")
.remove();
d3.select(".stackedline2554")
.remove();
d3.select(".areaUnder25")
.transition()
.duration(500)
.style("opacity", 0)
.remove();
d3.select(".area2554")
.transition()
.duration(500)
.style("opacity", 0)
.remove();
d3.select(".areaOver54")
.transition()
.duration(500)
.style("opacity", 0)
.remove();
d3.select(".right.label")
.transition()
.duration(500)
.style("opacity", 0)
.transition()
.duration(0)
.text("Employment growth by age, %")
.attr("x", width-148)
.attr("y", -15)
.transition()
.delay(2000)
.duration(500)
.style("opacity", 1);
d3.select("#areaLabelUnder25")
.style("opacity", 0)
.attr("x", 455)
.attr("y", 179)
.style("fill", "#648d9e")
.text("Under 25")
.transition()
.delay(2000)
.duration(500)
.style("opacity", 1);
d3.select("#areaLabel2554")
.style("opacity", 0)
.attr("x", 471)
.attr("y", 310)
.style("fill", "#00485d")
.text("25-54")
.transition()
.delay(2000)
.duration(500)
.style("opacity", 1);
d3.select("#areaLabelOver54")
.style("opacity", 0)
.attr("x", 460)
.attr("y", 5)
.style("fill", "#00a1ce")
.text("Over 54")
.transition()
.delay(2000)
.duration(500)
.style("opacity", 1);
x = d3.time.scale()
.range([0, width])
.domain([parseDate("1-1-2010"),parseDate("9-31-2014")]);
xAxis = d3.svg.axis()
.scale(x)
.tickFormat(d3.time.format("%Y"))
.ticks(5)
.orient("bottom");
y1 = d3.scale.linear()
.range([height, 0])
.domain([0,d3.max(data,function (d) { return 1.05*d.jobgrowthover54})]);
yAxisRight = d3.svg.axis()
.scale(y1)
.orient("right")
.tickFormat(formatPercent)
.tickSize(width);
d3.select(".right.axis")
.transition()
.duration(500)
.style("opacity", 0)
.style("fill", "#333")
.transition()
.duration(1500)
.call(yAxisRight)
.transition()
.duration(500)
.style("opacity", 1);
var growthUnder25 = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y1(d.jobgrowthunder25); });
var growth2554 = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y1(d.jobgrowth2554); });
var growthOver54 = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y1(d.jobgrowthover54); });
d3.select(".growthlineUnder25")
.datum(filteredData)
.transition()
.duration(2000)
.ease("linear")
.style("stroke", "#648d9e")
.attr("d", growthUnder25);
d3.select(".growthline2554")
.transition()
.duration(2000)
.ease("linear")
.style("stroke", "#00485d")
.attr("d", growth2554);
d3.select(".jobgains")
.transition()
.duration(2000)
.ease("linear")
.style("stroke", "#00a1ce")
.attr("d", growthOver54);
d3.select(".x.axis")
.transition()
.delay(500)
.duration(1500)
.ease("linear")
.call(xAxis);
d3.selectAll(".empcircle")
.attr("class", "circleUnder25")
.attr("transform", function(d) { return "translate(" + x(d.date) + "," + y1(d.jobgrowthunder25) + ")"; } )
.attr("r", 4)
.style("opacity", 0)
.attr("id", function(d) { return "circleUnder25" + [d.idnumber]; });
d3.selectAll(".unempcircle")
.attr("class", "circle2554")
.attr("transform", function(d) { return "translate(" + x(d.date) + "," + y1(d.jobgrowth2554) + ")"; } )
.attr("r", 4)
.style("opacity", 0)
.attr("id", function(d) { return "circle2554" + [d.idnumber]; });
d3.selectAll(".circleOver54")
.attr("transform", function(d) { return "translate(" + x(d.date) + "," + y1(d.jobgrowthover54) + ")"; } )
.attr("r", 4)
.style("opacity", 0)
.attr("id", function(d) { return "circleOver54" + [d.idnumber]; });
d3.selectAll("#group201407 circle")
.transition()
.delay(2000)
.duration(500)
.style("opacity", 1);
setTimeout(function(){
d3.select("#next").on("click", function(){fadeOut();});
d3.selectAll("#buttons")
.transition()
.delay(1000)
.duration(750)
.style("opacity", 1)
.style("display", "block");
}, 17000);
}
function fadeOut() {
d3.select("#next").on('click', null);
setTimeout(function(){
d3.select("#text")
.style("padding-top", "0px");
}, 500);
document.getElementById("next").setAttribute("value", "four");
d3.select("svg")
.transition()
.duration(500)
.style("opacity", 0.5);
d3.select("#dotnine")
.transition()
.duration(250)
.style("color", "#747474");
d3.selectAll("#slides")
.transition()
.duration(500)
.style("opacity", 0)
.transition()
.delay(500)
.duration(500)
.style("opacity", 1);
d3.selectAll("#buttons")
.transition()
.delay(500)
.style("opacity", 0)
.style("display", "none");
d3.selectAll(".slidefive")
.transition()
.delay(500)
.style("opacity", 0)
.style("display", "none");
d3.selectAll(".slidesix")
.transition()
.delay(500)
.style("opacity", 0)
.style("display", "none");
d3.selectAll(".slideseven")
.transition()
.delay(500)
.duration(500)
.style("opacity", 1)
.style("display", "block");
d3.select(".slideseven")
.transition()
.delay(500)
.duration(500)
.style("font-weight", "bold")
.style("opacity", 1)
.style("display", "block");
setTimeout(function(){
d3.select("#next").on("click", function(){employmentLine();});
d3.select("#next").html("Again");
d3.selectAll("#buttons")
.transition()
.delay(1000)
.duration(750)
.style("opacity", 1)
.style("display", "block");
}, 4000);
}
});
d3.select(self.frameElement).style("height", "615px");