31:T9e7,tables = md`

Top 20 in Job Growth

${table( d3 .groups(data_top, d => d.Metro) .filter(([, data_top]) => data_top.some(d => d.Employment)) .map(([key, data_top]) => ({ Metro: key, Trend: area(data_top.map(d => Math.max(0, d.Employment)).reverse(), { width: 100, height: 15, color: { line: "green", fill: "#d0f0c0" }, highlights: { max: "blue", end: "black" }, margin: { vertical: 0.1, horizontal: 0.01 }, scaling: "min" }), "%\u0394": data_top[0].Emp_Change, "Max Employment": d3.max(data_top, d => d.Employment), "College Degrees\u00B9": data_top[0].College_degrees_per_100_people/100, "Skilled Labor\u00B2": data_top[0].Skilled_labor_per_100_jobs/100 })), { width: "800px", layout: "fixed", widths: ["150px", "50px", null, null, null, null, null], formats: [null, null, ".0%", ".3s", ".0%", ".0%"], align: ["left", "right", "right", "right", "right", "right", "right"], color: [null, null, null, "blue", null, null, null] } )}

Bottom 20 in Job Growth

${table( d3 .groups(data_bot, d => d.Metro) .filter(([, data_bot]) => data_bot.some(d => d.Employment)) .map(([key, data_bot]) => ({ Metro: key, Trend: area(data_bot.map(d => Math.max(0, d.Employment)), { width: 100, height: 15, color: { line: "red", fill: "mistyrose" }, highlights: { min: "blue", end: "black" }, margin: { vertical: 0.1, horizontal: 0.01 }, scaling: "min" }), "%\u0394": data_bot[0].Emp_Change, "Min Employment": d3.min(data_bot, d => d.Employment), "College Degrees\u00B9": data_bot[0].College_degrees_per_100_people/100, "Skilled Labor\u00B2": data_bot[0].Skilled_labor_per_100_jobs/100 })), { width: "800px", layout: "fixed", widths: ["150px", "50px", null, null, null, null, null], formats: [null, null, ".0%", ".3s", ".0%", ".0%"], align: ["left", "right", "right", "right", "right", "right", "right"], color: [null, null, null, "blue", null, null, null] } )} `32:[] 2f:{"title":"Trending Job Markets","cells":[{"id":0,"value":"title = md`\n\n# Trending Job Markets\n\n#### Sources: [Bureau of Labor Statistics](https://www.bls.gov/), [US Census Bureau](https://www.census.gov/en.html)\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":644,"value":"md`\n## National View\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"viewof metro_size = Radio([\"Large metro (pop. >1M)\", \"Mid-sized metro (pop. >500K)\", \"Small metro (pop. <500K)\"], {value: \"Large metro (pop. >1M)\", label: \"Metro size:\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":433,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":710,"value":"md`\n\\u00B9 **College Degrees** defined as the percentage of residents in a metropolitan area who have obtained a bachelor's degree (as of 2018)\\n\n\\u00B2 **Skilled Labor** defined as the percentage of jobs in a metropolitan area that require a specialized skill set in order to complete some of the assigned tasks. See [additional documentation](https://github.com/jcferrara/metro-job-data/blob/main/skilled_unskilled_classifications.xlsx) on how BLS occupation titles were classified as skilled or unskilled jobs.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"md`\n#### Additional notes\nWhy metro and not tract/county/state? \\n\nAdditional documentation available on github...\n\n#### To-Do:\nEdit display to fit mobile device\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"md`\n

\n#### Data Prep\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"data_top = raw_jobs_data_top.filter(raw_jobs_data_top => raw_jobs_data_top.Size == metro_size)","pinned":false,"hidden":false,"mode":"ojs"},{"id":587,"value":"data_bot = raw_jobs_data_bot.filter(raw_jobs_data_bot => raw_jobs_data_bot.Size == metro_size)","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"md`\n

\n#### Data Collection\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"raw_jobs_data_top = d3.json(\"https://raw.githubusercontent.com/jcferrara/metro-job-data/main/Trending%20job%20market%20data%20-%20top.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":584,"value":"raw_jobs_data_bot = d3.json(\"https://raw.githubusercontent.com/jcferrara/metro-job-data/main/Trending%20job%20market%20data%20-%20bottom.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"md`\n

\n#### Imported Packages\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"import {Radio} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"import {table, area} from \"@hamzaamjad/tiny-charts\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"format_percent = d3.format(Object.assign(d3.formatSpecifier(\"%\"), {align: \">\", precision: d3.precisionFixed(0.1)}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"function format_num (labelValue) {\n\n // Nine Zeroes for Billions\n return Math.abs(Number(labelValue)) >= 1.0e+9\n\n ? Math.round(Math.abs(Number(labelValue)) / 1.0e+9, 1) + \"B\"\n // Six Zeroes for Millions \n : Math.abs(Number(labelValue)) >= 1.0e+6\n\n ? Math.round(Math.abs(Number(labelValue)) / 1.0e+6, 2) + \"M\"\n // Three Zeroes for Thousands\n : Math.abs(Number(labelValue)) >= 1.0e+3\n\n ? Math.abs(Number(labelValue)) / 1.0e+3 + \"K\"\n\n : Math.abs(Number(labelValue));\n\n}\n\n//alert(test(6800000)); // this outputs 6.8M","pinned":false,"hidden":false,"mode":"ojs"},{"id":326,"value":"style = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}