2d:null 2e:["$","title",null,{"children":"Project Progress Report | LilyLi | Observable"}] 33:T5dc,### Contents * [Introduction](https://observablehq.com/d/b3f60f8225ad01e0#cell-12) * [Data Source](https://observablehq.com/d/b3f60f8225ad01e0#cell-41) * [Idea 1](https://observablehq.com/d/b3f60f8225ad01e0#cell-265) (by Lily):
Unemployment rate of Japan, Canada and US have similar trend since 2000, where the unemployment rate went up in 2009 and 2020. Canada and US hit the highest unemployment rates in 2020, while Japan had the highest unemployment rate in 2009. * [Idea 2](https://observablehq.com/d/b3f60f8225ad01e0#cell-271)(by Lily):
Debt to GDP ratio of Japan, US and Canada are very similar since 2000, and Debt to GDP ratio all went up when unemployment rate increased (from 2009 to 2010 and from 2019 to 2020). * [Idea 3](https://observablehq.com/d/b3f60f8225ad01e0#cell-273)(by Lily):
For Canada, US and Japan, when GDP dropped in 2009 and 2020, the unemployment rate rapidly increased. * [Idea 4](https://observablehq.com/d/b3f60f8225ad01e0#cell-275)(by Lily):
Japan and North America area video sales dropped when unemployment rate peaked in 2019, which suggests that video games are a discretionary spending item for many households, and during times of economic uncertainty, entertainment is not the top priority. * [Idea 5](https://observablehq.com/d/b3f60f8225ad01e0#cell-277)(by Lily):
The H1B denials number is negatively correlated with the unemployment rate, while the H1B approvals number has no significant correlation with the unemployment rate.34:Ta81,### Introduction: Explore the relationship between debt, GDP and unemployment rate in different countries and how unemployment rate can effect our life. * ${chkb()} **What's the problem?**
Since COVID-19 pandemic, there has been waves of layoffs in the whole world. Many businesses have had to shut down or reduce their operations, leaving millions of workers without jobs. The effects have been particularly severe for those in industries like tourism, and retail. Recent tech layoffs shocked everyone in Bay Area and brought the anxiety to the next level. Governments have responded with various support measures, including unemployment benefits and small business loans, but the road to recovery remains uncertain. The problem is people are prepared for this massive layoff and sudden increase in unemployment. If we can foresee what might happen in the near future, we can prepare ourselves for the worst situation.
* ${chkb()} **Why is this relevant/important?**
The unemployment rate is a key indicator of the health of an economy. When the rate is high, it can have devastating effects on people's lives. There is a complex relationship between debt, GDP, and unemployment rate, with each factor affecting the others in different ways. The ripple effects of high unemployment can also extend to the broader community, with decreased spending and decreased economic activity. Thus, it's important to learn more about debt, GDP and unemployment rate for ensuring the well-being of individuals and the stability of society.
**Introduction** The economy is a complex system that is affected by a variety of factors. When economy has hard time, businesses may struggle to stay afloat, leading to layoffs and a rise in the unemployment rate. This can result in reduced consumer spending, as those who are out of work have less money to spend, further exacerbating the economic downturn. GDP stands for gross domestic product, which is meant to represent the total dollar value of all goods and services produced over a specific period of time. Debt-to-GDP ratio is the metric comparing a country's public debt to its gross domestic product The higher the debt-to-GDP ratio, the less likely the country will pay back its debt and the higher its risk of default, which could cause a financial panic in the domestic and international markets. Unemployment rates are often used as a key indicator of the health of the economy. I want to explore the relationship between two economy factors(GDP, Debt) and unemployment rate in different countries, how they indicate a coming massive layoff and also explore how unemployment rate affected other aspect of life.35:T61d,### Data sources and abstraction * ${chkb()} Lists all the data required for the project - Debt to GDP ratio dataset - [Global Debt to GDP ratio](https://www.imf.org/external/datamapper/GG_DEBT_GDP@GDD/SWE) - [abstraction](https://observablehq.com/d/b3f60f8225ad01e0#cell-63) - GDP datasets: - [US GDP](https://fred.stlouisfed.org/series/GDP) - [Canada GDP](https://fred.stlouisfed.org/series/NGDPRSAXDCCAQ) - [Japan GDP](https://fred.stlouisfed.org/series/JPNNGDP) - [abstraction](https://observablehq.com/d/b3f60f8225ad01e0#cell-108) - Unemployment rate datasets: - [US Unemployment rate](https://fred.stlouisfed.org/series/UNRATE) - [Canada Unemployment rate](https://fred.stlouisfed.org/series/LRUNTTTTCAM156S) - [Japan Unemployment rate](https://fred.stlouisfed.org/series/LRUN64TTJPM156S) - [abstraction](https://observablehq.com/d/b3f60f8225ad01e0#cell-108) - Unemployment rate effect datasets: - [Video Games Sales](https://www.kaggle.com/datasets/sidtwr/videogames-sales-dataset) - [abstraction](https://observablehq.com/d/b3f60f8225ad01e0#cell-192) - [US H1b dataset](https://www.uscis.gov/tools/reports-and-studies/h-1b-employer-data-hub/h-1b-employer-data-hub-files) - [abstraction](https://observablehq.com/d/b3f60f8225ad01e0#cell-104) * ${chkb()} All the data is publicly available and free to use: **Yes** * ${chkb()} Performs the overall data abstraction (what). For each dataset dataset type, attribute types, orientations: **Yes, I added abstraction link to each dataset**36:Ta43,gdp = { const us_unemployment_gdp_chart = () => { const line_unemployment = vl.markLine().data(dataSet.filter(d => d.country == 'US' && d.type =='unemployment')).encode( vl.x().fieldT("date").timeUnit('yearmonth'), vl.y().fieldQ("value").title('Unemployment Percentage Rate'), vl.color().fieldN("type"), ).width(550) .height(250); const line_income = vl.markLine().data(dataSet.filter(d => d.country == 'US' && d.type =='gdp')).encode( vl.x().fieldT("date").timeUnit('yearmonth'), vl.y().fieldQ("value").title('US GDP'), vl.color().fieldN("type"), ).width(550) .height(250); const line = vl.layer(line_unemployment, line_income).resolve({scale: {y: 'independent'}}) return line } const canada_unemployment_gdp_chart = () => { const line_unemployment = vl.markLine() .data(dataSet.filter(d => d.country == 'Canada' && d.type =='unemployment')).width(width - 250).encode( vl.x().fieldT("date").timeUnit('yearmonth'), vl.y().fieldQ("value").title('Unemployment Percentage Rate'), vl.color().fieldN("type"), ).width(550) .height(250); const line_income = vl.markLine().data(dataSet.filter(d => d.country == 'Canada' && d.type =='gdp')).width(width - 250).encode( vl.x().fieldT("date").timeUnit('yearmonth'), vl.y().fieldQ("value").title('Canada GDP'), vl.color().fieldN("type"), ).width(550) .height(250); const line = vl.layer(line_unemployment, line_income).resolve({scale: {y: 'independent'}}) return line } const japan_unemployment_gdp_chart = () => { const line_unemployment = vl.markLine() .data(dataSet.filter(d => d.country == 'Japan' && d.type =='unemployment')) .width(width - 250) .encode( vl.x().fieldT("date").timeUnit('yearmonth'), vl.y().fieldQ("value").title('Unemployment Percentage Rate'), vl.color().fieldN("type"), ).width(550) .height(250); const line_income = vl.markLine() .data(dataSet.filter(d => d.country == 'Japan' && d.type=='gdp')) .width(width - 250).encode( vl.x().fieldT("date").timeUnit('yearmonth'), vl.y().fieldQ("value").title('Japan GDP'), vl.color().fieldN("type"), ).width(550) .height(250); const line = vl.layer(line_unemployment, line_income).resolve({scale: {y: 'independent'}}) return line } return vl .concat(us_unemployment_gdp_chart(),canada_unemployment_gdp_chart(),japan_unemployment_gdp_chart()) .columns(1) .render() }37:T460,## Idea 5: - Title: - Analyze if unemployment rate affects h1b approvals and denials - Description: - In this idiom, x axis will be the year, y axis on the left will be the unemployment rate, and y axis on the right will be the number h1b approvals/denials. I will use different colors to represent approvals, denials and unemployment rate. By looking at this chart, we can see f unemployment rate affects h1b approvals and denials. - what can be learned from it: - It can provide insights into the relationship between the job market and immigration policy. It can also help to identify potential factors that influence the decision-making process for H1B visa approvals and denials, such as labor market conditions and employer demand for skilled workers. Additionally, this analysis can highlight the impact of immigration policies on the availability of foreign talent in the workforce and the broader economy. #### Insight / Made up insight The H1B denials number is negatively correlated with the unemployment rate, while the H1B approvals number has no significant correlation with the unemployment rate.38:T4f0,h1b_chart = { const onmouseover = vl .selectSingle() .on("mouseover") .encodings("x") .nearest(true) .empty({ created: [] }); const data = dataSet.filter(d => d.country == 'US' && d.type=='unemployment' && d.date.getFullYear() >= 2009) // h1b.forEach(d => { // if (d.type == 'approval rate'){ // data.push(d) // } // }) const line_h1b = vl .markLine() .data(h1b.filter(d => d.type != 'approval rate')) .encode( vl.x().fieldT("date").title("Year").timeUnit('year'), vl.y().fieldQ('value').title("H1b Numbers"), vl.color().fieldN('type'), ).width(width - 250) const line_unemployment = vl.markLine().data(data).width(width - 250).encode( vl.x().fieldT("date").timeUnit('year'), vl.y().mean("value").title('Unemployment Percentage Rate'), vl.color().fieldN("type"), ) const line = vl .layer(line_unemployment, line_h1b) .resolve({scale: {y: 'independent'}}) const points = line_h1b .markPoint({ tooltip: true, size: 1 }) .select(onmouseover) .encode( vl .color() .if(onmouseover, vl.color().value("firebrick")) .value("steelblue") ); return line.render() // return vl.layer(points, line).render(); }39:T431,h1b_chart1 = { const onmouseover = vl .selectSingle() .on("mouseover") .encodings("x") .nearest(true) .empty({ created: [] }); const data = dataSet.filter(d => d.country == 'US' && d.type=='unemployment' && d.date.getFullYear() >= 2009) const line_h1b = vl .markLine() .data(h1b.filter(d => d.type != 'approval rate')) .encode( vl.x().fieldT("date").title("Year").timeUnit('year'), vl.y().fieldQ('value').title("H1b Numbers"), vl.color().fieldN('type'), ).width(width - 250) const line_unemployment = vl.markLine().data(data).width(width - 250).encode( vl.x().fieldT("date").timeUnit('year'), vl.y().mean("value").title('Unemployment Percentage Rate'), vl.color().fieldN("type"), ) const line = vl .layer(line_unemployment, line_h1b) const points = line_h1b .markPoint({ tooltip: true, size: 1 }) .select(onmouseover) .encode( vl .color() .if(onmouseover, vl.color().value("firebrick")) .value("steelblue") ); return line.render() }3a:Tf84,### Evaluation Plan I will be running an usability study for [Idiom 3](https://observablehq.com/d/b3f60f8225ad01e0#cell-273), I'll be evaluating tasks... - I1_MT: Summarize the correlation between the GDP and unemployment rate changes in Japan, US and Canada. (**Summarize -> Features**, Main Task by Lily) - I1_ST1: Identify how GDP changed when unemployment rate increased. (**Identify -> Features**, Sub Task by Lily) - I1_ST2: Compare the overall GDP trends in Japan, US and Canada.(**Compare -> trends**, Sub Task by Lily) __Script__ Welcome to the study. I am Lily and I did a visualization project about unemployment rate. Thank you for helping me with this project. Everything you tell me would be helpful. Everything we do will be recorded. Is this ok for you? (waiting for the answer). Great, I will send you a URL of our application, could you please share your screen? I am evaluating the tools not the participant. So there is no way of failing for the participant. Don't be nervous. Just share with me what you are thinking. __Tasks to test__

Please tell me what you think this is for and everything went through your brain.
Please identify the years when unemployment rate went up by a lot for Japan, US and Canada.
Please identify the years when GDP went down for Japan, US and Canada.
Do you think the unemployment rate in different countries tends to have similar trend?
Why do you think so?
Do you think GDP can be one of the good indicators for the changes of unemployment rate?
Why do you think so?
What do you think the correlation is between the GDP and unemployment rate?
How do you think it could be of use? Anything you see will call your attention?
Why you think it is useful?
1 to 10, How useful you think this would be?
Do you have any suggestion ?

__Expected answers__

This is for analyzing the relationship between debt, GDP and unemployment rate and how unemployment rate affects out life.
For Japan, the years are 2002, 2009 and 2020; For US, the years are 2002, 2009 and 2020; For Canada, the years are 2002, 2009 and 2020.
For Japan, the years are 2009 and 2020; For US, the years are 2009 and 2020; For Canada, the years are 2009 and 2020.
Yes I do.
Because Japan, US and Canada's unemployment rate went up in the same year. But I think it will be better to more countries' unemployment rate to make sure.
Yes I think so.
Because in Japan, US and Canada, when GDP went down, unemployment rate all went up a lot. Although I think GDP is not the only one that affects unemployment rate because when GDP went up, unemployment rate can still went up.
I think GDP and unemployment rate have negative correlation. When GDP goes down, there is a high chance that unemployment rate might go up.
Government can take use of it to analyze the health of economy. People can use it to have a better understanding of current market. The global debt to GDP ratio got my attention the most.
Because there are some insights that can actually help with predicting the incoming unemployment rate increase.
I think I will give it 8. Because there are some meaningful insights.
I think it would be helpful to include more countries.

__Post test questionnaire__ In a scale of 1 to 7, being 1 very ineffective/useless and 7 very effective/useful: * PT1.1. How effective was the visualization for helping you find the years when unemployment rate went up? * PT1.2 How easy to use was the visualization for helping you find the years when GDP went down? * PT1.3 How easy to compare unemployment rate and GDP for different country? More details on the [usability report template](https://docs.google.com/document/d/1y_VLIIOlM4jYCbyP-CbxKimSvf8g5YwKErK3n38Fu44/edit?usp=sharing)3b:T433,h1b_dataset = { const h1bData = [h1b_2009, h1b_2010, h1b_2011, h1b_2012, h1b_2013, h1b_2014, h1b_2015, h1b_2016, h1b_2017, h1b_2018, h1b_2019, h1b_2020, h1b_2021, h1b_2022] const res = {} for (let i = 2009; i<=2022; i++){ res[i] = { approvals: 0, denials: 0 } } for (let h of h1bData){ h.forEach(d => { if (Object.keys(d).includes('Initial Approvals')){ res[d['Fiscal Year']]['approvals'] += isNaN(d['Initial Approvals']) ? 0 : d['Initial Approvals'] }else{ res[d['Fiscal Year']]['approvals'] += isNaN(d['Initial Approval']) ? 0 : d['Initial Approval'] } if (Object.keys(d).includes('Initial Denials')){ res[d['Fiscal Year']]['denials'] += isNaN(d['Initial Denials']) ? 0 : d['Initial Denials'] }else{ res[d['Fiscal Year']]['denials'] += isNaN(d['Initial Denial']) ? 0 : d['Initial Denial'] } }) } for (let i = 2009; i<=2022; i++){ res[i]['approval rate'] = 100*res[i]['approvals']/(res[i]['denials'] + res[i]['approvals']) } return res }3c:[{"id":"143e05b7872755b44b86ee6df8a012ddaeb80dfa2bf027b686387fe8ebe146cf4baf6285d360b64379b17498edea756c41e4c56c1df6aaa3b7fb4302e9f3b291","href":"https://static.observableusercontent.com/files/143e05b7872755b44b86ee6df8a012ddaeb80dfa2bf027b686387fe8ebe146cf4baf6285d360b64379b17498edea756c41e4c56c1df6aaa3b7fb4302e9f3b291","name":"Global_debt_gdp.csv","type":"text/csv","lastModified":1680638432379.27,"size":33015},{"id":"adbe9d90c2817a663cb5892820287822021ac4399dcfa39eab4a12d765f501e9cbde80a5b142f885c40d27b23864a4ef1792a20b3f9e17a3553c746443ac8bfa","href":"https://static.observableusercontent.com/files/adbe9d90c2817a663cb5892820287822021ac4399dcfa39eab4a12d765f501e9cbde80a5b142f885c40d27b23864a4ef1792a20b3f9e17a3553c746443ac8bfa","name":"usgdp.csv","type":"text/csv","lastModified":1680638882157.452,"size":1919},{"id":"ec03a7de70493151cab29517ff18358cff3b3efa2b56a194fcbfea0451d2228f00b045ae296b87d74e9593d013bbedffce6402e8a534bc68e61525e1578e0dcd","href":"https://static.observableusercontent.com/files/ec03a7de70493151cab29517ff18358cff3b3efa2b56a194fcbfea0451d2228f00b045ae296b87d74e9593d013bbedffce6402e8a534bc68e61525e1578e0dcd","name":"canadagdp.csv","type":"text/csv","lastModified":1680638882154.571,"size":1792},{"id":"05f63a0dfcb21fce146cca0640c1984153e809a909f8d74c273521f5f72709a62ecc43622fc41bbcfd496c4cd442efd0c7b27e57231fc318078702f42d5e79fa","href":"https://static.observableusercontent.com/files/05f63a0dfcb21fce146cca0640c1984153e809a909f8d74c273521f5f72709a62ecc43622fc41bbcfd496c4cd442efd0c7b27e57231fc318078702f42d5e79fa","name":"japanGDP.csv","type":"text/csv","lastModified":1680638882134.635,"size":1832},{"id":"eebc6837adc2658c7df75b46ec3659109c8183e137a8f4c62bda94f034be7d0ce85814dcf60511cdb779272be197578f96f10bfe7ab7b65da3242fab33f513df","href":"https://static.observableusercontent.com/files/eebc6837adc2658c7df75b46ec3659109c8183e137a8f4c62bda94f034be7d0ce85814dcf60511cdb779272be197578f96f10bfe7ab7b65da3242fab33f513df","name":"usunemployment.csv","type":"text/csv","lastModified":1680638978725.406,"size":4095},{"id":"d656f088aa4a3cfc0ae0546bdc0d1463b0e825a677bc3a3aa0f749d5a9ac7b696bd699ded0060ea1914e761ad33fce49ffafda957c816490336e968244c34bd8","href":"https://static.observableusercontent.com/files/d656f088aa4a3cfc0ae0546bdc0d1463b0e825a677bc3a3aa0f749d5a9ac7b696bd699ded0060ea1914e761ad33fce49ffafda957c816490336e968244c34bd8","name":"canadaunemployment.csv","type":"text/csv","lastModified":1680639192528.954,"size":4087},{"id":"79219b6c29ef4eef9326c938f0f610b36fbf34fb65438d9b150b9a847dfa66f025aa4b05b353f3a96a64b20e04b8076800fda031e9db0b4ee3d36d0c510fbb30","href":"https://static.observableusercontent.com/files/79219b6c29ef4eef9326c938f0f610b36fbf34fb65438d9b150b9a847dfa66f025aa4b05b353f3a96a64b20e04b8076800fda031e9db0b4ee3d36d0c510fbb30","name":"japanUnemployment.csv","type":"text/csv","lastModified":1680639257054.719,"size":4226},{"id":"bd44fe0244de390f5e6554879292e4a17a1dd5ed1076e316ffd8f45763151866b1cf14c436a9f7908f1f7810b5bd07d9e31e7c4cd6386071d73a4d1bc9743853","href":"https://static.observableusercontent.com/files/bd44fe0244de390f5e6554879292e4a17a1dd5ed1076e316ffd8f45763151866b1cf14c436a9f7908f1f7810b5bd07d9e31e7c4cd6386071d73a4d1bc9743853","name":"videoGame.csv","type":"text/csv","lastModified":1680639638186.349,"size":1700311},{"id":"de5ae98e25639d71e05fef22846863957fd32096ed41ebe477618fc3378cac3622d3bf8b4c6750ee8e7f3e4d1505c89d7b5b77dd033af0f1130196f98553d2dc","href":"https://static.observableusercontent.com/files/de5ae98e25639d71e05fef22846863957fd32096ed41ebe477618fc3378cac3622d3bf8b4c6750ee8e7f3e4d1505c89d7b5b77dd033af0f1130196f98553d2dc","name":"h1b_datahubexport-2020.csv","type":"text/csv","lastModified":1680639958826.122,"size":3638812},{"id":"3a8012e718829c9409842246752ddf6e8d862cedce9261760ca982617de2dad87b55301bb9a15d844c009bee401c965def055c9c1a4d57818f9809279c692946","href":"https://static.observableusercontent.com/files/3a8012e718829c9409842246752ddf6e8d862cedce9261760ca982617de2dad87b55301bb9a15d844c009bee401c965def055c9c1a4d57818f9809279c692946","name":"h1b_datahubexport-2021.csv","type":"text/csv","lastModified":1680639959999.26,"size":3997947},{"id":"4502f21541afaa99f4ce62e5b2880086b2e1eae96ea4961b532dfe75a845ddca4eb0da111f2d399cc3e3f0c8bd43c25392e6fe4b0b7ea75a5a148e37cad100f9","href":"https://static.observableusercontent.com/files/4502f21541afaa99f4ce62e5b2880086b2e1eae96ea4961b532dfe75a845ddca4eb0da111f2d399cc3e3f0c8bd43c25392e6fe4b0b7ea75a5a148e37cad100f9","name":"h1b_datahubexport-2017.csv","type":"text/csv","lastModified":1680639960536.097,"size":4288999},{"id":"0d83ec3be0cf3b63bf690ddc8f5e829761c6ad10d77e88a57b57c0c7a3810c20d8c4ad7053e1380dc112154a92594ca36aedebac20730d8e058d714e3cad99eb","href":"https://static.observableusercontent.com/files/0d83ec3be0cf3b63bf690ddc8f5e829761c6ad10d77e88a57b57c0c7a3810c20d8c4ad7053e1380dc112154a92594ca36aedebac20730d8e058d714e3cad99eb","name":"h1b_datahubexport-2022.csv","type":"text/csv","lastModified":1680639959937.078,"size":4040115},{"id":"bae4e5812af2a0f872e4664b877d7d2a012a18b160678524aa927076b7aa555160b5dc6b60335c5c9be9499f3f93094abfdfdee0f9ddfcd8c185f43e18780332","href":"https://static.observableusercontent.com/files/bae4e5812af2a0f872e4664b877d7d2a012a18b160678524aa927076b7aa555160b5dc6b60335c5c9be9499f3f93094abfdfdee0f9ddfcd8c185f43e18780332","name":"h1b_datahubexport-2015.csv","type":"text/csv","lastModified":1680639960361.414,"size":4184707},{"id":"9176e33c57a514a0dcf657eccf15abdcc4cf067ee515e69f0b369e321252d7d5ebb9892504aa1ca61def4eb36aa95d6d832f671a0f18be3682a2a6545800366b","href":"https://static.observableusercontent.com/files/9176e33c57a514a0dcf657eccf15abdcc4cf067ee515e69f0b369e321252d7d5ebb9892504aa1ca61def4eb36aa95d6d832f671a0f18be3682a2a6545800366b","name":"h1b_datahubexport-2016.csv","type":"text/csv","lastModified":1680639960606.272,"size":4579243},{"id":"f2bd1ad264874af98f69fece4e98aa4f01d94d1c8d4d0b91cc2ebb6a252b17dc669c3f2a31efefa6543e03a031b71841271831926682ba991ecd52426628aceb","href":"https://static.observableusercontent.com/files/f2bd1ad264874af98f69fece4e98aa4f01d94d1c8d4d0b91cc2ebb6a252b17dc669c3f2a31efefa6543e03a031b71841271831926682ba991ecd52426628aceb","name":"h1b_datahubexport-2012.csv","type":"text/csv","lastModified":1680639961845.034,"size":4864312},{"id":"11ee82fdaf16c8f679ad675db7106b09a1e2ecad89bb43d3a818d174c0a9747709898f7f156bc8d5e532270b2e1b4faf609bc424a38be89266e14a97557c8b50","href":"https://static.observableusercontent.com/files/11ee82fdaf16c8f679ad675db7106b09a1e2ecad89bb43d3a818d174c0a9747709898f7f156bc8d5e532270b2e1b4faf609bc424a38be89266e14a97557c8b50","name":"h1b_datahubexport-2014.csv","type":"text/csv","lastModified":1680639961802.98,"size":4893042},{"id":"3dc5df5b993b655e72c3e521811377b311bbb12084dead1e00c492de7d2c48ac1fcf7b6aedcb6e3465bf8a73ecbe61e13a579e5f40262af83438d492aa0c9d55","href":"https://static.observableusercontent.com/files/3dc5df5b993b655e72c3e521811377b311bbb12084dead1e00c492de7d2c48ac1fcf7b6aedcb6e3465bf8a73ecbe61e13a579e5f40262af83438d492aa0c9d55","name":"h1b_datahubexport-2011.csv","type":"text/csv","lastModified":1680639962049.084,"size":5435314},{"id":"52b1ce9f7975f28e66d26d3bab4c5c7c0db4df26f2269b3a58596fb4c9507e48676b5cffbe63c890bac086843f75d96800b0db54e1d236c6b9a40737463ad62d","href":"https://static.observableusercontent.com/files/52b1ce9f7975f28e66d26d3bab4c5c7c0db4df26f2269b3a58596fb4c9507e48676b5cffbe63c890bac086843f75d96800b0db54e1d236c6b9a40737463ad62d","name":"h1b_datahubexport-2010.csv","type":"text/csv","lastModified":1680639961651.463,"size":4796486},{"id":"269266ce36e2e7520142fb15634130accaadaf029cee424dcc3e325ce1ea1a76fc84e65b1595dddf82c917b237f72406fcf0b1a095eb27f74445b4ce6dde2a5a","href":"https://static.observableusercontent.com/files/269266ce36e2e7520142fb15634130accaadaf029cee424dcc3e325ce1ea1a76fc84e65b1595dddf82c917b237f72406fcf0b1a095eb27f74445b4ce6dde2a5a","name":"h1b_datahubexport-2013.csv","type":"text/csv","lastModified":1680639961798.884,"size":4859390},{"id":"7ef9fccdcf71a11a0524ae2b1d15520fddfc8a71354a869fdd68617271b7d5c3829373709a1c77b2d0aa959d4bc53babca6458d382eb83f50ca301b05df4ad14","href":"https://static.observableusercontent.com/files/7ef9fccdcf71a11a0524ae2b1d15520fddfc8a71354a869fdd68617271b7d5c3829373709a1c77b2d0aa959d4bc53babca6458d382eb83f50ca301b05df4ad14","name":"h1b_datahubexport-2009.csv","type":"text/csv","lastModified":1680639962153.047,"size":5963576},{"id":"539f4d5884df397c387ab5d8626716365372295a2b790afa37b32f8090b42d39262e74d9853a9ef92f57f8cd7927adbba11b98c649d0ab8be0161c883c3dc6d4","href":"https://static.observableusercontent.com/files/539f4d5884df397c387ab5d8626716365372295a2b790afa37b32f8090b42d39262e74d9853a9ef92f57f8cd7927adbba11b98c649d0ab8be0161c883c3dc6d4","name":"h1b_datahubexport-2019.csv","type":"text/csv","lastModified":1680639961909.953,"size":5119528},{"id":"087bee3008f0c7a21790d26d22b46ab7c4cda73979e971e716d3b258b108833666cea833cba9d57858a0514b616cb83371ded34eb2eb96e02568dfec49dd9f2d","href":"https://static.observableusercontent.com/files/087bee3008f0c7a21790d26d22b46ab7c4cda73979e971e716d3b258b108833666cea833cba9d57858a0514b616cb83371ded34eb2eb96e02568dfec49dd9f2d","name":"h1b_datahubexport-2018.csv","type":"text/csv","lastModified":1680639961634.571,"size":4794567}] 31:{"id":"b3f60f8225ad01e0","slug":"project-progress-report","title":"Project Progress Report","thumbnail":"87eb06d12244b8cf4bf0b90cc41e10107cb2a0c866c9069ea304c048df0f708c","access_level":"public","create_time":"$D2023-04-04T18:48:29.070Z","update_time":"$D2023-04-24T05:59:10.414Z","view_time":null,"first_public_time":"$D2023-04-04T18:48:29.070Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"132517a03a3dd931","login":"lilyneu","name":"LilyLi","avatar_url":"https://avatars-next.observableusercontent.com/57d00e99e7bd16a222a22f6669c9ce03fafca3705a95350ea5f4e3608b1f0ec9","tier":"starter_2024"},"version":870,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d06cccb760acb8c3","login":"lilyneu","name":"LilyLi","avatar_url":"https://avatars-next.observableusercontent.com/57d00e99e7bd16a222a22f6669c9ce03fafca3705a95350ea5f4e3608b1f0ec9","tier":null}],"members":[{"type":"individual","id":"d06cccb760acb8c3","login":"lilyneu","name":"LilyLi","avatar_url":"https://avatars-next.observableusercontent.com/57d00e99e7bd16a222a22f6669c9ce03fafca3705a95350ea5f4e3608b1f0ec9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Project Progress Report","cells":[{"id":0,"value":"# Project Progress Report\n\n- CS7295 Final project progress report created by [Jiangyan Li](https://observablehq.com/@lilyneu?tab=profile)
\n- [Slides](https://docs.google.com/presentation/d/1pTMAqsAzvrNwX9il-lMneN8NX6wIjLPC2p_tGvOMRxI/edit#slide=id.p)\n- Class: [Data Visualization / Information Visualization](https://johnguerra.co/classes/data_visualization_spring_2023/)
\n- Team Member: Fengrui Gan, Jiangyan Li","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":65,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":839,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":48,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":69,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":67,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":41,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":126,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":265,"value":"## Idea 1: \n- Title:\n - Analysis of unemployment rate trend of US, Canada and Japan\n- Description:\n - In this idiom, x axis will be the date and y axis is the unemployment rate percentage. I will use color to represent different countries and compare the trends of different countries' unemployment rate.\n- what can be learned from it:\n - Analyzing the trend of unemployment rate in different countries can provide valuable information about the global economy and regional disparities.\n\n### Insight / Made up insight:\nUnemployment rate of Japan, Canada and US have similar trend since 2000, where the unemployment rate went up in 2009 and 2020. Canada and US hit the highest unemployment rates in 2020, while Japan had the highest unemployment rate in 2009.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":108,"value":"### Data Abstraction\n**(I combined unemployment rate and GDP datasets for later use)**: For [US GDP](https://fred.stlouisfed.org/series/GDP), [Canada GDP](https://fred.stlouisfed.org/series/NGDPRSAXDCCAQ), [Japan GDP](https://fred.stlouisfed.org/series/JPNNGDP), [US Unemployment](https://fred.stlouisfed.org/series/UNRATE), [Canada Unemployment](https://fred.stlouisfed.org/series/LRUNTTTTCAM156S) and [Japan Unemployment](https://fred.stlouisfed.org/series/LRUN64TTJPM156S).\n - **Dataset Type**: Table, Temporal(one attribute is date);\n - **Attributes**:\n - country: Categorical;\n - date: Ordinal, Sequential (temporal);\n - value: Quantitative, Sequential;\n - type: Categorical;\n - **Derived Attributes**: None\n - **Data Availability**: Static for this project; Dynamic for the dataset on the website because the website is still updating it on a regular basis.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":161,"value":"viewof unemployment_gdp = navio(dataSet)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"### Tasks (why)\n- I1_MT: Compare the trends of unemployment rate of three countries. (**Compare -> Trends**, Main Task by Lily)\n- I1_ST1: Identify the peaks of unemployment rate in three countries. (**Identify -> Features**, Sub Task by Lily)\n- I1_ST2: Summarize the common changes in unemployment rate of three countries. (**Summarize -> Features**, Sub Task by Lily)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":314,"value":"#### Prototypes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":344,"value":"unemployment_chart = {\n // const onmouseover = vl\n // .selectSingle()\n // .on(\"mouseover\")\n // .encodings(\"x\")\n // .nearest(true)\n // .empty({ created: [] });\n\n const line = vl.markLine().data(dataSet.filter(d => d.type=='unemployment')).width(width - 250)\n .encode(\n vl.x().fieldT(\"date\").timeUnit('yearmonth'),\n vl.y().fieldQ(\"value\").title('Unemployment Percentage Rate'),\n vl.color().fieldN(\"country\"),\n )\n // const points = line\n // .markPoint({ tooltip: true, size: 1 })\n // .select(onmouseover)\n // .encode(\n // vl\n // .color()\n // .if(onmouseover, vl.color().value(\"firebrick\"))\n // .value(\"steelblue\")\n // );\n return line.render()\n // return vl.layer(points, line).render();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"### How\n- Marks: Line\n- Channels:\n - Vertical Position: unemployment rate, Express\n - Horizontal Position: Date, Express\n - Color hue: Different Countries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":751,"value":"### Iterations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":837,"value":"- I then tried area chart. It works well but I think the line chart is clearer and more straightforward.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":757,"value":"vl.markArea().data(dataSet.filter(d => d.type=='unemployment')).width(width - 250)\n .encode(\n vl.x().fieldT(\"date\").timeUnit('yearmonth'),\n vl.y().fieldQ(\"value\").title('Unemployment Percentage Rate'),\n vl.color().fieldN(\"country\"),\n ).render()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"### Considerations\nTo derive this insight, I built a line chart, where we can see the trends of unemployment rate changes in three countries since 2000. This idiom can help me complete all the tasks.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":328,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":271,"value":"## Idea 2: \n- Title:\n - Analysis of global debt to GDP ratio\n- Description:\n - In this idiom, x axis will be the date and y axis is the debt to GDP ratio. I will use colors to represent different countries and compare the trends of different countries' debt to GDP ratio.\n- what can be learned from it:\n - The analysis of global debt to GDP ratio is essential to understand the level of debt sustainability and potential risks. It can also help us to learn the possible relationship between debt to GDP ratio and unemployment rate.\n\n### Insight / Made up insight:\nDebt to GDP ratio of Japan, US and Canada are very similar since 2000, and Debt to GDP ratio all went up when unemployment rate increased (from 2009 to 2010 and from 2019 to 2020).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":63,"value":"### **Data Abstraction**\n- For [Global Debt to GDP ratio](https://www.imf.org/external/datamapper/GG_DEBT_GDP@GDD/SWE):\n - **Dataset Type**: Table, Temporal(one attribute is date);\n - **Attributes**:\n - country: Categorical;\n - date: Ordinal, Sequential (temporal);\n - value: Quantitative, Sequential;\n - type: Categorical;\n - **Derived Attributes**: None\n - **Data Availability**: Static for this project; Dynamic for the dataset on the website because the website is still updating it on a regular basis.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":78,"value":"viewof selected = navio(debt_to_gdp_ratio_global)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"### Tasks (why)\n\n- I1_MT: Compare the trends of debt to GDP ratio especially for Japan, US and Canada. (**Compare -> Trends**, Main Task by Lily)\n- I1_ST1: Identify which country among Japan, US and Canada has higher debt to GDP ratio. (**Identify -> Features**, Sub Task by Lily)\n- I1_ST2: Summarize the common changes in debt to GDP ratio when unemployment rate increased. (**Summarize -> Features**, Sub Task by Lily)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":367,"value":"### Prototypes\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":375,"value":"viewof selected_country = Inputs.select(\n global_countries, { label: \"Choose another country: \", value: 'Japan' }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"global_chart = {\n const x = vl.x().field(\"date\");\n\n const onmouseover = vl\n .selectSingle()\n .on(\"mouseover\")\n .encodings(\"x\")\n .nearest(true)\n .empty({ created: [] });\n\n const line = vl\n\n .markLine()\n .data(\n debt_to_gdp_ratio_global\n )\n .encode(\n // x.timeUnit('year'), \n vl.x().field(\"date\").title(\"Year\"),\n vl.y().fieldQ('value').title(\"Debt to GDP ratio\"),\n vl.color().fieldN('country'),\n vl.opacity()\n .if(\n `datum.country == \"${selected_country}\" || datum.country == 'Japan' || datum.country == 'Canada' || datum.country == 'United States'` \n , vl.opacity().value(1.5)).value(0.1)\n \n )\n .width(width - 250);\n\n const points = line\n .markPoint({ tooltip: true, size: 1 })\n .select(onmouseover)\n .encode(\n vl\n .color()\n .if(onmouseover, vl.color().value(\"firebrick\"))\n .value(\"steelblue\")\n );\n\n return vl.layer(points, line).render();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"### How\n- Marks: Line\n- Channels:\n - Vertical Position: Debt to GDP ratio, Express\n - Horizontal Position: Date, Express\n - Color hue: Different Countries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":766,"value":"### Iterations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":830,"value":"- I firstly tried multiline chart to show global debt to GDP ratio, but apparently it is very hard to compare the trends due to a large amount of types.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":768,"value":"chart = {\n const x = vl.x().field(\"date\");\n\n const onmouseover = vl\n .selectSingle()\n .on(\"mouseover\")\n .encodings(\"x\")\n .nearest(true)\n .empty({ created: [] });\n\n const line = vl\n\n .markLine()\n .data(\n debt_to_gdp_ratio_global\n )\n .encode(\n // x.timeUnit('year'), \n vl.x().field(\"date\").title(\"Year\"),\n vl.y().fieldQ('value').title(\"Debt to GDP ratio\"),\n vl.color().fieldN('country'))\n .width(width - 250);\n\n const points = line\n .markPoint({ tooltip: true, size: 1 })\n .select(onmouseover)\n .encode(\n vl\n .color()\n .if(onmouseover, vl.color().value(\"firebrick\"))\n .value(\"steelblue\")\n );\n\n return vl.layer(points, line).render();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":832,"value":"- In this one, I added a parameter to allow users to choose a country to highlight in the chart. It is much better. But I think since I am specifically compare Japan, US and Canada, it is better to highlight these three lines as default and still enable users to highlight another country that they might be interested in.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":778,"value":"viewof selected_country2 = Inputs.select(\n global_countries, { label: \"Choose another country: \", value: 'Japan' }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":771,"value":"chart2 = {\n const x = vl.x().field(\"date\");\n\n const onmouseover = vl\n .selectSingle()\n .on(\"mouseover\")\n .encodings(\"x\")\n .nearest(true)\n .empty({ created: [] });\n\n const line = vl\n\n .markLine()\n .data(\n debt_to_gdp_ratio_global\n )\n .encode(\n vl.x().field(\"date\").title(\"Year\"),\n vl.y().fieldQ('value').title(\"Debt to GDP ratio\"),\n vl.color().fieldN('country'),\n vl.opacity()\n .if(\n `datum.country == \"${selected_country2}\"` \n , vl.opacity().value(1.5)).value(0.1)\n \n )\n .width(width - 250);\n\n const points = line\n .markPoint({ tooltip: true, size: 1 })\n .select(onmouseover)\n .encode(\n vl\n .color()\n .if(onmouseover, vl.color().value(\"firebrick\"))\n .value(\"steelblue\")\n );\n\n return vl.layer(points, line).render();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"### Consideration\nTo derive this insight, I built a multiseries line chart, where we can see the trends of Debt to GDP ratio changes in all countries since 2000. This idiom can help me complete all the tasks.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":371,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":273,"value":"## Idea 3: \n- Title:\n - Analysis of the relationship between GDP and unemployment rate.\n- Description:\n - In this idiom, x axis will be the date, y axis on the right is the GDP, and the y axis on the left is the unemployment rate. I will use colors to represent GDP and unemployment rate. By looking at this chart, we can see if GDP and unemployment rate are related.\n- what can be learned from it:\n - Analyzing the relationship between GDP and unemployment rate can provide insights into the health and stability of the job market and economy.\n\n#### Insight / Made up insight\nFor Canada, US and Japan, when GDP dropped in 2009 and 2020, the unemployment rate rapidly increased.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":452,"value":"### Data Abstraction\n**(I combined unemployment rate and GDP datasets for later use)**: For [US GDP](https://fred.stlouisfed.org/series/GDP), [Canada GDP](https://fred.stlouisfed.org/series/NGDPRSAXDCCAQ), [Japan GDP](https://fred.stlouisfed.org/series/JPNNGDP), [US Unemployment](https://fred.stlouisfed.org/series/UNRATE), [Canada Unemployment](https://fred.stlouisfed.org/series/LRUNTTTTCAM156S) and [Japan Unemployment](https://fred.stlouisfed.org/series/LRUN64TTJPM156S).\n - **Dataset Type**: Table, Temporal(one attribute is date);\n - **Attributes**:\n - country: Categorical;\n - date: Ordinal, Sequential (temporal);\n - value: Quantitative, Sequential;\n - type: Categorical;\n - **Derived Attributes**: None\n - **Data Availability**: Static for this project; Dynamic for the dataset on the website because the website is still updating it on a regular basis.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":455,"value":"viewof unemployment_gdp1 = navio(dataSet)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"### Tasks (why)\n\n- I1_MT: Summarize the correlation between the GDP and unemployment rate chagnes in Japan, US and Canada. (**Summarize -> Features**, Main Task by Lily)\n- I1_ST1: Identify how GDP changed when unemployment rate increased. (**Identify -> Features**, Sub Task by Lily)\n- I1_ST2: Compare the overall GDP trends in Japan, US and Canada.(**Compare -> trends**, Sub Task by Lily)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":464,"value":"### Prototype","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":467,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"### How\n- Marks: Line\n- Channels:\n - Vertical Position: GDP, Express\n - Horizontal Position: Date, Express\n - Color hue: different type (GDP or unemployment rate)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":783,"value":"### Iterations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":828,"value":"- I was trying to make a chart that enable users to choose a country for the chart. But I decided it is hard to have a overall look at all three countries. So I concat three charts together so that we can see three countries' trends.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":785,"value":"viewof choose = Inputs.select(\n ['Japan', 'US', 'Canada'], { label: \"Choose another country: \", value: 'Japan' }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":790,"value":"chart3 = {\n const line_unemployment = vl.markLine().data(dataSet.filter(d => d.country == choose && d.type =='unemployment')).encode(\n vl.x().fieldT(\"date\").timeUnit('yearmonth'),\n vl.y().fieldQ(\"value\").title('Unemployment Percentage Rate'),\n vl.color().fieldN(\"type\"),\n ).width(550)\n .height(250); \n const line_income = vl.markLine().data(dataSet.filter(d => d.country == choose && d.type =='gdp')).encode(\n vl.x().fieldT(\"date\").timeUnit('yearmonth'),\n vl.y().fieldQ(\"value\").title('US GDP'),\n vl.color().fieldN(\"type\"),\n ).width(550)\n .height(250);\n const line = vl.layer(line_unemployment, line_income).resolve({scale: {y: 'independent'}})\n return line.render()\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"### Consideration\nTo derive this insight, I built a dual Y axis multiline chart, where we can compare the trends of GDP and unemployment rate in Japan, US and Canada since 2000. This idiom can help me complete all the tasks.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":439,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":275,"value":"## Idea 4: \n- Title:\n - Analysis of the changes in video games sales in North America and Japan\n- Description:\n - In this idiom, x axis will be the date, y axis will be the video games sales value. I will use colors to represent different type of video games. By looking at this chart, we can see the overall changes in video games sale.\n- what can be learned from it:\n - Analyzing video game sales in different regions provides insights into consumer preferences and market trends for the gaming industry. It can highlight the impact of unemployment on consumer spending behavior and the broader economy.\n\n#### Insight / Made up insight\nJapan and North America area video sales dropped when unemployment rate peaked in 2019, which suggests that video games are a discretionary spending item for many households, and during times of economic uncertainty, entertainment is not the top priority.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":192,"value":"### Data Abstraction\nFor [Video Games Sales](https://www.kaggle.com/datasets/sidtwr/videogames-sales-dataset)\n- **Dataset Type**: Table, Temporal(one attribute is year);\n- **Attributes**:\n - year: Ordinal, Sequential (temporal);\n - sales: Quantitative, Sequential;\n - type: Categorical;\n- **Derived Attributes**: None\n- **Data Availability**: Static","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":189,"value":"viewof videoGame = navio(videoGameData)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"### Tasks (why)\n- I1_MT: Discover the correlation between the unemployment rate and video game sales (**Discover -> correlation**, Main Task by Lily)\n- I1_ST1: Identify the year when video game market had the highest sales (**Identify -> Features**, Sub Task by Lily)\n- I1_ST2: Compare the trends of different video game types.(**Compare -> trends**, Sub Task by Lily)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":482,"value":"### Prototype","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":491,"value":"bar = {return vl.markBar()\n .data(videoGameData).encode(\n vl.y().aggregate('sum').title('sales').fieldQ('sales'),\n vl.x().timeUnit('year').field('year').title('Year'),\n vl.color().field('type')\n).render()}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"### How\n- Marks: Area\n- Channels:\n - Vertical Position: video game sales, Express\n - Horizontal Position: Year, Express\n - Color hue: different type of video games","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":795,"value":"### Iterations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":821,"value":"- I firstly tried single line chart, which only shows the total sale value in North America. It works but I was thinking maybe it will be better to show different types of video games sales. So I tried another one.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":800,"value":"vl.markLine()\n .width(900).height(600)\n .data(videoGameData).encode(\n vl.y().aggregate('sum').title('sales').fieldQ('sales'),\n vl.x().timeUnit('year').field('year').title('Year'),\n // vl.color().field('type')\n).render()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":825,"value":"- In this multiline chart, different colors represent different types of video games. It can show us the trends of different types of video games but it is hard to show the overall trend. That is why I chose the stacked bar chart at the end.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":797,"value":"vl.markLine()\n .width(900).height(600)\n .data(videoGameData).encode(\n vl.y().aggregate('sum').title('sales').fieldQ('sales'),\n vl.x().timeUnit('year').field('year').title('Year'),\n vl.color().field('type')\n).render()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"### Consideration\nTo derive this insight, I built a multiseries line chart, where we can see the trends of Debt to GDP ratio changes in all countries since 2000. This idiom can help me complete all the tasks.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":441,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":277,"value":"$37","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":104,"value":"### Data Abstraction\n**(I combined all h2b datasets to one dataset for later use)**: For [US H1b dataset](https://www.uscis.gov/tools/reports-and-studies/h-1b-employer-data-hub/h-1b-employer-data-hub-files)\n- **Dataset Type**: Table, Temporal(one attribute is date);\n- **Attributes**:\n - date: Ordinal, Sequential (temporal);\n - value: Quantitative, Sequential;\n - type: Categorical;\n- **Derived Attributes**: None\n- **Data Availability**: Static","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":200,"value":"viewof h1bView = navio(h1b)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"### Tasks (why)\n- I1_MT: Discover the correlation between the unemployment rate and h1b approvals/denials (**Discover -> correlation**, Main Task by Lily)\n- I1_ST1: Identify how h1b approvals and h1b denials changed when unemployment rate increased. (**Identify -> Features**, Sub Task by Lily)\n- I1_ST2: Compare the trends of unemployment rate and h1b approvals/denials.(**Compare -> trends**, Sub Task by Lily)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":496,"value":"### Prototype","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":502,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"### How\n- Marks: Line\n- Channels:\n - Vertical Position: Unemployment rate, H1b numbers, Express\n - Horizontal Position: Year, Express\n - Color hue: different type of data(approvals, denials, unemployment)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":803,"value":"### Iterations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":818,"value":"- I didn't use dual Y axis and it is hard to see the trend of unemployment rate. So I chose to use double Y axis.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":805,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"### Consideration\nTo derive this insight, I built a multiseries line chart, where we can see the changes of unemployment rate, h1b approvals and h1b denials. This idiom can help me complete all the tasks.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":263,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":527,"value":"$3a","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":525,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":84,"value":"### Data Processing","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":119,"value":"**Global debt to gdp ratio dataset**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":86,"value":"- Get all the years in global_debt_gdp dataset","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":88,"value":"global_keys = Object.keys(global_debt_gdp[1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"- Get all the countries in this dataset","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":377,"value":"global_countries = {\n const res = new Set()\n debt_to_gdp_ratio_global.forEach(d => res.add(d.country))\n const ret = []\n for (let r of res){ret.push(r)}\n return ret\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"- format the global_debt_gdp_ration dataset","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":93,"value":"debt_to_gdp_ratio_global = {\n const res = []\n const years = global_keys.slice(0, global_keys.length-1)\n global_debt_gdp.forEach(data => {\n const country = data['General Government Debt (Percent of GDP)']\n \n if (country!=\"\"){\n for (let year of years){\n data[year]!== NaN && res.push({\n country: country,\n date: parseInt(year),\n type:'debt',\n value: parseInt(data[year])\n })\n }\n } \n })\n return res.filter(d => d.date >= 2000)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"**US/Canada/Japan Unemployment rate and GDP dataset**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":134,"value":"- Combine US unemployment dataset and US GDP dataset","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":123,"value":"usData = {\n const data = []\n usunemployment.forEach(d => {\n const time = new Date(d.DATE)\n const yearMonth = new Date(time.getFullYear(), time.getMonth())\n data.push({date: yearMonth, type:'unemployment', value: d.UNRATE, country: 'US'})\n })\n usgdp.forEach(d => {\n const time = new Date(d.DATE)\n const yearMonth = new Date(time.getFullYear(), time.getMonth())\n data.push({date: yearMonth, type:'gdp', value: d.GDP, country: 'US'})\n })\n return data\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"- Combine Canada unemployment dataset and Canada GDP dataset","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":145,"value":"canadaData = {\n const data = []\n canadaunemployment.forEach(d => {\n const time = new Date(d.DATE)\n const yearMonth = new Date(time.getFullYear(), time.getMonth())\n data.push({date: yearMonth, type: 'unemployment', value: d.LRUNTTTTCAM156S, country:'Canada'})\n })\n canadagdp.forEach(d => {\n const time = new Date(d.DATE)\n const yearMonth = new Date(time.getFullYear(), time.getMonth())\n data.push({date: yearMonth, type: 'gdp', value: ((d.NGDPRSAXDCCAQ)/1000)*0.73, country:'Canada'})\n })\n return data\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"- Combine Japan unemployment dataset and Japan GDP dataset","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":151,"value":"japanData = {\n const res = []\n japanunemployment.forEach(d => {\n res.push({\n date: new Date(d.DATE),\n type:'unemployment',\n value: d.LRUN64TTJPM156S,\n country: 'Japan'\n })\n })\n\n japangdp.forEach(d => {\n res.push({\n date: new Date(d.DATE),\n type:'gdp',\n value: d.GDP,\n country: 'Japan'\n })\n })\n return res\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"- Put US, Canada and Japan datasets to one dataset","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":156,"value":"dataSet = {\n const res = []\n // eu_unemployment_rate.forEach(d => res.push(d))\n usData.forEach(d => res.push(d))\n canadaData.forEach(d => res.push(d))\n japanData.forEach(d => res.push(d))\n // ukData.forEach(d => res.push(d))\n return res\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"- **Video Game Sales dataset**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":187,"value":"- Format the video game dataset","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":184,"value":"videoGameData = {\n const res = []\n const temp = {}\n const years = new Set()\n const types = new Set()\n \n videogame.forEach(d => {\n years.add(d.Year_of_Release)\n types.add(d.Genre)\n })\n for (let y of years){\n temp[y] = {}\n for (let t of types){\n temp[y][t] = 0\n }\n }\n\n videogame.forEach(d => {\n temp[d.Year_of_Release][d.Genre] += d.NA_Sales\n })\n for (let i of Object.entries(temp)){\n const year = new Date(i[0])\n for (let j of Object.entries(temp[i[0]])){\n const type = j[0]\n res.push({\n year: year,\n type: type,\n sales:temp[i[0]][type]\n })\n }\n \n }\n return res\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"- **US H1b Dataset**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":237,"value":"- The website only provide h1b dataset from 2009 to 2022","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":232,"value":"h1b_year = {\n const res = []\n for (let i = 2009; i<=2022; i++){\n res.push(i)\n }\n return res\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"- Get total number of approvals and denials of each year","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":240,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"- Create a dataset to combine all years' h1b datasets","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":245,"value":"h1b = {\n const res = []\n for (let year of h1b_year){\n res.push({\n date: new Date(year, 1),\n type: 'approvals',\n value: h1b_dataset[year]['approvals']\n })\n res.push({\n date: new Date(year, 1),\n type: 'denials',\n value: h1b_dataset[year]['denials']\n })\n res.push({\n date: new Date(year, 1),\n type: 'approval rate',\n value: h1b_dataset[year]['approval rate']\n })\n }\n return res\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"chkb = () => htl.html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"import {vl} from \"@vega/vega-lite-api\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"import {navio} from \"@john-guerra/navio\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"global_debt_gdp = await FileAttachment(\"Global_debt_gdp.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"global_debt_gdp","database":"$undefined"},{"id":113,"value":"canadagdp = await FileAttachment(\"canadagdp.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"canadagdp","database":"$undefined"},{"id":116,"value":"japangdp = await FileAttachment(\"japanGDP.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"japangdp","database":"$undefined"},{"id":118,"value":"usgdp = await FileAttachment(\"usgdp.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"usgdp","database":"$undefined"},{"id":125,"value":"usunemployment = await FileAttachment(\"usunemployment.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"usunemployment","database":"$undefined"},{"id":142,"value":"canadaunemployment = await FileAttachment(\"canadaunemployment.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"canadaunemployment","database":"$undefined"},{"id":148,"value":"japanunemployment = await FileAttachment(\"japanUnemployment.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"japanunemployment","database":"$undefined"},{"id":178,"value":"videogame = await FileAttachment(\"videoGame.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"videogame","database":"$undefined"},{"id":203,"value":"h1b_2009 = await FileAttachment(\"h1b_datahubexport-2009.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"h1b_2009","database":"$undefined"},{"id":206,"value":"h1b_2010 = await FileAttachment(\"h1b_datahubexport-2010.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"h1b_2010","database":"$undefined"},{"id":207,"value":"h1b_2012 = await FileAttachment(\"h1b_datahubexport-2012.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"h1b_2012","database":"$undefined"},{"id":208,"value":"h1b_2014 = await FileAttachment(\"h1b_datahubexport-2014.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"h1b_2014","database":"$undefined"},{"id":209,"value":"h1b_2016 = await FileAttachment(\"h1b_datahubexport-2016.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"h1b_2016","database":"$undefined"},{"id":210,"value":"h1b_2018 = await FileAttachment(\"h1b_datahubexport-2018.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"h1b_2018","database":"$undefined"},{"id":211,"value":"h1b_2019 = await FileAttachment(\"h1b_datahubexport-2019.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"h1b_2019","database":"$undefined"},{"id":212,"value":"h1b_2020 = await FileAttachment(\"h1b_datahubexport-2020.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"h1b_2020","database":"$undefined"},{"id":213,"value":"h1b_2021 = await FileAttachment(\"h1b_datahubexport-2021.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"h1b_2021","database":"$undefined"},{"id":214,"value":"h1b_2017 = await FileAttachment(\"h1b_datahubexport-2017.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"h1b_2017","database":"$undefined"},{"id":215,"value":"h1b_2015 = await FileAttachment(\"h1b_datahubexport-2015.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"h1b_2015","database":"$undefined"},{"id":216,"value":"h1b_2011 = await FileAttachment(\"h1b_datahubexport-2011.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"h1b_2011","database":"$undefined"},{"id":217,"value":"h1b_2013 = await FileAttachment(\"h1b_datahubexport-2013.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"h1b_2013","database":"$undefined"},{"id":218,"value":"h1b_2022 = await FileAttachment(\"h1b_datahubexport-2022.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"h1b_2022","database":"$undefined"}],"files":"$W3c","stdlib":"1","titling":"auto"}} 32:"$31:body"