2d:null 2e:["$","title",null,{"children":"IAT355 Final Project | doriswang0117 | Observable"}] 33:T4b3,md` In our case, there are total **20 dimensions** of the data set:

**Nominal:**

Major_code: Major code, FO1DP in ACS PUMS

Major: Major description

Major_category: Category of major

**Quantitative:**

Total: Total number of people with major

Sample_size: Sample size (unweighted) of full-time, year-round ONLY (used for earnings)

Men: Male graduates

Women: Female graduates

ShareWomen: Women as share of total

Employed: Number employed

Full_time: Employed 35 hours or more

Part_time: Employed less than 35 hours

Full_time_year_round: Employed at least 50 weeks (WKW == 1) and at least 35 hours (WKHP >= 35)

Unemployed: Number unemployed

Unemployment_rate: Unemployed/(Unemployed + Employed)

Median: Median earnings of full-time, year-round workers

P25th: 25th percentile of earnings

P75th: 75th percentile of earnings

College_jobs: Number with job requiring a college degree

Non_college_jobs: Number with job not requiring a college degree

Low_wage_jobs: Number in low-wage service jobs

`34:T47f,VegaLite({ data: { values: data }, hconcat: [ { mark: { type: "bar", tooltip: { content: "data" } }, selection: { major_select: { type: "single", on: "click" } }, title: 'The number of men in each major', encoding: { x: { field: "Major_category", type: "nominal" }, y: { field: "Women", type: "quantitative" }, color: { condition: { selection: "major_select", field: "Major_category", type: "nominal" }, value: "lightgray" } } }, { mark: { type: "bar", tooltip: { content: "data" } }, selection: { major_select: { type: "single", on: "click" } }, title: 'The number of women in each major', encoding: { x: { field: "Major_category", type: "nominal" }, y: { field: "Men", type: "quantitative" }, color: { condition: { selection: "major_select", field: "Major_category", type: "nominal" }, value: "lightgray" } } } ] })35:Te65,VegaLite({ data: { values: data }, hconcat: [ { vconcat: [ { transform: [ { filter: { field: "Unemployment_rate", lte: UErange[1] } }, { filter: { field: "Unemployment_rate", gte: UErange[0] } } ], width: 350, height: 250, mark: { type: "circle", tooltip: { content: "data" }, opacity: 0.7, stroke: "black", strokeWidth: 1 }, selection: { major_select: { type: "single", on: "click" } }, title: 'The Unemployment Rate in Women Vision', encoding: { x: { field: "Unemployment_rate", type: "quantitative", axis: { labelAngle: 0 } }, y: { field: "Major_category", type: "nominal" }, size: { field: "Women", type: "quantitative", legend: { title: "Size of men/women in major", clipHeight: 50 }, scale: { range: [0, 400] } }, color: { condition: { selection: "major_select", field: "Major_category", type: "nominal", legend: null }, value: "lightgray" } } }, { transform: [ { filter: { field: "Unemployment_rate", lte: UErange[1] } }, { filter: { field: "Unemployment_rate", gte: UErange[0] } } ], width: 350, height: 250, mark: { type: "circle", tooltip: { content: "data" }, opacity: 0.7, stroke: "black", strokeWidth: 1 }, selection: { major_select: { type: "single", on: "click" } }, title: 'The Unemployment Rate in Men Vision', encoding: { x: { field: "Unemployment_rate", type: "quantitative", axis: { labelAngle: 0 } }, y: { field: "Major_category", type: "nominal" }, size: { field: "Men", type: "quantitative", legend: { title: "Size of men/women in major", clipHeight: 80 } }, color: { condition: { selection: "major_select", field: "Major_category", type: "nominal", legend: null }, value: "lightgray" } } } ] }, { mark: { type: "point", tooltip: { content: "data" } }, transform: [ { filter: { field: "Unemployment_rate", lte: UErange[1] } }, { filter: { field: "Unemployment_rate", gte: UErange[0] } } ], selection: { major_select: { type: "single", on: "click" }, pts: { type: "single", on: "click" }, area: { type: "interval" } }, encoding: { x: { field: "ShareWomen", type: "quantitative" }, y: { field: "Unemployment_rate", type: "quantitative" }, color: { condition: { selection: { or: ["area", "pts", "major_select"] }, field: "Major_category", type: "nominal" }, value: "gray" }, shape: { field: "Major_category", type: "nominal" } } } ] })36:T46f,md`Our team provide multiple visualizations for the question since the question requests us to evaluate the major that has more female participants would and whether it would have a higher unemployment rate compared to a major that has more male participants. Because of the trick question, our team decided to use a bubble chart to present the data, choosing the unemployment-rate as the x-axis. With this setting, the users can quickly locate the major-category(y-axis) and size for each rate. By analyzing the graph, our team recognizes that female participants generally has more unemployment in most majors compared to the male participant. Therefore, we decide to create another scatter-plot visualization which helps us to have a better conclusion. Rather than just plots, we applied shape to it too, which allowed users to identify the category of major. The x-axis refers to the ShareWomen rate and the y -axis refers to the unemployment-rate. Since the visualization displays a scattered result, indicating that there is no correlation, we believe that the unemployment rate is not in proportion to the rate of ShareWomen. `37:Tcc0,VegaLite({ data: { values: data }, hconcat: [ { selection: { employed: { type: "single", on: "mouseover" }, major: { type: "single", fields: ["Major_category"], bind: { input: "select", options: [ "null", "Agriculture & Natural Resources", "Arts", "Biology & Life Science", "Business", "Communications & Journalism", "Computers & Mathematics", "Education", "Engineering", "Health", "Humanities & Liberal Arts", "Industrial Arts & Consumer Services", "Interdisciplinary", "Law & Public Policy", "Physical Sciences", "Psychology & Social Work", "Social Science" ] } } }, transform: [ { filter: { field: "Median", lte: range[1] } }, { filter: { field: "Median", gte: range[0] } } ], mark: { type: "rect", tooltip: { content: "data" } }, width: 300, height: 300, title: 'The number of graduates and amount of employed in different majors', encoding: { y: { field: "Total", type: "quantitative", title: "Total" }, x: { field: "Major_category", type: "nominal", title: "Major_category" }, color: { condition: { selection: { or: ["employed", "major"] }, field: "Employed", type: "quantitative" }, value: "lightgray" } } }, { transform: [ { filter: { field: "Median", lte: range[1] } }, { filter: { field: "Median", gte: range[0] } } ], mark: { type: "circle", tooltip: { content: "data" } }, width: 300, height: 300, title: 'The mean of income and amount of employed in different majors', selection: { pts: { type: "single", on: "click" }, area: { type: "interval" }, major: { type: "single", fields: ["Major_category"], bind: { input: "select", options: [ "null", "Agriculture & Natural Resources", "Arts", "Biology & Life Science", "Business", "Communications & Journalism", "Computers & Mathematics", "Education", "Engineering", "Health", "Humanities & Liberal Arts", "Industrial Arts & Consumer Services", "Interdisciplinary", "Law & Public Policy", "Physical Sciences", "Psychology & Social Work", "Social Science" ] } } }, encoding: { y: { field: "Median", type: "quantitative" }, x: { field: "Employed", type: "quantitative" }, color: { condition: { selection: { or: ["area", "pts", "major"] }, field: "Major_category", type: "nominal" }, value: "gray" } } } ] })38:T4cd,md`For 3rd visualization, it discussed if the popular major can be a booster for the student when they are looking for a job and increase their income? For the data dimensions, our team put Major_category as “nominal”, total participants as “quantitative” and the employed students as “quantitative”. For the left graph, we applied the bar chart to show the number of participants in different majors. At the same time, using a gradient to indicate majors that lead to higher employment. The scatter plots graph on the right-side display Mediam of income(y-axis) and the amount of employed(x-axis) for each major (identity by colors). Browsing the bar chart, Psychology and Social Work are the most popular major, and work with the interactive approaches which are not hard for us to get the conclusion that the most popular major doesn't guarantee a higher income and ease of employment. Additionally, we realize that the highest income major is Engineering, but Engineering is not one of the popular majors shown on the bar chart. Lastly, the Business and Biology & Life Science are also popular, but the employed people are not in the positive proportion to a high rate of employed. Therefore, the answer is no. `39:T53f,VegaLite({ data: { values: data }, hconcat: [ { mark: { type: "bar", tooltip: { content: "data" } }, selection: { major_select: { type: "single", on: "click" } }, title: 'The women of total graduates in different majors', encoding: { x: { field: "Major_category", type: "nominal" }, y: { field: "ShareWomen", type: "quantitative" }, color: { condition: { selection: "major_select", field: "Major_category", type: "nominal" }, value: "lightgray" } } }, { mark: { type: "point", tooltip: { content: "data" } }, selection: { major_select: { type: "single", on: "click" }, pts: { type: "single", on: "click" }, area: { type: "interval" } }, title: 'The relationship between women of total and the mean of income', encoding: { x: { field: "ShareWomen", type: "quantitative" }, y: { field: "Median", type: "quantitative" }, color: { condition: { selection: { or: ["area", "pts", "major_select"] }, field: "Major_category", type: "nominal" }, value: "gray" }, shape: { field: "Major_category", type: "nominal" } } } ] })3a:T5bc,VegaLite({ data: { values: data }, vconcat: [ { transform: [ { filter: { field: "Major_category", oneOf: ch } } ], mark: { type: "bar", tooltip: { content: "data" } }, title: 'The mean of income of majors', selection: { major_select: { type: "single", on: "click" } }, encoding: { y: { field: "Major_category", type: "nominal" }, x: { field: "Median", type: "quantitative" }, color: { condition: { selection: "major_select", field: "Major_category", type: "nominal" }, value: "lightgray" } } }, { transform: [ { filter: { field: "Major_category", oneOf: ch } } ], mark: { type: "bar", tooltip: { content: "data" } }, title: 'The unemployment rate for majors', selection: { major_select: { type: "single", on: "click" } }, encoding: { y: { field: "Major_category", type: "nominal" }, x: { field: "Unemployment_rate", type: "quantitative" }, color: { condition: { selection: "major_select", field: "Major_category", type: "nominal" }, value: "lightgray" } } } ] })3b:T4fd,md`The visualization applied a bar chart and sets the data dimensions as a category of majors. For this research question, we discussed whether it is hard for high-salary major students to find their corresponding job. In this case, the bar chart would accurately present the outcome for each major and it is quite convenient to compare them with this graph. Based on the graph, the result is not obvious enough to provide our point, but there are a few data points that could be evidence to support the point which a high salary major may also come with a high rate of unemployment. Detailed analysis of the visualization provided: It is not difficult to find that the highest average income is engineering, followed by business and physical science, and the lowest average income is communications. Although engineering has the highest income and unemployment rate, business and physical science do not show it. At the same time, communications did not have a low unemployment rate. It is not difficult to see that the incomes of computers and laws with higher unemployment rates are not high. If the explanation is not very clear, we might as well use the advantages of the checkbox to check the 6 majors mentioned above, and we can draw the conclusion relatively clearly. `3c:Ta95,md`For the interaction part, we prepared a few approaches which allow us to manage and apply them for to different type of visualizations:

1.The mouse-hover function: We applied this interactive function a lot for this project. By using the “tooltip” to display the detailed information when the mouse hovered on certain bars, bubbles or plots. Our team imports this function for the visualizations of question 1, 2, 3, 4 and 5 which provide more details to any potential user.

2.The “onclick” function: For this interactive approach, our team set the “click” for the “on” function in the selection. It helps any users to obtain the importance bar, plot or bubble since the mouse clicking would make the rest of the graph becomes color-gray. In this case, the wanted information will be “highlight” from the graph. In addition, it also can find the corresponding bar, bubble or plots in the multiple visualizations situation. For example, click any bar in visualizations of question1, then the corresponding bars will be highlighted as a pair from the right and left graph. The approach applied for the visualization of question 1, 2, 3, 4, and 5.

3.The slider function: The purpose of this slider interactive function which is to allow user custom their range of dimension. Additionally, it provides users with a detailed view of some visualizations. From the coding aspect, we created a “range” function for the slider bar; then applied this "range" function to the transform and acquire the “actual range” by "filter". After the user moves the slider, the graph will be horizontally or vertically zoom in/out base on the user's need. The slider approach import for the visualizations of question 2 and 3.

4.The checkbox function: Our team only applied this interactive function for question5 because we want to narrow the user’s view only for their need. Therefore, the corresponding bar will only be displayed when the user checks the matching box. For the coding part, we create a “ch” function to list out all major-category, then display them after filter the argument which obtains from the “oneOf” function. With this function, users are able to custom their view as they need.

5.The drop-down function: Only for visualizations of quesiton3, we set up a drop-down menu that helps the user to select any specific major. After the user made the selection, the corresponding major will be highlighted. To do that, we set a “major” variable for “selection” and list all major-category as “options”(array); set “select” type for this “bind” function. Then pass them to the “condition” function. `3d:[] 31:{"id":"27568961416f8ec8","slug":"iat355-final-project","title":"IAT355 Final Project","thumbnail":"ce8186f5e5dc7d7599dff8f97ac15ccd514c10520830ae36d556a59dfa973f75","access_level":"public","create_time":"$D2020-11-19T12:55:13.749Z","update_time":"$D2020-12-12T05:45:01.872Z","view_time":null,"first_public_time":"$D2020-12-12T05:42:48.413Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"3209b95f726d5de2","login":"doriswang0117","name":"","avatar_url":"https://avatars-next.observableusercontent.com/019acefcebcf316cd204ba734122b77572c34f123ff0ef02de83747ac0d91fdd","tier":"starter_2024"},"version":1124,"publish_version":1124,"role":null,"authored":false,"authors":[{"type":"individual","id":"71f300f1d80fc35f","login":"doriswang0117","name":"","avatar_url":"https://avatars-next.observableusercontent.com/019acefcebcf316cd204ba734122b77572c34f123ff0ef02de83747ac0d91fdd","tier":null}],"members":[{"type":"individual","id":"71f300f1d80fc35f","login":"doriswang0117","name":"","avatar_url":"https://avatars-next.observableusercontent.com/019acefcebcf316cd204ba734122b77572c34f123ff0ef02de83747ac0d91fdd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":null,"type":"notebook","body":{"title":"IAT355 Final Project","cells":[{"id":0,"value":"md`# IAT355 Final Project`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"md`#### By Jiayi Wang, Tony Yang`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"md`\n\n- [Overview](#overview)\n\n- [Introduction](#introduction)\n\n- [Problem/Domain Questions](#questions)\n\n- [Data](#data_set)\n\n- [Visualization Design](#visualization)\n\n- [Funture Work](#future)\n\n- [Interactions & Design Choices](#choices)\n\n- [Feasibility Pilot](#feasibility_pilot\n) \n\n- [What Wasn't Implemented](#unimplemented)\n\n- [Conclusion](#conclusion)\n\n- [Demo Video Linl](#demo)\n\n- [Data Setting](#data_setting)\n\n- [Library & Moddules](#lib)\n\n- [References](#reference)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"overview = md`## Overview`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"md`This report analyzes what factors can influence American graduate students’ employability. Base on the data collected from the American Community Survey 2010-2012, the report is focuses whether a student’s choice of Major can affect their employment or salary upon graduation. Additionally, we ask if choosing a more in-demand Major would boost student employability or not. Besides Major selection, the report also considers if gender would be one of the factors that influences employers. From this report, we will be looking for the relationship between these factors and find their real impact on graduated students with evidence by using statistical graphs and data analysis.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"introduction = md`## Introduction`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"md`#### Scope`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"md`\nThe project is designed to help recent graduate students and new students from post-secondary in America to understand the factors that will affect their employment and career.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"md`#### Users/Audience`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"md`\n
1.The audiences/user could be the freshmen college/university students who can reference our findings to help them choose their major.
\n
2. The student who just graduate from post-secondary and consider to get a job.
\n
3.The scholars who needs to research the impact between major/gender problem and employed stuitation.
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"questions = md`## Problem/Domain Questions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"md`\n
Which majors are more popular amongst students of each gender?
\n
Does the major that has more female participation come with a higher unemployment rate than men?
\n
Would the popular majors also have a higher income and employment rate?
\n
Does the major with more women participation will bring a low wage?
\n
Is it hard for a student from a high salary major to find a job?
\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"data_set = md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"md`### a. Sources`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"md`**Github:** https://github.com/fivethirtyeight/data/blob/master/college-majors/recent-grads.csv`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"md`**MyGist:**https://gist.githubusercontent.com/DorisWang0117/5c2c3cf6b6b0d0fdf451ff5ecfb838e7/raw/8209f4294d4efd5a336272eb2e9f22e7ce93feb7/recent-grads.csv`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"md`### b. Dimentions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"md`### c. Any “cleaning”\tor\tother\tmanipulations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"md`As the result shown below, we can see that there are total 6 missing datas of four dimensions, which are Total, Men, Women, ShareWomen`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"{\n let TotalMissValue = dataframeNew.countValue('', \"Total\");\n return md`* Found **${TotalMissValue}** missing values in **Total**`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"{\n let MenMissValue = dataframeNew.countValue('', \"Men\");\n return md`* Found **${MenMissValue}** missing values in **Men**`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"{\n let WomenMissValue = dataframeNew.countValue('', \"Women\");\n return md`* Found **${WomenMissValue}** missing values in **Women**`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"{\n let ShareWomenMissValue = dataframeNew.countValue('', \"ShareWomen\");\n return md`* Found **${ShareWomenMissValue}** missing values in **ShareWomen**`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"{\n let SampleSizeMissValue = dataframeNew.countValue('', \"Sample_size\");\n return md`* Found **${SampleSizeMissValue}** missing values in **Sample_size**`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"{\n let EmployedMissValue = dataframeNew.countValue('', \"Employed\");\n return md`* Found **${EmployedMissValue}** missing values in **Employed**`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"{\n let PartTimeMissValue = dataframeNew.countValue('', \"Part_time\");\n return md`* Found **${PartTimeMissValue}** missing values in **Part_time**`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"{\n let FullTimeMissValue = dataframeNew.countValue('', \"Full_time\");\n return md`* Found **${FullTimeMissValue}** missing values in **Full_time**`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"{\n let PartTimeYearMissValue = dataframeNew.countValue(\n '',\n \"Full_time_year_round\"\n );\n return md`* Found **${PartTimeYearMissValue}** missing values in **Full_time_year_round**`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"{\n let UnemployedMissValue = dataframeNew.countValue('', \"Unemployed\");\n return md`* Found **${UnemployedMissValue}** missing values in **Unemployed**`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"{\n let UnemploymentRayeMissValue = dataframeNew.countValue(\n '',\n \"Unemployment_rate\"\n );\n return md`* Found **${UnemploymentRayeMissValue}** missing values in **Unemployment_rate**`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"{\n let MedianMissValue = dataframeNew.countValue('', \"Median\");\n return md`* Found **${MedianMissValue}** missing values in **Median**`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"{\n let P25thMissValue = dataframeNew.countValue('', \"P25th\");\n return md`* Found **${P25thMissValue}** missing values in **P25th**`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"{\n let P75thMissValue = dataframeNew.countValue('', \"P75th\");\n return md`* Found **${P75thMissValue}** missing values in **P75th**`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"{\n let College_jobsMissValue = dataframeNew.countValue('', \"College_jobs\");\n return md`* Found **${College_jobsMissValue}** missing values in **College_jobs**`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"{\n let Non_college_jobsMissValue = dataframeNew.countValue(\n '',\n \"Non_college_jobs\"\n );\n return md`* Found **${Non_college_jobsMissValue}** missing values in **Non_college_jobs**`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"{\n let Low_wage_jobsMissValue = dataframeNew.countValue('', \"Low_wage_jobs\");\n return md`* Found **${Low_wage_jobsMissValue}** missing values in **Low_wage_jobs**`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"md`
As a result, I replace those missing datas with zero`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"//I replaced those missing datas with zero in order to keep the usability of the data set\n//I just replaced the missing data for these four dimensions, because I checked the missing data for each dimension below, and got the result that there are total 8 missing data of these four dimensions\ndataframeNew = dataframe\n .replace('0', '', \"Total\")\n .replace('0', '', \"Men\")\n .replace('0', '', \"Women\")\n .replace('0', '', \"ShareWomen\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"visualization = md`## Visualization Design`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"md`### 1.Which majors are more popular amongst students of each gender?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":807,"value":"viewof gender = radio({\n title: 'Or select gender to see the popularity of major in men and women',\n description: 'Please select one',\n options: [\n {\n label: 'Men',\n value: 'Men'\n },\n { label: 'Women', value: 'Women' }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":813,"value":"{\n if (gender == \"Men\") {\n return VegaLite({\n data: { values: data },\n mark: \"bar\",\n encoding: {\n x: { field: \"Major_category\", type: \"nominal\" },\n y: { field: \"Men\", type: \"quantitative\" },\n color: { field: \"Major_category\", type: \"nominal\" }\n }\n });\n } else if (gender == \"Women\") {\n return VegaLite({\n data: { values: data },\n mark: \"bar\",\n encoding: {\n x: { field: \"Major_category\", type: \"nominal\" },\n y: { field: \"Women\", type: \"quantitative\" },\n color: { field: \"Major_category\", type: \"nominal\" }\n }\n });\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1084,"value":"md`#### About visualizations:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":953,"value":"md`The multiple visualizations above represents the popularity of each major-category based on the number of students in that major. The data dimension for this graph is 16 categories of major provided from the database, such as Arts, Education, Engineering, and so on. Our team applies the dimension of Men/Women participants in each major for the y-axis. Moreover, the visualization idiom is a bar chart since they are representing a comparison of quantity(number of the student). By using the bar chart, it is quite easy to recognize the popular level for each major. For men it is Business and the women’s will be Psychology. Interdisciplinary and Agriculture are unpopular both for men and women. In this case, the bar chart could clearly display all the among for each dimension.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":676,"value":"md`### 2.Does the major that has more female participation come with a higher unemployment rate than men?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":751,"value":"viewof UErange = rangeSlider({\n min: d3.min(data, d => d.Unemployment_rate),\n max: d3.max(data, d => d.Unemployment_rate),\n value: this ? this.value : [0, 1],\n title: \"Unemployment Rate\",\n description: \"Filtering by unemployment rate\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":669,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1088,"value":"md`#### About visualizations:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":998,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":589,"value":"md`### 3.Would the popular majors also have a higher income and employment rate?\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":734,"value":"viewof range = rangeSlider({\n min: d3.min(data, d => d.Median),\n max: d3.max(data, d => d.Median),\n value: this ? this.value : [22000, 50000],\n title: \"Income\",\n description: \"Filtering by income\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":731,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1089,"value":"md`#### About visualizations:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":979,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":591,"value":"md`### 4.Does the major with more women participation will bring a low wage?\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":550,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1091,"value":"md`#### About visualizations:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1018,"value":"md`Multiple visualizations are applied for this question, and the question tried to prove the correlation between the number of female participants (ShareWomen rate) and the median income for that major. Basically, our visualizations show a major with more female participants will have more possibility to result in a low income. Through the bar chart, we realize the majors like Education or Health have a higher rate of Sharewomen. Then, we could easily find these major in the scatterplots graph and they located at a lower income range (in a range of 0-100k) through the unique color and shape. In conclusion, there is a correlation between a women majority major resulting in a low income job.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":916,"value":"md`### 5. Is it hard for a student from a high salary major to find a job?\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"viewof ch = checkbox([\n \"Agriculture & Natural Resources\",\n \"Arts\",\n \"Biology & Life Science\",\n \"Business\",\n \"Communications & Journalism\",\n \"Computers & Mathematics\",\n \"Education\",\n \"Engineering\",\n \"Health\",\n \"Humanities & Liberal Arts\",\n \"Industrial Arts & Consumer Services\",\n \"Interdisciplinary\",\n \"Law & Public Policy\",\n \"Physical Sciences\",\n \"Psychology & Social Work\",\n \"Social Science\"\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":848,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1093,"value":"md`#### About visualizations:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":945,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"choices = md`## Interactions & Design Choices`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1022,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1037,"value":"feasibility_pilot = md`## Feasibility Pilot`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1042,"value":"md`We invited a friend to test our design. Base on her feedback, we can improve on certain places(listed below):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1045,"value":"md`\n
The breakdown is not necessary for the visualizations of question1 since the view will only need general information about the major-category.\n
\n
For the slider label, it is better to refer by percentage. Our team used decimals for this part which is not perfect to present the “rate”.\n
\n
The reason for bubble size is not clear. Probably the graph is too big which makes the legend hid from the display area. \n
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"unimplemented = md`## What Wasn't Implemented`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1028,"value":"md`The line graph could be an option for our data set. Especially for the visualizations of question2, line graph can clearly present the trend of men and women unemployment rate since we want to compare these two dimensions. The difference will be pretty obvious. However, we find out the line graph usually uses time as an axis which would not be relevant to our data. Therefore, our team abandoned the line graph and pick the bubble chart.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1080,"value":"future = md`## Future Work`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1075,"value":"md`For this version, our team realized that our design of visualizations is monotonous at some level, so we will try to import more design elements to create a better format for our next version. Besides, some of the interactive function is unnecessary for certain visualizations. Therefore, we will try to avoid it by applying the interactive function to a single visualization which makes it more customized. Additionally, our team will also improve the areas that the tester provided to us to make content more clear for users.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"conclusion = md`## Conclusion`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"md`Overall, the visualization helps our team to estimate the result for each research question in a higher accurate level through data analyzation. From these visualizations, we recognized that \nthe in-demand major may not benefit student for their future career from the employment state and salary. However, the society still possible trade female worker not as fair as male workers base on the result of question4.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1117,"value":"demo = md`## Demo Video Link`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1119,"value":"md`https://vimeo.com/490075990`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"data_setting = md`## Data Setting`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"dataframe = dfjs.DataFrame.fromCSV(\n 'https://gist.githubusercontent.com/DorisWang0117/5c2c3cf6b6b0d0fdf451ff5ecfb838e7/raw/8209f4294d4efd5a336272eb2e9f22e7ce93feb7/recent-grads.csv'\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"data1 = dataframeNew.toCollection()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"data = d3.csv(\n \"https://gist.githubusercontent.com/DorisWang0117/5c2c3cf6b6b0d0fdf451ff5ecfb838e7/raw/8209f4294d4efd5a336272eb2e9f22e7ce93feb7/recent-grads.csv\",\n function(d) {\n return {\n Rank: +d.Rank,\n Major_code: +d[\"Major_code\"],\n Major: d.Major,\n Total: +d.Total,\n Men: +d.Men,\n Women: +d.Women,\n Major_category: d[\"Major_category\"],\n ShareWomen: +d.ShareWomen,\n Sample_size: +d[\"Sample_size\"],\n Employed: +d.Employed,\n Full_time: +d[\"Full_time\"],\n Part_time: +d[\"Part_time\"],\n Full_time_year_round: +d[\"Full_time_year_round\"],\n Unemployed: +d.Unemployed,\n Unemployment_rate: +d[\"Unemployment_rate\"],\n Median: +d.Median,\n P25th: +d.P25th,\n P75th: +d.P75th,\n College_jobs: +d[\"College_jobs\"],\n Non_college_jobs: +d[\"Non_college_jobs\"],\n Low_wage_jobs: +d[\"Low_wage_jobs\"]\n };\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"lib = md`## Libraries and Modules`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"import { vl } from '@vega/vega-lite-api'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"import { radio } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"import { rangeSlider } from '@mootari/range-slider'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"import { select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":570,"value":"import { checkbox } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"VegaLite = require(\"vega-embed@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"dfjs = require('https://bundle.run/dataframe-js@1.3.2')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"reference = md`## References\tand\tappendices.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"md`\n
https://github.com/fivethirtyeight/data/blob/master/college-majors/recent-grads.csv
\n
https://gist.githubusercontent.com/DorisWang0117/5c2c3cf6b6b0d0fdf451ff5ecfb838e7/raw/8209f4294d4efd5a336272eb2e9f22e7ce93feb7/recent-grads.csv
\n
https://observablehq.com/@sfu-iat355/week-3-getting-started-with-data
\n
https://observablehq.com/@sfu-iat355/week-3-vega-lite-exploring-visual-forms
\n
https://vega.github.io/vega-lite/examples/histogram.html
\n
https://observablehq.com/@sfu-iat355/week-6-interaction-1
\n
https://observablehq.com/@sfu-iat355/data-inspection-and-cleaning
\n
https://observablehq.com/@sfu-iat355/week-5-visual-forms-continued/2
\n
https://observablehq.com/@sfu-iat355/passing-signals-between-cells/4
\n
https://observablehq.com/@sfu-iat355/week-6-interaction-1/2
\n
https://observablehq.com/@sfu-iat355/week-5-visual-forms-continued
\n
https://observablehq.com/@sfu-iat355/week-3-vega-lite-exploring-visual-forms/2
\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3d","stdlib":"1","titling":"auto"}} 32:"$31:body"