https://www.nber.org/modules/custom/nber_charts/js/unemployment-graphic.js?v=1

1(function (drupalSettings, d3) {
2
3// set the dimensions and margins of the graph
4var margin = {
5		top: 25,
6		right: 25,
7		bottom: 25,
8		left: 25
9	},
10    width = 1200 - margin.left - margin.right,
11    height = 400 - margin.top - margin.bottom;
12
13var unemployment_data = drupalSettings.nberCharts.animatedHeaderBlock.unemployment_data_api_response ? drupalSettings.nberCharts.animatedHeaderBlock.unemployment_data_api_response.observations : false,
14	recession_data = drupalSettings.nberCharts.animatedHeaderBlock.recession_data_api_response ? drupalSettings.nberCharts.animatedHeaderBlock.recession_data_api_response : false;
15
16// preprocess dates
17var parseTime = d3.timeParse("%Y-%m-%d"),
18	now = new Date();
19
20if (unemployment_data) {
21
22	unemployment_data.forEach(function(d) {
23		d.date = parseTime(d.date);
24	});
25
26	// define the scales
27	var xScale = d3.scaleTime()
28		.domain(d3.extent(unemployment_data, function(d) { return d.date; }))
29		.range([0, width]);
30
31	var yScale = d3.scaleLinear()
32		.domain([0, d3.max(unemployment_data, function(d) { return + d.value; })])
33		.range([height, 0]);
34
35	// define the line
36	var line = d3.line()
37		.x(function(d) { return xScale(d.date); })
38    	.y(function(d) { return yScale(d.value); })
39    	.curve(d3.curveMonotoneX);
40
41	var svg = d3.select('.animated-header__graph')
42		.append('svg')
43			.attr('width', width + margin.left + margin.right)
44    		.attr('height', height + margin.top + margin.bottom)
45    		.classed('unrate', true)
46    	.append('g')
47    		.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
48
49    // define diagonal hatch pattern
50    svg.append('defs')
51        .append('pattern')
52        .attr('id', 'hatch')
53        .attr('patternUnits', 'userSpaceOnUse')
54        .attr('width', 4)
55        .attr('height', 4)
56        .attr('patternTransform', 'rotate(-45)')
57        .append('line')
58        .attr('x1', 0)
59        .attr('y', 0)
60        .attr('x2', 0)
61        .attr('y2', 4)
62        .attr('stroke', '#2258b2')
63        .attr('stroke-width', 2);
64
65	// add grid lines
66	svg.append('g')
67		.attr('class', 'grid')
68		.call(d3.axisLeft(yScale)
69			.ticks(5)
70			.tickSize(-width)
71			.tickFormat('')
72		)
73		.call(function(g) {
74			g.select('.domain').remove();
75		});
76
77	if (recession_data) {
78
79		recession_data.forEach(function(d) {
80			d.peak = parseTime(d.peak);
81			d.trough = parseTime(d.trough);
82		});
83
84		// build recession bars
85		svg.selectAll('g.recession')
86			.data(recession_data)
87			.enter()
88			.append('g')
89			.attr('class', 'recession')
90            .classed('ongoing', function(d) { return d.trough ? false : true; })
91			.append('rect')
92    		.attr('x', function(d) { return xScale(d.peak ? d.peak : 0); })
93    		.attr('y', -50)
94    		.attr('width', function(d) { return xScale(d.trough ? d.trough : parseTime(now.getFullYear() + '-' + (now.getMonth() + 1) + '-' + now.getDate())) - xScale(d.peak ? d.peak : d.trough); })
95    		.attr('height', height + 100);
96    }
97
98    // build unemployment line graph
99    var path = svg.append('path')
100        .datum(unemployment_data)
101        .attr('class', 'line')
102        .attr('d', line);
103
104    var totalLength = path.node().getTotalLength();
105
106    path.attr('stroke-dasharray', totalLength + ' ' + totalLength)
107        .attr('stroke-dashoffset', totalLength)
108        .transition()
109        .duration(2500)
110        .ease(d3.easeLinear)
111        .attr('stroke-dashoffset', 0);
112}
113
114})(drupalSettings, d3);