31:T603,function stackedBarChart(data, yMax, yFormat, yLabel) { const margin = {top: 10, right: 0, bottom: 20, left: 50}; const visWidth = width - margin.left - margin.right; const visHeight = 500 - margin.top - margin.bottom; const svg = d3.select(DOM.svg(visWidth + margin.left + margin.right, visHeight + margin.top + margin.bottom)); const g = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); const x = d3.scaleBand() .domain(weeks) .range([0, visWidth]) .padding(0.1) const y = d3.scaleLinear() .domain([0, yMax]).nice() .range([visHeight, 0]); const xAxis = d3.axisBottom(x).tickFormat(d3.timeFormat('%b. %-d')) const yAxis = d3.axisLeft(y).tickFormat(d3.format(yFormat)) g.append('g') .attr('transform', `translate(0,${visHeight})`) .call(xAxis) .call(g => g.selectAll('.domain').remove()); g.append("g") .call(yAxis) .call(g => g.selectAll('.domain').remove()) .append('text') .attr('fill', '#999') .attr('x', -50) .attr('y', visHeight / 2) .text(yLabel); const series = g.selectAll('.series') .data(data) .join('g') .attr('fill', d => color(d.key)) .attr('class', 'series') .selectAll('rect') .data(d => d) .join('rect') .attr('y', d => y(d[1])) .attr('height', d => y(d[0]) - y(d[1])) .attr('x', d => x(d.data.week)) .attr('width', x.bandwidth()); return svg.node(); }32:T5d7,function stackedAreaChart(data, yMax, yFormat, yLabel) { const margin = {top: 10, right: 30, bottom: 20, left: 60}; const visWidth = width - margin.left - margin.right; const visHeight = 500 - margin.top - margin.bottom; const svg = d3.select(DOM.svg(visWidth + margin.left + margin.right, visHeight + margin.top + margin.bottom)); const g = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); const x = d3.scaleTime() .domain(d3.extent(weeks)) .range([0, visWidth]); const y = d3.scaleLinear() .domain([0, yMax]).nice() .range([visHeight, 0]); const area = d3.area() .x(d => x(d.data.week)) .y1(d => y(d[1])) .y0(d => y(d[0])); const xAxis = d3.axisBottom(x).tickFormat(d3.timeFormat('%b. %-d')) const yAxis = d3.axisLeft(y).tickFormat(d3.format(yFormat)) g.append('g') .attr('transform', `translate(0,${visHeight})`) .call(xAxis) .call(g => g.selectAll('.domain').remove()); g.append('g') .call(yAxis) .call(g => g.selectAll('.domain').remove()) .append('text') .attr('fill', 'black') .attr('x', -40) .attr('y', visHeight / 2) .text(yLabel); const series = g.selectAll('.series') .data(data) .join('g') .attr('fill', d => color(d.key)) .attr('class', 'series') .append('path') .datum(d => d) .attr('d', area); return svg.node(); }33:T78a,{ const margin = {top: 20, right: 30, bottom: 20, left: 60}; const visWidth = 800 - margin.left - margin.right; const visHeight = 500 - margin.top - margin.bottom; const svg = d3.select(DOM.svg(visWidth + margin.left + margin.right, visHeight + margin.top + margin.bottom)); const g = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); const row = d3.scaleBand() .domain(categories) .range([0, visHeight]) .paddingInner(0.2); const x = d3.scaleTime() .domain(d3.extent(weeks)) .range([0, visWidth]); const y = d3.scaleLinear() .domain([0, maxSingleTypeNotices]).nice() .range([row.bandwidth(), 0]); const xAxis = d3.axisBottom(x).tickFormat(d3.timeFormat('%b. %-d')) const yAxis = d3.axisLeft(y).ticks(3); g.append('g') .attr('transform', `translate(0,${visHeight})`) .call(xAxis) .call(g => g.selectAll('.domain').remove()); const area = d3.area() .x(d => x(d.date)) .y1(d => y(d.employees)) .y0(y(0)); const rows = g.selectAll('.row') .data(dataByType) .join('g') .attr('class', 'row') .attr('fill', d => color(d.type)) .attr('transform', d => `translate(0,${row(d.type)})`); rows.append('g') .attr('class', 'y-axis') .call(yAxis) .call(g => g.selectAll('.domain').remove()); g.select('.y-axis') .append('text') .attr('text-anchor', 'start') .attr('dominant-baseline', 'middle') .attr('fill', 'black') .attr('x', 5) .attr('y', 7) .text(''); rows.append('text') .text(d => d.type) .attr('font-size', 12) .attr('fill', 'black') .attr('font-family', 'sans-serif') .attr('y', -5) .attr('x', 5); rows.append('path') .datum(d => d.counts) .attr('d', area); return svg.node(); }34:[{"id":"1df1ec24bddb1062490e4fac21320430749d216d6448a995c68191f048659ace01df33fcbca0783ba2c18a420df7e76567c500ac98acd23fcc8b985d06ee964e","href":"https://static.observableusercontent.com/files/1df1ec24bddb1062490e4fac21320430749d216d6448a995c68191f048659ace01df33fcbca0783ba2c18a420df7e76567c500ac98acd23fcc8b985d06ee964e","name":"warn_notices_week_type_timeseries@3.csv","type":"text/csv","lastModified":1591154716494.232,"size":1278},{"id":"1df1ec24bddb1062490e4fac21320430749d216d6448a995c68191f048659ace01df33fcbca0783ba2c18a420df7e76567c500ac98acd23fcc8b985d06ee964e","href":"https://static.observableusercontent.com/files/1df1ec24bddb1062490e4fac21320430749d216d6448a995c68191f048659ace01df33fcbca0783ba2c18a420df7e76567c500ac98acd23fcc8b985d06ee964e","name":"warn_notices_week_type_timeseries@4.csv","type":"text/csv","lastModified":1591216580818.162,"size":1278}] 2f:{"title":"Mass layoffs in California during coronavirus","cells":[{"id":0,"value":"md`# Mass layoffs in California during coronavirus\n\n#### Employees affected by more than 500,000 permanent, temporary and unknown [\"WARN\" notices](https://www.edd.ca.gov/jobs_and_training/layoff_services_warn.htm) in 2020.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"stackedBarChart(stacked, maxTotalEmployees, ',', '')","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"stacked = d3.stack()\n .keys(categories)(dataByWeek)","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1028,"value":"md`#### Share of warn notices in California that resulted from permanent, temporary or unknown layoffs and business closures during 2020. Since COVID-19, most of the employees have been affected by temporary job disruptions.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":228,"value":"stackedBarChart(stackedExpand, 1, '.0%', '')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1054,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":1039,"value":"warndata = d3\n .csvParse(await FileAttachment(\"warn_notices_week_type_timeseries@4.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":626,"value":"dataset = d3.csvParse(await FileAttachment(\"warn_notices_week_type_timeseries@4.csv\").text(), warndata => ({\n date: d3.timeParse(\"%Y-%m-%d\")(warndata.week_ending),\n types: warndata.layoff_closure_type,\n employees: +warndata.employees_affected,\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"dataByWeek = {\n const counts = d3.rollup(dataset,\n workers => d3.sum(workers, c => c.employees),\n d => d3.timeWeek(d.date).getTime(),\n d => d.types);\n \n return Array.from(counts, (([date, map]) => {\n map.set('total', d3.sum(map.values()));\n map.set('week', new Date(date));\n return Object.fromEntries(map)\n }));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"dataByType = {\n const data = d3.rollup(dataset,\n employees => d3.sum(employees, c => c.employees),\n d => d.types,\n d => d3.timeWeek(d.date).getTime());\n \n return Array.from(data, ([type, week]) => ({\n type: type,\n counts: Array.from(week, ([date, employees]) => ({date: new Date(date), employees}))\n }));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":499,"value":"dataByMonthWithTypeArray = dataByWeek.map(d => ({\n week: d.week,\n total: d.total,\n types: categories.map(b => ({type: b, employees: d[b] }))\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":509,"value":"weeks = dataByWeek.map(d => d.week)","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"categories = Array.from(d3.rollup(dataset,\n employees => d3.sum(employees, c => c.employees),\n d => d.types),\n ([key, value]) => ({key, value}))\n .sort((a, b) => d3.descending(a.value, b.value))\n .map(d => d.key)","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"maxSingleTypeNotices = d3.max(dataByType, d => d3.max(d.counts, e => e.employees))","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"maxTotalEmployees = d3.max(dataByWeek, d => d.total)","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"stackedExpand = d3.stack()\n .keys(categories)\n .offset(d3.stackOffsetExpand)(dataByWeek)","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"function legend() {\n const size = 10;\n const lineHeight = size * 1.4;\n \n const svg = d3.select(DOM.svg(width, color.domain().length * lineHeight));\n \n const rows = svg\n .selectAll(\"g\")\n .data(color.domain())\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(0, ${i * lineHeight})`);\n \n rows.append(\"rect\")\n .attr(\"height\", size)\n .attr(\"width\", size)\n .attr(\"fill\", d => color(d));\n \n rows.append(\"text\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 12)\n .attr(\"dominant-baseline\", \"hanging\")\n .attr(\"x\", lineHeight)\n .text(d => d);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"color = d3.scaleOrdinal()\n .domain(categories)\n .range(['#879D3B','#DFECC7','#DFE6EB']);","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"d3 = require(\"d3@5\", \"d3-array@2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":903,"value":"journalize = require(\"journalize\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":905,"value":"import { swatches } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}