You can play again with new question content or return home to learn more about the project!
21 | play again 22 |time
15 |::
16 |score
19 | 20 |country selection impacts the dataset used in the quiz
19 |
23 | 
26 | 
29 | time
24 |::
25 |score
28 | 29 |Think you know how much people are being paid?
17 |
28 | 
37 | do you know what people are being paid?
20 |
30 | I recently learned that bargaining power significantly impacts a person’s earnings... but I suck at bargaining.
31 |
32 | After thinking about why, I realized it’s because Iassume the other person has more information and they’re making a fair
33 | assessment of my value.
34 |
35 | That is rarely that case when it comes to wages.
36 |
37 | I made this website because I think it’s important for us to know how our labour is being valued - even if it’s an estimate.
38 |
39 | The quiz utilizes government survey data between 2017 - 2021. You can read more about it in the methodology linked
40 | in the footer.
41 |
48 | I made this video about the importance of bargaining power and information when it comes to how much we make. 49 |
50 |58 | You can also look at all the data in tables here: 59 |
60 | 61 | US Data 62 | 63 | UK Data 64 | 65 | CAN Data 66 | 67 |
`
17 |
18 |
19 | let usa_flag = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/flag-united-states_1f1fa-1f1f8.png";
20 | let uk_flag = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/325/flag-united-kingdom_1f1ec-1f1e7.png";
21 |
22 |
23 | var guess;
24 | var answer;
25 |
26 | // variables for timer
27 | let second = 00;
28 | let minute = 00;
29 | let hour = 00;
30 | let elapsed;
31 |
32 | // Events
33 |
34 | const questionNumber_fromDoc = document.querySelector('.question-number');
35 | const occupation_fromDoc = document.querySelector('.occupation');
36 | const country_fromDoc = document.querySelector('.country');
37 | const medianSalary_fromDoc = document.querySelector('.medianSalary');
38 | const generatedSalary_fromDoc = document.querySelector('.generatedSalary');
39 |
40 | const score_fromDoc = document.querySelector('.score');
41 | const hr = document.querySelector('.hour')
42 | const min = document.querySelector('.minute')
43 | const sec = document.querySelector('.second')
44 |
45 | // core game functions
46 |
47 | function generateSalary() {
48 | return Math.round(Math.random()*(MAX_SALARY-MIN_SALARY)+MIN_SALARY);
49 | };
50 |
51 | function formatSalary(country, unformattedSalary) {
52 | let currencySymbol;
53 | if (country == "Canada" | "USA"){
54 | currencySymbol = "$";
55 | } else if (country== "UK") {
56 | currencySymbol = "£";
57 | }
58 | return currencySymbol + unformattedSalary.toLocaleString('en-US');
59 | }
60 |
61 | function makeGuess(choice){
62 | guess = choice;
63 | evaluateGuess();
64 | }
65 |
66 | function generateQuestion() {
67 | questionNumber_fromDoc.textContent = `Question ${questionNumber}`;
68 | let i = Math.floor(Math.random()*DATA.length); // it would be better to make this a weighted average based on our subs
69 |
70 | // generate a salary that definitely isn't equal to the median (guaranteeing an over vs under situation)
71 | let generatedSalary = generateSalary()
72 | while (generatedSalary == DATA[i].medianSalary){
73 | generatedSalary = generateSalary();
74 | }
75 |
76 | // answer is true if the generatedSalary is greater than the median
77 |
78 | answer = (generatedSalary > DATA[i].medianSalary);
79 |
80 | // send info to html
81 | score_fromDoc.textContent = score;
82 |
83 | switch (DATA[i].country){
84 | case DATA[i].country == "Canada":
85 | country_fromDoc.textContent = canada_flag
86 | break;
87 | }
88 | occupation_fromDoc.textContent = DATA[i].occupation;
89 | country_fromDoc.textContent = canada_flag;
90 | generatedSalary_fromDoc.textContent = formatSalary(DATA[i].country, generatedSalary);
91 | };
92 |
93 | function evaluateGuess(){
94 | if (guess == answer){
95 | score ++;
96 | score_fromDoc.textContent = score;
97 | } else {
98 | console.log("wrong")
99 | }
100 | if (questionNumber == MAX_QUESTIONS){
101 | closeOutGame();
102 | } else {
103 | questionNumber ++;
104 | generateQuestion();
105 | }
106 | };
107 |
108 | function closeOutGame(){
109 | window.location.replace("results.html");
110 | }
111 |
112 | // timer functions
113 |
114 | function start(){
115 | // every second, elapsed
116 | addTime()
117 | timer = setInterval(addTime, 1000)
118 | }
119 |
120 | function convertToString(e){
121 | if (e < 10){
122 | e = `0${e}`;
123 | }
124 | return e;
125 | }
126 |
127 | function addTime(){
128 | second++;
129 | if (second === 60){
130 | minute++;
131 | second = 00
132 | }
133 | if (minute === 60){
134 | hour++;
135 | minute = 00
136 | }
137 | hr.textContent = convertToString(hour);
138 | min.textContent = convertToString(minute);
139 | sec.textContent = convertToString(second);
140 |
141 | }
142 |
143 | // run when page opens
144 | sessionStorage.clear();
145 | generateQuestion();
146 | start();
--------------------------------------------------------------------------------
/Data Processing/raw data/CAN median.csv:
--------------------------------------------------------------------------------
1 | Description,2017,2018,2019,2020,2021
2 | "Total employees, all occupations",840,865.2,900,961.6,980.1
3 | Management occupations [0],"1,615.25","1,634.80","1,730.80","1,800.00","1,875.00"
4 | Senior management occupations [00],"1,887.00","2,115.20","2,115.38","2,307.60","2,223.70"
5 | Specialized middle management occupations [01-05],"1,730.80","1,750.02","1,846.13","1,923.20","1,980.80"
6 | Middle management occupations in retail and wholesale trade and customer services [06],"1,249.88","1,269.38","1,200.00","1,320.00","1,350.00"
7 | "Middle management occupations in trades, transportation, production and utilities [07-09]","1,591.20","1,589.60","1,730.70","1,680.00","1,750.00"
8 | "Business, finance and administration occupations [1]",865.5,881.6,923.2,961.6,"1,000.00"
9 | Professional occupations in business and finance [11],"1,230.40","1,250.00","1,298.25","1,346.00","1,384.50"
10 | Administrative and financial supervisors and administrative occupations [12],877.5,900,940.17,961.6,"1,000.00"
11 | "Finance, insurance and related business administrative occupations [13]",854.4,865.2,900,961.6,988.56
12 | Office support occupations [14],700,735,747.25,769.2,792
13 | "Distribution, tracking and scheduling co-ordination occupations [15]",769.2,769.2,800,840,870
14 | Natural and applied sciences and related occupations [2],"1,307.63","1,345.95","1,384.50","1,440.00","1,471.20"
15 | Professional occupations in natural and applied sciences [21],"1,442.40","1,480.80","1,538.40","1,596.00","1,616.65"
16 | Technical occupations related to natural and applied sciences [22],"1,134.00","1,140.00","1,162.35","1,200.00","1,192.50"
17 | Health occupations [3],920,920.79,938.6,"1,000.00","1,000.00"
18 | Professional occupations in nursing [30],"1,260.00","1,260.00","1,331.25","1,400.00","1,402.50"
19 | Professional occupations in health (except nursing) [31],"1,344.00","1,311.75","1,430.00","1,472.00","1,442.25"
20 | Technical occupations in health [32],884.45,901.6,930,980.8,980
21 | Assisting occupations in support of health services [34],680,711.62,700,721.5,750
22 | "Occupations in education, law and social, community and government services [4]","1,000.00","1,050.00","1,057.60","1,154.00","1,154.00"
23 | Professional occupations in education services [40],"1,249.88","1,303.60","1,326.90","1,423.20","1,400.00"
24 | "Professional occupations in law and social, community and government services [41]","1,250.01","1,274.49","1,288.56","1,360.00","1,395.75"
25 | "Paraprofessional occupations in legal, social, community and education services [42]",673.2,690,735,760,777.63
26 | Occupations in front-line public protection services [43],"1,695.33","1,730.82","1,800.00","1,884.54","1,884.80"
27 | "Care providers and educational, legal and public protection support occupations [44]",605.5,650,655.2,705,731.25
28 | "Occupations in art, culture, recreation and sport [5]",675,676,740,857.2,923.2
29 | Professional occupations in art and culture [51],999.95,860.63,937.5,"1,085.00","1,153.88"
30 | "Technical occupations in art, culture, recreation and sport [52]",595,600,673.2,769.13,836
31 | Sales and service occupations [6],480,520,544,568.75,580
32 | Retail sales supervisors and specialized sales occupations [62],788.4,800,859.6,923.2,932.8
33 | Service supervisors and specialized service occupations [63],528,568.75,600,612,639.92
34 | Sales representatives and salespersons - wholesale and retail trade [64],480,510,560,576.96,585
35 | Service representatives and other customer and personal services occupations [65],499.2,542.5,560,600,612.5
36 | Sales support occupations [66],290,330,332.4,357.5,340
37 | "Service support and other service occupations, n.e.c. [67]",420,450,459,480,484.8
38 | "Trades, transport and equipment operators and related occupations [7]","1,000.00","1,000.30","1,040.00","1,080.00","1,100.00"
39 | "Industrial, electrical and construction trades [72]","1,122.40","1,160.00","1,200.00","1,225.00","1,250.00"
40 | Maintenance and equipment operation trades [73],"1,120.00","1,155.00","1,200.00","1,240.00","1,280.00"
41 | "Other installers, repairers and servicers and material handlers [74]",720,720,720,770,792
42 | Transport and heavy equipment operation and related maintenance occupations [75],926.8,950.4,954,"1,000.00","1,000.00"
43 | "Trades helpers, construction labourers and related occupations [76]",800,840,880,880,900.4
44 | "Natural resources, agriculture and related production occupations [8]",824.4,900,880,900,940
45 | "Supervisors and technical occupations in natural resources, agriculture and related production [82]","1,360.00","1,407.42","1,428.00","1,430.00","1,536.92"
46 | "Workers in natural resources, agriculture and related production [84]",680,740,700,718,760
47 | "Harvesting, landscaping and natural resources labourers [86]",640,680,700,720,720
48 | Occupations in manufacturing and utilities [9],795.2,800,836,876.54,880
49 | "Processing, manufacturing and utilities supervisors and central control operators [92]","1,154.00","1,200.00","1,297.13","1,288.40","1,312.00"
50 | Processing and manufacturing machine operators and related production workers [94],756,770,800,840,830.4
51 | Assemblers in manufacturing [95],750,778,800,840,840
52 | "Labourers in processing, manufacturing and utilities [96]",620,640,680,698,720
53 |
--------------------------------------------------------------------------------
/Data Processing/raw data/CAN mean.csv:
--------------------------------------------------------------------------------
1 | Description,2017,2018,2019,2020,2021
2 | "Total employees, all occupations",952.94,980.31,"1,012.28","1,080.99","1,098.97"
3 | Management occupations [0],"1,678.83","1,723.77","1,777.63","1,840.56","1,922.58"
4 | Senior management occupations [00],"1,969.94","2,195.07","2,185.79","2,347.71","2,313.34"
5 | Specialized middle management occupations [01-05],"1,772.90","1,810.30","1,871.53","1,942.01","2,037.46"
6 | Middle management occupations in retail and wholesale trade and customer services [06],"1,379.59","1,437.82","1,421.38","1,480.74","1,572.34"
7 | "Middle management occupations in trades, transportation, production and utilities [07-09]","1,687.80","1,437.82","1,807.55","1,804.11","1,873.94"
8 | "Business, finance and administration occupations [1]",935.99,966.45,"1,006.47","1,063.17","1,081.99"
9 | Professional occupations in business and finance [11],"1,327.56","1,366.71","1,407.53","1,452.45","1,475.88"
10 | Administrative and financial supervisors and administrative occupations [12],907.48,943.57,985.68,"1,016.71","1,045.86"
11 | "Finance, insurance and related business administrative occupations [13]",874.25,893.21,940.63,"1,016.65","1,018.18"
12 | Office support occupations [14],702.95,734.72,744.22,783.53,786.19
13 | "Distribution, tracking and scheduling co-ordination occupations [15]",806.27,803.55,818.94,868.11,881.69
14 | Natural and applied sciences and related occupations [2],"1,372.00","1,404.08","1,444.13","1,504.40","1,533.48"
15 | Professional occupations in natural and applied sciences [21],"1,504.37","1,546.93","1,589.07","1,653.91","1,684.87"
16 | Technical occupations related to natural and applied sciences [22],"1,197.62","1,225.72","1,244.19","1,282.48","1,269.88"
17 | Health occupations [3],"1,013.09","1,020.69","1,039.49","1,100.17","1,091.53"
18 | Professional occupations in nursing [30],"1,237.74","1,244.10","1,302.83","1,361.16","1,371.61"
19 | Professional occupations in health (except nursing) [31],"1,370.09","1,376.11","1,462.67","1,523.84","1,468.76"
20 | Technical occupations in health [32],929.54,945.33,963.72,"1,013.42","1,018.62"
21 | Assisting occupations in support of health services [34],692.39,718.3,693.43,711.08,727.26
22 | "Occupations in education, law and social, community and government services [4]","1,099.01","1,127.53","1,145.36","1,224.41","1,226.88"
23 | Professional occupations in education services [40],"1,227.95","1,249.77","1,276.22","1,340.66","1,335.47"
24 | "Professional occupations in law and social, community and government services [41]","1,329.02","1,361.82","1,379.36","1,454.59","1,473.75"
25 | "Paraprofessional occupations in legal, social, community and education services [42]",714.66,729.57,742.55,780.61,798.04
26 | Occupations in front-line public protection services [43],"1,646.10","1,675.43","1,748.93","1,830.19","1,803.90"
27 | "Care providers and educational, legal and public protection support occupations [44]",669.39,700.81,705.12,733.2,753.62
28 | "Occupations in art, culture, recreation and sport [5]",740.2,736.59,784.44,892.65,970.17
29 | Professional occupations in art and culture [51],994.24,886.85,928.09,"1,088.33","1,134.78"
30 | "Technical occupations in art, culture, recreation and sport [52]",653.45,681.8,737.36,804.83,903.11
31 | Sales and service occupations [6],545.17,570.43,591.32,627.47,632.59
32 | Retail sales supervisors and specialized sales occupations [62],869.89,874.74,916.78,976.16,983.04
33 | Service supervisors and specialized service occupations [63],578.69,610.6,635.02,663.41,681.24
34 | Sales representatives and salespersons - wholesale and retail trade [64],591.65,609.38,642.39,674.05,677.09
35 | Service representatives and other customer and personal services occupations [65],534.65,564.38,580.75,626.9,630.5
36 | Sales support occupations [66],341.04,373.75,375.21,394.98,390.16
37 | "Service support and other service occupations, n.e.c. [67]",444.06,472.49,482.8,508.6,510.44
38 | "Trades, transport and equipment operators and related occupations [7]","1,049.76","1,072.83","1,098.89","1,136.58","1,159.32"
39 | "Industrial, electrical and construction trades [72]","1,177.40","1,191.95","1,233.16","1,271.16","1,289.45"
40 | Maintenance and equipment operation trades [73],"1,189.02","1,226.44","1,263.22","1,314.69","1,343.66"
41 | "Other installers, repairers and servicers and material handlers [74]",776.06,790.5,789,813.35,838.97
42 | Transport and heavy equipment operation and related maintenance occupations [75],944.48,965.57,966.86,"1,006.17","1,028.99"
43 | "Trades helpers, construction labourers and related occupations [76]",860.62,893.16,922.11,931.63,940.03
44 | "Natural resources, agriculture and related production occupations [8]","1,005.44","1,071.59","1,054.32","1,067.40","1,107.37"
45 | "Supervisors and technical occupations in natural resources, agriculture and related production [82]","1,526.23","1,568.44","1,566.31","1,605.16","1,665.20"
46 | "Workers in natural resources, agriculture and related production [84]",766.51,828.12,789.7,798.96,827.13
47 | "Harvesting, landscaping and natural resources labourers [86]",723.77,753.49,753.86,767.26,794.07
48 | Occupations in manufacturing and utilities [9],876.11,907.41,951.26,980.7,989.41
49 | "Processing, manufacturing and utilities supervisors and central control operators [92]","1,255.43","1,298.98","1,384.08","1,396.66","1,436.50"
50 | Processing and manufacturing machine operators and related production workers [94],798.73,824.78,855.58,885.67,883.67
51 | Assemblers in manufacturing [95],813.7,839.18,882.93,900.62,904.28
52 | "Labourers in processing, manufacturing and utilities [96]",672.07,698.02,710.99,736.12,753.87
53 |
--------------------------------------------------------------------------------
/Data Processing/Methodology.md:
--------------------------------------------------------------------------------
1 | # Data Methodology
2 |
3 | ### Notes
4 |
5 | - Occupation titles are not consistent between data sets. I did not attempt to merge them to retain the accuracy of the data. It does mean that the occupations presented are kinda whack lmao.
6 | - The numbers are presented as annual wages which can be a bit misleading for hourly / part-time workers whose wages are heavily dependent on hours worked.
7 |
8 | ### UK: United Kingdom
9 |
10 | Pulled from **Earnings and hours worked, occupation by four-digit SOC: ASHE Table 14** via UK Government’s Office for National Statistics found here:
11 |
12 | You can access the data sets and read about the methodology and limitations here: [https://www.ons.gov.uk/employmentandlabourmarket/peopleinwork/earningsandworkinghours/datasets/occupation4digitsoc2010ashetable14](https://www.ons.gov.uk/employmentandlabourmarket/peopleinwork/earningsandworkinghours/datasets/occupation4digitsoc2010ashetable14)
13 |
14 | **First note that 2021 data is not revised and may be amended in the future.**
15 |
16 | Utilized table 14.7a which covers gross annual income across occupations. **Notably, it does not include incentives.**
17 |
18 | From this table, the following columns were selected: Description, Median, and Mean. **Notably, although all data included is considered acceptable, nuance around the confidence behind the data is lost.**
19 |
20 | This data was then selected to the most frequent granularity of occupation, and included as long as a median OR mean value was available.
21 |
22 | **Finally, note that I didn’t check if the data was regularly updated to be in current dollars. In all likelihood, it does not and will need to be amended to account for inflation to improve the meaningfulness of raise data.**
23 |
24 | This data was then formatted into a JS variable with the following formatting:
25 |
26 | ```
27 | const DATA = {
28 | 'jobA': {
29 | 'year_1': {
30 | 'median': 0000000,
31 | 'mean': 0000000
32 | }
33 | ...
34 | 'year_5': {
35 | 'median': 0000000,
36 | 'mean': 0000000
37 | }
38 | },
39 |
40 | ...
41 |
42 | 'jobZ': {
43 | 'year_1': {
44 | 'median': 0000000,
45 | 'mean': 0000000
46 | }
47 | ...
48 | 'year_5': {
49 | 'median': 0000000,
50 | 'mean': 0000000
51 | }
52 | },
53 | }
54 | ```
55 |
56 | ### CAN: Canada
57 |
58 | Pulled from the **Employee wages by occupation, annual** released on 2022-01-07 via Statistics Canada.
59 |
60 | You can access the data sets and read about the methodology and limitations here: [https://www150.statcan.gc.ca/t1/tbl1/en/tv.action?pid=1410034001](https://www150.statcan.gc.ca/t1/tbl1/en/tv.action?pid=1410034001)
61 |
62 | **First note that the data is based in weekly wages in current Canadian dollars as of 2022** (that is, inflation is accounted for)
63 |
64 | **The annual wage was extrapolated by multiplying by 52 (number of weeks in the year).**
65 |
66 | Assumed average refers to mean and stores average data as mean to retain consistency with other data sets.
67 |
68 | This data was then formatted into a JS variable with the following formatting:
69 |
70 | ```
71 | const DATA = {
72 | 'jobA': {
73 | 'year_1': {
74 | 'median': 0000000,
75 | 'mean': 0000000
76 | }
77 | ...
78 | 'year_5': {
79 | 'median': 0000000,
80 | 'mean': 0000000
81 | }
82 | },
83 |
84 | ...
85 |
86 | 'jobZ': {
87 | 'year_1': {
88 | 'median': 0000000,
89 | 'mean': 0000000
90 | }
91 | ...
92 | 'year_5': {
93 | 'median': 0000000,
94 | 'mean': 0000000
95 | }
96 | },
97 | }
98 | ```
99 |
100 | ### US: United States of America
101 |
102 | Pulled from **Occupational Employment and Wage Statistics** via US Bureau of Labour Statistics.
103 |
104 | You can access the data sets and read about the methodology and limitations here: [https://www.bls.gov/oes/tables.htm](https://www.bls.gov/oes/tables.htm)
105 |
106 | Utilized the National XLS data sets for 2017-2021 and converted the first sheet (when applicable) to CSV.
107 |
108 | After importing datasets to python as pandas dataframes, I filtered jobs to the most granular specificity available according to SOC grouping (under `OCC_GROUP` or `O_GROUP`) and dropped all broad categories.
109 |
110 | I used `A_MEDIAN` for the annual median wage and `A_MEAN` for the annual mean wage. I used `OCC_TITLE` for the job description.
111 |
112 | This data was then formatted into a JS variable with the following formatting:
113 |
114 | ```
115 | const DATA = {
116 | 'jobA': {
117 | 'year_1': {
118 | 'median': 0000000,
119 | 'mean': 0000000
120 | }
121 | ...
122 | 'year_5': {
123 | 'median': 0000000,
124 | 'mean': 0000000
125 | }
126 | },
127 |
128 | ...
129 |
130 | 'jobZ': {
131 | 'year_1': {
132 | 'median': 0000000,
133 | 'mean': 0000000
134 | }
135 | ...
136 | 'year_5': {
137 | 'median': 0000000,
138 | 'mean': 0000000
139 | }
140 | },
141 | }
142 | ```
--------------------------------------------------------------------------------
/Data Processing/CAN data processing.ipynb:
--------------------------------------------------------------------------------
1 | {
2 | "cells": [
3 | {
4 | "cell_type": "code",
5 | "execution_count": 95,
6 | "metadata": {},
7 | "outputs": [],
8 | "source": [
9 | "import pandas as pd\n",
10 | "import numpy as np\n",
11 | "import json\n",
12 | "\n",
13 | "def filterOccupations(df, descriptionColumn, contents):\n",
14 | " \"\"\"\n",
15 | " Canada wage data is presented in a table that is also organized like dookie with no easy separator for granularity.\n",
16 | " df refers to the dataframe containing information from the statscan website (lightly filtered to get right of annoying headers)\n",
17 | " columnName refers to the job title column (we will rename to description for consistency with other datasets)\n",
18 | " contents refers to whether the table contains data about the mean or median annual wages\n",
19 | " I have to go into each title, filter out the contents of the [] and then filter out the rows where the contents within [] are only length 1 (this filters our broad categories).\n",
20 | " See https://www.statcan.gc.ca/en/subjects/standard/noc/2021/introductionV1 for more details.\n",
21 | " I'll also multiply the median and mean values by 52.\n",
22 | " Thus, we should return a dataframe with the formatting:\n",
23 | "\n",
24 | " Description | Median_2017 | Median_2018 | Median_2019 | Median_2020 | Median_2021 |\n",
25 | " --------------------------------------------------------------------------------------------------------\n",
26 | " JobA | wages | wages | wages | wages | wages |\n",
27 | " JobB | wages | wages | wages | wages | wages |\n",
28 | " ... ... ... ... ... ...\n",
29 | " JobZ | wages | wages | wages | wages | wages |\n",
30 | "\n",
31 | " \"\"\"\n",
32 | " isNotCategory = []\n",
33 | "\n",
34 | " df.iloc[:,1:] = df.iloc[:,1:].replace(',','', regex = True)\n",
35 | "\n",
36 | " for i in range(len(df)):\n",
37 | " A = df.loc[i, descriptionColumn].split(\" \")\n",
38 | " df.loc[i, descriptionColumn] = A[0]\n",
39 | " A = A[-1].replace('[','').replace(']','')\n",
40 | " isNotCategory.append(len(A)!=1)\n",
41 | " \n",
42 | " df['isNotCategory'] = isNotCategory\n",
43 | " df = df[df['isNotCategory']].reset_index(drop=True)\n",
44 | " for i in range(1, len(df.columns)):\n",
45 | " df.iloc[:,i] = pd.to_numeric(df.iloc[:,i].values)\n",
46 | " df.iloc[:,i] *= 52\n",
47 | " df.iloc[:,i] = round(df.iloc[:,i],2)\n",
48 | " return df.iloc[:,0:-1]\n",
49 | "\n",
50 | "def jsonifyOccupations(medianDF, meanDF):\n",
51 | " \"\"\"\n",
52 | " medianDF should contain the median annual wage data for occupations across time (with the year being the column title)\n",
53 | " meanDF should contain the mean annual wage data for occupation across time (with the year being the column title)\n",
54 | " Merge these into a dictionary with the following format to match other data sets\n",
55 | " {\n",
56 | " 'jobA': {\n",
57 | " 'year_1': {\n",
58 | " 'median': 0000000,\n",
59 | " 'mean': 0000000\n",
60 | " },\n",
61 | " ...\n",
62 | " 'year_5': {\n",
63 | " 'median': 0000000,\n",
64 | " 'mean': 0000000\n",
65 | " }\n",
66 | " },\n",
67 | " ...\n",
68 | " \n",
69 | " 'jobZ': {\n",
70 | " 'year_1': {\n",
71 | " 'median': 0000000,\n",
72 | " 'mean': 0000000\n",
73 | " },\n",
74 | " ...\n",
75 | " 'year_5': {\n",
76 | " 'median': 0000000,\n",
77 | " 'mean': 0000000\n",
78 | " }\n",
79 | " }\n",
80 | " }\n",
81 | " \"\"\"\n",
82 | " d = {}\n",
83 | " # iterate through rows (occupation category)\n",
84 | " for i in range(len(medianDF)):\n",
85 | " \n",
86 | " # initialize an empty key named after the occupation category\n",
87 | " # it's initialized as a list in order to append values as we loop through the years\n",
88 | " d[medianDF.loc[i,'Description']] = {}\n",
89 | "\n",
90 | " # loop through years\n",
91 | " for j in range(1,len(medianDF.columns)): # starts at 1 to bypass the first column (occupation category)\n",
92 | " content = dict.fromkeys(['median','mean'])\n",
93 | " content['median'] = medianDF.iloc[i,j]\n",
94 | " content['mean'] = meanDF.iloc[i,j]\n",
95 | " #print(content)\n",
96 | " #print(year)\n",
97 | " d[medianDF.loc[i,'Description']][medianDF.columns[j]] = content\n",
98 | "\n",
99 | " return d\n",
100 | "\n",
101 | "CAN_mean = filterOccupations(pd.read_csv('raw data/CAN mean.csv'), 'Description', 'mean')\n",
102 | "CAN_median = filterOccupations(pd.read_csv('raw data/CAN median.csv'), 'Description', 'mean')\n",
103 | "\n",
104 | "with open('processed data/CAN_2017-2021.json', 'w', encoding='utf-8') as f:\n",
105 | " json.dump(jsonifyOccupations(CAN_median, CAN_mean), f, ensure_ascii=False, indent=4)"
106 | ]
107 | },
108 | {
109 | "cell_type": "code",
110 | "execution_count": null,
111 | "metadata": {},
112 | "outputs": [],
113 | "source": []
114 | }
115 | ],
116 | "metadata": {
117 | "interpreter": {
118 | "hash": "bfb4883d108fc92ac768439090a2e92bb9a1f760a54beeecfd6762b5dcd70fe3"
119 | },
120 | "kernelspec": {
121 | "display_name": "Python 3.10.4 64-bit",
122 | "language": "python",
123 | "name": "python3"
124 | },
125 | "language_info": {
126 | "codemirror_mode": {
127 | "name": "ipython",
128 | "version": 3
129 | },
130 | "file_extension": ".py",
131 | "mimetype": "text/x-python",
132 | "name": "python",
133 | "nbconvert_exporter": "python",
134 | "pygments_lexer": "ipython3",
135 | "version": "3.8.3"
136 | },
137 | "orig_nbformat": 4
138 | },
139 | "nbformat": 4,
140 | "nbformat_minor": 2
141 | }
142 |
--------------------------------------------------------------------------------
/img/US flag.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/Data Processing/UK data processing.ipynb:
--------------------------------------------------------------------------------
1 | {
2 | "cells": [
3 | {
4 | "cell_type": "code",
5 | "execution_count": 4,
6 | "metadata": {},
7 | "outputs": [],
8 | "source": [
9 | "# import statements\n",
10 | "import pandas as pd\n",
11 | "import numpy as np\n",
12 | "import json\n",
13 | "\n",
14 | "# functions\n",
15 | "def most_frequent(List):\n",
16 | " counter = 0\n",
17 | " num = List[0]\n",
18 | " \n",
19 | " for i in List:\n",
20 | " curr_frequency = List.count(i)\n",
21 | " if(curr_frequency> counter):\n",
22 | " counter = curr_frequency\n",
23 | " num = i\n",
24 | " \n",
25 | " return num\n",
26 | "def filterOccupations(df, descriptionColumn):\n",
27 | " \"\"\"\n",
28 | " UK wage data is provided as a CSV where the occupation is provided with increasing granularity (e.g. managers > managers in transport > managers in transport and distribution)\n",
29 | " I only want to store the most granular occupations with wage data so that involves only selecting the categories with the most tabs.\n",
30 | " This should return a DataFrame that has only the more granular occupations WITH mean | median salary data.\n",
31 | " Yes, in hindsight, I could've just used the counts of code values HOWEVER, i didn't originally save those when i was making this function.\n",
32 | " So hah. Eat it. I'm stupid :-)\n",
33 | " \"\"\"\n",
34 | " diff = []\n",
35 | "\n",
36 | " for i in range(len(df)):\n",
37 | " A = df.loc[i, descriptionColumn].split(\" \")\n",
38 | " B = df.loc[i, descriptionColumn].strip().split(\" \")\n",
39 | " df.loc[i, descriptionColumn] = df.loc[i, descriptionColumn].strip()\n",
40 | " diff.append(len(A)-len(B))\n",
41 | "\n",
42 | " most_freq = most_frequent(diff) # we are selecting the most frequent difference instead of the maximum difference after a peek at the data shows some random outliers that might just be entry error\n",
43 | "\n",
44 | " # create columns to base selections for df\n",
45 | " df[\"diff\"] = diff\n",
46 | " df['medianSeries'] = pd.to_numeric(df.Median, errors='coerce').notnull()\n",
47 | " df['meanSeries'] = pd.to_numeric(df.Mean, errors='coerce').notnull()\n",
48 | " df = df[(df[\"medianSeries\"] | df[\"meanSeries\"]) & (df[\"diff\"]==most_freq)].reset_index(drop=True)\n",
49 | " df = df.replace('x', np.NaN)\n",
50 | " df['Median'] = round(df['Median'].astype('float64'),2)\n",
51 | " df['Mean'] = round(df['Mean'].astype('float64'),2)\n",
52 | " # replace nan with null for the sake of a valid json file\n",
53 | " df = df.replace(np.NaN, \"null\")\n",
54 | " return df.iloc[:,0:4]\n",
55 | "def jsonifyOccupations(df, yearInput):\n",
56 | " \"\"\"\n",
57 | " Given a dataframe of occupations with mean | median salary data for a given year, write a dictionary string with the following format:\n",
58 | " Yeah, there's probably a way to do this with a pandas grouping or pivot but I hate pandas.\n",
59 | " {\n",
60 | " 'jobA': {\n",
61 | " 'year_1': {\n",
62 | " 'median': 0000000,\n",
63 | " 'mean': 0000000\n",
64 | " }\n",
65 | " },\n",
66 | " \n",
67 | " 'jobB': {\n",
68 | " 'year_1': {\n",
69 | " 'median': 0000000,\n",
70 | " 'mean': 0000000\n",
71 | " }\n",
72 | " },\n",
73 | " ...\n",
74 | " \n",
75 | " 'jobZ': {\n",
76 | " 'year_1': {\n",
77 | " 'median': 0000000,\n",
78 | " 'mean': 0000000\n",
79 | " }\n",
80 | " }\n",
81 | " \n",
82 | " }\n",
83 | " \"\"\"\n",
84 | " d = dict.fromkeys(df.loc[:,'Description'])\n",
85 | "\n",
86 | " for i in range(len(df)):\n",
87 | " d[df.loc[i,'Description']] = {}\n",
88 | " content = dict.fromkeys(['median', 'mean'])\n",
89 | " content['median'] = df.loc[i,'Median']\n",
90 | " content['mean'] = df.loc[i,'Mean']\n",
91 | " d[df.loc[i,'Description']][str(yearInput)] = content\n",
92 | " return d\n",
93 | "\n",
94 | "def merge_dictionaries(dictA, dictB):\n",
95 | " \"\"\"\n",
96 | " Bruh does this function already exist wtf. This sounds like a homework problem but anyway\n",
97 | " Take dictB. \n",
98 | " If a key in dictB is present in dictA, append the contents of the key to dictA[key] (technically, i'm creating a new key with the year from dict B and assigning it's items).\n",
99 | " Otherwise, add dictB[key] and it's contents as a new value in dictA.\n",
100 | " \"\"\"\n",
101 | " for key in dictB:\n",
102 | " if key in dictA.keys():\n",
103 | " dictA[key][list(dictB[key].keys())[0]] = list(dictB[key].values())[0]\n",
104 | " else:\n",
105 | " dictA[key] = dictB[key]\n",
106 | " return dictA\n",
107 | "\n",
108 | "# calls\n",
109 | "UK2017 = jsonifyOccupations(filterOccupations(pd.read_csv(\"raw data/UK 2017.csv\"), \"Description\"), 2017)\n",
110 | "UK2018 = jsonifyOccupations(filterOccupations(pd.read_csv(\"raw data/UK 2018.csv\"), \"Description\"), 2018)\n",
111 | "UK2019 = jsonifyOccupations(filterOccupations(pd.read_csv(\"raw data/UK 2019.csv\"), \"Description\"), 2019)\n",
112 | "UK2020 = jsonifyOccupations(filterOccupations(pd.read_csv(\"raw data/UK 2020.csv\"), \"Description\"), 2020)\n",
113 | "UK2021 = jsonifyOccupations(filterOccupations(pd.read_csv(\"raw data/UK 2021.csv\"), \"Description\"), 2021)\n",
114 | "\n",
115 | "temp = merge_dictionaries(UK2017, UK2018)\n",
116 | "temp = merge_dictionaries(temp, UK2019)\n",
117 | "temp = merge_dictionaries(temp, UK2020)\n",
118 | "temp = merge_dictionaries(temp, UK2021)\n",
119 | "\n",
120 | "with open('processed data/UK_2017-2021.json', 'w', encoding='utf-8') as f:\n",
121 | " json.dump(temp, f, ensure_ascii=False, indent=4)\n",
122 | "\n"
123 | ]
124 | }
125 | ],
126 | "metadata": {
127 | "interpreter": {
128 | "hash": "183bbf6827d058c2a2fb0f4acdc0420849dda2b4380af0e437e38c64d798d8b7"
129 | },
130 | "kernelspec": {
131 | "display_name": "Python 3.8.3 ('base')",
132 | "language": "python",
133 | "name": "python3"
134 | },
135 | "language_info": {
136 | "codemirror_mode": {
137 | "name": "ipython",
138 | "version": 3
139 | },
140 | "file_extension": ".py",
141 | "mimetype": "text/x-python",
142 | "name": "python",
143 | "nbconvert_exporter": "python",
144 | "pygments_lexer": "ipython3",
145 | "version": "3.8.3"
146 | },
147 | "orig_nbformat": 4
148 | },
149 | "nbformat": 4,
150 | "nbformat_minor": 2
151 | }
152 |
--------------------------------------------------------------------------------
/Data Processing/USA data processing.ipynb:
--------------------------------------------------------------------------------
1 | {
2 | "cells": [
3 | {
4 | "cell_type": "code",
5 | "execution_count": 1,
6 | "metadata": {},
7 | "outputs": [],
8 | "source": [
9 | "import pandas as pd\n",
10 | "import numpy as np\n",
11 | "import json\n",
12 | "\n",
13 | "def filterOccupations(df, descriptionColumn, SOCColumn, medianColumn, meanColumn):\n",
14 | " \"\"\"\n",
15 | " US wage data is cute. I love her. Didn't even need to open them up on excel to delete headers and footers because I'm too lazy to select ranges in python :) \n",
16 | " Each row is tagged with an SOC group value (broad, major, minor, detailed)\n",
17 | " I'm going to filter out broad categories.\n",
18 | " If there are duplicate titles, I'm going to select the finest SOC group (major > minor > detailed).\n",
19 | " Then I return a simplified dataframe with the following contents\n",
20 | "\n",
21 | " Description | Median | Mean |\n",
22 | " ---------------------------------------\n",
23 | " JobA | wage | wage |\n",
24 | " JobB | wage | wage |\n",
25 | " ... | ... | ... |\n",
26 | " JobZ | wage | wage |\n",
27 | "\n",
28 | " \"\"\" \n",
29 | " # filter out commas\n",
30 | " df.iloc[:,1:] = df.iloc[:,1:].replace(',','', regex = True)\n",
31 | " df = df.replace('*',np.NaN)\n",
32 | " df = df.replace('#',np.NaN)\n",
33 | "\n",
34 | " # filter for optimal granularity and remove duplicates\n",
35 | " df = df[df[SOCColumn] != 'broad'].reset_index(drop=True)\n",
36 | " df['duplicates'] = df.duplicated(subset=descriptionColumn, keep='last') # because the data sets go through SOC groups with increasing granularity, we only want to keep the last duplicate if present\n",
37 | " df = df[~df['duplicates']].reset_index(drop=True) # removes all duplicates that aren't of the finest SOC group\n",
38 | "\n",
39 | " # convert to ideal datatypes\n",
40 | " df[medianColumn] = round(df[medianColumn].astype('float64'),2)\n",
41 | " df[meanColumn] = round(df[meanColumn].astype('float64'),2)\n",
42 | "\n",
43 | " # filter out any rows where median & mean are null\n",
44 | " df = df.dropna(axis=0, how='all', subset=[medianColumn,meanColumn]).reset_index(drop=True)\n",
45 | "\n",
46 | " # select only columns of interest\n",
47 | " df = df[[descriptionColumn, medianColumn, meanColumn]] \n",
48 | "\n",
49 | " # rename columns for consistency with other data sets\n",
50 | " df.columns = ['Description', 'Median', 'Mean']\n",
51 | " \n",
52 | " # replace nan with null for the sake of a valid json file\n",
53 | " df = df.replace(np.NaN, \"null\")\n",
54 | " return df\n",
55 | "\n",
56 | "def jsonifyOccupations(df, yearInput):\n",
57 | " \"\"\"\n",
58 | " Given a dataframe of occupations with mean | median salary data for a given year, write a dictionary string with the following format:\n",
59 | " Yeah, there's probably a way to do this with a pandas grouping or pivot but I hate pandas.\n",
60 | " {\n",
61 | " 'jobA': {\n",
62 | " 'year_1': {\n",
63 | " 'median': 0000000,\n",
64 | " 'mean': 0000000\n",
65 | " }\n",
66 | " },\n",
67 | " \n",
68 | " 'jobB': {\n",
69 | " 'year_1': {\n",
70 | " 'median': 0000000,\n",
71 | " 'mean': 0000000\n",
72 | " }\n",
73 | " },\n",
74 | " ...\n",
75 | " \n",
76 | " 'jobZ': {\n",
77 | " 'year_1': {\n",
78 | " 'median': 0000000,\n",
79 | " 'mean': 0000000\n",
80 | " }\n",
81 | " }\n",
82 | " \n",
83 | " }\n",
84 | " \"\"\"\n",
85 | " d = dict.fromkeys(df.loc[:,'Description'])\n",
86 | "\n",
87 | " for i in range(len(df)):\n",
88 | " d[df.loc[i,'Description']] = {}\n",
89 | " content = dict.fromkeys(['median', 'mean'])\n",
90 | " content['median'] = df.loc[i,'Median']\n",
91 | " content['mean'] = df.loc[i,'Mean']\n",
92 | " d[df.loc[i,'Description']][str(yearInput)] = content\n",
93 | " return d\n",
94 | "\n",
95 | "def merge_dictionaries(dictA, dictB):\n",
96 | " \"\"\"\n",
97 | " Bruh does this function already exist wtf. This sounds like a homework problem but anyway\n",
98 | " Take dictB. \n",
99 | " If a key in dictB is present in dictA, append the contents of the key to dictA[key] (technically, i'm creating a new key with the year from dict B and assigning it's items).\n",
100 | " Otherwise, add dictB[key] and it's contents as a new value in dictA.\n",
101 | " \"\"\"\n",
102 | " for key in dictB:\n",
103 | " if key in dictA.keys():\n",
104 | " dictA[key][list(dictB[key].keys())[0]] = list(dictB[key].values())[0]\n",
105 | " else:\n",
106 | " dictA[key] = dictB[key]\n",
107 | " return dictA\n",
108 | "\n",
109 | "US2017 = jsonifyOccupations(filterOccupations(pd.read_csv('raw data/US 2017.csv'),'OCC_TITLE', 'OCC_GROUP', 'A_MEDIAN','A_MEAN'), 2017)\n",
110 | "US2018 = jsonifyOccupations(filterOccupations(pd.read_csv('raw data/US 2018.csv'),'OCC_TITLE', 'OCC_GROUP', 'A_MEDIAN','A_MEAN'), 2018)\n",
111 | "US2019 = jsonifyOccupations(filterOccupations(pd.read_csv('raw data/US 2019.csv'),'occ_title', 'o_group', 'a_median','a_mean'), 2019)\n",
112 | "US2020 = jsonifyOccupations(filterOccupations(pd.read_csv('raw data/US 2020.csv'),'OCC_TITLE', 'O_GROUP', 'A_MEDIAN','A_MEAN'), 2020)\n",
113 | "US2021 = jsonifyOccupations(filterOccupations(pd.read_csv('raw data/US 2021.csv'),'OCC_TITLE', 'O_GROUP', 'A_MEDIAN','A_MEAN'), 2021)\n",
114 | "\n",
115 | "temp = merge_dictionaries(US2017, US2018)\n",
116 | "temp = merge_dictionaries(temp, US2019)\n",
117 | "temp = merge_dictionaries(temp, US2020)\n",
118 | "temp = merge_dictionaries(temp, US2021)\n",
119 | "\n",
120 | "with open('processed data/US_2017-2021.json', 'w', encoding='utf-8') as f:\n",
121 | " json.dump(temp, f, ensure_ascii=False, indent=4)\n"
122 | ]
123 | }
124 | ],
125 | "metadata": {
126 | "interpreter": {
127 | "hash": "183bbf6827d058c2a2fb0f4acdc0420849dda2b4380af0e437e38c64d798d8b7"
128 | },
129 | "kernelspec": {
130 | "display_name": "Python 3.8.3 ('base')",
131 | "language": "python",
132 | "name": "python3"
133 | },
134 | "language_info": {
135 | "codemirror_mode": {
136 | "name": "ipython",
137 | "version": 3
138 | },
139 | "file_extension": ".py",
140 | "mimetype": "text/x-python",
141 | "name": "python",
142 | "nbconvert_exporter": "python",
143 | "pygments_lexer": "ipython3",
144 | "version": "3.8.3"
145 | },
146 | "orig_nbformat": 4
147 | },
148 | "nbformat": 4,
149 | "nbformat_minor": 2
150 | }
151 |
--------------------------------------------------------------------------------
/stylesheet.css:
--------------------------------------------------------------------------------
1 | html, body{
2 | margin:0;
3 | padding:0;
4 | height: 100%;
5 | }
6 |
7 | html {
8 | scroll-behavior:smooth;
9 | }
10 |
11 | .container {
12 | width: 80%;
13 | border: white 0px solid;
14 | margin: 3% 0 3% 0;
15 | padding: 10px;
16 | display: inline-block; /* impacts the alignment within the parent*/
17 | }
18 |
19 | .question-container {
20 | width: 70%;
21 | border: white 0px solid;
22 | padding: 10px;
23 | display: inline-block; /* impacts the alignment within the parent*/
24 | }
25 |
26 | #section-1 {
27 | text-align: center;
28 | background-color: #06070B;
29 | min-width: 100%;
30 | margin: 0;
31 | padding: 10% 0 10% 0;
32 | }
33 |
34 | #section-2 {
35 | text-align: center;
36 | background-color: #E9EAE8;
37 | min-width: 100%;
38 | margin: 0;
39 | padding: 2% 0 2% 0;
40 | }
41 |
42 | #footer{
43 | text-align: center;
44 | background-color: #06070B;
45 | min-width: 100%;
46 | margin: 0;
47 | padding: 2% 0 2% 0;
48 | }
49 |
50 | #header {
51 | padding: 3% 0 0 0;
52 | }
53 |
54 | #all-black-section{
55 | text-align: center;
56 | background-color: #06070B;
57 | min-width: 100%;
58 | min-height: 100%;
59 | margin: 0;
60 | padding: 0;
61 | }
62 |
63 | .vcenter{
64 | position: relative;
65 | top: -50%;
66 | -webkit-transform: translateY(50%);
67 | -ms-transform: translateY(50%);
68 | transform: translateY(50%);
69 | border: red 0px solid;
70 | }
71 |
72 | .center{
73 | align-items: center;
74 | text-align: center;
75 | }
76 |
77 | .left {
78 | text-align: left;
79 | align-items: left;
80 | }
81 |
82 | h1 {
83 | font-family: Koulen;
84 | font-size: 700%;
85 | color: white;
86 | padding: 0;
87 | margin: 0;
88 | line-height: 100%; /* reduces the leading that was being annoying */
89 | }
90 |
91 | h2 {
92 | font-family: Koulen;
93 | font-size: 400%;
94 | color: #06070B;
95 | padding: 0;
96 | margin: 0;
97 | line-height: 100%; /* reduces the leading that was being annoying */
98 | }
99 |
100 | h3 {
101 | font-family: Koulen;
102 | font-size: 250%;
103 | color: #ffffff;
104 | padding: 0;
105 | margin: 0;
106 | line-height: 100%; /* reduces the leading that was being annoying */
107 | }
108 |
109 |
110 | h4 {
111 | font-family: Inter;
112 | font-weight: 500;
113 | font-size: 300%;
114 | line-height: 100%;
115 | padding: 0;
116 | margin: 0;
117 | }
118 |
119 | p {
120 | font-family: Inter;
121 | font-size: 100%;
122 | line-height: 130%;
123 | padding: 0;
124 | margin: 0;
125 | }
126 |
127 | a {
128 | font-family: Inter;
129 | font-size: 100%;
130 | line-height: 100%;
131 | padding: 0;
132 | margin: 0;
133 | }
134 |
135 |
136 | .btn {
137 | cursor: pointer;
138 | font-family: Inter;
139 | text-align: center;
140 | font-size: 100%;
141 | color: #06070B;
142 | background-color: #E9EAE8;
143 | border: #E9EAE8 1px solid;
144 | line-height: 100%;
145 | padding: 10px 15px 10px 15px;
146 | border: 0;
147 | margin-top: 20px;
148 | text-decoration: none;
149 | display: inline-block;
150 | transition: 75ms ease-in-out;
151 | }
152 |
153 | .btn.quiz {
154 | margin: 10px 10px 10px 10px;
155 | padding-left: 25px;
156 | padding-right: 25px;
157 | font-size: 110%;
158 | }
159 |
160 | .btn.quiz.active:hover {
161 | background-color: #92DC58!important;
162 | }
163 |
164 | .list-group-item {
165 | cursor: pointer;
166 | font-family: Inter;
167 | text-align: center;
168 | font-size: 100%;
169 | color: #06070B;
170 | background-color: #E9EAE8;
171 | border: #E9EAE8 1px solid;
172 | line-height: 100%;
173 | padding: 12px 15px 12px 15px;
174 | border: 0;
175 | margin-top: 20px;
176 | list-style: none;
177 | }
178 |
179 | .answer-list-item {
180 | cursor: pointer;
181 | font-family: Inter;
182 | text-align: center;
183 | font-size: 100%;
184 | color: #E9EAE8;
185 | line-height: 100%;
186 | padding: 12px 15px 12px 15px;
187 | border: 0;
188 | margin-top: 20px;
189 | list-style: none;
190 | }
191 |
192 | .big-arrow {
193 | display: inline-block;
194 | margin-top: 50px;
195 | transition: 200ms ease-in-out;
196 | }
197 |
198 | .big-arrow:hover {
199 | display: inline-block;
200 | margin-top: 50px;
201 | transform: translateY(8%);
202 | }
203 |
204 | #wage {
205 | transform: translateX(-5%);
206 | }
207 |
208 | #gauge {
209 | transform: translateX(3%);
210 | }
211 |
212 | #green {
213 | background-color: #92DC58;
214 | border: #92DC58 1px solid;
215 | }
216 |
217 | #green-text {
218 | color:#92DC58
219 | }
220 |
221 | #green:hover {
222 | background-color: #06070B;
223 | border: #E9EAE8 1px solid;
224 | color: #E9EAE8;
225 | }
226 |
227 | #offwhite {
228 | color: #E9EAE8;
229 | text-decoration: none;
230 | }
231 |
232 | #black {
233 | color: #06070B;
234 | }
235 |
236 | /* text highlighter inspired by https://codepen.io/alvarotrigo/pen/rNpaBJJ */
237 |
238 | .highlight-container, .highlight {
239 | position: relative;
240 | }
241 |
242 | .highlight-container {
243 | display: inline-block;
244 | }
245 | .highlight-container:before {
246 | content: " ";
247 | display: block;
248 | height: 50%;
249 | width: 90%;
250 | margin-left: -3px;
251 | margin-right: -3px;
252 | position: absolute;
253 | background: #92DC58;
254 | top: 20px;
255 | padding: 10px 3px 3px 10px;
256 | }
257 |
258 |
259 | /* YT video container via https://silvercircle.subspace.cc/webdev/css/embed-youtube-any-size-and-correct-aspect/ */
260 |
261 | div.ytcontainer {
262 | width: 100%;
263 | height: 0;
264 | padding-bottom: 56.25%;
265 | position: relative;
266 | }
267 |
268 | iframe.ytframe {
269 | top: 0;
270 | left: 0;
271 | width: 100%;
272 | height: 100%;
273 | position: absolute;
274 | }
275 |
276 | /* footer management */
277 |
278 | .social-links {
279 | font-family: Font Awesome 5 Brands;
280 | font-style: normal;
281 | font-weight: normal;
282 | font-size: 150%;
283 | line-height: 100%;
284 | text-align: right;
285 | color: #E9EAE8;
286 | }
287 |
288 |
289 | .footer-link {
290 | font-family: Inter;
291 | font-size:100%;
292 | line-height: 80%;
293 | text-align: left;
294 | color: #E9EAE8;
295 | display: inline-block;
296 | }
297 |
298 | .underline-animation {
299 | display: inline-block;
300 | position: relative;
301 | }
302 |
303 | .underline-animation:after {
304 | content: '';
305 | position: absolute;
306 | width: 100%;
307 | transform: scaleX(0);
308 | height: 1.25px;
309 | top: 140%;
310 | bottom: 0;
311 | left: 0;
312 | background-color: #E9EAE8;
313 | transform-origin: bottom right;
314 | transition: transform 0.25s ease-out;
315 | }
316 |
317 | .underline-animation:hover:after{
318 | transform: scaleX(1);
319 | transform-origin: bottom left;
320 | }
321 |
322 | a.fab:focus, a.fab:active, a.fab:visited, a.fab:link {
323 | text-decoration: none;
324 | color: #E9EAE8;
325 | }
326 |
327 | a.footer-link:focus, a.footer-link:active, a.footer-link:visited, a.footer-link:link {
328 | text-decoration: none;
329 | color: #E9EAE8;
330 | }
331 |
332 | .flex-split {
333 | display: inline-flex;
334 | border: red 0px solid;
335 | justify-content: space-between;
336 | }
337 |
338 | .flex-triplet {
339 | display: inline-flex;
340 | justify-content: center;
341 | flex-direction: row;
342 | flex-basis: auto;
343 | width: 50%;
344 | height: auto;
345 | flex-wrap: wrap;
346 | }
347 |
348 | .flex-triplet-child {
349 | flex-grow: 1;
350 | margin: 0 3% 0 3%;
351 | min-width: 100px;
352 | }
353 |
354 | img {
355 | height: auto;
356 | }
357 |
358 | img.grayscale {
359 | filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 3.5+ */
360 | filter: gray; /* IE6-9 */
361 | -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
362 | transition: filter 150ms ease-in-out;
363 | }
364 |
365 | img.grayscale:hover {
366 | filter: none;
367 | -webkit-filter: grayscale(0%);
368 | }
--------------------------------------------------------------------------------
/img/US flag rectangle.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | // carry over data from country-select
2 | const countryName = sessionStorage.getItem('countryName')
3 |
4 | // setting the start and end year of the data just for robustness
5 | // idk if i'll ever update this tho
6 | const START_YEAR = 2017
7 | const END_YEAR = 2021
8 | const NUM_QUESTIONS = 5
9 |
10 | // events
11 | const score_fromDoc = document.querySelector('.score');
12 | const hr = document.querySelector('.hour')
13 | const min = document.querySelector('.minute')
14 | const sec = document.querySelector('.second')
15 |
16 | const q_num_sel = document.querySelector('.question-number')
17 | const q_sel = document.querySelector('.question')
18 | const q_des_sel = document.querySelector('.question-description')
19 | const q_el_sel = document.querySelector('.question-element')
20 | const nav_btn = document.querySelector('.navigator')
21 |
22 | // variables for timer
23 | let second = 00;
24 | let minute = 00;
25 | let hour = 00;
26 | let elapsed;
27 |
28 | let score = 0;
29 |
30 | ///////////////////////////////////////
31 |
32 | // timer functions
33 |
34 | ///////////////////////////////////////
35 |
36 | function startTimer(){
37 | // every second, elapsed
38 | addTime()
39 | timer = setInterval(addTime, 1000)
40 | }
41 |
42 | function convertToString(e){
43 | if (e < 10){
44 | e = `0${e}`;
45 | }
46 | return e;
47 | }
48 |
49 | function addTime(){
50 | second++;
51 | if (second === 60){
52 | minute++;
53 | second = 00
54 | }
55 | if (minute === 60){
56 | hour++;
57 | minute = 00
58 | }
59 | hr.textContent = convertToString(hour);
60 | min.textContent = convertToString(minute);
61 | sec.textContent = convertToString(second);
62 | }
63 |
64 | /*///////////////////////////////////////
65 |
66 | // data selection
67 |
68 | // the idea is to call the JSON data once and select the data
69 | // i need for the questions before the questions even start populating
70 |
71 | ///////////////////////////////////////*/
72 |
73 | var years = [];
74 | var data;
75 | var formatter;
76 |
77 | for (let i = START_YEAR; i <= END_YEAR; i++){
78 | years.push(String(i))
79 | };
80 |
81 | switch (countryName){
82 | case 'Canada':
83 | data = CAN_DATA;
84 | formatter = new Intl.NumberFormat('en-CA', {
85 | style: 'currency',
86 | currency: 'CAD',
87 | maximumFractionDigits: 0
88 | });
89 | break;
90 | case 'the United States':
91 | data = US_DATA;
92 | formatter = new Intl.NumberFormat('en-US', {
93 | style: 'currency',
94 | currency: 'USD',
95 | maximumFractionDigits: 0
96 | });
97 | break;
98 | case 'the United Kingdom':
99 | data = UK_DATA;
100 | formatter = new Intl.NumberFormat('en-GB', {
101 | style: 'currency',
102 | currency: 'GBP',
103 | maximumFractionDigits: 0
104 | });
105 | break;
106 | }
107 |
108 | var keys = Object.keys(data)
109 | var medianIncome = data[keys[0]]['2021']['median']
110 | var medianRateChange = (data[keys[0]]['2021']['median'] - data[keys[0]]['2020']['median'])/data[keys[0]]['2020']['median']*100
111 | var medianAbsChange = data[keys[0]]['2021']['median'] - data[keys[0]]['2020']['median']
112 | // after we get the median, we should remove the first key from the array so we dont accidentally call the median
113 | delete data[keys[0]];
114 | keys = keys.splice(1)
115 |
116 | // i know this is a mess
117 | // so am i
118 | var aboveMedian = []
119 | var belowMedian = []
120 | var has2021median = {}
121 | var raises_2021 = {}
122 | var paycuts_2020 = {}
123 |
124 | keys.forEach((e)=>{
125 | // check to see if there's a 2021 value
126 | if (typeof data[e]['2021'] !== 'undefined'){
127 | // check to see if there's a median value in 2021
128 | if (typeof data[e]['2021']['median'] !== 'undefined'){
129 | // store whether the value is above or below the national median
130 | if (data[e]['2021']['median']>medianIncome){
131 | aboveMedian.push(e)
132 | } else {
133 | belowMedian.push(e)
134 | }
135 | }
136 | }
137 | });
138 |
139 | keys.forEach((e)=>{
140 | // check to see if there's a 2021 value
141 | if (typeof data[e]['2021'] !== 'undefined'){
142 | // check to see if there's a median value in 2021
143 | if (typeof data[e]['2021']['median'] !== 'undefined'){
144 | // store whether the value is above or below the national median
145 | has2021median[e] = data[e]['2021']['median'];
146 | }
147 | }
148 | });
149 |
150 | // calculate raises in 2021 for q5
151 | keys.forEach((e)=>{
152 | // check to see if there's are 2020 and 2021 values
153 | if ((typeof data[e]['2020'] !== 'undefined') & typeof data[e]['2021'] !== 'undefined'){
154 | // check to see if there's are median values for both years
155 | if ((typeof data[e]['2020']['median'] !== 'undefined') & (typeof data[e]['2021']['median'] !== 'undefined')){
156 | // store whether they got a raise/paycut and by how much
157 | if (data[e]['2021']['median']>data[e]['2020']['median']){ // check if raise
158 | raises_2021[e] = {}
159 | raises_2021[e]['rate'] = (data[e]['2021']['median']-data[e]['2020']['median'])/data[e]['2020']['median']*100
160 | raises_2021[e]['abs'] = data[e]['2021']['median']-data[e]['2020']['median']
161 | }
162 | }
163 | }
164 | });
165 |
166 |
167 | // calculate paycuts in 2020 for q4
168 | keys.forEach((e)=>{
169 | // check to see if there's are 2020 and 2021 values
170 | if ((typeof data[e]['2019'] !== 'undefined') & typeof data[e]['2020'] !== 'undefined'){
171 | // check to see if there's are median values for both years
172 | if ((typeof data[e]['2019']['median'] !== 'undefined') & (typeof data[e]['2020']['median'] !== 'undefined')){
173 | // store whether they got a raise/paycut and by how much
174 | if (data[e]['2019']['median']>data[e]['2020']['median']){ // check if paycut
175 | paycuts_2020[e] = {}
176 | paycuts_2020[e]['rate'] = -(data[e]['2020']['median']-data[e]['2019']['median'])/(data[e]['2019']['median'])*100 // find value of the paycut
177 | paycuts_2020[e]['abs'] = -(data[e]['2020']['median']-data[e]['2019']['median']) // find value of the paycut
178 | }
179 | }
180 | }
181 | });
182 |
183 | function genRandom(max, min){
184 | // generate a random positive or negative number with an absolute value between max and min
185 | return (Math.ceil(Math.random() * (max-min))+min) * (Math.round(Math.random()) ? 1 : -1)
186 | }
187 |
188 | function selectRandom_noRepeat(lst, numWanted){
189 | // create a copy of the list so you don't permanently damage the list
190 | copyLst = Array.from(structuredClone(lst));
191 | finalLst = []
192 | for (let i=0;i