43:["$","title",null,{"children":"How has COVID-19 Affected US Unemployment? | Amber Hoak | Observable"}] 4b:T860,{ const bars = d3.range(0, Math.max(Math.abs(allValues[1]), Math.abs(allValues[0]))) // create data const negBars = bars.map((d)=> d*-1) const merge = Array.from(new Set([...negBars, ...bars ])).sort((a,b)=> a-b) const marginLeft = 40 const height = 50 const negativeWidth = 70 const xScale = d3.scaleLinear().domain(d3.extent(merge)).range([marginLeft, heatMapWidth-60]) const svg = d3.select(DOM.svg(900, height)) svg.append("g") .append('text') .attr('x', (d) => xScale(0) + 30 ) .attr('y', height/2 -5) .attr("fill", "grey") .text("Higher Unemployment in 2020") .style("font-size", "12px") .style("font-style" , "italic") svg.append("g") .append('text') .attr('x', (d) => xScale(0) -3) .attr('y', height/2 -5) .attr("fill", "black") .text("↔️") .style("font-size", "20px") svg.append("g") .append('text') .attr('x', (d) => marginLeft- 30) .attr('y', height/2 + 15 ) .text("😀") svg.append("g") .append('text') .attr('x', (d) => (heatMapWidth - 60) + 15) .attr('y', height/2 + 15 ) .text("☹️") svg.append("g") .append('text') .attr('x', (d) => marginLeft) .attr('y', height/2 -5) .text("Higher Unemployment in 2019") .attr("fill", "grey") .style("font-size", "12px") .style("font-style" , "italic") svg.selectAll('.div-scale') .data(merge) .join('rect') .attr('x', (d) => xScale(d)) .attr('y', height/2) .attr('height', 10) .attr('width', Math.abs(xScale(merge[0])-xScale(merge[1]))) .attr('class', 'div-scale') .attr('fill', (d) => colorScale(d)) const xAxis = g => g .attr("transform", `translate(0,${height/2 + 10})`) .call(d3.axisBottom(xScale).tickSize(0)) .call(g => g.select(".domain").remove()) svg.append("g") .call(xAxis) svg.selectAll(".tick > text") .attr("fill", "grey") .style("font-family", `"Chilanka", sans-serif`) .style("font-size", "12px") return svg.node() }4c:T16f2,partFullSVG = { const chartHeight = 200 const svg = d3.create("svg") .attr("viewBox", [0, 0, width, chartHeight]) .attr('aria-labelledby', 'stacked-chart') .attr("title", "number of people per month looking for full-or-part time work") .attr("description", "based on user selection displays stacked bar chart on number people per month looking for full time or part time employment and currently unemployed") .attr("role", "img") const pData = parttime const fData = fulltime const chartWidth = width /2 const localMargins = {left: 60, right: 10, top: 20, bottom: 30 } if(currentSelection.barLabel) { const partData = filterBySelection(pData, currentSelection) const fullData = filterBySelection(fData, currentSelection) const series = reformatStackedSeries(partData,fullData ) const partTimeSelection = partData[currentSelection.ageKey][0].timeseries.find((d)=> d.date.toDateString() === currentSelection.date.toDateString()) const fullTimeSelection = fullData[currentSelection.ageKey][0].timeseries.find((d)=> d.date.toDateString() === currentSelection.date.toDateString()) const x = d3.scaleBand() .domain(dates.map((d)=> d.toDateString())) .range([localMargins.left, chartWidth-localMargins.right]) .padding(0.1) const y = d3.scaleLinear() .domain([0, d3.max(series, d => d3.max(d, d => d[1]))]) .rangeRound([chartHeight - localMargins.bottom, localMargins.top]) const color = { fullTime : { fill: "#95b439", stroke: "#506503" }, partTime : { fill: "#40b6d8", stroke: "#04667c" } } // === COLOR LEGEND === svg.append("g") .selectAll(".colorLegend") .data(Object.keys(color)) .join("rect") .attr("width", 10) .attr("height", 10) .attr("x",(d, i)=> i * 80) .attr("y", (d,i)=> 0) .attr("fill", (d)=> color[d].fill) .attr("stroke", (d)=> color[d].stroke) const displayLabel = {fullTime: "full-time", partTime: "part-time"} svg.append("g") .selectAll(".colorLegend-text") .data(Object.keys(color)) .join("text") .text((d)=>d.toUpperCase()) .attr("x",(d, i)=> i * 80 + 12) .attr("y", (d,i)=> 10) .attr("fill", "grey") .style("font-size", "12px") // === STACKED BARS === svg.append("g") .selectAll("g") .data(series) .join("g") .attr("fill", (d)=> color[d.key].fill) .attr("stroke", (d)=> color[d.key].stroke) .selectAll("rect") .data(d => d) .join("rect") .attr("rx", 1) .attr("ry", 1) .attr("x", (d, i) =>x(d.data.date)) .attr("y", d => y(d[1])) .attr("height", d => y(d[0]) - y(d[1])) .attr("width", x.bandwidth()) .attr("aria-label", (d)=> `${d.key}-${x(d.data.date)}-${d.data[d.key]}`) .on("mouseover", (ev, d)=> { const tip = svg.select(".tooltip") tip.selectAll("text").remove() tip.attr("transform", `translate(${x(d.data.date) + 5}, ${ y(d[1]) + (y(d[0]) - y(d[1]))/2})`) .attr("display", "visible") tip.append("text") .text(`${d.data[d.key]}k`) }) .append("title") .text(d => `${d.data.name} ${d.key}`) const selection1 = series[0].find((d)=> d.data.date === currentSelection.date.toDateString()) const selection2 = series[1].find((d)=> d.data.date === currentSelection.date.toDateString()) const rectHeight = y(selection1[0]) - y(selection2[1]) const height1 = y(selection1[0]) - y(selection1[1]) const height2 = y(selection2[0]) - y(selection2[1]) const pHeight = selection1.key === "partTime" ? height1: height2 const fHeight = selection1.key === "fullTime" ? height1: height2 const fY = selection1.key === "fullTime" ? y(selection1[1]): y(selection2[1]) const pY = selection1.key === "partTime" ? y(selection1[1]): y(selection2[1]) const selectionDims = { x: x(currentSelection.date.toDateString()), height: rectHeight, y: y(selection2[1]), width: x.bandwidth(), pHeight, fHeight, fY, pY } const highlighter = svg.append("rect") .attr("class", "highlighter") .attr("width", selectionDims.width) .attr("height", selectionDims.height) .attr("x", selectionDims.x) .attr("y", selectionDims.y) .attr("rx", 3) .attr("ry", 3) .style("fill-opacity", 0) .attr("fill", "none") .attr("stroke-opacity", 1.0) .style("stroke-width", 4) .style("stroke", 'black') drawWorkTypeExplainer(svg,localMargins, chartWidth, selectionDims, partTimeSelection,fullTimeSelection, color ) constructYearCircles(svg, partTimeSelection, fullTimeSelection, chartWidth + 20, localMargins.top + 20, 120, color, chartHeight) const xAxis = g => g .attr("transform", `translate(0,${chartHeight - margin.bottom})`) .call(d3.axisBottom(x).tickSizeOuter(0).tickFormat((d)=> formatTime(new Date(d)))) .call(g => g.selectAll(".domain").remove()) const yAxis = g => g .attr("transform", `translate(${localMargins.left},0)`) .call(d3.axisLeft(y).ticks(5).tickFormat((d)=> `${d}k`)) .call(g => g.selectAll(".domain").remove()) svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); svg.selectAll(".tick > text") .attr("fill", "grey") .style("font-family", `"Chilanka", sans-serif`) .style("font-size", "12px") } // ==== TOOLTIP ==== const tooltip = svg.append("g") .attr("class", "tooltip") .attr("width", 100) svg.on("touchend mouseleave", () =>{ tooltip.attr("display", "none") }); return svg.property("value", {}).node(); }4d:T6d9,selectedSVG = { const chartHeight = 200 const svg = d3.create("svg") .attr("viewBox", [0, 0, width, chartHeight]) .attr('aria-labelledby', 'line-chart') .attr("title", "number of people not in the labor force per month based on user selection") .attr("description", "based on user selection displays number of people not seeking work or currently employed from 2019 to 2020") .attr("role", "img") const data = notInLaborForceData const chartWidth = width /2 const localMargins = {left: 60, right: 10, top: 20, bottom: 30 } if(currentSelection.barLabel) { const lineChartData = filterBySelection(data, currentSelection) const pathData = createPathData(lineChartData) const allDates = calculateDataExtent(lineChartData, Object.keys(lineChartData)[0], true) const valueExtent = calculateValueExtent(lineChartData, "2020", "2019") const x = d3.scaleUtc() .domain([allDates[0], allDates[allDates.length -1]]) .range([localMargins.left, chartWidth - localMargins.right]) const y = d3.scaleLinear() .domain([0, valueExtent[1]]).nice() .range([chartHeight - localMargins.bottom, localMargins.top]) drawPath(svg,pathData, x, y, currentSelection ) const circleData = drawCircles(svg, x, y, currentSelection, pathData, chartWidth, localMargins) drawExplainer(svg, circleData, localMargins, chartWidth, currentSelection) drawLineChartXAxis(svg, x, localMargins, chartHeight) drawLineChartYAxis(svg, y, data.yLabel, localMargins) } // ==== TOOLTIP ==== const tooltip = svg.append("g") .attr("class", "tooltip") .attr("width", 100) svg.on("touchend mouseleave", () => tooltip.call(callout, null)); return svg.property("value", {}).node(); }4e:Te5e, createHeatMap = (data, key1, key2, key3, key4) => { const data1 = data[key1] const data2= data[key2] const data3 = data[key3] const data4 = data[key4] const name= data.name const yLabel = data.yLabel const fullHeight = height * 2 const svg = d3.create("svg") .attr("viewBox", [0, 0, width, fullHeight]) .attr('aria-labelledby', 'unemployment-rate-heatmap') .attr("title", "unemployment-rate-heatmap") .attr("description", "heat map of unemployment rate 12 month net change 2019 to 2020") .attr("role", "img") const offset = heatMapWidth - maxLabelSize.max const leftPlot1 = svg.append("g") .attr("transform", `translate(${offset},0)`) const rightPlot1 = svg.append("g") .attr("transform", `translate(${0},${height})`) const leftPlot2 = svg.append("g") .attr("transform", `translate(${offset},${height})`) const padding =2 const catagorySize = margin.left - 1 - padding*2 // FEMALE/MALE DIVIDER drawHeatMapLabelsBySex(svg, catagorySize, maxLabelSize.max, 0 ) // row 1 drawHeatMapLabelsBySex(svg, catagorySize, maxLabelSize.max, height ) // row 2 // PATTERN DEFS FOR ABSENT DATA drawHeatMapPattern(svg,sexCategoryBands.bandwidth()*2, timeBands(dates[dates.length -1].toDateString()) - timeBands(dates[0].toDateString()) + timeBands.bandwidth(), margin.top ) drawHeatMapPattern(leftPlot1,sexCategoryBands.bandwidth()*2, timeBands(dates[dates.length -1].toDateString()) - timeBands(dates[0].toDateString()) + timeBands.bandwidth(), margin.top ) drawHeatMapPattern(rightPlot1,sexCategoryBands.bandwidth()*2, timeBands(dates[dates.length -1].toDateString()) - timeBands(dates[0].toDateString()) + timeBands.bandwidth(), margin.top ) drawHeatMapPattern(leftPlot2,sexCategoryBands.bandwidth()*2, timeBands(dates[dates.length -1].toDateString()) - timeBands(dates[0].toDateString()) + timeBands.bandwidth(), margin.top ) // === AGE RANGE LABELS === drawNetChangeHeatMapLabel(svg, key1, 0, 0) // Row 1 Col 1 drawNetChangeHeatMapLabel(svg, key2, offset, 0) // Row 1 Col 2 drawNetChangeHeatMapLabel(svg, key3, 0, height) // Row 2 Col 1 drawNetChangeHeatMapLabel(svg, key4, offset, height) // Row 2 Col 2 // === RACE/ETHNICITY LABELS === drawDemographicLabels(leftPlot1, "females", padding) drawDemographicLabels(leftPlot1, "males", padding) drawDemographicLabels(leftPlot2, "females", padding) drawDemographicLabels(leftPlot2, "males", padding ) drawLabelSeparator(svg, catagorySize, offset, maxLabelSize.max ) constructHeatMap(svg, data1, key1, name, yLabel, 0, 0) // Row 1 Col 1 constructHeatMap(svg, data2, key2, name, yLabel, offset, 0) // Row 1 Col 2 constructHeatMap(svg, data3, key3, name, yLabel, 0, height) // Row 2 Col 1 constructHeatMap(svg, data4, key4, name, yLabel, offset, height) // Row 2 Col 2 // X-AXIS drawHeatMapXAxis(svg, xAxisTop, key1) drawHeatMapXAxis(leftPlot1, xAxisTop, key2) drawHeatMapXAxis(leftPlot2, xAxisTop, key2) drawHeatMapXAxis(rightPlot1, xAxisTop, key2) // ==== TOOLTIP ==== const tooltip = svg.append("g") .attr("class", "tooltip") .attr("width", 100) const highlighter = svg.append("rect") .attr("class", "highlighter") .attr("width", heatMapWidth -margin.right - margin.left) .attr("height", squareDimensions.height) .attr("x", margin.left) .style("fill-opacity", 0) .attr("fill", "none") .attr("stroke-opacity", 0.0) .style("stroke-width", 2) .style("stroke", 'black') drawCancelButton(svg) svg.on("touchend mouseleave", () => tooltip.call(callout, null)); return svg.property("value", {}).node(); }4f:[] 47:{"id":"e7121e1824b6aa34","slug":"how-has-covid-19-affected-us-unemployment","title":"How has COVID-19 Affected US Unemployment?","thumbnail":"d16c66793f08a219255d8989ca748d6a8147abe0e2026e725d780905107dd9e4","access_level":"public","create_time":"$D2020-09-14T22:21:52.145Z","update_time":"$D2020-09-27T03:30:45.154Z","view_time":null,"first_public_time":"$D2020-09-23T22:18:47.654Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"11b00269dbb427c5","login":"ahoak","name":"Amber Hoak","avatar_url":"https://avatars-next.observableusercontent.com/a8f6ea2d778bc9578e94e76798740fd393ecd6757dac9ada3b09674aa63b9ef6","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":2924,"publish_version":2924,"role":null,"authored":false,"authors":[{"type":"individual","id":"0e1449d1cfd33d3e","login":"ahoak","name":"Amber Hoak","avatar_url":"https://avatars-next.observableusercontent.com/a8f6ea2d778bc9578e94e76798740fd393ecd6757dac9ada3b09674aa63b9ef6","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"0e1449d1cfd33d3e","login":"ahoak","name":"Amber Hoak","avatar_url":"https://avatars-next.observableusercontent.com/a8f6ea2d778bc9578e94e76798740fd393ecd6757dac9ada3b09674aa63b9ef6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"How has COVID-19 Affected US Unemployment?","cells":[{"id":0,"value":"md`# How has COVID-19 Affected US Unemployment?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1440,"value":"html`

${Object.keys(currentSelection).length > 0 ? 'Are ' +currentSelection.ageKey + ' year old' : '' } ${Object.keys(currentSelection).length > 0 ? demographicDisplayLabels[currentSelection.barLabel] : '' } ${Object.keys(currentSelection).length > 0 ? currentSelection.sex : '' } ${Object.keys(currentSelection).length > 0 ? 'looking for more full or part time work?' : ''}

${Object.keys(currentSelection).length > 0 ? 'How many ' + currentSelection.ageKey + ' year old' : '' } ${Object.keys(currentSelection).length > 0 ? demographicDisplayLabels[currentSelection.barLabel] : '' } ${Object.keys(currentSelection).length > 0 ? currentSelection.sex : '' } ${Object.keys(currentSelection).length > 0 ? 'are not in the labor force?' : ''}

Utils

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2809,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2828,"value":"drawDemographicLabels = (svg, key, padding) =>{\n const spacings = key === \"females\" ? femaleBarHeights : maleBarHeights\n svg.append(\"g\")\n .selectAll(\".demo-labels\")\n .data(demographicLabels)\n .join(\"text\")\n .attr(\"class\", \"demo-labels\")\n .attr(\"id\", (d, i )=> `label-${i}`)\n .text((d)=> d.split(\"_\")[0])\n .style(\"font-size\", '12px')\n .attr(\"transform\", (d, i) => { \n // const offset = maxLabelSize[d].width ? maxLabelSize.max-maxLabelSize[d].width : 0 // align right\n const offset = 0\n return `translate(${margin.left - (maxLabelSize.max - offset) - padding},${spacings[d] + 15 })`\n })\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2823,"value":"test = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height/2])\n svg.append(\"g\")\n .selectAll(\".demo-labels\")\n .data(demographicLabels)\n .join(\"text\")\n .attr(\"class\", \"demo-labels\")\n .attr(\"id\", (d, i )=> `label-${i}`)\n .text((d)=> d.split(\"_\")[0])\n .style(\"font-size\", '12px')\n .attr(\"transform\", (d, i) => `translate(${5},${categorySpacer * i + margin.top + 15})`)\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2825,"value":"maxLabelSize = {\n return demographicLabels.reduce((max, label, i)=>{\n const w = d3.select(test).select(`#label-${i}`).node().getBBox().width\n const h = d3.select(test).select(`#label-${i}`).node().getBBox().height\n max[label] = {height: h, width: w}\n if(w > max.max) {\n max.max = w\n }\n return max\n }, {max: 0})\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2774,"value":"import { drawHeatMapLabelsBySex,drawHeatMapPattern,drawNetChangeHeatMapLabel, sexCategoryBands, heatMapWidth, formatTime, height, parttime, fulltime, squareDimensions, categorySpacer,femaleBarHeights, drawLabelSeparator, constructHeatMap, filterBySelection, drawHeatMapXAxis, drawCancelButton, maleBarHeights, dates, calculateDataExtent, constructYearCircles, demographicLabels, callout, ages, margin, calculateMonthDiffs, unemploymentData, dataBySex, drawCircles, drawExplainer, calculateSeries, reformatStackedSeries, monthlyDiffData, demoCategoryBands, sLabels, heatMapData, timeBands, xAxisTop, notInLaborForceData, createPathData, allValues, drawLineChartXAxis, colorScale, calculateValueExtent, drawLineChartYAxis, drawWorkTypeExplainer, demographicDisplayLabels, drawPath } from '@ahoak/final-visual-utils'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"html` `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4f","stdlib":"1"}} 42:null