31:T73b,plot = { const selectedField = lookback === "Past Year" ? "indeed_job_postings_index_SA_ly" : "indeed_job_postings_index_SA"; const filteredData = lookback === "Past Year" ? data.filter(d => d.indeed_job_postings_index_SA_ly != null) : data; const hover = vl.selectPoint('hover') .encodings('x') .on('mouseover') .toggle(false) .nearest(true); const isHovered = hover.empty(false); const line = vl.markLine({interpolate: 'monotone', line: true, size: 3}) .encode( vl.x().fieldT('date').title("Date").axis({format: "%b %Y", nice: true, grid: false}), vl.y().fieldQ(selectedField).title("Indeed Job Postings Index").axis({format: "2s", nice: true, tickCount: 4}), vl.color().fieldN('variable').title(false).scale({range: ["#CC107B", "#233F96"]}).legend({orient: "top", titleFontSize:12, labelFontSize: 12, symbolSize: 120, symbolStrokeWidth: 3}) ); const base = line.transform(vl.filter(isHovered)); const label = {align: 'left', dx: -20, dy: -6, fontSize: 12, fontWeight: "bold", color: "#black"}; const white = {stroke: 'white', strokeWidth: 2, fontSize: 12}; const tooltip = vl.layer( base.markText({ align: "right", fontSize: 12, fontWeight: "bold", color: "#black"}).encode( vl.y().value(10), vl.text().fieldT("date") ) ); return vl.data(filteredData) .layer(line, vl.markRule({color: '#C0C0C0'}) .transform(vl.filter(isHovered)) .encode(vl.x().fieldT('date')), line.markCircle() .params(hover).encode(vl.opacity().if(isHovered, vl.value(1)).value(0)), base.markText(label, white).encode(vl.text().fieldQ(selectedField).format(",.4s")), base.markText(label).encode(vl.text().fieldQ(selectedField).format(",.4s")), tooltip ) .width(width/1.2) .height(360) .render(); }32:T62c,jolts_plot = { const line = vl.data(jolts_data) .layer( vl.markLine({line: true, size: 3, color: "#FF7F0E"}) .encode( vl.x().fieldT('month_end').title("Date").axis({format: "%b %Y", nice: true, grid: false}), vl.y().fieldQ('JOLTS').title("Job Postings Index").axis({format: "2s", nice: true, tickCount: 4}), vl.color().fieldN('type').title(false).scale({range: ["#FF7F0E", "#233F96"]}).legend({orient: "top", titleFontSize:12, labelFontSize: 12, symbolSize: 120, symbolStrokeWidth: 8}), vl.tooltip([ { field: 'JOLTS', type: 'quantitative', format: ',.1f', title: 'JOLTS' }, { field: 'month_end', type: 'temporal', format: '%b %d, %Y', title: 'Date' } ]) ) ); const line2 = vl.data(data) .transform(vl.filter('datum.variable == "total postings"')) .layer( vl.markLine({interpolate: 'monotone', line: true, size: 3, color: "#233F96"}) .encode( vl.x().fieldT('date').title("Date").axis({format: "%b %Y", nice: true, grid: false}), vl.y().fieldQ('indeed_job_postings_index_SA').axis({format: "2s", nice: true, tickCount: 4}), vl.color().fieldN('variable').title(false).legend({orient: "top", titleFontSize:12, labelFontSize: 12, symbolSize: 120, symbolStrokeWidth: 8}), vl.tooltip([ { field: 'indeed_job_postings_index_SA', type: 'quantitative', format: ',.1f', title: 'Indeed Job Index'}, { field: 'date', type: 'temporal', format: '%b %d, %Y', title: 'Date'} ]) ) ); return vl.layer(line2, line) .width(width/1.2) .height(360) .config({view: { stroke: null }}) .render(); }33:T4cc,viewof sector = { const type = select({ title: "Category", options: [ { label: 'Select All', value: 'Select All' }, { label: 'Administrative & Support', value: 'Administrative & Support' }, { label: 'Business & Finance', value: 'Business & Finance' }, { label: 'Creative & Media', value: 'Creative & Media' }, { label: 'Education & Community', value: 'Education & Community' }, { label: 'Engineering & Technical', value: 'Engineering & Technical' }, { label: 'Healthcare', value: 'Healthcare' }, { label: 'Information Technology', value: 'Information Technology' }, { label: 'Legal & Security', value: 'Legal & Security' }, { label: 'Marketing, Sales & Strategy', value: 'Marketing Sales & Strategy' }, { label: 'Production & Manufacturing', value: 'Production & Manufacturing' }, { label: 'Science & Research', value: 'Science & Research' }, { label: 'Service & Hospitality', value: 'Service & Hospitality' }, { label: 'Transportation & Logistics', value: 'Transportation & Logistics' }, ], value: "Select All", description: "Select Sector Category to chart." }); type.input.style.fontSize = "0.8em"; return type; }34:T112b,plot2 = { const selection1 = vl.selectPoint().on('click'); const selection2 = vl.selectPoint().on('click'); const line = vl.data(sector_data) .transform(vl.filter('datum.variable == "total postings"'), vl.filter('datum.jobcountry == "US"'), vl.filter(sector === 'Select All' ? 'true' : `datum.Category == "${sector}"`) ) .title("Job Postings by Sector Trends") .layer( vl.markLine({interpolate: 'monotone', line: true, opacitysize: 1, color: "black"}) .params(selection1) .encode( vl.x().fieldT('date').title("Date").axis({format: "%b %Y", nice: true, grid: false}), vl.y().fieldQ('indeed_job_postings_index').title("Indeed Job Postings Index").axis({format: "2s", nice: true, tickCount: 4}), vl.detail().fieldN('display_name').title("Sector"), vl.color().if(selection1, vl.value("black")).value("lightgray"), vl.opacity().if(selection1, vl.value("0.4")).value("0.2"), vl.tooltip([ { field: 'display_name', type: 'nominal', title: 'Sector'}, { field: 'indeed_job_postings_index', type: 'quantitative', format: ',.1f', title: 'Indeed Job Index'}, { field: 'date', type: 'temporal', format: '%b %d, %Y', title: 'Date'} ]) ) .height(320) .width(width/1.2) ); const line2 = vl.data(data) .transform(vl.filter('datum.variable == "total postings"'), vl.filter('datum.jobcountry == "US"') ) .layer( vl.markLine({interpolate: 'monotone', line: true, size: 3, color: "#233F96"}) .encode( vl.x().fieldT('date').title("Date").axis({format: "%b %Y", nice: true, grid: false}), vl.y().fieldQ('indeed_job_postings_index_SA').title("Indeed Job Postings Index").axis({format: "2s", nice: true, tickCount: 4}), vl.color().fieldN('variable').title(false).scale({range: ["#233F96"]}).legend({orient: "top", titleFontSize:12, labelFontSize: 12, symbolSize: 120, symbolStrokeWidth: 6}), vl.tooltip().fieldN('variable') ) .height(320) .width(width/1.2) ); const line3 = vl.data(sector_data) .transform( vl.filter('datum.variable == "total postings"'), vl.filter('datum.jobcountry == "US"'), vl.filter(sector === 'Select All' ? 'true' : `datum.Category == "${sector}"`), vl.aggregate([{op: 'mean', field: 'indeed_job_postings_index', as: 'average_index'}]) .groupby(['date']) ) .layer( vl.markLine({interpolate: 'monotone', line: true, size: 3, color: "#46a2da"}) .encode( vl.x().fieldT('date').title("Date").axis({format: "%b %Y", nice: true, grid: false}), vl.y().fieldQ('average_index').axis({format: "2s", nice: true, tickCount: 4}), vl.color().value("#46a2da").title(false).legend({orient: "top", titleFontSize:12, labelFontSize: 12, symbolSize: 120, symbolStrokeWidth: 6}), vl.tooltip([ { field: 'date', type: 'temporal', format: '%b %d, %Y', title: 'Date' }, { field: 'average_index', type: 'quantitative', format: ',.1f', title: 'Average Indeed Job Index' } ]) ) ) .height(320) .width(width / 1.2); const bar = vl.data(sector_data_latest) .transform(vl.filter('datum.jobcountry == "US"'), vl.filter('datum.variable == "total postings"'), vl.filter(sector === 'Select All' ? 'true' : `datum.Category == "${sector}"`) ) .title("Job Postings by Sector (" + d3.timeFormat("%B %d, %Y")(maxDate) + ")") .layer( vl.markBar({opacity: 0.8}) .params(selection2) .encode( vl.x().fieldN('display_name').title(false).axis({nice: true, grid: false}) .sort({field: "indeed_job_postings_index", order: "descending"}), vl.y().fieldQ('indeed_job_postings_index').title("Indeed Job Postings Index").axis({format: "2s", nice: true, tickCount: 4}), vl.color().if(selection2, vl.value("#233F96")).value("lightgray"), vl.tooltip([ { field: 'Sector', type: 'nominal', title: 'Sector'}, { field: 'indeed_job_postings_index', type: 'quantitative', format: ',.1f', title: 'Indeed Job Index'} ]) ) .width(width/1.2) .height(140), vl.markRule({size: 3, opacity: 1, stroke: 'black'}) .encode( vl.y().average('indeed_job_postings_index')) ); return vl.vconcat(vl.layer(line, line2, line3), bar) .config({view: { stroke: null }}) .render(); }35:T6c8,Plot.plot({ height: 800, x: { axis: "top", label: "Percent Change since Feb. 2020", labelAnchor: "center", labelOffset: 35, tickFormat: d => `${d}%` }, y: { axis: null }, marginLeft: 40, marginRight: 50, marginTop: 40, color: { scheme: "PiYG" }, marks: [ // Bars Plot.barX(sector_data_latest, { x: d => d.indeed_job_postings_index - 100, y: "Sector", fill: d => d.indeed_job_postings_index > 100, sort: { y: "x" } }), ...d3.groups(sector_data_latest, d => d.indeed_job_postings_index > 100) .map(([growth, sectors]) => Plot.text(sectors, { x: 0, y: "Sector", text: "Sector", textAnchor: growth ? "end" : "start", dx: growth ? -6 : 6, fill: "black", fontSize: 12, paintOrder: "stroke", stroke: "white", strokeWidth: 3 }) ), Plot.text( sector_data_latest.filter(d => d.indeed_job_postings_index > 100), { x: d => d.indeed_job_postings_index - 100, y: "Sector", text: d => "+" + Math.round(d.indeed_job_postings_index - 100) + "%", textAnchor: "start", dx: 5, fill: "#276419", fontSize: 12, fontWeight: "bold", strokeWidth: 3 } ), Plot.text( sector_data_latest.filter(d => d.indeed_job_postings_index <= 100), { x: d => d.indeed_job_postings_index - 100, y: "Sector", text: d => Math.round(d.indeed_job_postings_index - 100) + "%", textAnchor: "end", dx: -5, fill: "#8e0152", fontSize: 12, fontWeight: "bold", strokeWidth: 3 } ) ] }); 36:Te0a,plot5 = { const selection1 = vl.selectPoint().on('click'); const selection2 = vl.selectPoint().on('click'); const line = vl.data(sector_data) .transform(vl.filter('datum.variable == "total postings"'), vl.filter('datum.jobcountry == "US"'), vl.aggregate([{op: 'mean', field: 'indeed_job_postings_index', as: 'average_index'}]) .groupby(['date', 'Category']) ) .title("Job Postings by Category Trends") .layer( vl.markLine({interpolate: 'monotone', line: true, opacitysize: 1, color: "black"}) .params(selection1) .encode( vl.x().fieldT('date').title("Date").axis({format: "%b %Y", nice: true, grid: false}), vl.y().fieldQ('average_index').title("Indeed Job Postings Index").axis({format: "2s", nice: true, tickCount: 4}), vl.opacity().if(selection1, vl.value("0.5")).value("0.1"), vl.detail().fieldN('Category').title(false), vl.tooltip([ { field: 'Category', type: 'nominal', title: 'Category'}, { field: 'average_index', type: 'quantitative', format: ',.1f', title: 'Avg. Indeed Job Index'}, { field: 'date', type: 'temporal', format: '%b %d, %Y', title: 'Date'} ]) ) .height(320) .width(width/1.2) ); const line2 = vl.data(data) .transform(vl.filter('datum.variable == "total postings"'), vl.filter('datum.jobcountry == "US"') ) .layer( vl.markLine({interpolate: 'monotone', line: true, size: 4, color: "#233F96"}) .encode( vl.x().fieldT('date').title("Date").axis({format: "%b %Y", nice: true, grid: false}), vl.y().fieldQ('indeed_job_postings_index_SA').title("Indeed Job Postings Index").axis({format: "2s", nice: true, tickCount: 4}), vl.color().fieldN('variable').scale({range: ["#233F96"]}).title(false).legend({orient: "top", titleFontSize:12, labelFontSize: 12, symbolSize: 120, symbolStrokeWidth: 6}), vl.tooltip().fieldN('variable') ) .height(320) .width(width/1.2) ); const bar = vl.data(sector_data_latest) .transform(vl.filter('datum.jobcountry == "US"'), vl.filter('datum.variable == "total postings"'), vl.aggregate([{op: 'mean', field: 'indeed_job_postings_index', as: 'average_index'}]) .groupby(['date', 'Category']) ) .title("Job Postings by Category (" + d3.timeFormat("%B %d, %Y")(maxDate) + ")") .layer( vl.markBar({opacity: 0.8}) .params(selection2) .encode( vl.x().fieldN('Category').title(false).axis({nice: true, grid: false}) .sort({field: "average_index", order: "descending"}), vl.y().fieldQ('average_index').title("Avg. Indeed Job Postings Index").axis({format: "2s", nice: true, tickCount: 4}), vl.color().if(selection2, vl.value("#233F96")).value("lightgray"), vl.tooltip([ { field: 'Category', type: 'nominal', title: 'Category'}, { field: 'average_index', type: 'quantitative', format: ',.1f', title: 'Avg. Indeed Job Index'} ]) ), vl.markRule({size: 3, opacity: 1, stroke: 'black'}) .encode( vl.y().average('average_index') ) /* , vl.markText({align: 'center', baseline: 'bottom', dy: -5, fontSize: 12, fontWeight: 'bold', color: '#233F96'}) .encode( vl.x().fieldN('Category'), vl.y().fieldQ('average_index'), vl.text().fieldQ('average_index').format(',.1f') // Format the text as needed )*/ ) .width(width / 1.2) .height(140); return vl.vconcat(vl.layer(line, line2), bar) .config({view: { stroke: null }}) .render(); }37:T4e7,viewof sectorFilter = { const type = select({ title: "Category", options: [ { label: 'All Categories', value: 'All Categories' }, { label: 'Administrative & Support', value: 'Administrative & Support' }, { label: 'Business & Finance', value: 'Business & Finance' }, { label: 'Creative & Media', value: 'Creative & Media' }, { label: 'Education & Community', value: 'Education & Community' }, { label: 'Engineering & Technical', value: 'Engineering & Technical' }, { label: 'Healthcare', value: 'Healthcare' }, { label: 'Information Technology', value: 'Information Technology' }, { label: 'Legal & Security', value: 'Legal & Security' }, { label: 'Marketing, Sales & Strategy', value: 'Marketing Sales & Strategy' }, { label: 'Production & Manufacturing', value: 'Production & Manufacturing' }, { label: 'Science & Research', value: 'Science & Research' }, { label: 'Service & Hospitality', value: 'Service & Hospitality' }, { label: 'Transportation & Logistics', value: 'Transportation & Logistics' }, ], value: "All Categories", description: "Select a Category to view Sector details." }); type.input.style.fontSize = "0.8em"; return type; }38:Tc52,Plot.plot({ height: 400, x: { axis: "top", label: "Percent Change since Feb. 2020", labelAnchor: "center", labelOffset: 35, tickFormat: d => `${d}%` }, y: { axis: null }, marginLeft: (() => { if (sectorFilter === "All Categories") return 45; const values = sector_data_latest .filter(d => d.Category === sectorFilter) .map(d => d.indeed_job_postings_index - 100); const minVal = Math.min(...values); if (minVal > -10) return 170; return minVal > -15 ? 80 : 45; })(), marginRight: (() => { if (sectorFilter === "All Categories") return 45; const values = sector_data_latest .filter(d => d.Category === sectorFilter) .map(d => d.indeed_job_postings_index - 100); const maxVal = Math.max(...values); if (maxVal < -10) return 205; return maxVal < 10 ? 100 : 45; })(), marginTop: 40, color: { scheme: "PiYG" }, marks: [ // Bars: choose dataset and y field based on filter Plot.barX( sectorFilter === "All Categories" ? category_data_latest : sector_data_latest.filter(d => d.Category === sectorFilter), { x: d => d.indeed_job_postings_index - 100, y: sectorFilter === "All Categories" ? "Category" : "Sector", fill: d => d.indeed_job_postings_index > 100, sort: { y: "x" } } ), // Category/Sector labels at zero line ...d3.groups( sectorFilter === "All Categories" ? category_data_latest : sector_data_latest.filter(d => d.Category === sectorFilter), d => d.indeed_job_postings_index > 100 ) .map(([growth, items]) => Plot.text(items, { x: 0, y: sectorFilter === "All Categories" ? "Category" : "Sector", text: sectorFilter === "All Categories" ? "Category" : "Sector", textAnchor: growth ? "end" : "start", dx: growth ? -6 : 6, fill: "black", fontSize: 12, paintOrder: "stroke", }) ), // Positive change labels Plot.text( (sectorFilter === "All Categories" ? category_data_latest : sector_data_latest.filter(d => d.Category === sectorFilter)) .filter(d => d.indeed_job_postings_index > 100), { x: d => d.indeed_job_postings_index - 100, y: sectorFilter === "All Categories" ? "Category" : "Sector", text: d => "+" + Math.round(d.indeed_job_postings_index - 100) + "%", textAnchor: "start", dx: 5, fill: "#276419", fontSize: 12, fontWeight: "bold", strokeWidth: 3 } ), // Negative change labels Plot.text( (sectorFilter === "All Categories" ? category_data_latest : sector_data_latest.filter(d => d.Category === sectorFilter)) .filter(d => d.indeed_job_postings_index <= 100), { x: d => d.indeed_job_postings_index - 100, y: sectorFilter === "All Categories" ? "Category" : "Sector", text: d => Math.round(d.indeed_job_postings_index - 100) + "%", textAnchor: "end", dx: -5, fill: "#8e0152", fontSize: 12, fontWeight: "bold", strokeWidth: 3 } ) ] }); 39:T73a,viewof state = { const type = select({ title: "State", options: [ { label: 'Select All', value: 'Select All' }, { label: 'AL', value: 'AL' }, { label: 'AK', value: 'AK' }, { label: 'AZ', value: 'AZ' }, { label: 'AR', value: 'AR' }, { label: 'CA', value: 'CA' }, { label: 'CO', value: 'CO' }, { label: 'CT', value: 'CT' }, { label: 'DE', value: 'DE' }, { label: 'FL', value: 'FL' }, { label: 'GA', value: 'GA' }, { label: 'HI', value: 'HI' }, { label: 'ID', value: 'ID' }, { label: 'IL', value: 'IL' }, { label: 'IN', value: 'IN' }, { label: 'IA', value: 'IA' }, { label: 'KS', value: 'KS' }, { label: 'KY', value: 'KY' }, { label: 'LA', value: 'LA' }, { label: 'ME', value: 'ME' }, { label: 'MD', value: 'MD' }, { label: 'MA', value: 'MA' }, { label: 'MI', value: 'MI' }, { label: 'MN', value: 'MN' }, { label: 'MS', value: 'MS' }, { label: 'MO', value: 'MO' }, { label: 'MT', value: 'MT' }, { label: 'NE', value: 'NE' }, { label: 'NV', value: 'NV' }, { label: 'NH', value: 'NH' }, { label: 'NJ', value: 'NJ' }, { label: 'NM', value: 'NM' }, { label: 'NY', value: 'NY' }, { label: 'NC', value: 'NC' }, { label: 'ND', value: 'ND' }, { label: 'OH', value: 'OH' }, { label: 'OK', value: 'OK' }, { label: 'OR', value: 'OR' }, { label: 'PA', value: 'PA' }, { label: 'RI', value: 'RI' }, { label: 'SC', value: 'SC' }, { label: 'SD', value: 'SD' }, { label: 'TN', value: 'TN' }, { label: 'TX', value: 'TX' }, { label: 'UT', value: 'UT' }, { label: 'VT', value: 'VT' }, { label: 'VA', value: 'VA' }, { label: 'WA', value: 'WA' }, { label: 'WV', value: 'WV' }, { label: 'WI', value: 'WI' }, { label: 'WY', value: 'WY' } ], value: "CA", description: "Select State to chart." }); type.input.style.fontSize = "0.8em"; return type; }3a:Tf48,plot3 = { const selection1 = vl.selectPoint().on('click'); const selection2 = vl.selectPoint().on('click'); const line = vl.data(metro_data) .transform(vl.filter(state === 'Select All' ? 'true' : `datum.Postal == "${state}"`)) .title("Job Postings by Metro Trends") .layer( vl.markLine({interpolate: 'monotone', line: true, opacity: 0.25, color: "black"}) .encode( vl.x().fieldT('date').title("Date").axis({format: "%b %Y", nice: true, grid: false}), vl.y().fieldQ('indeed_job_postings_index').title("Indeed Job Postings Index").axis({format: "2s", nice: true, tickCount: 4}), vl.detail().fieldN('metro').title("CBSA"), vl.color().if(selection1, vl.value("black")).value("lightgray"), vl.opacity().if(selection1, vl.value("0.4")).value("0.2"), vl.tooltip([ { field: 'metro', type: 'nominal', title: 'Metro'}, { field: 'indeed_job_postings_index', type: 'quantitative', format: ',.1f', title: 'Indeed Job Index'}, { field: 'date', type: 'temporal', format: '%b %d, %Y', title: 'Date'} ]) ) .height(320) .width(width/1.2) ); const line2 = vl.data(data) .transform(vl.filter('datum.variable == "total postings"')) .layer( vl.markLine({interpolate: 'monotone', line: true, size: 3, color: "#233F96"}) .params(selection1) .encode( vl.x().fieldT('date').title("Date").axis({format: "%b %Y", nice: true, grid: false}), vl.y().fieldQ('indeed_job_postings_index_SA').title("Indeed Job Postings Index").axis({format: "2s", nice: true, tickCount: 4}), vl.color().fieldN('variable').title(false).scale({range: ["#233F96"]}).legend({orient: "top", titleFontSize:12, labelFontSize: 12, symbolSize: 120, symbolStrokeWidth: 6}), vl.tooltip().fieldN('variable') ) .height(320) .width(width/1.2) ); const line3 = vl.data(metro_data) .transform( vl.filter(state === 'Select All' ? 'true' : `datum.Postal == "${state}"`), vl.aggregate([{op: 'mean', field: 'indeed_job_postings_index', as: 'average_index'}]) .groupby(['date']) ) .layer( vl.markLine({interpolate: 'monotone', line: true, size: 3, color: "#46a2da"}) .encode( vl.x().fieldT('date').title("Date").axis({format: "%b %Y", nice: true, grid: false}), vl.y().fieldQ('average_index').axis({format: "2s", nice: true, tickCount: 4}), vl.color().value("#46a2da").title(false).legend({orient: "top", titleFontSize:12, labelFontSize: 12, symbolSize: 120, symbolStrokeWidth: 6}), vl.tooltip([ { field: 'date', type: 'temporal', format: '%b %d, %Y', title: 'Date' }, { field: 'average_index', type: 'quantitative', format: ',.1f', title: 'Average Indeed Job Index' } ]) ) ) .height(320) .width(width / 1.2); /*const bar = vl.data(metro_data_latest) .transform(vl.filter(state === 'Select All' ? 'true' : `datum.Postal == "${state}"`)) .title("Job Postings by State (" + d3.timeFormat("%m-%d-%Y")(maxDate) + ")") .layer( vl.markBar({opacity: 0.8, color: "#233F96"}) .params(selection2) .encode( vl.x().fieldN('metro').title(false).axis({nice: true, grid: false}).sort({field: "indeed_job_postings_index", order: "descending"}), vl.y().fieldQ('indeed_job_postings_index').title("Indeed Job Postings Index").axis({format: "2s", nice: true, tickCount: 4}), vl.color().if(selection2, vl.value("#233F96")).value("lightgray"), vl.tooltip([ { field: 'Metro', type: 'nominal', title: 'Metro'}, { field: 'indeed_job_postings_index', type: 'quantitative', format: ',.1f', title: 'Indeed Job Index'} ]) ) .width(width/1.2) .height(140), vl.markRule({size: 3, opacity: 1, stroke: 'black'}).encode( vl.y().average('indeed_job_postings_index')) ); */ return vl.vconcat(vl.layer(line, line2, line3), // bar ) .config({view: { stroke: null }}) .render(); }3b:Tf4e,plot4 = { const selection1 = vl.selectPoint().on('click'); const selection2 = vl.selectPoint().on('click'); const line = vl.data(state_data) .transform(vl.filter(region === 'Select All' ? 'true' : `datum.Region == "${region}"`)) .title("Job Postings by State Trends") .layer( vl.markLine({interpolate: 'monotone', line: true, opacity: 0.25, color: "black"}) .params(selection1) .encode( vl.x().fieldT('date').title("Date").axis({format: "%b %Y", nice: true, grid: false}), vl.y().fieldQ('indeed_job_postings_index').title("Indeed Job Postings Index").axis({format: "2s", nice: true, tickCount: 4}), vl.detail().fieldN('state').title("State"), vl.color().if(selection1, vl.value("black")).value("lightgray"), vl.opacity().if(selection1, vl.value("0.4")).value("0.2"), vl.tooltip([ { field: 'state', type: 'nominal', title: 'State'}, { field: 'indeed_job_postings_index', type: 'quantitative', format: ',.1f', title: 'Indeed Job Index'}, { field: 'date', type: 'temporal', format: '%b %d, %Y', title: 'Date'} ]) ) .height(320) .width(width/1.2) ); const line2 = vl.data(data) .transform(vl.filter('datum.variable == "total postings"')) .layer( vl.markLine({interpolate: 'monotone', line: true, size: 3, color: "#233F96"}) .encode( vl.x().fieldT('date').title("Date").axis({format: "%b %Y", nice: true, grid: false}), vl.y().fieldQ('indeed_job_postings_index_SA').title("Indeed Job Postings Index").axis({format: "2s", nice: true, tickCount: 4}), vl.color().fieldN('variable').title(false).scale({range: ["#233F96"]}).legend({orient: "top", titleFontSize:12, labelFontSize: 12, symbolSize: 120, symbolStrokeWidth: 6}), vl.tooltip().fieldN('variable') ) .height(320) .width(width/1.2) ); const line3 = vl.data(state_data) .transform( vl.filter(region === 'Select All' ? 'true' : `datum.Region == "${region}"`), vl.aggregate([{op: 'mean', field: 'indeed_job_postings_index', as: 'average_index'}]) .groupby(['date']) ) .layer( vl.markLine({interpolate: 'monotone', line: true, size: 3, color: "#46a2da"}) .encode( vl.x().fieldT('date').title("Date").axis({format: "%b %Y", nice: true, grid: false}), vl.y().fieldQ('average_index').axis({format: "2s", nice: true, tickCount: 4}), vl.color().value("#46a2da").title(false).legend({orient: "top", titleFontSize:12, labelFontSize: 12, symbolSize: 120, symbolStrokeWidth: 6}), vl.tooltip([ { field: 'date', type: 'temporal', format: '%b %d, %Y', title: 'Date' }, { field: 'average_index', type: 'quantitative', format: ',.1f', title: 'Average Indeed Job Index' } ]) ) ) .height(320) .width(width / 1.2); const bar = vl.data(state_data_latest) .transform(vl.filter(region === 'Select All' ? 'true' : `datum.Region == "${region}"`)) .title("Job Postings by Sector (" + d3.timeFormat("%m-%d-%Y")(maxDate) + ")") .layer( vl.markBar({opacity: 0.8, color: "#233F96"}) .params(selection2) .encode( vl.x().fieldN('state').title(false).axis({nice: true, grid: false}).sort({field: "indeed_job_postings_index", order: "descending"}), vl.y().fieldQ('indeed_job_postings_index').title("Indeed Job Postings Index").axis({format: "2s", nice: true, tickCount: 4}), vl.color().if(selection2, vl.value("#233F96")).value("lightgray"), vl.tooltip([ { field: 'State', type: 'nominal', title: 'State'}, { field: 'indeed_job_postings_index', type: 'quantitative', format: ',.1f', title: 'Indeed Job Index'} ]) ) .width(width/1.2) .height(140), vl.markRule({size: 3, opacity: 1, stroke: 'black'}).encode( vl.y().average('indeed_job_postings_index')) ); return vl.vconcat(vl.layer(line, line2, line3), // bar ) .config({view: { stroke: null }}) .render(); }3c:T8aa,Plot.plot({ projection: "identity", width: 975, height: 610, color: { scheme: "PiYG", type: "quantize", n: 9, domain: [-50, 50], tickFormat: d => `${d}%`, label: "Percent Change since Feb. 2020", legend: true }, marks: [ Plot.geo(topojson.feature(us, us.objects.states), Plot.centroid({ fill: d => { const val = valuemap.get(d.properties.name); return val != null ? val - 100 : undefined; }, title: d => { const val = valuemap.get(d.properties.name); return val != null ? `${d.properties.name}\n${(val - 100).toFixed(0)}%` : d.properties.name; }, tip: true })), Plot.geo(topojson.mesh(us, us.objects.states, (a, b) => a !== b), { stroke: "white" }), // State abbreviations Plot.text( topojson.feature(us, us.objects.states).features.filter( d => !northeastStates.has(d.properties.name) ), Plot.centroid({ text: d => stateAbbrevMap[d.properties.name] || d.properties.name, fill: d => { const val = valuemap.get(d.properties.name); if (val == null) return "black"; const change = val - 100; return Math.abs(change) > 40 ? "white" : "black"; }, fontSize: 12, textAnchor: "center", dy: -5, dx: 0, paintOrder: "stroke" }) ), // Percent value text Plot.text( topojson.feature(us, us.objects.states).features.filter( d => !northeastStates.has(d.properties.name) ), Plot.centroid({ text: d => { const val = valuemap.get(d.properties.name); if (val == null) return ""; const pctChange = Math.round(val - 100); return (pctChange > 0 ? "+" : "") + pctChange + "%"; }, fill: d => { const val = valuemap.get(d.properties.name); if (val == null) return "black"; const change = val - 100; return Math.abs(change) > 40 ? "white" : "black"; }, fontWeight: "bold", fontSize: 12, textAnchor: "center", dy: 10, dx: 0, paintOrder: "stroke" }) ) ] }); 3d:T6bf,Plot.plot({ height: 800, x: { axis: "top", label: "Percent Change since Feb. 2020", labelAnchor: "center", labelOffset: 35, tickFormat: d => `${d}%` }, y: { axis: null }, marginLeft: 40, marginRight: 50, marginTop: 40, color: { scheme: "PiYG" }, marks: [ // Bars Plot.barX(state_data_latest, { x: d => d.indeed_job_postings_index - 100, y: "State", fill: d => d.indeed_job_postings_index > 100, sort: { y: "x" } }), ...d3.groups(state_data_latest, d => d.indeed_job_postings_index > 100) .map(([growth, sectors]) => Plot.text(sectors, { x: 0, y: "State", text: "State", textAnchor: growth ? "end" : "start", dx: growth ? -6 : 6, fill: "black", fontSize: 12, paintOrder: "stroke", stroke: "white", strokeWidth: 3 }) ), Plot.text( state_data_latest.filter(d => d.indeed_job_postings_index > 100), { x: d => d.indeed_job_postings_index - 100, y: "State", text: d => "+" + Math.round(d.indeed_job_postings_index - 100) + "%", textAnchor: "start", dx: 5, fill: "#276419", fontSize: 12, fontWeight: "bold", strokeWidth: 3 } ), Plot.text( state_data_latest.filter(d => d.indeed_job_postings_index <= 100), { x: d => d.indeed_job_postings_index - 100, y: "State", text: d => Math.round(d.indeed_job_postings_index - 100) + "%", textAnchor: "end", dx: -5, fill: "#8e0152", fontSize: 12, fontWeight: "bold", strokeWidth: 3 } ) ] }); 3e:T1382,country_plot = { const au = vl.data(data_AU) .transform(vl.filter('datum.variable == "total postings"')) .layer( vl.markLine({interpolate: 'monotone', line: true, size: 3, color: "red"}) .encode( vl.x().fieldT('date').title("Date").axis({format: "%b %Y", nice: true, grid: false}), vl.y().fieldQ('indeed_job_postings_index_SA').title("Indeed Job Postings Index").axis({format: "2s", nice: true, tickCount: 4}), vl.color().fieldN('jobcountry').title(false).legend({orient: "top", titleFontSize:12, labelFontSize: 12, symbolSize: 120, symbolStrokeWidth: 6}), vl.tooltip([ { field: 'jobcountry', type: 'nominal', title: 'Country'}, { field: 'indeed_job_postings_index_SA', type: 'quantitative', title: 'Indeed Job Index'}, { field: 'date', type: 'temporal', format: '%b %d, %Y', title: 'Date'} ]) ) ); const de = vl.data(data_DE) .transform(vl.filter('datum.variable == "total postings"')) .layer( vl.markLine({interpolate: 'monotone', line: true, size: 3, color: "orange"}) .encode( vl.x().fieldT('date').title("Date").axis({format: "%b %Y", nice: true, grid: false}), vl.y().fieldQ('indeed_job_postings_index_SA').axis({format: "2s", nice: true, tickCount: 4}), vl.color().fieldN('jobcountry').title(false).legend({orient: "top", titleFontSize:12, labelFontSize: 12, symbolSize: 120, symbolStrokeWidth: 6}), vl.tooltip([ { field: 'jobcountry', type: 'nominal', title: 'Country'}, { field: 'indeed_job_postings_index_SA', type: 'quantitative', title: 'Indeed Job Index'}, { field: 'date', type: 'temporal', format: '%b %d, %Y', title: 'Date'} ]) ) ); const ie = vl.data(data_IE) .transform(vl.filter('datum.variable == "total postings"')) .layer( vl.markLine({interpolate: 'monotone', line: true, size: 3, color: "purple"}) .encode( vl.x().fieldT('date').title("Date").axis({format: "%b %Y", nice: true, grid: false}), vl.y().fieldQ('indeed_job_postings_index_SA').axis({format: "2s", nice: true, tickCount: 4}), vl.color().fieldN('jobcountry').title(false).legend({orient: "top", titleFontSize:12, labelFontSize: 12, symbolSize: 120, symbolStrokeWidth: 6}), vl.tooltip([ { field: 'jobcountry', type: 'nominal', title: 'Country'}, { field: 'indeed_job_postings_index_SA', type: 'quantitative', title: 'Indeed Job Index'}, { field: 'date', type: 'temporal', format: '%b %d, %Y', title: 'Date'} ]) ) ); const gb = vl.data(data_GB) .transform(vl.filter('datum.variable == "total postings"')) .layer( vl.markLine({interpolate: 'monotone', line: true, size: 3, color: "orange"}) .encode( vl.x().fieldT('date').title("Date").axis({format: "%b %Y", nice: true, grid: false}), vl.y().fieldQ('indeed_job_postings_index_SA').axis({format: "2s", nice: true, tickCount: 4}), vl.color().fieldN('jobcountry').title(false).legend({orient: "top", titleFontSize:12, labelFontSize: 12, symbolSize: 120, symbolStrokeWidth: 6}), vl.tooltip([ { field: 'jobcountry', type: 'nominal', title: 'Country'}, { field: 'indeed_job_postings_index_SA', type: 'quantitative', title: 'Indeed Job Index'}, { field: 'date', type: 'temporal', format: '%b %d, %Y', title: 'Date'} ]) ) ); const ca = vl.data(data_CA) .transform(vl.filter('datum.variable == "total postings"')) .layer( vl.markLine({interpolate: 'monotone', line: true, size: 3, color: "pink"}) .encode( vl.x().fieldT('date').title("Date").axis({format: "%b %Y", nice: true, grid: false}), vl.y().fieldQ('indeed_job_postings_index_SA').axis({format: "2s", nice: true, tickCount: 4}), vl.color().fieldN('jobcountry').title(false).legend({orient: "top", titleFontSize:12, labelFontSize: 12, symbolSize: 120, symbolStrokeWidth: 6}), vl.tooltip([ { field: 'jobcountry', type: 'nominal', title: 'Country'}, { field: 'indeed_job_postings_index_SA', type: 'quantitative', title: 'Indeed Job Index'}, { field: 'date', type: 'temporal', format: '%b %d, %Y', title: 'Date'} ]) ) ); const us = vl.data(data) .transform(vl.filter('datum.variable == "total postings"')) .layer( vl.markLine({interpolate: 'monotone', line: true, size: 3, color: "blue"}) .encode( vl.x().fieldT('date').title("Date").axis({format: "%b %Y", nice: true, grid: false}), vl.y().fieldQ('indeed_job_postings_index_SA').axis({format: "2s", nice: true, tickCount: 4}), vl.color().fieldN('jobcountry').title(false).legend({orient: "top", titleFontSize:12, labelFontSize: 12, symbolSize: 120, symbolStrokeWidth: 6}), vl.tooltip([ { field: 'jobcountry', type: 'nominal', title: 'Country'}, { field: 'indeed_job_postings_index_SA', type: 'quantitative', title: 'Indeed Job Index'}, { field: 'date', type: 'temporal', format: '%b %d, %Y', title: 'Date'} ]) ) ); return vl.layer(au, de, ie, gb, ca, us) .width(width/1.2) .height(320) .config({view: { stroke: null }}) .render(); }3f:T447,data = { const raw = await d3.csv( "https://raw.githubusercontent.com/hiring-lab/job_postings_tracker/master/US/aggregate_job_postings_US.csv" ); const parsed = raw.map(d => ({ ...d, date: new Date(d.date), indeed_job_postings_index_SA: +d.indeed_job_postings_index_SA })); const maxDate = d3.max(parsed, d => d.date); const baseDate = new Date(maxDate); baseDate.setFullYear(baseDate.getFullYear() - 1); const getBase = (variable) => { const rows = parsed .filter(d => d.variable === variable) .sort((a, b) => Math.abs(a.date - baseDate) - Math.abs(b.date - baseDate)); return rows[0]?.indeed_job_postings_index_SA ?? null; }; const baseValues = { "total postings": getBase("total postings"), "new postings": getBase("new postings") }; return parsed.map(d => { const base = baseValues[d.variable]; const inRange = d.date >= baseDate; return { ...d, indeed_job_postings_index_SA_ly: (base != null && inRange) ? (d.indeed_job_postings_index_SA / base) * 100 : null }; }); }40:[{"id":"ed9a9f6512cd9a5c28841d46e01757f17cddff05b31a1ad5de34ff0fcb18fbc8328a11fd1ab227adba3622c7458ce50d44987c5d89d3e5babb1bed19f83bb5b8","href":"https://static.observableusercontent.com/files/ed9a9f6512cd9a5c28841d46e01757f17cddff05b31a1ad5de34ff0fcb18fbc8328a11fd1ab227adba3622c7458ce50d44987c5d89d3e5babb1bed19f83bb5b8","name":"Untitled spreadsheet - Sheet1.csv","type":"text/csv","lastModified":1725545262612.486,"size":2428},{"id":"1af5c9a2016649de2420d2b65c189385cf5e609b62d4ae2900de4c55910319fd0f43fa44e959dc3737479967e01b0d3a10147029950c8f99b9ba69fae7bb6090","href":"https://static.observableusercontent.com/files/1af5c9a2016649de2420d2b65c189385cf5e609b62d4ae2900de4c55910319fd0f43fa44e959dc3737479967e01b0d3a10147029950c8f99b9ba69fae7bb6090","name":"jolts_07142025.csv","type":"text/csv","lastModified":1752525567779.267,"size":2857},{"id":"e0db09fdf34743571fd4d6733125ca0b3a08eb087b9b4f159d5221dd800525f415ba993a790be51dd0614fc1d49d366f67950cc49dfe07e84edcc782142ca66c","href":"https://static.observableusercontent.com/files/e0db09fdf34743571fd4d6733125ca0b3a08eb087b9b4f159d5221dd800525f415ba993a790be51dd0614fc1d49d366f67950cc49dfe07e84edcc782142ca66c","name":"jolts_07142025@1.csv","type":"text/csv","lastModified":1752525596363.621,"size":2817},{"id":"03d7f4bd3efde87d61ff8a9388457911cbb355a6f814c8eed8509038b753f90f8f899e0807265b069f7102544c2ab8e2851a302ecb5611f1c239a17baf23c436","href":"https://static.observableusercontent.com/files/03d7f4bd3efde87d61ff8a9388457911cbb355a6f814c8eed8509038b753f90f8f899e0807265b069f7102544c2ab8e2851a302ecb5611f1c239a17baf23c436","name":"sector_category_ref@1.csv","type":"text/csv","lastModified":1752694983898.091,"size":1810},{"id":"1ec3edc43ba66c0db419744c479d1b5118bb405587189f3ad739a10853f6f933d86824e809f4b4ad18053ab33fb5dc7c5f3d6bc601654c8ea976afd5b321f517","href":"https://static.observableusercontent.com/files/1ec3edc43ba66c0db419744c479d1b5118bb405587189f3ad739a10853f6f933d86824e809f4b4ad18053ab33fb5dc7c5f3d6bc601654c8ea976afd5b321f517","name":"counties-albers-10m.json","type":"application/json","lastModified":1752697109374.376,"size":795407},{"id":"e99679b5f8769ac6546b16979c04a2eb7e3cab06b54f47bc2c8b0bf29a08c1dff387d4f6fb55529b0630d6c1b621133bb6860796b6f8ff84c5ea13887d207261","href":"https://static.observableusercontent.com/files/e99679b5f8769ac6546b16979c04a2eb7e3cab06b54f47bc2c8b0bf29a08c1dff387d4f6fb55529b0630d6c1b621133bb6860796b6f8ff84c5ea13887d207261","name":"sector_category_ref-1-1.csv","type":"text/csv","lastModified":1755206752756.983,"size":1909},{"id":"830ff5a4c6aa50ecc088da47aedf04551f29b0158ff9cc38537a0bae560f9f3b7ac736c835cf37da101e2002ac26e4bd7fdb4c7da473b13b868cdf543f4f69c0","href":"https://static.observableusercontent.com/files/830ff5a4c6aa50ecc088da47aedf04551f29b0158ff9cc38537a0bae560f9f3b7ac736c835cf37da101e2002ac26e4bd7fdb4c7da473b13b868cdf543f4f69c0","name":"jolts@5.csv","type":"text/csv","lastModified":1683037441625.938,"size":1586},{"id":"3a701b44afaf6ea241fe575d7cd077f5ae21eeff145f3b4f0ff969449fbc6b1e2aa55fd2d5e76fc0c40e165d3aa196371a149097d8e5adbef11ae90991d63db1","href":"https://static.observableusercontent.com/files/3a701b44afaf6ea241fe575d7cd077f5ae21eeff145f3b4f0ff969449fbc6b1e2aa55fd2d5e76fc0c40e165d3aa196371a149097d8e5adbef11ae90991d63db1","name":"jolts@2.csv","type":"text/csv","lastModified":1680559218602.451,"size":1679},{"id":"7fafc6f28c6fc125bc70b48dc8c20571f1c4e3ba25cf4b50be0cb4a76112d47491d7c855eda8ee169c75c68a692a217999f1f915177159151edff02f6b80e9a8","href":"https://static.observableusercontent.com/files/7fafc6f28c6fc125bc70b48dc8c20571f1c4e3ba25cf4b50be0cb4a76112d47491d7c855eda8ee169c75c68a692a217999f1f915177159151edff02f6b80e9a8","name":"jolts_07292025.csv","type":"text/csv","lastModified":1753800584361.885,"size":2454},{"id":"9c64c2a0827e108cbd04fd81a6e1654c1e63f25251bdb9cc3134ffaf61af770548657538a577c7bf45d9c651ca773716e2c429a8fa26122e7a9089dda7d3fa71","href":"https://static.observableusercontent.com/files/9c64c2a0827e108cbd04fd81a6e1654c1e63f25251bdb9cc3134ffaf61af770548657538a577c7bf45d9c651ca773716e2c429a8fa26122e7a9089dda7d3fa71","name":"sector_category_ref-1.csv","type":"text/csv","lastModified":1753817253049.648,"size":1932},{"id":"292af50b68a19a03b7f4cd1b138a9df75a6be86c5e6f56abaae082bb56a41bed549b821b39e3029ce86f19e58cfbf5709125dd15ccb2bccb5d76cf1fcc9c1f24","href":"https://static.observableusercontent.com/files/292af50b68a19a03b7f4cd1b138a9df75a6be86c5e6f56abaae082bb56a41bed549b821b39e3029ce86f19e58cfbf5709125dd15ccb2bccb5d76cf1fcc9c1f24","name":"sector_category_ref-1@1.csv","type":"text/csv","lastModified":1753910696732.065,"size":1934},{"id":"68882d803dde28b16f779335070486614ad74eb21176e17ec54e15741cea009e1ffcd99a0f7a07fb6b4db887103fa23b8dea41440f9842029d08c05855675c96","href":"https://static.observableusercontent.com/files/68882d803dde28b16f779335070486614ad74eb21176e17ec54e15741cea009e1ffcd99a0f7a07fb6b4db887103fa23b8dea41440f9842029d08c05855675c96","name":"jolts@1.csv","type":"text/csv","lastModified":1678316549722.407,"size":1670},{"id":"e23d3befcaa1c038283fbb3b9d4aedb2483f96e3f830b24a71013b11083aaebeff2b95bb5c64fb38daf6b523a515107cc8c28e2f042204e41bea09e79bb5e641","href":"https://static.observableusercontent.com/files/e23d3befcaa1c038283fbb3b9d4aedb2483f96e3f830b24a71013b11083aaebeff2b95bb5c64fb38daf6b523a515107cc8c28e2f042204e41bea09e79bb5e641","name":"jolts@6.csv","type":"text/csv","lastModified":1685544719041.675,"size":1544},{"id":"ce6318edd43c98eb65fdf815877c00c53eedf310fc9ddd277a50fd47794cf98173dc59e30b0363b986c7eac33019af8d96fd7c345189b8ddbc06f7fb53d8c20d","href":"https://static.observableusercontent.com/files/ce6318edd43c98eb65fdf815877c00c53eedf310fc9ddd277a50fd47794cf98173dc59e30b0363b986c7eac33019af8d96fd7c345189b8ddbc06f7fb53d8c20d","name":"jolts@3.csv","type":"text/csv","lastModified":1680559238479.481,"size":1673},{"id":"ed4e05697f1540b27e06efdd3c2acfd5c6c87c07a6c5fa08424da4eb27f2cdd234eb3e78421914acb5169a579e258e6539f4774dc9acba978e9f7673ebd13185","href":"https://static.observableusercontent.com/files/ed4e05697f1540b27e06efdd3c2acfd5c6c87c07a6c5fa08424da4eb27f2cdd234eb3e78421914acb5169a579e258e6539f4774dc9acba978e9f7673ebd13185","name":"jolts@4.csv","type":"text/csv","lastModified":1680617092988.279,"size":1717},{"id":"874838e5f02a7fc5f66e0f1d37cd1e00835813937d34da37e620515c746672a393fce07593de31c9afc71b22fcc9a922ee6fe7164c7b04afd11424fee57b8266","href":"https://static.observableusercontent.com/files/874838e5f02a7fc5f66e0f1d37cd1e00835813937d34da37e620515c746672a393fce07593de31c9afc71b22fcc9a922ee6fe7164c7b04afd11424fee57b8266","name":"jolts@11.csv","type":"text/csv","lastModified":1698851832839.837,"size":1737},{"id":"5beefad3a3ef2590658b6c2ebdb28ba418b29dd946a5a515e93908d9f125e048ad077f045e0d2349f07151a1b57512c38d79e41f5c9c2933803bd58dfb78bf60","href":"https://static.observableusercontent.com/files/5beefad3a3ef2590658b6c2ebdb28ba418b29dd946a5a515e93908d9f125e048ad077f045e0d2349f07151a1b57512c38d79e41f5c9c2933803bd58dfb78bf60","name":"jolts@10.csv","type":"text/csv","lastModified":1696343985812.071,"size":1740},{"id":"dac813fac606dfcd1ab950be1a181d2c34350ab492d518de75c7625b4720cc1080ae9cec2d4a6fcf84b11fb98d0789b213733c1170020f6152134eeaab31a7b4","href":"https://static.observableusercontent.com/files/dac813fac606dfcd1ab950be1a181d2c34350ab492d518de75c7625b4720cc1080ae9cec2d4a6fcf84b11fb98d0789b213733c1170020f6152134eeaab31a7b4","name":"jolts@7.csv","type":"text/csv","lastModified":1688754593178.579,"size":1623},{"id":"e222f1f5b83548554271169576028a508e515f11edfdb49cabd020eba277384eb1e922e886a461d9dda4a794fe9ff137e1c000ea88a697458be075b7695731a5","href":"https://static.observableusercontent.com/files/e222f1f5b83548554271169576028a508e515f11edfdb49cabd020eba277384eb1e922e886a461d9dda4a794fe9ff137e1c000ea88a697458be075b7695731a5","name":"jolts@8.csv","type":"text/csv","lastModified":1690909289125.087,"size":1661},{"id":"71b0a55c4d29ba0fc1f9c89835568c46c9b82f1fa03c53dad4d0f9169619975c51b80d83eae505efe6cefd1ab7bdf2f3b064837649f1b0d37f84822422db3bee","href":"https://static.observableusercontent.com/files/71b0a55c4d29ba0fc1f9c89835568c46c9b82f1fa03c53dad4d0f9169619975c51b80d83eae505efe6cefd1ab7bdf2f3b064837649f1b0d37f84822422db3bee","name":"jolts@9.csv","type":"text/csv","lastModified":1693326726140.501,"size":1655},{"id":"9c345399d212471e66ea44128441728fd4f102951e688218398142a9dc32d6766a46aebef036da0467dd5240eff9d09201d6e2c4fbb99b5570e7635d10f38b8d","href":"https://static.observableusercontent.com/files/9c345399d212471e66ea44128441728fd4f102951e688218398142a9dc32d6766a46aebef036da0467dd5240eff9d09201d6e2c4fbb99b5570e7635d10f38b8d","name":"sector_category_ref-1-1@1.csv","type":"text/csv","lastModified":1781629295634.766,"size":2019}] 2f:{"title":"Indeed Hiring Lab - Job Postings Tracker","cells":[{"id":0,"value":"# Indeed Hiring Lab - Job Postings Tracker\n\nU.S. Indeed Job Postings Index (Seasonally Adjusted). *Data as of: **${d3.timeFormat(\"%B %d, %Y\")(maxDate)}***\n\n*Source: [Indeed Hiring Lab](https://github.com/hiring-lab/job_postings_tracker/tree/master/US), [U.S. Bureau of Labor Statistics (JOLTS)](https://www.bls.gov/charts/job-openings-and-labor-turnover/unemp-per-job-opening.htm#)*","pinned":false,"hidden":false,"mode":"md"},{"id":2445,"value":"viewof lookback = Inputs.radio([\"Since 2020\", \"Past Year\"], {\n label: \"Time Period\",\n value: \"Since 2020\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":399,"value":"

\n## Indeed Job Postings Index vs. JOLTS\n\n*Index is set to 100 = Feb 1, 2020 for Indeed and Jan 31, 2020 for JOLTS. *","pinned":false,"hidden":false,"mode":"md"},{"id":390,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"

\n## Job Postings Trends by Sector\n\n*Job Postings by Sector vs. Total Postings*","pinned":false,"hidden":false,"mode":"md"},{"id":1343,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2253,"value":"

\n## Indeed Job Postings by Sector\n\n*Percent change in total job postings on Indeed compared to pre-pandemic levels (Data as of: **${d3.timeFormat(\"%B %d, %Y\")(maxDate)}**)*","pinned":false,"hidden":false,"mode":"md"},{"id":2250,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":2255,"value":"\n Source: Indeed Hiring Lab. Percent Change since Feb. 1, 2020.
\n Visual created by Bobby Reedy.\n","pinned":false,"hidden":false,"mode":"md"},{"id":1531,"value":"

\n## Job Postings Trends by Job Category\n\n*Job Postings by Job Category vs. Total Postings*","pinned":false,"hidden":false,"mode":"md"},{"id":1533,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":2126,"value":"

\n## Indeed Job Postings by Category / Sector\n\n*Percent change in total job postings on Indeed compared to pre-pandemic levels \n(Data as of: **${d3.timeFormat(\"%B %d, %Y\")(maxDate)}**)*","pinned":false,"hidden":false,"mode":"md"},{"id":2279,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":2076,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":2138,"value":"\n Source: Indeed Hiring Lab. Percent Change since Feb. 1, 2020.
\n Visual created by Bobby Reedy.\n","pinned":false,"hidden":false,"mode":"md"},{"id":354,"value":"

\n## Job Postings Trends by Metro\n\n*Job Postings by Metro vs. Total Postings*","pinned":false,"hidden":false,"mode":"md"},{"id":1437,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":367,"value":"

\n## Job Postings Trends by State\n\n*Job Postings by State vs. Total Postings*","pinned":false,"hidden":false,"mode":"md"},{"id":1364,"value":"viewof region = {\n const type = select({\n title: \"Region\",\n options: [\n { label: 'Select All', value: 'Select All' },\n { label: 'Midwest', value: 'Midwest' },\n { label: 'Northeast', value: 'Northeast' },\n { label: 'South', value: 'South' },\n { label: 'West', value: 'West' }\n ],\n value: \"Select All\",\n description: \"Select Region to chart.\"\n });\n type.input.style.fontSize = \"0.8em\";\n return type;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":1722,"value":"

\n## Indeed Job Postings Index by State\n\n*Percent change in total job postings on Indeed compared to pre-pandemic levels (Data as of: **${d3.timeFormat(\"%B %d, %Y\")(maxDate)}**)*","pinned":false,"hidden":false,"mode":"md"},{"id":1654,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":1936,"value":"\n Source: Indeed Hiring Lab. Percent Change since Feb. 2020.
\n Map created by Bobby Reedy.\n","pinned":false,"hidden":false,"mode":"md"},{"id":2357,"value":"

\n## Indeed Job Postings by State\n\n*Percent change in total job postings on Indeed compared to pre-pandemic levels (Data as of: **${d3.timeFormat(\"%B %d, %Y\")(maxDate)}**)*","pinned":false,"hidden":false,"mode":"md"},{"id":2354,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":2364,"value":"\n Source: Indeed Hiring Lab. Percent Change since Feb. 2020.
\n Visual created by Bobby Reedy.\n","pinned":false,"hidden":false,"mode":"md"},{"id":1054,"value":"

\n## Job Postings Trends by County\n\n*Total Job Postings by Country over Time*","pinned":false,"hidden":false,"mode":"md"},{"id":1051,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs"},{"id":971,"value":"

\n## Occupational Sector Job Titles \n\n*Job Titles for each respective Occupational Sector*","pinned":false,"hidden":false,"mode":"md"},{"id":960,"value":"printTable(job_titles)","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"

\n## Code and Data","pinned":false,"hidden":false,"mode":"md"},{"id":18,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs"},{"id":1859,"value":"sector_data = (\n await d3.csv(\"https://raw.githubusercontent.com/hiring-lab/job_postings_tracker/master/US/job_postings_by_sector_US.csv\")\n).map(row => {\n const cleanName = row.display_name.replace(\",\", \"\");\n const match = sector_category.find(x => x.Sector === cleanName);\n return match ? { ...row, ...match } : row;\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":1847,"value":"state_data = (\n await d3.csv(\"https://raw.githubusercontent.com/hiring-lab/job_postings_tracker/master/US/state_job_postings_us.csv\")\n).map(d => {\n // uppercase state\n const stateUpper = d.state.toUpperCase();\n\n // find matching region info\n const match = census_regions.find(x => x.state === stateUpper);\n\n return match\n ? { ...d, state: stateUpper, ...match }\n : { ...d, state: stateUpper };\n});\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1851,"value":"metro_data = (\n await d3.csv(\"https://raw.githubusercontent.com/hiring-lab/job_postings_tracker/master/US/metro_job_postings_us.csv\")\n).map(row => {\n const match = cbsa_state.find(x => x.CBSA === row.cbsa_code);\n return match ? { ...row, ...match } : row;\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":962,"value":"job_titles = d3.csv(\"https://raw.githubusercontent.com/hiring-lab/job_postings_tracker/master/sector-job-title-examples.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1060,"value":"data_CA = d3.csv(\"https://raw.githubusercontent.com/hiring-lab/job_postings_tracker/master/CA/aggregate_job_postings_CA.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1064,"value":"data_DE = d3.csv(\"https://raw.githubusercontent.com/hiring-lab/job_postings_tracker/master/DE/aggregate_job_postings_DE.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1070,"value":"data_GB = d3.csv(\"https://raw.githubusercontent.com/hiring-lab/job_postings_tracker/master/GB/aggregate_job_postings_GB.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1073,"value":"data_IE = d3.csv(\"https://raw.githubusercontent.com/hiring-lab/job_postings_tracker/master/IE/aggregate_job_postings_IE.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1076,"value":"data_AU = d3.csv(\"https://raw.githubusercontent.com/hiring-lab/job_postings_tracker/master/AU/aggregate_job_postings_AU.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1286,"value":"cbsa_state = d3.csv(\"https://gist.githubusercontent.com/aodin/5583cd21d7e07f6c7c9dbd4bd0b26e64/raw/54dd81dd5361b66d6f9676d8b7c44d395dc8a0cd/us_metro_with_state_fips.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1290,"value":"census_regions = d3.csv(\"https://raw.githubusercontent.com/cphalpert/census-regions/refs/heads/master/us%20census%20bureau%20regions%20and%20divisions.csv\").then(data =>\n data.map(d => ({\n ...d,\n state: d[\"State Code\"]\n }))\n);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1328,"value":"sector_category = FileAttachment(\"sector_category_ref-1-1@1.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1738,"value":"maxDate = d3.max(data, d => new Date(d.date));","pinned":false,"hidden":false,"mode":"ojs"},{"id":1765,"value":"sector_data_latest = sector_data.filter(\n d =>\n new Date(d.date).getTime() === maxDate.getTime() &&\n d.variable === \"total postings\"\n);","pinned":false,"hidden":false,"mode":"ojs"},{"id":2268,"value":"category_data_latest = Array.from(\n d3.rollup(\n sector_data_latest,\n v => Math.round(d3.mean(v, d => d.indeed_job_postings_index)),\n d => d.Category\n ),\n ([Category, indeed_job_postings_index]) => ({ Category, indeed_job_postings_index })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1709,"value":"state_data_latest = state_data.filter(d => new Date(d.date).getTime() === maxDate.getTime());","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"jolts_data = d3.csv(\"https://raw.githubusercontent.com/robertmreedy/FRED_JOLTS_JOB_OPENINGS/refs/heads/main/data/jtsjol_processed.csv\") ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1890,"value":"stateAbbrevMap = ({\n \"Alabama\": \"AL\", \"Alaska\": \"AK\", \"Arizona\": \"AZ\", \"Arkansas\": \"AR\",\n \"California\": \"CA\", \"Colorado\": \"CO\", \"Connecticut\": \"CT\", \"Delaware\": \"DE\",\n \"Florida\": \"FL\", \"Georgia\": \"GA\", \"Hawaii\": \"HI\", \"Idaho\": \"ID\",\n \"Illinois\": \"IL\", \"Indiana\": \"IN\", \"Iowa\": \"IA\", \"Kansas\": \"KS\",\n \"Kentucky\": \"KY\", \"Louisiana\": \"LA\", \"Maine\": \"ME\", \"Maryland\": \"MD\",\n \"Massachusetts\": \"MA\", \"Michigan\": \"MI\", \"Minnesota\": \"MN\", \"Mississippi\": \"MS\",\n \"Missouri\": \"MO\", \"Montana\": \"MT\", \"Nebraska\": \"NE\", \"Nevada\": \"NV\",\n \"New Hampshire\": \"NH\", \"New Jersey\": \"NJ\", \"New Mexico\": \"NM\", \"New York\": \"NY\",\n \"North Carolina\": \"NC\", \"North Dakota\": \"ND\", \"Ohio\": \"OH\", \"Oklahoma\": \"OK\",\n \"Oregon\": \"OR\", \"Pennsylvania\": \"PA\", \"Rhode Island\": \"RI\", \"South Carolina\": \"SC\",\n \"South Dakota\": \"SD\", \"Tennessee\": \"TN\", \"Texas\": \"TX\", \"Utah\": \"UT\",\n \"Vermont\": \"VT\", \"Virginia\": \"VA\", \"Washington\": \"WA\", \"West Virginia\": \"WV\",\n \"Wisconsin\": \"WI\", \"Wyoming\": \"WY\", \"District of Columbia\": \"DC\"\n})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2032,"value":"northeastStates = new Set([\n \"Connecticut\",\n \"Rhode Island\",\n \"Delaware\",\n \"District of Columbia\"\n]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1656,"value":"valuemap = new Map(state_data.map(d => [d.State, d.indeed_job_postings_index]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1659,"value":"us = FileAttachment(\"counties-albers-10m.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":957,"value":"import {printTable} from '@uwdata/data-utilities'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1340,"value":"import {select, radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"import {vl} from '@vega/vega-lite-api-v5'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W40","stdlib":"1","titling":"auto"}