31:T4e5,first_paragraph = md`**${ count['negative'] }** states saw a **decrease** in unemployment, while **${count['positive']}** saw an **increase** (${sparkseesaw(count_array, { height: 12, width: 75 })}). ${ largest_movers[0]['state'] } had the largest decrease in unemployment, falling ***${format_percent( largest_movers[0]['percent_change'] / 100 )}*** to ***${format_percent( largest_movers[0]['unemp_rate'] / 100 )}*** (${bar(unempValues(largest_movers[0]), { width: 70, height: 25, highlights: { end: ibm[0].hex } })}), while ${ smallest_movers[0]['state'] } had the largest increase, growing ***${format_percent( smallest_movers[0]['percent_change'] / 100 )}*** to ***${format_percent( smallest_movers[0]['unemp_rate'] / 100 )}*** (${bar(unempValues(smallest_movers[0]), { width: 70, height: 25, highlights: { end: ibm[2].hex } })}). `32:T737,embed_tables = md`

Five Largest Decreases

Five Largest Increases

${viewof tables} ${ largest_movers ? html`

${unempTablebeta( largest_movers.sort((a, b) => a.percent_change - b.percent_change), { color: ibm[0].hex } )}

` : "" } ${ smallest_movers ? html`

${unempTablebeta( smallest_movers.sort((a, b) => b.percent_change - a.percent_change), { color: ibm[2].hex } )}

` : "" }

`33:T51f,function unempTablebeta(data, options = {}) { let { color, preset } = { color: "DarkSlateGray", preset: null, ...options }; if (window.innerWidth < 400) { preset = "mobile"; } let output = table( data.map( ({ state, unemp_rate, unemp_rate_t_minus_1, unemp_rate_t_minus_2, unemp_rate_t_minus_3, unemp_rate_t_minus_4, net_change, percent_change }) => ({ State: md`${state}`, [data_month[0]]: md`${format_percent(unemp_rate_t_minus_1 / 100)}`, [data_month[1]]: md`**${format_percent( unemp_rate / 100 )}**`, "Net \u0394": md`${d3.format(".1f")(net_change)}`, "% \u0394": md`${format_percent(percent_change / 100)}`, Trend: bar( [ unemp_rate_t_minus_4, unemp_rate_t_minus_3, unemp_rate_t_minus_2, unemp_rate_t_minus_1, unemp_rate ], { preset: preset, width: 75, height: 40, highlights: { end: color } } ) }) ), { width: "100%", align: ["left", "center", "center", "center", "center", "center"] } ); return output; }34:[{"id":"76c80a612601474c0dc6fb8919df19fc9aca780e8d557beb33e739985fec9324a5b86e392a5ebad6219e3d9cbfad81116ae0ba52e2217bd5cdca68aac078d246","href":"https://static.observableusercontent.com/files/76c80a612601474c0dc6fb8919df19fc9aca780e8d557beb33e739985fec9324a5b86e392a5ebad6219e3d9cbfad81116ae0ba52e2217bd5cdca68aac078d246","name":"Month-over-Month Change in Unemployment Rate, by State (3).json","type":"application/json","lastModified":1603377866007.118,"size":17780},{"id":"6587e38c47371ed7d80cee5ac9fc41128a5227c8c6d7b8bbcdfea8f61ed31374a2d792868640777c6a4a26d19038f139ebc43751954d2a93d73d7794cb051568","href":"https://static.observableusercontent.com/files/6587e38c47371ed7d80cee5ac9fc41128a5227c8c6d7b8bbcdfea8f61ed31374a2d792868640777c6a4a26d19038f139ebc43751954d2a93d73d7794cb051568","name":"Demographic - States - Top & Bottom Unemployment@3.json","type":"application/json","lastModified":1606287712451.991,"size":86176},{"id":"7f7b3fa75cc5c6fde0f0be2c957c7f4b1c0dae494d8e287d16ceb0148ba69de5c9bb3eaaf6e11b0b6b093196bc4cf7d98f0fb8d382b34842c991ff576cfb093e","href":"https://static.observableusercontent.com/files/7f7b3fa75cc5c6fde0f0be2c957c7f4b1c0dae494d8e287d16ceb0148ba69de5c9bb3eaaf6e11b0b6b093196bc4cf7d98f0fb8d382b34842c991ff576cfb093e","name":"Demographic - States - Top & Bottom Unemployment@4.json","type":"application/json","lastModified":1606408692111.859,"size":86407},{"id":"c380922b2ad5e25b1a9ff19c6abcf9731a05f2c17e8cdb23438f478f0bfea9123b41048c89617f3bec113424ae937d689b4232a1a44ecc86491eed9bdde42bbe","href":"https://static.observableusercontent.com/files/c380922b2ad5e25b1a9ff19c6abcf9731a05f2c17e8cdb23438f478f0bfea9123b41048c89617f3bec113424ae937d689b4232a1a44ecc86491eed9bdde42bbe","name":"Month-over-Month Change in Unemployment Rate, by State@1.json","type":"application/json","lastModified":1606408713624.979,"size":17769},{"id":"750670a1dba9c6f30ff7111901784a492bb1aa7edc3e91b983b94958311bf2c3d353c27251e27c030bb44a793798959c4904c71c5f82b034e219b2338be4d407","href":"https://static.observableusercontent.com/files/750670a1dba9c6f30ff7111901784a492bb1aa7edc3e91b983b94958311bf2c3d353c27251e27c030bb44a793798959c4904c71c5f82b034e219b2338be4d407","name":"Demographic - States - Top & Bottom Unemployment@5.json","type":"application/json","lastModified":1610074573072.454,"size":131483},{"id":"8b79954f2accc207e9c908522b3c07ebbfd3bac68dea4ccb23f124eaf9d704dfcf9b7c366f404167df8f085ca9c1649ecdfeb56e1442dec23542375f9b1734cc","href":"https://static.observableusercontent.com/files/8b79954f2accc207e9c908522b3c07ebbfd3bac68dea4ccb23f124eaf9d704dfcf9b7c366f404167df8f085ca9c1649ecdfeb56e1442dec23542375f9b1734cc","name":"Month-over-Month Change in Unemployment Rate, by State@2.json","type":"application/json","lastModified":1610074559793.821,"size":17651},{"id":"97c0cef9bb7ebfa48570d4ecb8a330479fcabc03d1975fe58706d5f0148585bb4e979cc6e3a4f0d13414229b5dac02ad5698a8f46ebb4476e32411844fc5e1d3","href":"https://static.observableusercontent.com/files/97c0cef9bb7ebfa48570d4ecb8a330479fcabc03d1975fe58706d5f0148585bb4e979cc6e3a4f0d13414229b5dac02ad5698a8f46ebb4476e32411844fc5e1d3","name":"Demographic - States - Top & Bottom Unemployment@6.json","type":"application/json","lastModified":1613791400760.877,"size":132443},{"id":"953cff43115d2374444c683fc3f7e1794fe5f713492909cd94c4818d10e82d9869542019730ac2b746d66a5bcc94a1e5829957f1cbdcd79a679355cb432eeee8","href":"https://static.observableusercontent.com/files/953cff43115d2374444c683fc3f7e1794fe5f713492909cd94c4818d10e82d9869542019730ac2b746d66a5bcc94a1e5829957f1cbdcd79a679355cb432eeee8","name":"Month-over-Month Change in Unemployment Rate, by State@3.json","type":"application/json","lastModified":1613791408940.272,"size":17766}] 2f:{"title":"Demographic Update - Unemployment","cells":[{"id":0,"value":"title = md`\n\n# Demographic Update - Unemployment\n\n#### ${data_month[1]} | Source(s): Bureau of Labor Statistics\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":573,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1376,"value":"second_paragraph = md`${\n highest_unemp['state']\n} has the highest unemployment rate at ***${\n highest_unemp['unemp_rate']\n}%*** (${bar(unempValues(highest_unemp), {\n width: 70,\n height: 25,\n highlights: { end: ibm[2].hex }\n})}), while ${\n lowest_unemp['state']\n} has the lowest with an unemployment rate of ***${lowest_unemp['unemp_rate']}%*** (${bar(\n unempValues(lowest_unemp),\n { width: 70, height: 25, highlights: { end: ibm[0].hex } }\n)}). `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1284,"value":"linechart = vl\n .markLine()\n //.data(top_two_states)\n .data(top_two_states.filter(d => d.laus_date > new Date(2000, 0, 1)))\n //.select(\n // vl.selectInterval().bind('scales')\n //.encodings('x') // bind interval selection to scale domains\n //)\n .encode(\n vl.x().fieldT(\"laus_date\"), // date parsing!\n vl.y().fieldQ(\"Unemp Rate\"), //.axis({ format: \"%\" }),\n // vl.tooltip(['name_state', 'laus_date', 'Unemp Rate']),\n vl\n .color()\n .fieldN(\"name_state\")\n .scale({ range: [ibm[2].hex, ibm[0].hex] }) // .sort(vl.max(\"market cap\").order(\"descending\"))\n )\n .config({\n view: { stroke: \"transparent\" },\n // axisY: { title: \"test\" },\n axisX: { title: null },\n header: { title: null },\n legend: { title: null, direction: \"horizontal\", orient: \"top\" }\n })\n .width(\"container\")\n .height(200)\n .render()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1457,"value":"md`\n\n## To-Do\n\n- Handle ties in text\n- Update color encoding for line graph to handle ties\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":591,"value":"viewof tables = {\n let { height } = {\n height: 260\n };\n if (window.innerWidth < 400) {\n height = 145;\n }\n const svg = d3.select(DOM.svg(width, height));\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"md`## Setup`","pinned":false,"hidden":false,"mode":"ojs"},{"id":909,"value":"data_month = {\n const current_month = state_data.reduce(function (a, b) { return a.date > b.date ? a.date : b.date; })\n const prior_month = new Date(current_month)\n prior_month.setMonth(prior_month.getMonth() - 1)\n return([prior_month.toLocaleDateString('en-gb',{year: 'numeric',month: 'short',timeZone: 'utc'}),\n current_month.toLocaleDateString('en-gb',{year: 'numeric',month: 'short',timeZone: 'utc'})\n ])\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"today = new Date().toJSON().slice(0,10).replace(/-/g,'/')","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"highest_unemp = state_data.filter(obj => {\n return obj.unemp_rate === Math.max(...state_data.map(o => o.unemp_rate))\n})[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"lowest_unemp = state_data.filter(obj => {\n return obj.unemp_rate === Math.min(...state_data.map(o => o.unemp_rate))\n})[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"count = state_data.reduce(function(a, b){\n if (b.net_change < 0) {\n a.negative = ++a.negative || 1;\n } \n if (b.net_change === 0) {\n a.zero = ++a.zero || 1;\n } \n if (b.net_change > 0) {\n a.positive = ++a.positive || 1;\n }\n return a;\n}, {})","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"count_array = {\n var array = []\n array.push({\"Decrease\" : count['negative'], \"Increase\" : count['positive']})\n return(array)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"md`### File Attachments`","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"state_data_raw = FileAttachment(\"Month-over-Month Change in Unemployment Rate, by State@3.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1273,"value":"top_two_states_raw = FileAttachment(\n \"Demographic - States - Top & Bottom Unemployment@6.json\"\n).json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1277,"value":"top_two_states = {\n var data = [];\n top_two_states_raw.forEach(function(item, index, array) {\n data.push({\n fips_state: top_two_states_raw[index][\"fips_state\"],\n name_state: top_two_states_raw[index][\"name_state\"],\n laus_date: parseTime(top_two_states_raw[index][\"laus_date\"]),\n \"Unemp Rate\": parseInt(top_two_states_raw[index][\"laus_value\"])\n });\n });\n\n // data = data.filter(d => !isNaN(d.laus_value));\n\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"state_data = {\n var data = []\n state_data_raw.forEach(function(item, index, array) {\n data.push({\n \"state\" : state_data_raw[index][\"state\"],\n \"date\" : parseTime(state_data_raw[index][\"date\"]),\n \"unemp_rate\" : parseFloat(state_data_raw[index][\"unemp_rate\"]),\n \"unemp_rate_t_minus_1\" : parseFloat(state_data_raw[index][\"unemp_rate_t_minus_1\"]),\n \"unemp_rate_t_minus_2\" : parseFloat(state_data_raw[index][\"unemp_rate_t_minus_2\"]),\n \"unemp_rate_t_minus_3\" : parseFloat(state_data_raw[index][\"unemp_rate_t_minus_3\"]),\n \"unemp_rate_t_minus_4\" : parseFloat(state_data_raw[index][\"unemp_rate_t_minus_4\"]),\n \"net_change\" : parseFloat(state_data_raw[index][\"net_change\"]),\n \"percent_change\" : parseFloat(state_data_raw[index][\"percent_change\"]),\n \"percent_change_rank\" : parseInt(state_data_raw[index][\"percent_change_rank\"]),\n \"net_change_rank\" : parseInt(state_data_raw[index][\"net_change_rank\"])\n })\n })\n \n data = data.filter((d) => !isNaN(d.unemp_rate))\n \nreturn data}","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"largest_movers = state_data.filter(state_data => state_data.percent_change_rank <= 5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":490,"value":"smallest_movers = state_data.filter(state_data => state_data.percent_change_rank >= 46)","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"md`### Functions & Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1218,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":519,"value":"format_percent = d3.format(Object.assign(d3.formatSpecifier(\"%\"), {align: \">\", precision: d3.precisionFixed(0.1)}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"function unempValues(x) {\n const unemp = []\n unemp.push(x['unemp_rate_t_minus_4'])\n unemp.push(x['unemp_rate_t_minus_3'])\n unemp.push(x['unemp_rate_t_minus_2'])\n unemp.push(x['unemp_rate_t_minus_1'])\n unemp.push(x['unemp_rate'])\n return unemp\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"parseTime = d3.utcParse(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1002,"value":"import { bar, line, sparkseesaw, table } from \"@hamzaamjad/tiny-charts\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1019,"value":"import {colors, colorboxSmall} from \"@hamzaamjad/color-palettes\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1021,"value":"ibm = colors.color_blind_safe.ibm","pinned":false,"hidden":false,"mode":"ojs"},{"id":1027,"value":"md`\n\n${colorboxSmall(ibm[0].name, ibm[0].hex)} ${colorboxSmall(ibm[2].name, ibm[2].hex)}\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1286,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1116,"value":"style = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}