2c:null 2d:["$","title",null,{"children":"Final Visual Utils | Amber Hoak | Observable"}] 32:T84f,{ 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") .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("Lower Unemployment") .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() }33:T1632,partFullSVG = { const chartHeight = 200 const svg = d3.create("svg") .attr("viewBox", [0, 0, width, chartHeight]) const pData = parttime const fData = fulltime const chartWidth = width 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 ) // if(Object.keys(partData) > 0) { // 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()) .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()) .selectAll(".tick") .each(function (d, i) { if ( i % 2 ) { this.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(); }34:T5cf,selectedSVG = { const chartHeight = 200 const svg = d3.create("svg") .attr("viewBox", [0, 0, width, chartHeight]) 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 = calculatePathDataExtent(pathData) const x = d3.scaleUtc() .domain([allDates[0], allDates[allDates.length -1]]) .range([localMargins.left, chartWidth - localMargins.right]) const y = d3.scaleLinear() .domain([valueExtent[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) console.log(circleData) 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(); }35:T720,constructYearCircles = (svg, partData, fullData, xOffset, yOffset1, yOffset2, color, chartHeight) => { const pValueRange = [partData["2019"], partData["2020"]].reverse() const fValueRange = [fullData["2019"], fullData["2020"]].reverse() const extent = d3.extent([...pValueRange, ...fValueRange]) const rScale = d3.scaleLinear().domain(extent).range([10, 25]) const pG = svg.append("g") svg.append("g") .selectAll(".data-circles") .data(pValueRange) .join("circle") .attr("cx", (d, i) => xOffset + i * 100) .attr("cy", yOffset1) .attr("r", (d)=>rScale(d)) .attr("fill", color.partTime.fill) .attr("stroke", color.partTime.stroke) svg.append("g") .selectAll(".data-circles-text") .data(pValueRange) .join("text") .text((d)=>`${d}k`) .attr("x", (d, i) => xOffset + i * 100 - rScale(d)/2 ) .attr("y", (d)=> yOffset1 - rScale(d) -2) svg.append("g") .selectAll(".data-circles-text2") .data(fValueRange) .join("text") .text((d)=>`${d}k`) .attr("x", (d, i) => xOffset + i * 100 - rScale(d)/2 ) .attr("y", (d)=> yOffset2 - rScale(d) -2) svg.append("g") .selectAll(".data-circles") .data(fValueRange) .join("circle") .attr("cx", (d, i) => xOffset + i * 100) .attr("cy", yOffset2 ) .attr("r", (d)=>rScale(d)) .attr("fill", color.fullTime.fill) .attr("stroke", color.fullTime.stroke) svg.append("g") .append("text") .text("2020") .attr("x", xOffset -10) .attr("y", chartHeight- 20) .style("font-weight", "bold") svg.append("g") .append("text") .text("2019") .attr("x", xOffset + 90) .attr("y", chartHeight- 20) .style("font-weight", "bold") }36:Tbf1,drawWorkTypeExplainer = (svg, localMargins, chartWidth, dim, partSelection, fullSelection, color) => { const rectWidth = chartWidth +200 svg.append("g") .attr("class", "explainer") .append("rect") .attr("x", rectWidth) .attr("y", localMargins.top) .attr("height", 120) .attr("width", 240) .style("stroke", "grey") .style("stroke-width", "2px") .attr("fill", "white") svg.append("g").append("line") .style("stroke", "grey") .style("stroke-width", "1px") .attr("x1", dim.x + dim.width/2) .attr("y1", dim.pY + dim.pHeight/2) .attr("x2", chartWidth + 20) .attr("y2", localMargins.top + 15) svg.append("g").append("line") .style("stroke", "grey") .style("stroke-width", "1px") .attr("x1", dim.x + dim.width/2) .attr("y1", dim.fY + dim.fHeight/2) .attr("x2", chartWidth + 20) .attr("y2", localMargins.top + 75 +20 ) const transformX = rectWidth + 15 // const padding = partSelection.value > 0 ? 0 : -4 const padding = 0 const transformY = localMargins.top + 40 + padding // const rotate = partSelection.value > 0 ? 0 : 180 const rotate = 0 svg.append("g") .attr("class", "explainer-text") .append("text") .attr("x", rectWidth + 5) .attr("y", localMargins.top + 20) .text(`Looking for Part-Time Work`) .style("font-size", "18px") .style("font-weight", "bold") .attr("fill", color.partTime.stroke) svg .append("path") .attr("d", d3.symbol().type(d3.symbolTriangle).size("100")() ) .attr("fill", "#aaa") .attr("stroke", "black") .style("stroke-width", 0.7) .attr("transform", `translate(${transformX}, ${transformY })rotate(${rotate})`) // svg.append("g") // .attr("class", "explainer-text") // .append("text") // .attr("x", transformX + 16) // .attr("y", transformY + 4) // .text(` ${partSelection.value}K ${partSelection.value > 0 ? "increase" : "decrease"} from 2019`) // .style("font-size", "14px") // svg.append("g") // .attr("class", "explainer-text") // .append("text") // .attr("x", rectWidth + 5) // .attr("y", localMargins.top + 80) // .text(`Looking for Full-Time Work`) // .style("font-size", "18px") // .style("font-weight", "bold") // .attr("fill", color.fullTime.stroke) // const fullRotate = fullSelection.value > 0 ? 0 : 180 svg .append("path") .attr("d", d3.symbol().type(d3.symbolTriangle).size("100")() ) .attr("fill", "#aaa") .attr("stroke", "black") .style("stroke-width", 0.7) // .attr("transform", `translate(${transformX}, ${localMargins.top + 95})rotate(${fullRotate})`) svg.append("g") .attr("class", "explainer-text") .append("text") .attr("x", transformX + 16) .attr("y", localMargins.top + 100) // .text(`${fullSelection.value}K ${fullSelection.value > 0 ? "increase" : "decrease"} from 2019`) .style("font-size", "14px") }37:Td88, 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]) 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(); }38:Tc76,drawExplainer = (svg, circleData, localMargins, chartWidth, currentSelection) => { svg.append("g") .attr("class", "explainer-text") .append("text") .attr("x", chartWidth + 5) .attr("y", localMargins.top - 5) .text(`${currentSelection.ageKey} ${demographicDisplayLabels[currentSelection.barLabel]} ${currentSelection.sex}`) .style("font-size", "20px") .attr("aria-label", `${currentSelection.ageKey} ${demographicDisplayLabels[currentSelection.barLabel]} ${currentSelection.sex}`) const data2020 = circleData.find((d)=>d.date.getFullYear() === 2020 ) const data2019 = circleData.find((d)=>d.date.getFullYear() === 2019 ) const data2021 = circleData.find((d)=>d.date.getFullYear() === 2021 ) let rotate = 0 if(data2020 && data2019) { const diff = data2020.value - data2019.value const month = monthArray[data2020.date.getMonth()] rotate = diff> 0 ? 0 : 180 const transformY = localMargins.top + 40 const transformX = chartWidth + 15 const padding = circleData[0].diff > 0 ? 3 : 0 svg .append("path") .attr("d", d3.symbol().type(d3.symbolTriangle).size("220")() ) .attr("fill", "#aaa") .attr("stroke", "black") .style("stroke-width", 0.7) .attr("transform", `translate(${transformX}, ${transformY + padding })rotate(${rotate})`) svg.append("g") .attr("class", "explainer-text") .append("text") .attr("x", transformX + 16) .attr("y", transformY + 9) .text(`${diff}K `) .style("font-size", "40px") .attr("aria-label", `${diff > 0 ? "higher" : "lower"} number of people in 2020`) svg.append("g") .attr("class", "explainer-text") .append("text") .attr("x", chartWidth + 5) .attr("y", localMargins.top + 80) .text(`${diff > 0 ? "higher" : "lower"} not seeking work or employed in ${month} 2020 compared to 2019`) .style("font-size", "14px") if(data2021) { const diff = data2021.value - data2020.value const month = monthArray[data2020.date.getMonth()] rotate = diff> 0 ? 0 : 180 const transformY = localMargins.top + 40 const transformX = chartWidth + 15 const padding = circleData[0].diff > 0 ? 3 : 0 svg .append("path") .attr("d", d3.symbol().type(d3.symbolTriangle).size("220")() ) .attr("fill", "#aaa") .attr("stroke", "black") .style("stroke-width", 0.7) .attr("transform", `translate(${transformX}, ${transformY + padding + 80 })rotate(${rotate})`) svg.append("g") .attr("class", "explainer-text") .append("text") .attr("x", transformX + 16) .attr("y", transformY + padding + 80 + 20) .text(`${diff}K `) .style("font-size", "40px") .attr("aria-label", `${diff > 0 ? "higher" : "lower"} number of people in 2021`) svg.append("g") .attr("class", "explainer-text") .append("text") .attr("x", chartWidth + 5) .attr("y", transformY + padding + 80 + 20 + 20) .text(`${diff > 0 ? "higher" : "lower"} not seeking work or employed in ${month} 2021 compared to 2020`) .style("font-size", "14px") } } }39:T664,drawHeatMapRects = (svg, displayData, key,ageKey, xOffset, yOffset) => { const spacings = key === "females" ? femaleBarHeights : maleBarHeights const g = svg .selectAll(`.demo-rect-${key}`) .data(displayData, d=> d.barLabel) .enter() .append("g") .attr("class", (d, i)=> `.demo-rect-${key}-${i}`) .attr("transform", (d, i) => `translate(${xOffset},${spacings[d.barLabel] + yOffset})`) g.selectAll("rect") .data(d=>d.timeseries) .join("rect") .attr("id", (d)=> `rect-${d.barLabel}-${ageKey}-${key}-${d.date.getMonth()}`) .attr("class", "heat-map-rect") .attr("x", (d)=> timeBands(d.date.toDateString()) ) .attr("height", squareDimensions.height ) .attr("width", timeBands.bandwidth()) .attr("fill", (d)=> colorScale(d.diff)) .attr("stroke", "black") .attr("stroke-width", 0) .on("mouseover", (ev, d, i)=> { svg.style("cursor", "pointer") const tip = svg.select(".tooltip") tip.attr("transform", `translate(${timeBands(d.date.toDateString()) + timeBands.bandwidth()/2 + xOffset},${spacings[d.barLabel] + squareDimensions.height/2 + yOffset })`); tip.call(callout, `${ageKey} ${demographicDisplayLabels[d.barLabel]} ${key}, delta: ${d.value}% ${d.diff > 0 ? '☹️':'😀'}, ${monthArray[d.date.getMonth()]} ${d.diffYear}: ${d.value + d.diff}%, ${monthArray[d.date.getMonth()]} ${d.year}: ${d.value}%, `, spacings[d.barLabel] + squareDimensions.height/2) }) .on("click", (ev, d)=>{ handleOnRectClick(svg, d, key,ageKey, spacings, yOffset, xOffset) }) }3a:T7f4,handleOnRectClick = (svg, selection, key,ageKey, spacings, yOffset, xOffset) =>{ const button = svg.select(".remove-button") button.selectAll("text") .remove("text") button .append("text") .text(`❌ ${selection.age} ${key}`) .attr("y", 12) .style("font-size", "11px") button .append("text") .text(`${selection.barLabel.split("_")[0]}`) .attr("x", (100/2) - (maxLabelSize[selection.barLabel].width / 2) ) .attr("y", 25) .style("font-size", "11px") button.attr("opacity", 1.0) button .append("rect") .attr("class", "remove-button-rect") .attr("width", 100) .attr("height", 30) .attr("x", 0) .attr("y", 0) .attr("rx", 5) .attr("ry", 5) .attr("fill", "#aaa") .style("fill-opacity", 0.0) .attr("stroke-opacity", 1.0) .style("stroke-width", 1) .style("stroke", 'grey') .on("click", ()=>{ svg.selectAll(".heat-map-rect").attr("stroke-width", 0).attr("opacity", 1 ) const highlighter = svg.select(".highlighter") highlighter.attr("stroke-opacity", 0.0) svg.select(".remove-button").attr("opacity", 0 ) svg.property("value", {}).dispatch("input"); }) const heatRects = svg.selectAll(".heat-map-rect") heatRects.attr("stroke-width", (s)=> s.uuid === selection.uuid ? 4 : 0) .attr("opacity", (s)=> `${s.sex} + ${s.age} + ${s.barLabel}`=== `${selection.sex} + ${selection.age} + ${selection.barLabel}`? 1 : 0.2) const highlighter = svg.select(".highlighter") highlighter .style("stroke-width", 1) .attr("stroke-opacity", 1.0) .attr("transform", `translate(${xOffset},${spacings[selection.barLabel] + yOffset })`) svg.property("value", Object.assign({}, {...selection, ageKey, sex: key, timestamp: new Date()})).dispatch("input"); }3b:T584,drawHeatMapLabelsBySex = (svg, catagorySize, xOffset, yOffset) => { const maleEmoji = '♂️' const femaleEmoji = '♀️' // RECT OUTLINE FOR MALE/FEMALE svg.append("g") .selectAll(".outer-plotArea") .data(sLabels) .join("rect") .attr("class", "outer-plotArea") .attr("width", (heatMapWidth - margin.right) * 2 - xOffset + 11 ) .attr("height",sexCategoryBands.bandwidth() ) .attr("y", (d)=> sexCategoryBands(d) + yOffset) .attr("x", 0) .attr("fill", '#fff') .style("fill-opacity", 0.05) .attr("stroke", "#aaa" ) .style("stroke-opacity", 1.0) .attr("stroke-width", 1) // Label for Female/Male svg.append("g") .selectAll(".outer-plotArea-labels") .data(sLabels) .join("text") .text((d)=> d=== "males"? maleEmoji: femaleEmoji) .attr("class", "outer-plotArea-labels") .attr("y", (d)=> sexCategoryBands(d) + sexCategoryBands.bandwidth()/2 + 5 + yOffset) .attr("x", catagorySize/2 - 10) .attr("font-size", "30px") svg.append("g") .selectAll(".outer-plotArea-text") .data(sLabels) .join("text") .text((d)=> d.toUpperCase()) .attr("class", "outer-plotArea-text") .attr("y", (d)=> sexCategoryBands(d) + 25 + yOffset) .attr("x", 12) .attr("font-size", "15px") .style("font-weight", "bold") }3c:T401,drawLabelSeparator = (svg, catagorySize, offsetRight, maxLabelSize) =>{ svg.append("g").append("line") .style("stroke", "grey") .attr("x1", catagorySize +4) .attr("y1", margin.top) .attr("x2", catagorySize + 4) .attr("y2", sexCategoryBands.bandwidth() *2 + margin.top + 2); svg.append("g").append("line") .style("stroke", "grey") .style("stroke-width", "1px") .attr("x1", offsetRight + maxLabelSize - 10) .attr("y1", margin.top) .attr("x2", offsetRight + maxLabelSize - 10) .attr("y2", sexCategoryBands.bandwidth() *2 + margin.top + 2); svg.append("g").append("line") .style("stroke", "grey") .style("stroke-width", "0.5px") .attr("x1", offsetRight + (maxLabelSize*2) + 2) .attr("y1", margin.top) .attr("x2", offsetRight + (maxLabelSize*2) +2) .attr("y2", sexCategoryBands.bandwidth() *2 + margin.top + 2); }3d:T4b8,callout = (g, value, labelHeight) => { if (!value) return g.style("display", "none"); g .style("display", null) .style("pointer-events", "none") .style("font", "10px sans-serif"); const path = g.selectAll("path") .data([null]) .join("path") .attr("fill", "white") .attr("stroke", "black"); const text = g.selectAll("text") .data([null]) .join("text") .call(text => text .selectAll("tspan") .data((value + "").split(/\n/)) .join("tspan") .attr("x", 0) .attr("y", (d, i) => `${i * 1.1}em`) .style("font-weight", (_, i) => i > 1 ? null : "bold") .text(d => d)); const {x, y, width: w, height: h} = text.node().getBBox(); if(labelHeight + h + 30 > height ) { // change label position so doesnt get cut off at bottom text.attr("transform", `translate(${-w / 2 + 2}, ${- (h) - 5 })`); path.attr("d", `M${w / 2 + 10},-5H+5l5,+5l5,-5H-${w / 2 + 10}v-${h + 20}h+${w + 20}z`); } else { text.attr("transform", `translate(${-w / 2},${h/2 - 5})`); path.attr("d", `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z`); } path.attr("fill-opacity", 0.7) }3e:T98b,calculateMonthDiffsTest = (dataset) => { return dataset.reduce((timeSeriesContainer, series)=>{ const data = series.data const barLabel = series.ethnicity === "hispanic_latino" ? "hispanic_latino" : series.race const yearlyValues = data.reduce((acc, dataObj, index)=>{ const year = dataObj.date.getFullYear() const month = monthArray[dataObj.date.getMonth()] const value = {month, value: dataObj.value, year, date: dataObj.date } if(acc[month]) { acc[month] = [...acc[month], value] } else { acc[month] = [value] } return acc },{}) const timeseries = Object.values(yearlyValues).map((valArray)=>{ const sortedByYear = valArray.sort((a,b)=> a.year-b.year) const month = sortedByYear[0].month const monthDiffArray = sortedByYear.reduce((acc, d, index)=>{ if(index === 0) { acc[0] = {value: d.value, diff: 0, year: d.year, diffYear: d.year,diffValue: d.value, date: d.date,prevDate:d.date, barLabel, age: series.age, sex: series.sex, uuid: uuid(), month: d.month, label: `${d.year}`} } else { const last = acc[index-1] const diff = d.value - last.value const newValues = {value: d.value, diff, year: d.year, diffYear: last.year, diffValue: last.value, date: d.date, prevDate:last.date, barLabel, month: d.month, age: series.age, sex: series.sex, uuid: uuid(), label: `${last.year}-${d.year}`} acc[index] = newValues } return acc },[]) return monthDiffArray }) let container = {} for (let i = 0; i < timeseries.length -1; i++) { const current = timeseries[i] current.forEach((d)=>{ if(d.year !== 2018) { if(container[`${d.year}`]) { container[`${d.year}`].push(d) } else { container[`${d.year}`] = [d] } } }) } const finalValues = Object.keys(container).map((key)=>{ const timeseries = container[key] return { barLabel, year_range: key, ethnicity: series.ethnicity, race: series.race, age: series.age, sex: series.sex, timeseries } }) timeSeriesContainer = [...timeSeriesContainer, ...finalValues] return timeSeriesContainer }, []) }3f:[] 30:{"id":"fbf90d05382c0ef3","slug":"final-visual-utils","title":"Final Visual Utils","thumbnail":"251f3a77ef51d0cacd877f35a0da2c242cac5cb44232244da8a277cc23b67f07","access_level":"public","create_time":"$D2020-09-27T02:29:54.725Z","update_time":"$D2021-04-15T00:08:20.702Z","view_time":null,"first_public_time":"$D2020-09-27T02:31:58.127Z","has_unpublished_edits":null,"fork":{"id":"e7121e1824b6aa34","slug":"how-has-covid-19-affected-us-unemployment","title":"How has COVID-19 Affected US Unemployment?","owner":{"id":"11b00269dbb427c5","login":"ahoak","name":"Amber Hoak"}},"stars":1,"starred":false,"owner":{"type":"team","id":"11b00269dbb427c5","login":"ahoak","name":"Amber Hoak","avatar_url":"https://avatars-next.observableusercontent.com/a8f6ea2d778bc9578e94e76798740fd393ecd6757dac9ada3b09674aa63b9ef6","tier":"starter_2024"},"version":3109,"publish_version":3109,"role":null,"authored":false,"authors":[{"type":"individual","id":"0e1449d1cfd33d3e","login":"ahoak","name":"Amber Hoak","avatar_url":"https://avatars-next.observableusercontent.com/a8f6ea2d778bc9578e94e76798740fd393ecd6757dac9ada3b09674aa63b9ef6","tier":null}],"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":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Final Visual Utils","cells":[{"id":0,"value":"md`# Final Visual Utils`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2512,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2416,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2221,"value":"calculateSeries = (data, title) =>{\n // title = full / part\n return Object.keys(data).reduce((acc, key)=>{\n const timeArray = data[key]\n timeArray.forEach((o)=>{\n const timeseries = o.timeseries\n const result = timeseries.forEach(( timeObj)=>{\n const date = timeObj.date.toDateString()\n const value = timeObj.value\n const obj = {}\n obj[title] = value\n obj[\"date\"] = date\n acc.push(obj)\n })\n })\n return acc\n },[])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2212,"value":"reformatStackedSeries = (partData, fullData) => {\n const fullTimeSeries = calculateSeries(fullData, \"fullTime\")\n const partTimeSeries = calculateSeries(partData, \"partTime\")\n const merged = [...fullTimeSeries, ...partTimeSeries]\n const allDates = dates.map((d)=> d.toDateString())\n const merge = allDates.reduce((acc, date)=> {\n const found = merged.filter((d)=>d.date === date)\n if(found) {\n const combinedObject = found.reduce((combine , obj )=>{\n combine = {...combine, ...obj} \n return combine\n }, {})\n acc.push(combinedObject)\n }\n return acc\n },[])\n \n\n const series = d3.stack()\n .keys([\"fullTime\", \"partTime\"])\n (merge).map(d => (d.forEach(v => v.key = d.key), d))\n \n return series\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2091,"value":"drawCancelButton = (svg) =>{\n const button = svg.append(\"g\")\n .attr(\"class\", \"remove-button\")\n .attr(\"transform\", `translate(${width/2 - margin.left/2}, ${height - margin.bottom/2})`)\n .attr(\"opacity\", 0)\n button\n .append(\"rect\")\n .attr(\"class\", \"remove-button-rect\")\n .attr(\"width\", 100)\n .attr(\"height\", 30)\n .attr(\"x\", 0)\n .attr(\"y\", 0)\n .attr(\"rx\", 5)\n .attr(\"ry\", 5)\n .attr(\"fill\", \"#aaa\")\n .style(\"fill-opacity\", 0.5)\n .attr(\"stroke-opacity\", 1.0)\n .style(\"stroke-width\", 1)\n .style(\"stroke\", 'grey')\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1821,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3020,"value":"currentSelection","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1754,"value":"drawCircles = (svg, x, y, currentSelection, pathData, chartWidth, localMargins) => {\n const found = pathData[0]\n if(found) {\n const data = found.data.filter((d)=> d.month === currentSelection.month)\n\n svg.append(\"g\")\n .selectAll(\".data-circles\")\n .data(data)\n .join(\"circle\")\n .attr(\"cx\", (d)=> x(d.date))\n .attr(\"cy\", (d)=> y(d.value))\n .attr(\"r\", 3)\n .attr(\"stroke-width\", (d)=> d.date.getFullYear() === 2020 ? 3 : 0)\n .style(\"stroke\", \"#c2ab37\")\n .attr(\"aria-label\", (d)=> `${d.date.getFullYear()}: ${d.value}`)\n \n return data\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1738,"value":"drawPath = (svg, data, x, y, selection) => {\n const line = d3.line()\n .defined(d => !isNaN(d.value))\n .x(d => x(d.date))\n .y(d => y(d.value))\n .curve(d3.curveStep)\n const path = svg.append(\"g\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke-width\", 2)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n .selectAll(\"path\")\n .data(data)\n .join(\"path\")\n .style(\"mix-blend-mode\", \"multiply\")\n .attr(\"d\", d => line(d.data))\n .attr(\"stroke\", (d,i)=> d.sex === selection.sex && d.age === selection.ageKey? \"#80acf7\" : \"#ced4e4\")\n .style(\"stroke-opacity\",(d,i)=> d.sex === selection.sex && d.age === selection.ageKey? 1 : 0.2)\n .attr(\"aria-label\", (d)=> `${d.data.barLabel}`)\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1713,"value":"drawLineChartYAxis = (svg, y, label, lMargins) =>{\n const yAxis = g => g\n .attr(\"transform\", `translate(${lMargins.left},0)`)\n .call(d3.axisLeft(y).tickFormat((d)=> `${label.replace(\"~d\", d )}`).ticks(5))\n \n svg.append(\"g\")\n .call(yAxis);\n svg.selectAll(\".tick > text\")\n .attr(\"fill\", \"grey\")\n .style(\"font-family\", `\"Chilanka\", sans-serif`)\n .style(\"font-size\", \"12px\")\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1704,"value":"drawLineChartXAxis = (svg, x, lMargins, chartHeight) => {\n \nconst xAxis = g => g\n .attr(\"transform\", `translate(0,${chartHeight - lMargins.bottom})`)\n .call(d3.axisBottom(x).tickFormat( d3.utcFormat(\"%b %y\")))\n\n \n svg.append(\"g\")\n .call(xAxis);\n \n svg.selectAll(\".tick > text\")\n .attr(\"fill\", \"grey\")\n .style(\"font-family\", `\"Chilanka\", sans-serif`)\n .style(\"font-size\", \"12px\")\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1669,"value":"notInLaborForceData = monthlyDiffData.find((d)=> d.name === \"Not in the Labor Force\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2205,"value":"fulltime = monthlyDiffData.find((d)=> d.name === \"Unemployed Looking for Full-Time Work\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2208,"value":"parttime = monthlyDiffData.find((d)=> d.name === \"Unemployed Looking for Part-Time Work\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1727,"value":"createPathData = (data) =>{\n const years = [\"2019\", \"2020\", \"2021\"]\n return ages.reduce((acc, ageRange)=>{\n const ageDataArray = data[ageRange]\n if(ageDataArray) {\n const all = ageDataArray.reduce((accum, o)=>{\n const timeseries = o.timeseries\n const newSeries = timeseries.reduce((container, t)=>{\n\n container.push({date: t.date, value: t.value, diff: t.diffValue, barLabel: t.barLabel, month: t.month, uuid: t.uuid})\n\n return container\n },[]).sort((a,b)=> a.date - b.date)\n accum = [...accum, ...newSeries]\n return accum\n }, [])\n acc.push({age: ageRange, data: all.sort((a,b)=> a.date - b.date), sex: currentSelection.sex})\n }\n return acc\n },[])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1345,"value":"constructHeatMap = (svgElement, data, ageKey, name, yLabel, xOffset, yOffset) => {\n const seperated = dataBySex(data, name, yLabel)\n // HEATMAP BLOCKS\n drawHeatMapRects(svgElement, seperated.data.females, \"females\",ageKey, xOffset,yOffset )\n drawHeatMapRects(svgElement, seperated.data.males, \"males\",ageKey, xOffset, yOffset)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1098,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2102,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1141,"value":"drawHeatMapXAxis = (svg, axis, key) =>{\n svg.append(\"g\")\n .attr(\"class\", `x-axis-${key}`)\n .call(axis)\n .call(g => g.select(\".domain\").remove())\n \n svg.selectAll(\".tick > text\")\n .attr(\"fill\", (d, i)=> i > 1? \"black\" : \"grey\")\n .style(\"font-family\", `\"Chilanka\", sans-serif`)\n .style(\"font-size\", \"12px\")\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2696,"value":"drawHeatMapPattern = (svg, height, xOffset, yOffset) => {\n const defs = svg.append(\"defs\")\n const hatch_pattern_1 = defs\n .append(\"pattern\")\n .attr(\"id\", \"hatch-1\")\n .attr(\"width\", 10)\n .attr(\"height\", 10)\n .attr(\"patternTransform\", `rotate(${60})`)\n .attr(\"patternUnits\",\"userSpaceOnUse\") //used to make the pattern independent of location of circle\n \n hatch_pattern_1.append(\"rect\")\n .attr(\"width\", 10/2)\n .attr(\"height\", 10)\n .style(\"fill\", \"#aaa\")\n \n // RECT OUTLINE FOR MALE/FEMALE \n svg.append(\"rect\")\n .attr(\"width\", xOffset )\n .attr(\"height\", height )\n .attr(\"y\", yOffset)\n .attr(\"x\", margin.left)\n .attr(\"fill\", '#fff')\n .style(\"fill-opacity\", 0.05)\n .attr(\"stroke\", \"#aaa\" )\n .style(\"stroke-opacity\", 1.0)\n .attr(\"stroke-width\", 1)\n .style(\"fill\", \"url(#hatch-1)\") //pink\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1135,"value":"drawNetChangeHeatMapLabel = (svg, key, xOffset, yOffset) => {\n // HEAT MAP DATASET AGE LABEL \n svg.append('g')\n .append(\"text\")\n .text(`${key} year old`)\n .attr(\"y\", height -10 + yOffset )\n .attr(\"x\", (heatMapWidth -margin.right)/2 - 30 + xOffset )\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1123,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1115,"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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1106,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"heatMapWidth = width/2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":839,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":848,"value":"femaleBarHeights = demographicLabels.reduce((acc, label,i)=>{\n acc[label] = categorySpacer * i + margin.top\n return acc\n },{})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":906,"value":"maleBarHeights = demographicLabels.reduce((acc, label,i)=>{\n acc[label] = categorySpacer * i + margin.top + sexCategoryBands.bandwidth() + 2\n return acc\n },{})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1391,"value":"colorScale = d3.scaleDiverging(d3.interpolateRdBu).domain([ Math.max(Math.abs(allValues[1]), Math.abs(allValues[0])), 0, -Math.max(Math.abs(allValues[1]), Math.abs(allValues[0])) ]) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"allValues = calculateValueExtent(unemploymentData, \"diff\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3002,"value":"calculatePathDataExtent = (data) => {\n if(data.length > 0) {\n const valueArray = data[0].data.map((d)=> d.value)\n return d3.extent(Array.from(valueArray))\n }\n return data\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1648,"value":"calculateValueExtent = (data, key1, key2) => {\n const merge = ages.reduce((acc, ageKey)=> {\n const dataset = data[ageKey]\n if(dataset) {\n dataset.forEach((d)=>{\n const timeseries = d.timeseries\n const values = timeseries.forEach((v)=>{\n acc.add(v.value)\n } )\n })\n }\n return acc\n }, new Set([]))\n return d3.extent(Array.from(merge))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"formatTime = d3.utcFormat(\"%b-%y\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"xAxisTop = g => g\n .attr(\"transform\", `translate(0,${margin.top})`)\n .call(d3.axisTop(timeBands).tickFormat((d)=> formatTime(new Date(d))).tickSize(0))\n .selectAll(\".tick\")\n .each(function (d, i) {\n if ( i % 3 ) {\n this.remove();\n }\n });\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"timeBands = d3.scaleBand().domain(dates.map((d)=>d.toDateString())).range([ margin.left, heatMapWidth -margin.right]).paddingInner(0.01);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"squareDimensions = ({ width: timeBands.bandwidth(), height: categorySpacer})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"sexCategoryBands = d3.scaleBand().domain(sLabels).range([ height - margin.bottom, margin.top]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"categorySpacer = sexCategoryBands.bandwidth()/demographicLabels.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"demoCategoryBands = d3.scaleBand().domain([...demographicLabels]).range([ height - margin.bottom , margin.top +20])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"sLabels = [\"males\", \"females\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1655,"value":"filterBySelection = (data, selection) => {\n return ages.reduce((acc, ageRange)=>{\n const filtered = data[ageRange].filter((d)=> d.barLabel === selection.barLabel && d.sex === selection.sex && d.age === selection.ageKey)\n if(filtered.length > 0) {\n acc[ageRange] = filtered \n }\n return acc\n }, {})\n\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"demographicLabels = Object.keys(demographicDisplayLabels )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":868,"value":"demographicDisplayLabels = ({\"white\": \"White\", \"black_african_american\": \"Black/African American\", \"asian\": \"Asian\", \"hispanic_latino\": \"Hispanic/Latino\", \"all\": \"All\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":612,"value":"unemploymentData = monthlyDiffData.find((d)=> d.name === \"Unemployment Rate\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"dataBySex = (data, name, yLabel) => {\n const males = data.filter((d)=> d.sex === \"males\")\n const females = data.filter((d)=> d.sex === \"females\")\n let acc = {name, yLabel, data:{males, females} }\n return acc\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1363,"value":"ages = [\"16-19\", \"20-24\", \"25-54\", \"55+\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"monthlyDiffData = {\n return datasets.map((dataset)=>{\n const diffs = ages.reduce((acc, agerange)=> {\n const data = dataset.data.filter((d)=>d.age === agerange)\n acc[agerange] = calculateMonthDiffsTest(data)\n return acc\n }, {})\n\n const name = dataset.name\n return {...diffs, name, yLabel: dataset.yLabel}\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2804,"value":"test_calc = datasets[0].data.filter((d)=> d.age=== \"16-19\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2833,"value":"monthArray","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2821,"value":"calculateMonthDiffsTest(test_calc)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2817,"value":"$3e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":598,"value":"heatMapData = monthlyDiffData.find((d)=> d.name === \"Unemployment Rate\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":" dates = calculateDataExtent(heatMapData,ages[0], false)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1675,"value":"calculateDataExtent = (data, sampleKey, use2019) => {\n const sample = data[sampleKey]\n const setDates = sample.reduce((acc, dateObj)=>{\n dateObj.timeseries.forEach((valObj)=>{\n acc.add(valObj.date.toDateString())\n if(use2019) {\n acc.add(valObj.date.toDateString())\n }\n })\n return acc\n },new Set([]))\n const dateArray = Array.from(setDates)\n const result = dateArray.map((d)=> new Date(d)).sort((a,b)=> a-b)\n return result\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"height = 300","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"margin = ({top: 35, right: 10, bottom: 30, left: 90})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"import {monthArray, nominalColors, datasets} from '@ahoak/august-2020-unemployment-dataset'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1943,"value":"uuid = import('uuid/dist/esm-browser/v4.js').then(module => module.default)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"html` `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3f","stdlib":"1"}} 31:"$30:body"