2d:null 2e:["$","title",null,{"children":"Record Unemployment Claims | Chris L Buie | Observable"}] 33:T52c,md` Last week, U.S. unemployment claims reached an all-time high. Initial claims saw a jump from the previous week's recorded value of 282,000 to a record-breaking 3.28 million. This number is expected to be low as many people reported problems while filing claims due to the high volume of applications overwhelming the filing system. These numbers represent the first of many shockwaves likely to hit the global economy due to the impact of COVID-19. The previous record for weekly unemployment filings were reported on October 2, 1982, totaling 695,000. This figure has long been the record holder reaching back to the Great Depression. The recent Global Financial Crisis peaked on February 21, 2009, recording 665,000 claims. Worldwide, the United Nations estimates that up to 25 million jobs could be lost in the economic upheaval from the COVID-19 outbreak. This would exceed the 22 million that were lost during the 2008 Global Financial Crisis. Ellen Zentner, an economist at Morgan Stanley, said in a note to clients that 17 million jobs could be lost through May -- 2x the entire 8.7 million jobs that were lost in the Global Financial Crisis. She expects the unemployment rate to average 12.8% in the April-June quarter, which would be the highest level since the 1930s. `34:T74a,timeSeries = function(data, xAxis, yAxis) { const svg = d3.select(DOM.svg(width, height)); svg.append("g").call(xAxis); svg.append("g").call(yAxis); // // Draw an area plot // svg // .append("path") // .datum(data) // .attr("fill", 'dodgerblue') // .attr("opacity", 1) // .attr("d", area); svg .append("path") .datum(data) .attr("fill", "none") .attr("stroke", "dodgerblue") .attr("stroke-width", 1.4) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); const tooltip = svg.append("g"); svg.on("touchmove mousemove", function() { const { date, value } = bisect(d3.mouse(this)[0]); tooltip.attr("transform", `translate(${x(date)},${y(value)})`).call( callout, `${value.toLocaleString(undefined, { // style: "currency", // currency: "USD" })} ${date.toLocaleString(undefined, { month: "short", day: "numeric", year: "numeric" })}` ); }); svg.on("touchend mouseleave", () => tooltip.call(callout, null)); // add blinking point let radius = 5; function flashingCircle(duration) { var cir = svg .append("circle") .attr("class", "circle") .attr("cx", x.range()[1]) .attr("cy", y.range()[1] + margin.top + radius) .attr("r", radius) .attr("fill", "red") .attr("stroke", "dodgerblue"); repeat(); function repeat() { cir .transition() .ease(d3.easeQuad) .duration(duration) .attr("fill", "#fff") // .attr("cx", width - radius) .transition() .ease(d3.easeQuad) .duration(duration) .attr("fill", "dodgerblue") // .attr("cx", margin.left + radius) .on("end", repeat); } } flashingCircle(1000); return svg.node(); }35:Tae3,addAnnotations = function() { const annotations = [ { // note: { // title: "text holder", // lineType: "none", // align: "middle", // wrap: 150 //custom text wrapping // }, subject: { height: height - margin.bottom, width: 22 }, type: d3_annotation.annotationCalloutRect, y: 0, disable: ["connector"], // doesn't draw the connector //can pass "subject" "note" and "connector" as valid options x: 675, y: 0, dy: 1, dx: 1, className: "show-bg", data: {} }, { subject: { height: height - margin.bottom, width: 10 }, type: d3_annotation.annotationCalloutRect, y: 0, disable: ["connector"], // doesn't draw the connector //can pass "subject" "note" and "connector" as valid options x: d3.max(x.range()) - d3.max(x.range()) * 0.905, y: 0, dy: 1, dx: 1, className: "show-bg", data: {} }, { subject: { height: height - margin.bottom, width: 31 }, type: d3_annotation.annotationCalloutRect, y: 0, disable: ["connector"], // doesn't draw the connector //can pass "subject" "note" and "connector" as valid options x: d3.max(x.range()) - d3.max(x.range()) * 0.86, y: 0, dy: 1, dx: 1, className: "show-bg", data: {} }, { id: "reagans-recession", note: { label: "1980-1982", title: "Reagan's Recession" }, x: d3.max(x.range()) - d3.max(x.range()) * 0.867, y: 400, dy: -60, dx: 67, subject: { radius: 35, radiusPadding: 0 }, type: d3_annotation.annotationCalloutCircle }, { id: "great-recession", note: { label: "2007-2009", title: "Global Financial Crisis" }, x: d3.max(x.range()) - d3.max(x.range()) * 0.2448, y: 386.8, dx: -70, dy: -20 }, { id: "covid-19", note: { label: "2020", title: "COVID-19" }, x: d3.max(x.range()) - d3.max(x.range()) * 0.00, y: 45, dx: -90, dy: 10, subject: { radius: 16, radiusPadding: 0 }, type: d3_annotation.annotationCalloutCircle } ].map(function(d) { d.color = "#E8336D"; return d; }); chart; // reactive hack to force annotations to render whenever the chart is redrawn const makeAnnotations = d3_annotation .annotation() .type(d3_annotation.annotationLabel) .annotations(annotations); const annotate = d3 .select("svg") .append("g") .attr("class", "annotation-group") .call(makeAnnotations); return annotate; }36:[] 31:{"id":"52ff8f5ebf2bea4c","slug":"record-unemployment-claims","title":"Record Unemployment Claims","thumbnail":"3a5cebe85909c7d57e40418338e4aa4e0cc49f76eb9c924652a69a6961f79c17","access_level":"public","create_time":"$D2020-03-29T18:14:37.219Z","update_time":"$D2020-04-04T22:39:15.822Z","view_time":null,"first_public_time":"$D2020-04-02T21:12:49.470Z","has_unpublished_edits":null,"fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"5ff335675a444f4e","login":"cbuie","name":"Chris L Buie","avatar_url":"https://avatars-next.observableusercontent.com/b68b101792a9b0a1bdd51d7424d01cd84dea6bd34ad829460c93e27aad96ebb2","tier":"starter_2024"},"version":911,"publish_version":911,"role":null,"authored":false,"authors":[{"type":"individual","id":"fb193f2e50e06492","login":"cbuie","name":"Chris L Buie","avatar_url":"https://avatars-next.observableusercontent.com/b68b101792a9b0a1bdd51d7424d01cd84dea6bd34ad829460c93e27aad96ebb2","tier":null}],"members":[{"type":"individual","id":"fb193f2e50e06492","login":"cbuie","name":"Chris L Buie","avatar_url":"https://avatars-next.observableusercontent.com/b68b101792a9b0a1bdd51d7424d01cd84dea6bd34ad829460c93e27aad96ebb2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":{"id":"cdeeaa28cf4eb3ed","slug":"mycharts","title":"myCharts","owner":{"id":"5ff335675a444f4e","login":"cbuie","name":"Chris L Buie"}},"type":"notebook","body":{"title":"Record Unemployment Claims","cells":[{"id":0,"value":"md`# Record Unemployment Claims`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":634,"value":"html`\n

Seasonally Adjusted Initial Unemployment Claims

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":698,"value":"chart = {\n return timeSeries(data, xAxis, yAxis);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"html`

\nsource: U.S. Employment and Training Administration, Initial Claims [ICSA], retrieved from FRED, Federal Reserve Bank of St. Louis; https://fred.stlouisfed.org/series/ICSA, March 28, 2020.

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":760,"value":"md`\n### Resources\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":762,"value":"md`\n#### Helper functions:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":755,"value":"addAnnotations()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":769,"value":"md`\n#### Chart Variables:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"margin = ({ top: 20, right: 30, bottom: 30, left: 40 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"area = d3\n .area()\n .x(d => x(d.date))\n .y1(d => y(d.value))\n .y0(d => y(0))\n// .curve(d3[lineCurve])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"x = d3.scaleTime()\n .domain(d3.extent(data, d => d.date))\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"y = d3\n .scaleLinear()\n .domain([0, d3.max(data, d => d.value)])\n .nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"xAxis = g =>\n g.attr(\"transform\", `translate(0,${height - margin.bottom})`).call(\n d3\n .axisBottom(x)\n .ticks(width / 80)\n .tickSizeOuter(0)\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"line = d3\n .line()\n .defined(d => !isNaN(d.value))\n .x(d => x(d.date))\n .y(d => y(d.value))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(data.y))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"callout = (g, value) => {\n if (!value) return g.style(\"display\", \"none\");\n\n g.style(\"display\", null)\n .style(\"pointer-events\", \"none\")\n .style(\"font\", \"12px Lato\");\n\n const path = g\n .selectAll(\"path\")\n .data([null])\n .join(\"path\")\n .attr(\"fill\", \"white\")\n .attr(\"stroke\", \"black\");\n\n const text = g\n .selectAll(\"text\")\n .data([null])\n .join(\"text\")\n .call(text =>\n text\n .selectAll(\"tspan\")\n .data((value + \" \").split(/\\n/))\n .join(\"tspan\")\n .attr(\"x\", 0)\n .attr(\"y\", (d, i) => `${i * 1.1}em`)\n .style(\"font-weight\", (_, i) => (i ? null : \"bold\"))\n .text(d => d)\n );\n\n const { x, y, width: w, height: h } = text.node().getBBox();\n\n text.attr(\"transform\", `translate(${-w / 2},${15 - y})`);\n path.attr(\n \"d\",\n `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z`\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"bisect = {\n const bisect = d3.bisector(d => d.date).left;\n return mx => {\n const date = x.invert(mx);\n const index = bisect(data, date, 1);\n const a = data[index - 1];\n const b = data[index];\n return date - a.date > b.date - date ? b : a;\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":771,"value":"md`\n#### External Libraries:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"d3_annotation = require(\"d3-svg-annotation\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"G2 = require('https://unpkg.com/@antv/g2')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":774,"value":"md`\n#### Data\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"raw_data = Object.assign(\n (await d3.csv(\n \"https://gist.githubusercontent.com/cbuie/dd9d2a219b40c351d7e2ae4ce9afc04d/raw/b651927f508fff619bc6c1eb3517cd55990ae236/fred-unemployment-intial-claims-sa-2020-3-28\",\n d3.autoType\n )).map(({ date, value }) => ({ date, value: value / 1000 })),\n { y: \"Claims (m)\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"data = raw_data.slice(raw_data.length - 5000, raw_data.length)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":776,"value":"md`\n#### Style:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":476,"value":"html`\n

style

\n \n\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"