2b:null 2c:["$","title",null,{"children":"West North Central States have the lowest unemployment rates averaged from 2001 to 2022 | Fengrui Gan (Simon) | Observable"}] 31:T5a4,// This code is an adaptation from "@mbostock/u-s-state-map" viewof state = { let value = null; const svg = d3.create("svg").attr("viewBox", [0, 0, 975, 610]); stateCodes.forEach((code) => { svg .append("g") .attr("fill", stateColors[code]) .selectAll("path") .data( topojson .feature(us, us.objects.states) .features.filter((el) => el.id === code) ) .enter() .append("path") .attr("d", path) .on("click", (event, d) => { const node = svg.node(); node.value = value = value === d.id ? null : d.id; node.dispatchEvent(new Event("input", { bubbles: true })); outline.attr("d", value ? path(d) : null); }); }); svg .append("path") .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-linejoin", "round") .attr("pointer-events", "none") .attr("d", path); svg .append("path") .datum(topojson.mesh(us, us.objects.nation)) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-linejoin", "round") .attr("pointer-events", "none") .attr("d", path); const outline = svg .append("path") .attr("fill", "#f52c2c") .attr("stroke", "black") .attr("stroke-linejoin", "round") .attr("pointer-events", "none"); return Object.assign(svg.node(), {value: null}); }32:T10fa,## What ### Data There are 3 datasets in total, _unemployment rates of each sector_, [_sticky price CPI_](https://fred.stlouisfed.org/series/CORESTICKM159SFRBATL), and [_unemployment rates of each state_](https://fred.stlouisfed.org/series/CAUR). The _unemployment rates of each sector_ is a combination of unemployment rate data series from [FRED](https://fred.stlouisfed.org/searchresults/?st=unemployment%20rate&t=workers%3Bwages&ob=sr&od=desc). All of the datasets contain date from 12/1/2020 to 12/1/2022. ### Dataset Type All 3 datasets are **temporal**, and the _unemployment rates of each state_ is also a **geo** dataset. ### Attributes - **Date** (_Ordinal_): The date of the recorded data. - **Unemployment Rate** (_Quantitative_ _Sequential_): The percentage of unemployment. - **Sector** (_Categorical_): The industry or business sector. - **CPI** (_Quantitative_ _Sequential_): The Sticky Price Consumer Price Index Less Food and Energy - **State** (_Categorical_): The US State from where the data is recorded. **Derived Attributes** - **averageUROfState** (_Quantitative_ _Sequential_): The average unemployment rate of the state over the time period. ### Data availability The data is static ## Example insights 1. Whole Sale and Retail industry was impacted the most (had the highest unemployment rate) during the 2020 covid pandemic recession. - I would need the _date (ordinal)_, _unemployment rate (quantitative)_, and _sector (categorical)_. 2. Coastal states have higher average unemployment rates than central states from 12/1/2020 to 12/1/2022. - I would need to calculate the _averageUROfState (quantitative)_ and the _state (categorical)_. To visualize the two insights above, I would need to display the unemployment rate values for each sector over time, and I will also need to display a map showing the unemployment rates of each state. I would try to pursue both, since the 2 will cover the 5 attributes. ## Why The tasks will be: - T1: Compare the unemployment rates (_unemployment rate_) of different sectors (_sector_) around the start of 2020 (_date_) (Compare / Distribution) - T2: Identify the sector (_sector_) that has the highest unemployment rate (_unemployment rate_) around the start of 2020 (_date_) (Identify / Extremes) - T3: Summarize the unemployment rate (_unemployment rate_) of each state (_state_) (Summarize / Distribution) ## How Marks: - Line - I choose to use line plot for the unemployment rates for sectors since the dataset is temporal. - Area - I choose Area plot for the average unemployment rates for states since the dataset contains geo information and area map can help users extract the geo info more directly. Channels: For unemployment rates for each sector |Attributes|Type & Direction|Channel|Rationale| |---|---|---|---| |date|Ordinal|Horizontal position, express|Since it is also a continuous value and the task is to find trends, so a express position should be used| |unemploymentRateForSector|Quantitative, Sequential|Line|Since it is also a continuous value and the task is to find trends, so a express position should be used| |sector|Categorical|Hue|Because the dataset is temporal and the task is to compare the unemployment rates between sectors, it makes more sense to plot them in the same plot and differentiate using color hue| For the CPI plot |Attributes|Type & Direction|Channel|Rationale| |---|---|---|---| |date|ordinal|Horizontal position, express|Since it is also a continuous value and the task is to find trends, so a express position should be used| |percentIncrease|Quantitative, Sequential|line|Since it is also a continuous value and the task is to find trends, so a express position should be used| For the unemployment rates for each state |Attributes|Type & Direction|Channel|Rationale| |---|---|---|---| |state|categorical, geo|Area|Using area to distinguish the categorical state will also allow users to easily extract the geo information of the attribute| |averageURateOfState|Ordinal|Saturation|Because I binned the unemployment rate of each state into an ordinal scale, so it makes sense to use Saturation to denote the order| ## Target Audience This visualization is for anyone who is interested in knowing how the unemployment rates look like in recent years and want to learn about the economic situations.33:T40a,industryPlot = { const highlight = vl .selectPoint() .on("mouseover") .nearest(true) .fields("sector") .init({ sector: [] }); const urLine = vl.markPoint({ opacity: 0 }).encode( vl .x() .fieldT("date") .scale({ domain: dateDomain }) .scale({ type: "utc" }) .axis({ title: false }), vl .y() .fieldQ("unemploymentRate") .axis({ title: "Unemployment Rate (%)", titleFontSize: 15 }), vl.tooltip([ vl.fieldT("date"), vl.fieldQ("unemploymentRate"), vl.fieldN("sector") ]) ); return vl .data(reformatedURBySector) .title({ text: "Unemployment rates of each sector", fontSize: 20 }) .width(plotWidth) .height(500) .layer( urLine.select(highlight), urLine .markLine() .encode( vl.size().if(vl.not(highlight), vl.value(1)).value(3), vl.opacity().if(vl.not(highlight), vl.value(0.75)).value(1), vl.color().fieldN("sector") ) ); }34:[{"id":"3414a3607bc41d0d0054e447c6e4180b985aaf2752498dbe345b34a13845a6a47f847306b64af0123d5987afd0b2c6a83878c1f3d087ad7cfcf145f8c94cf83f","href":"https://static.observableusercontent.com/files/3414a3607bc41d0d0054e447c6e4180b985aaf2752498dbe345b34a13845a6a47f847306b64af0123d5987afd0b2c6a83878c1f3d087ad7cfcf145f8c94cf83f","name":"UR_By_States@1.csv","type":"text/csv","lastModified":1676947914954.445,"size":54748},{"id":"5a56e57654368b5bf885a035d3c3cc65da577e142872c411818332c7f279c9d82d85824bdfbe8e5e0d814515ad5ff9b0bd82755854f614cec6354db4f9b2c6d8","href":"https://static.observableusercontent.com/files/5a56e57654368b5bf885a035d3c3cc65da577e142872c411818332c7f279c9d82d85824bdfbe8e5e0d814515ad5ff9b0bd82755854f614cec6354db4f9b2c6d8","name":"Sticky_Price_CPI@2.csv","type":"text/csv","lastModified":1677055125447.366,"size":5483},{"id":"a7ca1b5ea10463628bc7cea4db801b926e187771c8740cd5b249a6feb138da9520c422c7e75db82e41080d0bb14a60c6fb7dadb5b2a3b74def38cf9c8b891e8a","href":"https://static.observableusercontent.com/files/a7ca1b5ea10463628bc7cea4db801b926e187771c8740cd5b249a6feb138da9520c422c7e75db82e41080d0bb14a60c6fb7dadb5b2a3b74def38cf9c8b891e8a","name":"UR_By_Industries@2.csv","type":"text/csv","lastModified":1677055146518.456,"size":14833},{"id":"a1dcba8983989c32b6dbdf135c2c04f2ca735bad5812e3740f267d37f0b9eb6848eb037bafda014a9d6b13459bcac4a5184e47abbaf8bc2c8b9aad62220edeac","href":"https://static.observableusercontent.com/files/a1dcba8983989c32b6dbdf135c2c04f2ca735bad5812e3740f267d37f0b9eb6848eb037bafda014a9d6b13459bcac4a5184e47abbaf8bc2c8b9aad62220edeac","name":"UR_By_Sectors.csv","type":"text/csv","lastModified":1677056740637.175,"size":18389},{"id":"13eff32b0e3813e66cd1a86feafc052f754794857f833dafe8102e441b587d3d87d3fe5dadddc3e87ae8259c74d78194def084e95ce922ad490a1b3305d5c93e","href":"https://static.observableusercontent.com/files/13eff32b0e3813e66cd1a86feafc052f754794857f833dafe8102e441b587d3d87d3fe5dadddc3e87ae8259c74d78194def084e95ce922ad490a1b3305d5c93e","name":"UR_By_Sectors@1.csv","type":"text/csv","lastModified":1677058068967.99,"size":18047},{"id":"caac044afac2e3647417c0293b8105b1c9e9e7bb534c8bfff3ef207d79606ccf4f72998bccc972e9d2ed4f9cae3ea108433289002b63e13dcd8f072e78681a3f","href":"https://static.observableusercontent.com/files/caac044afac2e3647417c0293b8105b1c9e9e7bb534c8bfff3ef207d79606ccf4f72998bccc972e9d2ed4f9cae3ea108433289002b63e13dcd8f072e78681a3f","name":"Sticky_Price_CPI@3.csv","type":"text/csv","lastModified":1677093147401.608,"size":5495}] 2f:{"id":"c03fea982e9bfd4f","slug":null,"title":"West North Central States have the lowest unemployment rates averaged from 2001 to 2022","thumbnail":"6bfa9ed8c8e79382ed13d9c5f78054a718ba7c14b2ee67024ccafee7b9495f94","access_level":"public","create_time":"$D2023-02-21T02:34:47.201Z","update_time":"$D2023-02-23T23:20:48.490Z","view_time":null,"first_public_time":"$D2023-02-21T02:34:47.201Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"a48bdab08888437c","login":"fengruigan","name":"Fengrui Gan (Simon)","avatar_url":"https://avatars-next.observableusercontent.com/73027a1b3f09dc8313d125b3d1f54464475e75f162e6d1db0259249352073c1d","tier":"starter_2024"},"version":894,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6d58559bc5b22c08","login":"fengruigan","name":"Fengrui Gan (Simon)","avatar_url":"https://avatars-next.observableusercontent.com/73027a1b3f09dc8313d125b3d1f54464475e75f162e6d1db0259249352073c1d","tier":null}],"members":[{"type":"individual","id":"6d58559bc5b22c08","login":"fengruigan","name":"Fengrui Gan (Simon)","avatar_url":"https://avatars-next.observableusercontent.com/73027a1b3f09dc8313d125b3d1f54464475e75f162e6d1db0259249352073c1d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"West North Central States have the lowest unemployment rates averaged from 2001 to 2022","cells":[{"id":0,"value":"# West North Central States have the lowest unemployment rates averaged from 2001 to 2022\n- Created by [Fengrui Gan](https://fengruigan.github.io/fengruigan-homepage/)\n- Class [CS 7295: Special Topics Course / Information Visualization](https://johnguerra.co/classes/data_visualization_spring_2023/)\n- Professor Name : [John Alexis Guerra Gómez](https://johnguerra.co)\n- Video: https://youtu.be/CV3YlBdHI80\n- Tweet: https://twitter.com/FengruiGan/status/1628897636106526720","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":398,"value":"## Introduction\nWith the consecutive increase of interest rates and constant news of mass layoffs, everyone is worried about an upcoming recession. As someone actively seeking job opportunities, I am hoping to take a look into the economy data and try to see if a recession is indeed ahead of us.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":689,"value":"htl.html`\n

State average unemployment rate from 2000 to 2022

Selected State (click on map to select):

${stateNames[state]? stateNames[state] : \"None\"} ${stateAvgs[state]? stateAvgs[state].toFixed(2) + '%' : ''}

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":723,"value":"Legend(d3.scaleQuantize([stateAvgMin.toPrecision(2), stateAvgMax.toPrecision(2)], d3.schemeBlues[4]), {\n title: \"Unemployment rate (%)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":781,"value":"vl.vconcat(industryPlot, cpiPlot).render()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":788,"value":"## Insights\n\n- The sticky price CPI is increasing the fastest since 2001\n- The Leisure and Hospitality sector was impacted the most during the covid pandemic recession and it also recovered slower than other sectors.\n- West North Central States have the lowest unemployment rates averaged from 2001 to 2022.\n- West coast states have higher unemployment rates than East coast states averaged from 2001 to 2022.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":815,"value":"## Data processing\nFor the datasets _unemployment rates of each sector_ and _sticky price CPI_, I converted the date into a unix timestamp.\n\nFor the dataset _unemployment rates of each sector_ I also combined the columns representing UR of individual sectors into a single column containing all UR values, and another column denoting their corresponding sector.\n\nFor the dataset _unemployment rates of each state_, I calculated the average UR for each state and created a key-value map with state codename as key and average UR as value for easier plotting","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":873,"value":"## Variables and functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":308,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"cpiPlot = {\n const pointHighlight = vl\n .selectPoint()\n .on(\"mouseover\")\n .nearest(true)\n .fields(\"date\")\n .init({ date: [] });\n\n const cpiLine = vl\n .markPoint({ tooltip: true })\n .width(plotWidth)\n .height(300)\n .encode(\n vl.x().fieldT(\"date\").axis({ title: false }),\n vl.y().fieldQ(\"percentIncrease\").axis({title: \"% Increase\", titleFontSize: 15}),\n vl.opacity().if(vl.not(pointHighlight), vl.value(0)).value(1)\n );\n\n return vl\n .data(timeCleanedCPI)\n .title({ text: \"Rate of change of Sticky CPI\", fontSize: 20 })\n .layer(\n cpiLine.select(pointHighlight),\n cpiLine.markLine().encode(vl.opacity(1))\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"dateDomain = [\n timeCleanedURBySector[0].date,\n timeCleanedURBySector[timeCleanedURBySector.length - 1].date\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":761,"value":"plotWidth = 900","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"dateMapper = (arr) => {\n return arr.map((el) => {\n return {\n ...el,\n date: new Date(el.date).getTime()\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"allSectors = Object.keys(urBySector[0]).filter(el => el !== 'date')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"reformatedURBySector = {\n const d = [];\n allSectors\n .map((sector) => {\n return {\n sector: sector,\n data: timeCleanedURBySector.map((el) => {\n return {\n date: el.date,\n unemploymentRate: el[sector],\n sector: sector\n };\n })\n };\n })\n .forEach((data) => {\n d.push(...data.data);\n });\n return d;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"timeCleanedURBySector = dateMapper(urBySector)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"timeCleanedCPI = dateMapper(cpi)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"urBySector = FileAttachment(\"UR_By_Sectors@1.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"urByState = FileAttachment(\"UR_By_States@1.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"cpi = FileAttachment(\"Sticky_Price_CPI@3.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":878,"value":"## Mapping","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":500,"value":"stateAvgMax = Math.max(...Object.values(stateAvgs))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"stateAvgMin = Math.min(...Object.values(stateAvgs))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"stateAvgs = urByState.reduce((acc, state) => {\n let code = state[\"Region Code\"]\n if (code < 10) {\n code = `0${code}`\n }\n const dateKeys = Object.keys(state).filter(key => key !== \"Region Name\" && key !== \"Region Code\")\n return {\n ...acc,\n [code]: (dateKeys.reduce((acc, val) => Number(state[val]) + acc, 0) / dateKeys.length)\n }\n}, {})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":694,"value":"stateNames = urByState.reduce((acc, state) => {\n let code = state[\"Region Code\"]\n if (code < 10) {\n code = `0${code}`\n }\n return {\n ...acc,\n [code]: state[\"Region Name\"]\n }\n}, {})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":642,"value":"stateColors = stateCodes.reduce((acc, state) => {\n return {\n ...acc,\n [state]: colorMapper(stateAvgs[state])\n }\n}, {})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":559,"value":"stateCodes = Object.keys(stateAvgs)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":565,"value":"colors = d3.schemeBlues[4]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":578,"value":"colorMapper = (number) => {\n const mid = (stateAvgMax + stateAvgMin) / 2\n const firstQ = (mid + stateAvgMin) / 2;\n const thirdQ = (mid + stateAvgMax) / 2\n\n if (number < firstQ) {\n return colors[0];\n } else if (number < mid) {\n return colors[1]\n } else if (number < thirdQ) {\n return colors[2]\n } else {\n return colors[3]\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"path = d3.geoPath()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":871,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"import {us} from \"@mbostock/u-s-state-map\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"import {vl} from '@vega/vega-lite-api-v5'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"import {interval} from '@mootari/range-slider@1786'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":714,"value":"import {Legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":813,"value":"## Todo\n- finish up Analysis\n- sync the color mapping between legend and map\n- Add time range slider\n- use UTC for tooltip timezone\n- sync of date select between sectors plot and CPI plot\n- fix data to start from 1/1/2000","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"