Skip to content

Instantly share code, notes, and snippets.

@dougdowson

dougdowson/chart.js

Last active November 12, 2017 23:00
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dougdowson/c169c74342fa705305c4 to your computer and use it in GitHub Desktop.
Save dougdowson/c169c74342fa705305c4 to your computer and use it in GitHub Desktop.
Download ZIP
Line Chart: Prime-Age Workers
Raw
chart.js
var margin = {top: 30, right: 25, bottom: 20, left: 23},
width = 565 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
var parseDate = d3.time.format("%m-%d-%Y").parse,
formatPercent = d3.format(".0"),
formatPercentDetailed = d3.format(".1%"),
numberFormat = d3.format(",.0f");
var x = d3.time.scale()
.range([0, width]);
var y0 = d3.scale.linear()
.range([height, 0]);
var y1 = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.tickFormat(d3.time.format("%Y"))
.ticks(5)
.orient("bottom");
var yAxisRight = d3.svg.axis()
.scale(y1)
.orient("right")
.tickFormat(formatPercent)
.tickSize(width);
var yAxisLeft = d3.svg.axis()
.scale(y0)
.orient("left")
.ticks(5)
.tickFormat(formatPercent);
var empLine = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y1(d.employment); });
var unempLine = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y0(d.unemploymentrate); });
var svg = d3.select("#chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var areaUnder25 = d3.svg.area()
.x(function(d) { return x(d.date); })
.y0(height)
.y1(function(d) { return y1(d.jobgainsunder25); });
var area2554 = d3.svg.area()
.x(function(d) { return x(d.date); })
.y0(function(d) { return y1(d.jobgainsunder25); })
.y1(function(d) { return y1(d.jobgainsunder25+d.jobgains2554); });
var areaOver54 = d3.svg.area()
.x(function(d) { return x(d.date); })
.y0(function(d) { return y1(d.jobgainsunder25+d.jobgains2554); })
.y1(function(d) { return y1(d.jobgainsunder25+d.jobgains2554+d.jobgainsover54)+1.5; });
var lineUnder25 = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y1(d.jobgainsunder25); });
var line2554 = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y1(d.jobgainsunder25+d.jobgains2554); });
var unempLineTwo = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y0(d.unemployment2554); });
var slideValue;
d3.csv("data.csv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.employment = +d.employment;
d.unemploymentrate = +d.unemploymentrate;
d.idnumber = +d.idnumber;
d.jobgainsunder25 = +d.jobgainsunder25;
d.jobgains2554 = +d.jobgains2554;
d.jobgainsover54 = +d.jobgainsover54;
d.jobgrowthunder25 = +d.jobgrowthunder25;
d.jobgrowth2554 = +d.jobgrowth2554;
d.jobgrowthover54 = +d.jobgrowthover54;
d.unemployment2554 = +d.unemployment2554;
});
var filteredData = data.filter(function(d) { return d.idnumber > 201001; });
x.domain([parseDate("1-1-2010"),parseDate("9-31-2014")]);
y1.domain([0,d3.max(data,function (d) { return 1.05*d.jobgrowthover54})]);
y0.domain([d3.min(data,function (d) { return 0.9*d.unemploymentrate}),d3.max(data,function (d) { return 1.1*d.unemploymentrate})]);
svg.append("g")
.attr("class", "right axis")
.call(yAxisRight);
svg.append("g")
.attr("class", "left axis")
.style("fill", "#772210")
.call(yAxisLeft);
svg.append("text")
.attr("class", "left label")
.text("Unemployment rate, %")
.attr("x", -margin.left)
.attr("y", 10)
.style("opacity", 0);
svg.append("text")
.attr("class", "right label")
.text("Employment growth by age, %")
.attr("x", width-148)
.attr("y", -15)
.style("fill", "#333");
d3.selectAll(".left.axis")
.style("opacity", 0);
var employmentPath = svg.append("path")
.attr("class", "employment");
var unemploymentPath = svg.append("path")
.attr("class", "unemploymentrate");
var growthUnder25 = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y1(d.jobgrowthunder25); });
var growth2554 = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y1(d.jobgrowth2554); });
var growthOver54 = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y1(d.jobgrowthover54); });
svg.append("path")
.attr("class", "growthlineUnder25")
.datum(filteredData)
.style("stroke", "#648d9e")
.attr("d", growthUnder25);
svg.append("path")
.attr("class", "growthline2554")
.datum(filteredData)
.style("stroke", "#00485d")
.attr("d", growth2554);
svg.append("path")
.attr("class", "jobgains")
.datum(filteredData)
.style("stroke", "#00a1ce")
.attr("d", growthOver54);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
var group = svg.selectAll(".group")
.data(data)
.enter().append("g")
.attr("class", "group")
.attr("id", function(d) { return "group" + [d.idnumber]; });
group.append("circle")
.attr("class", "circleUnder25")
.attr("transform", function(d) { return "translate(" + x(d.date) + "," + y1(d.jobgrowthunder25) + ")"; } )
.attr("r", 4)
.style("opacity", 0)
.attr("id", function(d) { return "circleUnder25" + [d.idnumber]; });
group.append("circle")
.attr("class", "circle2554")
.attr("transform", function(d) { return "translate(" + x(d.date) + "," + y1(d.jobgrowth2554) + ")"; } )
.attr("r", 4)
.style("opacity", 0)
.attr("id", function(d) { return "circle2554" + [d.idnumber]; });
group.append("circle")
.attr("class", "circleOver54")
.attr("transform", function(d) { return "translate(" + x(d.date) + "," + y1(d.jobgrowthover54) + ")"; } )
.attr("r", 4)
.style("opacity", 0)
.attr("id", function(d) { return "circleOver54" + [d.idnumber]; });
d3.selectAll("#group201407 circle")
.style("opacity", 1);
svg.append("text")
.text("Under 25")
.attr("class", "areaLabel")
.attr("id", "areaLabelUnder25")
.attr("x", 455)
.attr("y", 179)
.style("fill", "#648d9e");
svg.append("text")
.text("25-54")
.attr("class", "areaLabel")
.attr("id", "areaLabel2554")
.attr("x", 471)
.attr("y", 310)
.style("fill", "#00485d");
svg.append("text")
.text("Over 54")
.attr("class", "areaLabel")
.attr("id", "areaLabelOver54")
.attr("x", 460)
.attr("y", 5)
.style("fill", "#00a1ce");
d3.select("#next").on("click", function(){
slideValue = d3.select("#next").attr("value");
if (slideValue=="start") {
employmentLine();
} else if (slideValue=="one") {
jobGains();
} else if (slideValue=="two") {
jobGrowthByAge();
} else if (slideValue=="three") {
fadeOut();
} else if (slideValue=="four") {
employmentLine();
}
});
function animateLine() {
var l = this.getTotalLength();
i = d3.interpolateString("0," + l, l + "," + l);
return function(t) { return i(t); };
}
function highlight(marker) {
d3.select(marker)
.style("opacity", 1)
.transition()
.duration(250)
.attr("r", 6)
.style("stroke-width",3.75)
.transition()
.duration(250)
.attr("r", 4)
.style("stroke-width",2.5);
}
function employmentLine() {
setTimeout(function(){
d3.select("#next").html("Next<span class='fa fa-caret-right'></span>");
}, 500);
d3.select("#next").on('click', null);
setTimeout(function(){
d3.select("#text")
.style("padding-top", "25px");
}, 500);
d3.select("svg")
.transition()
.duration(500)
.style("opacity", 1);
d3.selectAll(".dot")
.transition()
.duration(250)
.style("color", "#ccc");
d3.select("#dotone")
.transition()
.duration(250)
.style("color", "#747474");
d3.selectAll(".group circle")
.style("opacity", 0);
d3.selectAll("#slides")
.transition()
.duration(500)
.style("opacity", 0)
.transition()
.delay(500)
.duration(500)
.style("opacity", 1);
d3.selectAll("#buttons")
.transition()
.delay(500)
.style("opacity", 0)
.style("display", "none");
d3.selectAll(".slideintro")
.transition()
.delay(500)
.style("opacity", 0)
.style("display", "none");
d3.selectAll(".slideseven")
.transition()
.delay(500)
.style("opacity", 0)
.style("display", "none");
d3.selectAll(".slideone")
.transition()
.delay(500)
.style("opacity", 1)
.style("display", "block");
d3.select(".growthlineUnder25")
.transition()
.duration(500)
.style("opacity", 0);
d3.select(".growthline2554")
.transition()
.duration(500)
.style("opacity", 0);
d3.select(".jobgains")
.transition()
.duration(500)
.style("opacity", 0);
d3.selectAll(".areaLabel")
.transition()
.duration(500)
.style("opacity", 0)
.remove();
x = d3.time.scale()
.range([0, width])
.domain([parseDate("1-1-2008"),parseDate("12-31-2014")]);
xAxis = d3.svg.axis()
.scale(x)
.tickFormat(d3.time.format("%Y"))
.ticks(7)
.orient("bottom");
d3.select(".x.axis")
.transition()
.delay(500)
.duration(500)
.ease("linear")
.call(xAxis);
y1 = d3.scale.linear()
.range([height, 0])
.domain([d3.min(data,function (d) { return 0.98*d.employment}),d3.max(data,function (d) { return 1.02*d.employment})]);
yAxisRight = d3.svg.axis()
.scale(y1)
.orient("right")
.tickSize(width);
d3.select(".right.axis")
.transition()
.duration(500)
.style("opacity", 0)
.transition()
.duration(50)
.style("fill", "#00a1ce")
.call(yAxisRight)
.transition()
.delay(550)
.duration(500)
.style("opacity", 1);
d3.selectAll(".circleUnder25")
.attr("class", "empcircle")
.attr("transform", function(d) { return "translate(" + x(d.date) + "," + y1(d.employment) + ")"; } )
.attr("r", 4)
.attr("id", function(d) { return "empCircle" + [d.idnumber]; });
d3.selectAll(".circle2554")
.attr("class", "unempcircle")
.attr("transform", function(d) { return "translate(" + x(d.date) + "," + y0(d.unemploymentrate) + ")"; } )
.attr("r", 4)
.attr("id", function(d) { return "unempCircle" + [d.idnumber]; });
d3.select("#group201407").append("text")
.attr("x", function(d) { return x(d.date) + 10; })
.attr("y", function(d) { return y1(d.employment) + 4; })
.attr("id", function(d) { return "empSlide" + [d.idnumber]; });
d3.select("#group201407").append("text")
.attr("x", function(d) { return x(d.date) + 10; })
.attr("y", function(d) { return y0(d.unemploymentrate) + 4; })
.attr("id", function(d) { return "unempSlide" + [d.idnumber]; });
d3.select("#empSlide201407")
.text(function(d) { return numberFormat([d.employment]); })
.style("fill", "#00a1ce");
d3.select("#unempSlide201407")
.text(function(d) { return formatPercentDetailed([d.unemploymentrate]/100); })
.style("fill", "#772210");
d3.select(".right.label")
.transition()
.duration(500)
.style("opacity", 0)
.transition()
.duration(50)
.style("fill", "#00a1ce")
.text("Total non-farm employment, m")
.attr("x", width-145)
.attr("y", 10)
.transition()
.delay(550)
.duration(500)
.style("opacity", 1);
d3.select(".employment")
.datum(data)
.attr("d", empLine)
.transition()
.duration(2500)
.ease("linear")
.attrTween("stroke-dasharray", animateLine)
.each("start", function() {
d3.select(".employment")
.style("opacity", 1);
})
.each("end", function() {
marker = "#empCircle201407";
highlight(marker);
d3.select("#empSlide201407")
.transition()
.duration(500)
.style("opacity", 1);
setTimeout(unemploymentLine, 4000);
});
d3.timer.flush();
}
function unemploymentLine() {
document.getElementById("next").setAttribute("value", "one");
d3.select("#dottwo")
.transition()
.duration(250)
.style("color", "#747474");
d3.selectAll(".slidetwo")
.transition()
.delay(500)
.style("opacity", 1)
.style("display", "block");
d3.select(".unemploymentrate")
.datum(data)
.attr("d", unempLine)
.transition()
.duration(2500)
.ease("linear")
.attrTween("stroke-dasharray", animateLine)
.each("start", function() {
d3.select(".unemploymentrate")
.style("opacity", 1);
d3.selectAll(".left.axis")
.transition()
.duration(750)
.style("opacity", 1);
d3.selectAll(".left.label")
.transition()
.duration(750)
.style("opacity", 1)
})
.each("end", function() {
marker = "#unempCircle201407";
highlight(marker);
d3.select("#unempSlide201407")
.transition()
.duration(500)
.style("opacity", 1);
});
setTimeout(function(){
d3.select("#next").on("click", function(){jobGains();});
d3.selectAll("#buttons")
.transition()
.delay(1000)
.duration(750)
.style("opacity", 1)
.style("display", "block");
}, 4000);
}
function jobGains() {
d3.select("#next").on('click', null);
setTimeout(function(){
d3.select("#text")
.style("padding-top", "15px");
}, 500);
d3.select("#dotthree")
.transition()
.duration(250)
.style("color", "#747474");
d3.selectAll("#slides")
.transition()
.duration(500)
.style("opacity", 0)
.transition()
.delay(1500)
.duration(500)
.style("opacity", 1);
d3.selectAll("#buttons")
.transition()
.delay(500)
.style("opacity", 0)
.style("display", "none");
d3.selectAll(".slideone")
.transition()
.delay(500)
.style("opacity", 0)
.style("display", "none");
d3.selectAll(".slidetwo")
.transition()
.delay(500)
.style("opacity", 0)
.style("display", "none");
d3.selectAll(".slidethree")
.transition()
.delay(2000)
.style("opacity", 1)
.style("display", "block");
d3.select(".employment")
.transition()
.duration(750)
.style("opacity", 0);
d3.select(".right.label")
.transition()
.duration(500)
.style("opacity", 0)
.transition()
.duration(0)
.style("fill", "#333")
.text("Employment gains, m")
.attr("x", width-110)
.attr("y", 0)
.transition()
.delay(1950)
.duration(500)
.style("opacity", 1);
d3.select(".left.label")
.transition()
.duration(500)
.style("opacity", 0);
d3.select(".unemploymentrate")
.transition()
.duration(500)
.style("opacity", 0);
d3.selectAll(".left.axis")
.transition()
.duration(500)
.style("opacity", 0);
d3.selectAll(".group circle")
.style("opacity", 0);
d3.selectAll(".group text")
.style("opacity", 0)
.remove();
d3.select(".jobgains")
.style("opacity", 1)
.datum(filteredData)
.attr("d", empLine);
x = d3.time.scale()
.range([0, width])
.domain([parseDate("1-1-2010"),parseDate("7-1-2014")]);
xAxis = d3.svg.axis()
.scale(x)
.tickFormat(d3.time.format("%Y"))
.ticks(5)
.orient("bottom");
d3.select(".x.axis")
.transition()
.delay(500)
.duration(1500)
.ease("linear")
.call(xAxis);
y1 = d3.scale.linear()
.range([height, 0])
.domain([0,d3.max(filteredData,function (d) { return 1.05*d.jobgains})]);
yAxisRight = d3.svg.axis()
.scale(y1)
.orient("right")
.tickSize(width);
d3.select(".right.axis")
.transition()
.duration(500)
.style("opacity", 0)
.style("fill", "#333")
.transition()
.delay(1500)
.call(yAxisRight)
.transition()
.duration(500)
.style("opacity", 1);
var jobgains = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y1(d.jobgains); });
d3.select(".jobgains")
.transition()
.delay(500)
.duration(1500)
.ease("linear")
.attr("d", jobgains);
setTimeout(jobGainsByAge, 6000);
}
function jobGainsByAge() {
document.getElementById("next").setAttribute("value", "two");
var delay = 5500;
d3.select("#dotfour")
.transition()
.delay(delay)
.duration(250)
.style("color", "#747474");
d3.select("#dotfive")
.transition()
.delay(2*delay)
.duration(250)
.style("color", "#747474");
d3.select("#dotsix")
.transition()
.delay(3*delay)
.duration(250)
.style("color", "#747474");
d3.selectAll("#slides")
.transition()
.delay(delay)
.duration(500)
.style("opacity", 0)
.transition()
.delay(delay)
.duration(500)
.style("opacity", 1);
d3.selectAll(".slidefourone")
.transition()
.delay(delay)
.duration(500)
.style("opacity", 1)
.style("display", "block");
d3.selectAll(".slidefourtwo")
.transition()
.delay(2*delay)
.duration(500)
.style("opacity", 1)
.style("display", "block");
d3.selectAll(".slidefourthree")
.transition()
.delay(3*delay)
.duration(500)
.style("opacity", 1)
.style("display", "block");
svg.append("path")
.style("opacity", 0)
.datum(filteredData)
.attr("class", "areaUnder25")
.attr("d", areaUnder25)
.transition()
.delay(500)
.duration(1000)
.style("opacity", 1)
.transition()
.delay(2*delay)
.duration(500)
.style("opacity", 0.5)
.transition()
.delay(4*delay)
.duration(500)
.style("opacity", 1);
svg.append("path")
.style("opacity", 0)
.datum(filteredData)
.attr("class", "area2554")
.attr("d", area2554)
.transition()
.delay(500)
.duration(1000)
.style("opacity", 1)
.transition()
.delay(delay)
.duration(500)
.style("opacity", 0.5)
.transition()
.delay(2*delay)
.duration(500)
.style("opacity", 1)
.transition()
.delay(3*delay)
.duration(500)
.style("opacity", 0.5)
.transition()
.delay(4*delay)
.duration(500)
.style("opacity", 1);
svg.append("path")
.style("opacity", 0)
.datum(filteredData)
.attr("class", "areaOver54")
.attr("d", areaOver54)
.transition()
.delay(500)
.duration(1000)
.style("opacity", 1)
.transition()
.delay(delay)
.duration(500)
.style("opacity", 0.5)
.transition()
.delay(3*delay)
.duration(500)
.style("opacity", 1);
svg.append("path")
.style("opacity", 0)
.attr("class", "stackedlineUnder25")
.datum(filteredData)
.attr("d", lineUnder25)
.transition()
.delay(500)
.duration(1000)
.style("opacity", 1);
svg.append("path")
.style("opacity", 0)
.attr("class", "stackedline2554")
.datum(filteredData)
.attr("d", line2554)
.transition()
.delay(500)
.duration(1000)
.style("opacity", 1);
d3.select(".jobgains")
.transition()
.delay(500)
.duration(1000)
.style("stroke", "#151515");
svg.append("text").text("Under 25")
.style("opacity", 0)
.attr("class", "areaLabel")
.attr("id", "areaLabelUnder25")
.attr("x", 440)
.attr("y", 333)
.transition()
.delay(delay)
.duration(1000)
.style("opacity", 1);
svg.append("text").text("25-54")
.style("opacity", 0)
.attr("class", "areaLabel")
.attr("id", "areaLabel2554")
.attr("x", 465)
.attr("y", 264)
.transition()
.delay(2*delay)
.duration(1000)
.style("opacity", 1);
svg.append("text").text("Over 54")
.style("opacity", 0)
.attr("class", "areaLabel")
.attr("id", "areaLabelOver54")
.attr("x", 448)
.attr("y", 140)
.transition()
.delay(3*delay)
.duration(1000)
.style("opacity", 1);
d3.select(".growthlineUnder25")
.datum(filteredData)
.attr("d", lineUnder25)
.transition()
.delay(4*delay)
.style("opacity", 1);
d3.select(".growthline2554")
.datum(filteredData)
.attr("d", line2554)
.transition()
.delay(4*delay)
.style("opacity", 1);
setTimeout(function(){
d3.select("#next").on("click", function(){jobGrowthByAge();});
d3.selectAll("#buttons")
.transition()
.delay(1000)
.duration(750)
.style("opacity", 1)
.style("display", "block");
}, 4*delay+750);
}
function jobGrowthByAge() {
d3.select("#next").on('click', null);
setTimeout(function(){
d3.select("#text")
.style("padding-top", "0px");
}, 500);
document.getElementById("next").setAttribute("value", "three");
d3.select("#dotseven")
.transition()
.duration(250)
.style("color", "#747474");
d3.select("#doteight")
.transition()
.delay(10000)
.duration(250)
.style("color", "#747474");
d3.selectAll("#slides")
.transition()
.duration(500)
.style("opacity", 0)
.transition()
.delay(2000)
.duration(500)
.style("opacity", 1);
d3.selectAll("#buttons")
.transition()
.delay(500)
.style("opacity", 0)
.style("display", "none");
d3.selectAll(".slidethree")
.transition()
.delay(500)
.style("opacity", 0)
.style("display", "none");
d3.selectAll(".slidefourone")
.transition()
.delay(500)
.style("opacity", 0)
.style("display", "none");
d3.selectAll(".slidefourtwo")
.transition()
.delay(500)
.style("opacity", 0)
.style("display", "none");
d3.selectAll(".slidefourthree")
.transition()
.delay(500)
.style("opacity", 0)
.style("display", "none");
d3.selectAll(".slidefive")
.transition()
.delay(2000)
.style("opacity", 1)
.style("display", "block");
d3.selectAll(".slidesix")
.transition()
.delay(10000)
.duration(500)
.style("opacity", 1)
.style("display", "block");
d3.select(".stackedlineUnder25")
.remove();
d3.select(".stackedline2554")
.remove();
d3.select(".areaUnder25")
.transition()
.duration(500)
.style("opacity", 0)
.remove();
d3.select(".area2554")
.transition()
.duration(500)
.style("opacity", 0)
.remove();
d3.select(".areaOver54")
.transition()
.duration(500)
.style("opacity", 0)
.remove();
d3.select(".right.label")
.transition()
.duration(500)
.style("opacity", 0)
.transition()
.duration(0)
.text("Employment growth by age, %")
.attr("x", width-148)
.attr("y", -15)
.transition()
.delay(2000)
.duration(500)
.style("opacity", 1);
d3.select("#areaLabelUnder25")
.style("opacity", 0)
.attr("x", 455)
.attr("y", 179)
.style("fill", "#648d9e")
.text("Under 25")
.transition()
.delay(2000)
.duration(500)
.style("opacity", 1);
d3.select("#areaLabel2554")
.style("opacity", 0)
.attr("x", 471)
.attr("y", 310)
.style("fill", "#00485d")
.text("25-54")
.transition()
.delay(2000)
.duration(500)
.style("opacity", 1);
d3.select("#areaLabelOver54")
.style("opacity", 0)
.attr("x", 460)
.attr("y", 5)
.style("fill", "#00a1ce")
.text("Over 54")
.transition()
.delay(2000)
.duration(500)
.style("opacity", 1);
x = d3.time.scale()
.range([0, width])
.domain([parseDate("1-1-2010"),parseDate("9-31-2014")]);
xAxis = d3.svg.axis()
.scale(x)
.tickFormat(d3.time.format("%Y"))
.ticks(5)
.orient("bottom");
y1 = d3.scale.linear()
.range([height, 0])
.domain([0,d3.max(data,function (d) { return 1.05*d.jobgrowthover54})]);
yAxisRight = d3.svg.axis()
.scale(y1)
.orient("right")
.tickFormat(formatPercent)
.tickSize(width);
d3.select(".right.axis")
.transition()
.duration(500)
.style("opacity", 0)
.style("fill", "#333")
.transition()
.duration(1500)
.call(yAxisRight)
.transition()
.duration(500)
.style("opacity", 1);
var growthUnder25 = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y1(d.jobgrowthunder25); });
var growth2554 = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y1(d.jobgrowth2554); });
var growthOver54 = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y1(d.jobgrowthover54); });
d3.select(".growthlineUnder25")
.datum(filteredData)
.transition()
.duration(2000)
.ease("linear")
.style("stroke", "#648d9e")
.attr("d", growthUnder25);
d3.select(".growthline2554")
.transition()
.duration(2000)
.ease("linear")
.style("stroke", "#00485d")
.attr("d", growth2554);
d3.select(".jobgains")
.transition()
.duration(2000)
.ease("linear")
.style("stroke", "#00a1ce")
.attr("d", growthOver54);
d3.select(".x.axis")
.transition()
.delay(500)
.duration(1500)
.ease("linear")
.call(xAxis);
d3.selectAll(".empcircle")
.attr("class", "circleUnder25")
.attr("transform", function(d) { return "translate(" + x(d.date) + "," + y1(d.jobgrowthunder25) + ")"; } )
.attr("r", 4)
.style("opacity", 0)
.attr("id", function(d) { return "circleUnder25" + [d.idnumber]; });
d3.selectAll(".unempcircle")
.attr("class", "circle2554")
.attr("transform", function(d) { return "translate(" + x(d.date) + "," + y1(d.jobgrowth2554) + ")"; } )
.attr("r", 4)
.style("opacity", 0)
.attr("id", function(d) { return "circle2554" + [d.idnumber]; });
d3.selectAll(".circleOver54")
.attr("transform", function(d) { return "translate(" + x(d.date) + "," + y1(d.jobgrowthover54) + ")"; } )
.attr("r", 4)
.style("opacity", 0)
.attr("id", function(d) { return "circleOver54" + [d.idnumber]; });
d3.selectAll("#group201407 circle")
.transition()
.delay(2000)
.duration(500)
.style("opacity", 1);
setTimeout(function(){
d3.select("#next").on("click", function(){fadeOut();});
d3.selectAll("#buttons")
.transition()
.delay(1000)
.duration(750)
.style("opacity", 1)
.style("display", "block");
}, 17000);
}
function fadeOut() {
d3.select("#next").on('click', null);
setTimeout(function(){
d3.select("#text")
.style("padding-top", "0px");
}, 500);
document.getElementById("next").setAttribute("value", "four");
d3.select("svg")
.transition()
.duration(500)
.style("opacity", 0.5);
d3.select("#dotnine")
.transition()
.duration(250)
.style("color", "#747474");
d3.selectAll("#slides")
.transition()
.duration(500)
.style("opacity", 0)
.transition()
.delay(500)
.duration(500)
.style("opacity", 1);
d3.selectAll("#buttons")
.transition()
.delay(500)
.style("opacity", 0)
.style("display", "none");
d3.selectAll(".slidefive")
.transition()
.delay(500)
.style("opacity", 0)
.style("display", "none");
d3.selectAll(".slidesix")
.transition()
.delay(500)
.style("opacity", 0)
.style("display", "none");
d3.selectAll(".slideseven")
.transition()
.delay(500)
.duration(500)
.style("opacity", 1)
.style("display", "block");
d3.select(".slideseven")
.transition()
.delay(500)
.duration(500)
.style("font-weight", "bold")
.style("opacity", 1)
.style("display", "block");
setTimeout(function(){
d3.select("#next").on("click", function(){employmentLine();});
d3.select("#next").html("Again<span class='fa fa-repeat'></span>");
d3.selectAll("#buttons")
.transition()
.delay(1000)
.duration(750)
.style("opacity", 1)
.style("display", "block");
}, 4000);
}
});
d3.select(self.frameElement).style("height", "615px");
Raw
data.csv
date employment unemploymentrate month day year idnumber jobgains jobgainsunder25 jobgains2554 jobgainsover54 jobgrowthunder25 jobgrowth2554 jobgrowthover54
1-1-2008 138.365 4.988219105 1 1 2008 200801
2-1-2008 138.279 4.879175805 2 1 2008 200802
3-1-2008 138.199 5.082256933 3 1 2008 200803
4-1-2008 137.985 4.96654072 4 1 2008 200804
5-1-2008 137.803 5.440594156 5 1 2008 200805
6-1-2008 137.631 5.556923635 6 1 2008 200806
7-1-2008 137.421 5.78562689 7 1 2008 200807
8-1-2008 137.162 6.103167983 8 1 2008 200808
9-1-2008 136.71 6.142200945 9 1 2008 200809
10-1-2008 136.236 6.504558485 10 1 2008 200810
11-1-2008 135.471 6.814625124 11 1 2008 200811
12-1-2008 134.774 7.297533219 12 1 2008 200812
1-1-2009 133.976 7.819207574 1 1 2009 200901
2-1-2009 133.275 8.346167286 2 1 2009 200902
3-1-2009 132.449 8.710658976 3 1 2009 200903
4-1-2009 131.765 8.965820761 4 1 2009 200904
5-1-2009 131.411 9.369486969 5 1 2009 200905
6-1-2009 130.944 9.505804183 6 1 2009 200906
7-1-2009 130.617 9.450363102 7 1 2009 200907
8-1-2009 130.401 9.600404391 8 1 2009 200908
9-1-2009 130.174 9.757064755 9 1 2009 200909
10-1-2009 129.976 9.982833065 10 1 2009 200910
11-1-2009 129.97 9.890302707 11 1 2009 200911
12-1-2009 129.687 9.860819928 12 1 2009 200912
1-1-2010 129.705 9.747464212 1 1 2010 201001
2-1-2010 129.655 9.836716107 2 1 2010 201002 0 0 0 0 0 0 0
3-1-2010 129.811 9.880231742 3 1 2010 201003 0.156 0.004756231 -0.035738756 0.186982525 0.070480442 0 0.768250501
4-1-2010 130.062 9.915158883 4 1 2010 201004 0.407 0.008265852 0.142752768 0.25598138 0.270175026 0.380749801 1.21609321
5-1-2010 130.578 9.641478213 5 1 2010 201005 0.923 0.230701667 0.225849713 0.46644862 1.26864795 0.07976602 1.634807937
6-1-2010 130.456 9.427133847 6 1 2010 201006 0.801 -0.018282186 0.294421931 0.524860255 -0.234934806 0.213772933 1.918805753
7-1-2010 130.395 9.451160007 7 1 2010 201007 0.74 0.040133499 0.102549222 0.597317279 0.158580994 0.023398032 2.228290552
8-1-2010 130.353 9.514105668 8 1 2010 201008 0.698 0.257859452 -0.095164932 0.535305481 1.756137672 0.02765222 2.221008556
9-1-2010 130.296 9.468016704 9 1 2010 201009 0.641 0.046651517 -0.054698247 0.64904673 0.40526254 0.049986706 2.639723284
10-1-2010 130.537 9.451217528 10 1 2010 201010 0.882 0.069352366 0.296931504 0.515716129 0.187947844 0.090401489 1.754960859
11-1-2010 130.674 9.795168919 11 1 2010 201011 1.019 0.173623909 0.172568177 0.672807914 0.681310936 -0.208455198 2.202803568
12-1-2010 130.745 9.35504657 12 1 2010 201012 1.09 0.033513857 0.236716157 0.819769985 -0.01174674 0.046796065 2.960131076
1-1-2011 130.815 9.079812268 1 1 2011 201101 1.16 0.291017058 0.043630135 0.825352807 1.438975684 -0.330763095 2.818132168
2-1-2011 130.983 9.040970772 2 1 2011 201102 1.328 0.266999953 0.045216668 1.015783379 1.26864795 -0.348843393 3.535408702
3-1-2011 131.195 8.962015084 3 1 2011 201103 1.54 0.357359981 0.126882873 1.055757146 1.902971925 -0.188247806 3.761150555
4-1-2011 131.517 9.080134926 4 1 2011 201104 1.862 0.341775176 0.177036275 1.343188549 1.462469165 -0.467960649 4.522119061
5-1-2011 131.619 9.036254446 5 1 2011 201105 1.964 0.298934027 0.357469935 1.307596038 1.198167509 -0.261632545 4.387402148
6-1-2011 131.836 9.108749511 6 1 2011 201106 2.181 0.349899735 0.422323061 1.408777204 1.168800658 -0.529646371 4.420171127
7-1-2011 131.942 8.991644326 7 1 2011 201107 2.287 0.283421418 0.525213746 1.478364836 0.687184306 -0.481786759 4.616784999
8-1-2011 132.064 8.99013817 8 1 2011 201108 2.409 0.453890538 0.377056514 1.578052947 1.991072477 -0.408402021 5.253959585
9-1-2011 132.285 9.025762857 9 1 2011 201109 2.63 0.543099806 0.198748016 1.888152178 2.5372959 -0.617920766 6.440924813
10-1-2011 132.468 8.83726671 10 1 2011 201110 2.813 0.779344672 0.175759715 1.857895613 4.064372137 -0.589204999 6.382668851
11-1-2011 132.632 8.649146833 11 1 2011 201111 2.977 0.623793816 0.444183615 1.909022568 3.218606837 -0.168040415 6.706717641
12-1-2011 132.828 8.504086379 12 1 2011 201112 3.173 0.593625857 0.591192513 1.98818163 3.013038882 -0.019143845 6.994356454
1-1-2012 133.188 8.19688065 1 1 2012 201201 3.533 0.718254278 0.421267019 2.393478704 3.988018325 -0.020207392 8.767522301
2-1-2012 133.414 8.320953845 2 1 2012 201202 3.759 0.74931844 0.361698995 2.647982565 4.269940092 -0.003190641 9.845257601
3-1-2012 133.657 8.224221793 3 1 2012 201203 4.002 0.766649695 0.584435827 2.650914478 4.305180312 0.178675884 9.779719643
4-1-2012 133.753 8.153798377 4 1 2012 201204 4.098 0.761909946 0.711412994 2.62467706 4.046752026 0.102100505 9.437465866
5-1-2012 133.863 8.189304661 5 1 2012 201205 4.208 0.880006268 0.561427735 2.766565996 4.992364619 0.132943366 10.20571637
6-1-2012 133.951 8.187760259 6 1 2012 201206 4.296 0.892616246 0.460832872 2.942550882 5.115705392 0.061685722 10.93391589
7-1-2012 134.111 8.19384397 7 1 2012 201207 4.456 0.945336546 0.678564153 2.832099301 5.092211911 -0.02765222 10.13653741
8-1-2012 134.261 8.058551219 8 1 2012 201208 4.606 0.595342673 0.819259036 3.191398292 2.836837778 0.056367987 11.44001456
9-1-2012 134.422 7.786242799 9 1 2012 201209 4.767 0.902121059 0.683037922 3.18184102 5.180312463 0.318000532 11.86601129
10-1-2012 134.647 7.805436411 10 1 2012 201210 4.992 0.965816835 0.655587875 3.37059529 5.814636438 0.511566073 12.84908065
11-1-2012 134.85 7.757055088 11 1 2012 201211 5.195 1.0416727 0.577047485 3.576279815 5.937977211 0.090401489 13.27143637
12-1-2012 135.064 7.89336592 12 1 2012 201212 5.409 0.921312855 0.820259233 3.667427912 5.06284506 0.246742888 13.48989623
1-1-2013 135.261 7.909492033 1 1 2013 201301 5.606 1.006671629 0.888967358 3.710361013 5.403500529 0.142515288 13.44984526
2-1-2013 135.541 7.746718882 2 1 2013 201302 5.886 0.945096908 1.176893235 3.764009857 4.957124398 0.406274927 13.58820317
3-1-2013 135.682 7.547437443 3 1 2013 201303 6.027 0.853293964 1.337181966 3.83652407 4.19358628 0.400957192 13.65738212
4-1-2013 135.885 7.52000206 4 1 2013 201304 6.23 1.032591351 1.302864697 3.894543952 5.338893457 0.393512364 13.91589295
5-1-2013 136.084 7.512418947 5 1 2013 201305 6.429 0.987403247 1.379546128 4.062050625 5.145072242 0.562616325 14.65501547
6-1-2013 136.285 7.538730089 6 1 2013 201306 6.63 1.194102877 1.338627054 4.097270069 6.360859861 0.452007445 14.71691243
7-1-2013 136.434 7.327240146 7 1 2013 201307 6.779 1.216424141 1.402167045 4.160408815 6.466580524 0.492422228 14.9244493
8-1-2013 136.636 7.241612249 8 1 2013 201308 6.981 1.110803979 1.479288853 4.390907168 5.656055445 0.431800053 15.64172583
9-1-2013 136.8 7.205752767 9 1 2013 201309 7.145 1.384797859 1.581817599 4.178384543 7.300599084 0.496676416 14.7678864
10-1-2013 137.037 7.204527082 10 1 2013 201310 7.382 1.361166771 1.674638067 4.346195162 6.501820745 -0.011699016 14.70963044
11-1-2013 137.311 6.981401819 11 1 2013 201311 7.656 1.412358352 1.854790029 4.388851619 7.224245272 0.571124701 15.31039505
12-1-2013 137.395 6.68077993 12 1 2013 201312 7.74 1.51653033 1.892200077 4.331269594 7.934923059 0.6753523 15.16111415
1-1-2014 137.539 6.584330374 1 1 2014 201401 7.884 1.270705206 2.208144982 4.405149813 6.660401739 1.262430205 15.71090479
2-1-2014 137.761 6.716326858 2 1 2014 201402 8.106 1.139740984 2.309730553 4.656528463 5.761776107 1.293273066 16.58110322
3-1-2014 137.964 6.711985047 3 1 2014 201403 8.309 1.499294115 2.315208277 4.494497608 8.116997533 1.41983515 16.09685054
4-1-2014 138.268 6.275173399 4 1 2014 201404 8.613 1.500425555 2.368578719 4.743995726 7.823329026 1.197553842 16.73038413
5-1-2014 138.497 6.297031739 5 1 2014 201405 8.842 1.640951462 2.28334957 4.917698968 8.669094326 1.08056368 17.37119971
6-1-2014 138.795 6.084973827 6 1 2014 201406 9.14 1.521719655 2.659458547 4.958821798 8.011276871 1.576176549 17.61514655
7-1-2014 139.004 6.198445101 7 1 2014 201407 9.349 1.618239017 2.59652628 5.134234703 8.522260073 1.425152885 18.19406517
Raw
index.html
<!DOCTYPE HTML>
<meta charset="utf-8">
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<script src="http://d3js.org/d3.v3.min.js"></script>
<style>
body, h1, h2, h3, p {
margin: 0px;
padding: 0px;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.5em;
color: #4a4a4a;
}
a, a:visited, a:active, a:hover {
color: #4a4a4a;
text-decoration: none;
}
a {
text-decoration: underline;
}
#content {
margin: 5px;
padding: 0px 0px 50px 0px;
width: 850px;
text-align: left;
}
p.body {
margin: 0px;
padding: 15px 0px 13px 0px;
line-height: 1.5rem;
}
#slides {
margin: 0px;
padding: 0px;
background: #fff;
height: 400px;
width: 250px;
float: right;
}
#slides p {
margin: 0px;
padding: 0px 0px 13px 15px;
color: #4a4a4a;
font-weight: normal;
}
#container {
padding: 15px;
border: 1px solid #ccc;
height: 450px;
clear: both;
}
#chart {
margin: 0px;
padding: 0px;
}
#header {
margin: 0px;
padding: 0px;
height: 34px;
background: #747474;
}
#block {
float: left;
margin: 0px;
padding: 0px;
height: 100%;
width: 10px;
background: #ff0000;
}
#header h1 {
margin: 0px 0px 0px 10px;
padding: 4px 0px 0px 7px;
font-family: Georgia, "Times New Roman", serif;
font-size: 18px;
font-weight: normal;
color: #fff;
}
p {
margin: 0px;
padding: 0px 0px 13px 15px;
}
#unit {
padding: 13px 0px 0px 0px;
font-weight: bold;
}
#date {
margin: 0px;
padding: 0px;
}
#source {
margin: 0px 0px 20px 0px;
padding: 0px;
font-size: 11px;
}
.areaLabel {
fill: #fff;
font-weight: bold;
}
g.right.axis path.domain, g.left.axis path.domain {
stroke-width: 0px;
}
g.left.axis g.tick line {
stroke-width: 0px;
}
g.x.axis path.domain, g.x.axis g.tick.major line, g.x.axis g.tick line {
stroke: #4a4a4a;
stroke-width: 1px;
shape-rendering: crispEdges;
}
.axis path, .axis line {
fill: none;
stroke: #ccc;
shape-rendering: crispEdges;
}
.axis line {
stroke: #ddd;
stroke-width: 1;
shape-rendering: crispEdges;
}
g.group text, g.tick text {
color: #4a4a4a;
font-size: 12px;
}
.left.label {
fill: #772210;
font-size: 12px;
}
.right.label {
font-size: 12px;
fill: #4a4a4a;
}
g.group text {
opacity: 0;
}
.employment, .jobgains, .nilfLine {
fill: none;
stroke: #00a1ce;
stroke-width: 2.5px;
}
.unemploymentrate {
fill: none;
stroke: #772210;
stroke-width: 2.5px;
opacity: 0;
}
.unempLineTwo {
fill: none;
stroke: #772210;
stroke-width: 2.5px;
}
#buttons {
margin: 0px 0px 0px 15px;
padding: 0px;
}
.button {
display: inline-block;
margin: 0px 2px 0px 0px;
padding: 4px 6px;
line-height: 20px;
background:#ff0000;
min-width: 60px;
border-radius: 3px;
text-align: center;
color: #fff;
font-family: Arial, sans-serif;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
}
.button:hover {
background:#e3120b;
color: #fff;
cursor: pointer;
}
.button span {
margin: 0px;
padding: 0px 3px;
}
.empcircle, .unempcircle, .nilfcircle {
stroke: #00a1ce;
stroke-width: 2.5px;
fill: #fff;
opacity: 0;
}
.circleUnder25, .circle2554, .circleOver54 {
stroke: #648d9e;
stroke-width: 2.5px;
fill: #fff;
}
.circle2554 {
stroke: #00485d;
}
.circleOver54 {
stroke: #00a1ce;
}
.group .unempcircle {
stroke: #772210;
}
.areaUnder25 {
fill: #648d9e;
stroke-width: 0;
}
.area2554 {
fill: #00485d;
stroke-width: 0;
}
.areaOver54 {
fill: #00a1ce;
stroke-width: 0;
}
.stackedlineUnder25, .stackedline2554, .growthlineUnder25, .growthline2554 {
stroke: #fff;
stroke-width: 2.5;
fill: none;
}
.slideone, .slidetwo, .slidethree, .slidefourone, .slidefourtwo, .slidefourthree, .slidefive, .slidesix, .slideseven {
opacity: 0;
display: none;
}
#text {
margin: 0px;
padding: 0px;
}
#progress {
text-align: center;
margin: 0px;
padding: 7px 0px 0px 0px;
display: block;
}
#next span {
margin: 0px;
padding: 0px 3px;
}
.dot {
line-height: 12px;
font-size: 30px;
width: 12px;
height: 20px;
margin: 0px;
padding: 0px;
color: #ccc;
}
span.lightblue {
color: #00a1ce;
font-weight: bold;
}
span.darkblue {
color: #00485d;
font-weight: bold;
}
span.grayblue {
color: #648d9e;
font-weight: bold;
}
span.darkred {
color: #772210;
font-weight: bold;
}
</style>
<body>
<div id="content">
<div id="header">
<div id="block"></div>
<h1>What happened to America's &ldquo;prime-age&rdquo; workers?</h1>
</div>
<div id="container">
<div id="progress">
<span class="dot" id="dotone">&bull;</span>
<span class="dot" id="dottwo">&bull;</span>
<span class="dot">&nbsp;</span>
<span class="dot" id="dotthree">&bull;</span>
<span class="dot" id="dotfour">&bull;</span>
<span class="dot" id="dotfive">&bull;</span>
<span class="dot" id="dotsix">&bull;</span>
<span class="dot">&nbsp;</span>
<span class="dot" id="dotseven">&bull;</span>
<span class="dot" id="doteight">&bull;</span>
<span class="dot">&nbsp;</span>
<span class="dot" id="dotnine">&bull;</span>
</div>
<div id="slides">
<div id="text">
<p class="slideintro">Have America's prime-age workers been left out of the economic recovery?</p>
<p class="slideone">Since the American labour market hit a bottom in early 2010, total nonfarm <span class="lightblue">employment</span> has grown steadily from 130m to 139m workers.</p>
<p class="slidetwo">Meanwhile, the <span class="darkred">unemployment</span> rate has fallen from almost 10% to around 6%.</p>
<p class="slidethree">But the 9m jobs created since 2010 have not been distributed evenly.</p>
<p class="slidefourone"><span class="grayblue">Younger workers aged 16 to 24</span>, who represent 14% of the labour force, accounted for 17% of the job gains.</p>
<p class="slidefourtwo"><span class="darkblue">Prime-age workers aged 25 to 54</span>, representing two-thirds of the labour force, accounted for just 28% of the job gains.</p>
<p class="slidefourthree"><span class="lightblue">Older workers aged 55 and over</span>, who comprise a fifth of the labour force, accounted for more than half of all new jobs.</p>
<p class="slidefive">Worryingly, <span class="darkblue">prime-age employment has grown just 1.4%</span> since 2010, compared to <span class="grayblue">8.5% for younger workers</span> and <span class="lightblue">18.2% for older workers</span>.</p>
<p class="slidesix">Much of this growth is due to aging: the number of people over 55 is growing more rapidly than those aged 25 to 54. But it also reflects the difficulty that prime-aged workers -- especially men without college education -- have finding jobs.</p>
<p class="slideseven">As America recovers from the Great Recession, the good economic news hides weaknesses. Employment has returned to pre-recession levels, but for many people a real recovery has yet to come.</p>
<p class="slideseven">See story in our recent issue <a href="http://www.economist.com/news/briefing/21607810-new-figures-show-speed-which-americas-economy-can-grow-without-stoking-inflation-has">here</a>.</p>
</div>
<div id="buttons">
<div class="button" id="next" value="start">Start<span class="fa fa-caret-right"></span></div>
</div>
</div>
<div id="chart"></div>
<p id="source">Source: US Bureau of Labour Statistics</p>
</div>
<p class="body">American businesses added 209,000 jobs in July marking the sixth straight month of job growth above 200,000. But the favourable employment figures belie concerns about the economic recovery, from declining labour-force participation and anaemic wage growth, to high rates of long-term unemployment. This &ldquo;action chart&rdquo; highlights one troubling aspect of the economic climate: the lack of job growth among prime-age workers aged 25 to 54.</p>
</div>
<script type="text/javascript" src="chart.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment