www
/
cs-2022-class-profile
16
0
Fork 0
Code Issues 11 Pull Requests 1 Projects Releases Wiki Activity

Merge branch 'main' into richardshuai/component-switcher
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Richard Shuai 2023-02-04 21:12:08 -05:00
parent e191bdf40b 71f9125bf2
commit b982a1103f
18 changed files with 339 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
components/About.tsx
View File

@ -14,28 +14,30 @@ export function About() {
<article>
<h4>Computer Science</h4>
<p>
Offered from the Faculty of Mathematics as most commonly a co-op
program, students usually attend 8 school and 6 co-op terms in their
degree. However, CS is very flexible, as many students historically
have dropped co-ops, taken terms off, and messed with their schedule
to fit their desires.
Computer Science (CS) is commonly offered by the Faculty of
Mathematics as a co-op program, with students usually attending 8
school and 6 co-op terms in their degree. However, CS is more
flexible than the other two programs because of the ability to
choose from a wider range and number of electives, to take terms
off, and to change their academic schedules to fit their needs.
</p>
<h4>Computing and Financial Management</h4>
<p>
Computing and Financial Management (CFM) combines the core CS
courses with electives from areas such as accounting, economics, and
financial management. This is a joint offer from the Faculty of
Mathematics and the School of Accounting and Finance, and has the
same schedule (and flexibility) as CS.
financial management. This is a joint offering by the Faculty of
Mathematics and the School of Accounting and Finance. The program is
offered only as a co-op program with 6 co-op terms. The program is
offered only as a co-op program with 6 co-op terms.
</p>
<h4>CS/BBA</h4>
<p>
Joint with Wilfrid Laurier University, the Business Administration
and Computer Science Double Degree (CS/BBA) is an exclusive offering
that allows students to get experience in CS as well as many
that allows students to gain experience in CS as well as many
subfields of business. There are 10 school terms and either 4 or 5
co-op terms in the usual schedule, so it’s a bit more work than CS
or CFM.
co-op terms in the usual schedule, so it’s a longer degree with more
academic terms than CS or CFM.
</p>
</article>
</section>

15
components/BlankLink.tsx Normal file
View File

@ -0,0 +1,15 @@
import React from "react";
export const BodyLink = ({
targetBlank = true,
children,
href,
}: {
href: string;
targetBlank?: boolean;
children: React.ReactNode;
}) => (
<a href={href} target={targetBlank ? "_blank" : ""} rel="noreferrer">
<b>{children}</b>
</a>
);

10
components/ComponentWrapper.tsx
View File

@ -7,7 +7,7 @@ type AlignOption = "left" | "center" | "right";
type ComponentWrapperProps = {
children: React.ReactNode;
heading: string;
bodyText?: string;
bodyText?: string | React.ReactNode;
align?: AlignOption;
noBackground?: boolean;
};
@ -35,7 +35,13 @@ export function ComponentWrapper({
>
<div className={`${styles.internalWrapper} ${styles.textWrapper}`}>
<h3>{heading}</h3>
{bodyText ? <p>{bodyText}</p> : null}
{bodyText ? (
typeof bodyText === "string" ? (
<p>{bodyText}</p>
) : (
bodyText
)
) : null}
</div>
<div
className={`${styles.internalWrapper} ${styles.horizontalScrollOnMobile}`}

38
components/StackedBarGraph.tsx
View File

@ -53,6 +53,14 @@ export type StackedBarProps = {
scalePadding?: number;
/** Margin for each item in the legend */
itemMargin?: string;
/** Hide the first data value in tooltip*/
hideDataValueInTooltip?: boolean;
//** Top tooltip label */
tooltipTopLabel?: string;
//** Bottom tooltip label */
tooltipBottomLabel?: string;
//** Display percentage */
displayPercentage?: boolean;
};
let tooltipTimeout: number;
@ -79,6 +87,10 @@ export const StackedBarGraphVertical = withTooltip<
tooltipData,
hideTooltip,
showTooltip,
hideDataValueInTooltip,
tooltipBottomLabel = "",
tooltipTopLabel = "",
displayPercentage,
}: StackedBarProps & WithTooltipProvidedProps<TooltipData>) => {
const yTotals = data.reduce((allTotals, currCategory) => {
const yTotal = keys.reduce((categoryTotal, k) => {
@ -230,8 +242,15 @@ export const StackedBarGraphVertical = withTooltip<
left={tooltipLeft}
header={tooltipData.key}
>
<p>{tooltipData.bar.data[tooltipData.key]}</p>
<p>{getCategory(tooltipData.bar.data)}</p>
{hideDataValueInTooltip ? null : (
<p>
{tooltipTopLabel} {tooltipData.bar.data[tooltipData.key]}
{displayPercentage ? "%" : ""}
</p>
)}
<p>
{tooltipBottomLabel} {getCategory(tooltipData.bar.data)}
</p>
</TooltipWrapper>
) : null}
</div>
@ -261,6 +280,10 @@ export const StackedBarGraphHorizontal = withTooltip<
tooltipData,
hideTooltip,
showTooltip,
hideDataValueInTooltip,
tooltipBottomLabel = "",
tooltipTopLabel = "",
displayPercentage,
}: StackedBarProps & WithTooltipProvidedProps<TooltipData>) => {
const yTotals = data.reduce((allTotals, currCategory) => {
const yTotal = keys.reduce((categoryTotal, k) => {
@ -409,8 +432,15 @@ export const StackedBarGraphHorizontal = withTooltip<
left={tooltipLeft}
header={tooltipData.key}
>
<p>{tooltipData.bar.data[tooltipData.key]}</p>
<p>{getCategory(tooltipData.bar.data)}</p>
{hideDataValueInTooltip ? null : (
<p>
{tooltipTopLabel} {tooltipData.bar.data[tooltipData.key]}
{displayPercentage ? "%" : ""}
</p>
)}
<p>
{tooltipBottomLabel} {getCategory(tooltipData.bar.data)}
</p>
</TooltipWrapper>
) : null}
</div>

137
data/academics.ts
View File

@ -883,6 +883,12 @@ export const A12 = [
];
export const A12i = [
{
category: "CS145",
"1-4": 1,
"5-7": 10,
"8-10": 23,
},
{
category: "CS146",
"1-4": 1,
@ -1068,7 +1074,7 @@ export const A14 = [
},
{
text: "Carmen Bruni",
value: 10,
value: 9,
},
{
text: "Michael Wallace",
@ -1242,101 +1248,101 @@ export const A15 = [
export const A16 = [
{
category: "1A",
"0-30": 0.04,
"0-30": 4,
"30-60": 0,
"60-70": 0.04,
"70-80": 0.152,
"80-90": 0.495,
"90-95": 0.192,
"95-100": 0.081,
"60-70": 4,
"70-80": 15.2,
"80-90": 49.5,
"90-95": 19.2,
"95-100": 8.1,
},
{
category: "1B",
"0-30": 0.04,
"30-60": 0.01,
"60-70": 0.091,
"70-80": 0.232,
"80-90": 0.434,
"90-95": 0.121,
"95-100": 0.071,
"0-30": 4,
"30-60": 1,
"60-70": 9.1,
"70-80": 23.2,
"80-90": 43.4,
"90-95": 12.1,
"95-100": 7.1,
},
{
category: "2A",
"0-30": 0.0208,
"30-60": 0.0312,
"60-70": 0.052,
"70-80": 0.2604,
"80-90": 0.4479,
"90-95": 0.1354,
"95-100": 0.0417,
"0-30": 2.08,
"30-60": 3.12,
"60-70": 5.2,
"70-80": 26.04,
"80-90": 44.79,
"90-95": 13.54,
"95-100": 4.17,
},
{
category: "2B",
"0-30": 0.051,
"0-30": 5.1,
"30-60": 0,
"60-70": 0.112,
"70-80": 0.296,
"80-90": 0.378,
"90-95": 0.133,
"95-100": 0.031,
"60-70": 11.2,
"70-80": 29.6,
"80-90": 37.8,
"90-95": 13.3,
"95-100": 3.1,
},
{
category: "3A",
"0-30": 0.032,
"30-60": 0.033,
"60-70": 0.032,
"70-80": 0.149,
"80-90": 0.447,
"90-95": 0.245,
"95-100": 0.064,
"0-30": 3.2,
"30-60": 3.3,
"60-70": 3.2,
"70-80": 14.9,
"80-90": 44.7,
"90-95": 24.5,
"95-100": 6.4,
},
{
category: "3B",
"0-30": 0.033,
"30-60": 0.033,
"60-70": 0.043,
"70-80": 0.108,
"80-90": 0.355,
"90-95": 0.312,
"95-100": 0.118,
"0-30": 3.3,
"30-60": 3.3,
"60-70": 4.3,
"70-80": 10.8,
"80-90": 35.5,
"90-95": 31.2,
"95-100": 11.8,
},
{
category: "4A",
"0-30": 0.011,
"30-60": 0.032,
"60-70": 0.053,
"70-80": 0.129,
"80-90": 0.355,
"90-95": 0.312,
"95-100": 0.108,
"0-30": 1.1,
"30-60": 3.2,
"60-70": 5.3,
"70-80": 12.9,
"80-90": 35.5,
"90-95": 31.2,
"95-100": 10.8,
},
{
category: "4B",
"0-30": 0.011,
"30-60": 0.033,
"60-70": 0.023,
"70-80": 0.149,
"80-90": 0.241,
"90-95": 0.138,
"95-100": 0.092,
"0-30": 1.1,
"30-60": 3.3,
"60-70": 2.3,
"70-80": 14.9,
"80-90": 24.1,
"90-95": 13.8,
"95-100": 9.2,
},
{
category: "5A",
"0-30": 0.02,
"30-60": 0.04,
"60-70": 0.02,
"70-80": 0.039,
"80-90": 0.137,
"0-30": 2,
"30-60": 4,
"60-70": 2,
"70-80": 3.9,
"80-90": 13.7,
"90-95": 0,
"95-100": 0.059,
"95-100": 5.9,
},
{
category: "CAV",
"0-30": 0,
"30-60": 0,
"60-70": 0.03774,
"70-80": 0.28302,
"80-90": 0.67924,
"60-70": 3.774,
"70-80": 28.302,
"80-90": 67.924,
"90-95": 0,
"95-100": 0,
},
@ -1453,7 +1459,6 @@ export const A18ii = [
"To make getting a visa easier",
"Interesting Courses",
"Took a bunch of courses on the option's list originally, then realized I could just fill in the rest of the courses",
"asgfsd",
"Interest in the field after CO250",
"Interest",
"Just to add a specialization",
@ -1478,7 +1483,7 @@ export const A19 = [
export const A19i = [
{
category: "0",
value: 15,
value: 56,
},
{
category: "1",

36
data/coop.ts
View File

@ -10,17 +10,29 @@ export const C1 = [
];
export const C2 = [
{
text: "Pacific NW USA",
value: 3,
},
{
text: "West Coast CAN",
value: 12,
},
{
text: "Remote",
value: 2,
},
{
text: "East Coast Canada",
value: 1,
},
{
text: "Toronto",
value: 32,
value: 34,
},
{
text: "California",
value: 26,
},
{
text: "West CA",
value: 12,
value: 25,
},
{
text: "East USA",
@ -28,7 +40,15 @@ export const C2 = [
},
{
text: "Waterloo",
value: 9,
value: 10,
},
{
text: "Chicago",
value: 1,
},
{
text: "Tokyo",
value: 1,
},
];
@ -478,7 +498,7 @@ export const C7v = [
},
];
export const C7viKey = ["5", "4", "3", "2", "1"];
export const C7viKey = ["1", "2", "3", "4", "5"];
export const C7vi = [
{

8
data/demographics.ts
View File

@ -199,7 +199,7 @@ export const D7 = [
},
{
text: "GTA / Toronto",
value: 1,
value: 58,
},
{
text: "United Arab Emirates",
@ -311,16 +311,12 @@ export const D10 = [
export const D11 = [
{
category: "No religious affiliation",
value: 79,
value: 80,
},
{
category: "Christianity",
value: 16,
},
{
category: "Atheist",
value: 1,
},
{
category: "Judaism",
value: 3,

4
data/intimacy-and-drugs.ts
View File

@ -328,7 +328,6 @@ export const I9 = [
"I took a course on dating but am failing the course",
"they're a part-time job",
"Relationships take a lot of work, but they're worth it with the right people.",
"Umm",
"It takes a lot of work and patience",
"My understanding of dating and relationships got a lot more detailed. The reality takes a lot more work and emotional maturity.",
"I stopped simping",
@ -352,7 +351,6 @@ export const I9 = [
"Completely",
"I asked a girl out for the first time! I feel like I know more about what I don't know when it comes to relationships and dating, and feel more confident than before about social situations in general.",
"As someone who's been rejected and rejected, it's fine to just be single",
"dfgdfgdfg",
"People change",
"More casual now polyamorous.",
"How others treat me, how I treat others.",
@ -407,12 +405,10 @@ export const I10 = [
"It's tough",
"Confidence comes not from knowing whether you'll succeed, but from knowing you'll be okay no matter the outcome. Stay true to yourself, and find someone such that you can make each other better.",
"5 years later and still don't have any to give sorry xD",
"rewgdhdhd",
"without sexual more love no cheat",
"I hope you'll come earlier",
"It’ll happen when it does :)",
"Reciprocity",
"just talk to girls irl sometime holy fucking shit",
"Good luck :p",
"Improve yourself, get self esteem, and put yourself out there! It's really not this big, super hard thing to attain for the average person. Don't get into a bad one though",
"am unqualified, idk",

1
data/mental-health.ts
View File

@ -196,7 +196,6 @@ export const H5i = [
"It is not as accessible as you would hope, and it is hard to continue to see your doctor",
"Good",
"not half bad.",
"Dogshit. long wait times. I was low priority since I was 'well functioning'",
"No experience ",
"It was just alright.",
"Meh",

46
data/post-grad.ts
View File

@ -190,35 +190,39 @@ export const P8 = [
},
{
text: "Finance",
value: 1,
value: 8,
},
{
text: "Cloud Computing",
value: 5,
},
{
text: "Artificial Intelligence",
value: 3,
},
{
text: "Robotics",
value: 1,
},
{
text: "Data Science",
value: 6,
},
{
text: "Research",
text: "Artificial Intelligence",
value: 5,
},
{
text: "Operating System",
value: 2,
},
{
text: "Robotics",
value: 3,
},
{
text: "Security",
value: 1,
text: "Data Science",
value: 10,
},
{
text: "Research",
value: 6,
},
{
text: "Cybersecurity",
value: 2,
},
{
text: "Hardware",
value: 2,
value: 4,
},
{
text: "Mobile Development",
@ -228,4 +232,12 @@ export const P8 = [
text: "Computer Networking",
value: 2,
},
{
text: "Programming Languages",
value: 5,
},
{
text: "Compilers",
value: 1,
},
];

7
pages/_app.css
View File

@ -10,6 +10,7 @@ body {
--lighter-pink: #FFE7E7;
--orange: #F5917B;
--light-orange: #FFC4A9;
--lighter-orange: #ffddcd;
--navy: #252D41;
--light-navy: #354265;
--dark-navy: #141D34;
@ -36,8 +37,11 @@ body {
--dark--primary-accent: var(--pink);
--dark--primary-accent-light: var(--light-pink);
--dark--primary-accent-lighter: var(--lighter-pink);
--dark--primary-accent-dark: #dc538e;
--dark--primary-accent-darker: #c8417c;
--dark--secondary-accent: var(--orange);
--dark--secondary-accent-light: var(--light-orange);
--dark--secondary-accent-lighter: var(--lighter-orange);
--dark--translucent-accent: rgba(239, 131, 157, 0.75);
--dark--primary-heading: #FFC48D;
--dark--secondary-heading: var(--pink);
@ -54,8 +58,11 @@ body {
--primary-accent: var(--dark--primary-accent);
--primary-accent-light: var(--dark--primary-accent-light);
--primary-accent-lighter: var(--dark--primary-accent-lighter);
--primary-accent-dark: var(--dark--primary-accent-dark);
--primary-accent-darker: var(--dark--primary-accent-darker);
--secondary-accent: var(--dark--secondary-accent);
--secondary-accent-light: var(--dark--secondary-accent-light);
--secondary-accent-lighter: var(--dark--secondary-accent-lighter);
--translucent-accent: var(--dark--translucent-accent);
--primary-heading: var(--dark--primary-heading);
--secondary-heading: var(--dark--secondary-heading);

9
pages/academics.tsx
View File

@ -275,12 +275,17 @@ export default function Academics() {
height={400}
keys={A16Keys}
colorRange={[
Color.primaryAccent,
Color.secondaryAccentLight,
Color.primaryAccentLighter,
Color.secondaryAccentLighter,
Color.secondaryAccentLight,
Color.primaryAccentLight,
Color.primaryAccent,
Color.primaryAccentDark,
Color.primaryAccentDarker,
]}
data={A16}
margin={barGraphMargin}
displayPercentage={true}
/>
</ComponentWrapper>

12
pages/contributors.tsx
View File

@ -27,9 +27,15 @@ export function ContributorGroup({ group }: ContributorGroupProps) {
.map((d, idx) => {
return (
<li key={idx}>
<a href={d.link} target="_blank" rel="noreferrer">
{d.name}
</a>
{d.link ? (
<a href={d.link} target="_blank" rel="noreferrer">
{d.name}
</a>
) : (
<a href="#" onClick={(e) => e.preventDefault()}>
{d.name}
</a>
)}
</li>
);
})}

10
pages/coop.tsx
View File

@ -216,7 +216,7 @@ export default function CoopPage() {
{/* C7v */}
<ComponentWrapper
heading="What was your coop evaluation rating?"
bodyText="Ratings were pretty positive overall! It seems that it's not extremely hard to get an outstanding rating!"
bodyText="Ratings were pretty positive overall! It seems that it's not extremely hard to get an outstanding rating! The y-axis represents the co-op term while the x-axis represents the number of students who have given a rating."
>
<div>
<StackedBarGraphHorizontal
@ -231,6 +231,8 @@ export default function CoopPage() {
]}
data={C7v}
margin={barGraphMargin}
displayPercentage
tooltipBottomLabel="Coop Term: "
/>
</div>
</ComponentWrapper>
@ -252,10 +254,12 @@ export default function CoopPage() {
Color.secondaryAccentLight,
Color.primaryAccentLighter,
Color.secondaryAccent,
Color.primaryText,
Color.primaryHeading,
]}
data={C7vi}
margin={barGraphMargin}
tooltipBottomLabel="Coop Term: "
displayPercentage
/>
</div>
</ComponentWrapper>
@ -296,6 +300,8 @@ export default function CoopPage() {
colorRange={[Color.primaryAccent, Color.secondaryAccentLight]}
data={C7viii}
margin={barGraphMargin}
displayPercentage={true}
tooltipBottomLabel="Coop term: "
/>
</div>
</ComponentWrapper>

75
pages/demographics.tsx
View File

@ -25,6 +25,7 @@ import { useWindowDimensions } from "utils/getWindowDimensions";
import { useIsMobile } from "utils/isMobile";
import { BarGraphVertical, BarGraphHorizontal } from "@/components/BarGraph";
import { BodyLink } from "@/components/BlankLink";
import { BottomNav } from "@/components/BottomNav";
import { ComponentWrapper } from "@/components/ComponentWrapper";
import { Header } from "@/components/Header";
@ -50,7 +51,7 @@ export default function Demographics() {
<ComponentWrapper
heading="What program are you in?"
bodyText="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
bodyText="There are a total of 106 respondents of the CS Class Profile. The majority of students are just in CS, due to CS being the largest program in size compared to CFM and CS/BBA. Breaking it down, 89 respondents were in CS, 12 were CS/BBA, and 5 were in CFM."
>
<div className={styles.graphContainer}>
<PieChart data={D1} {...pieChartProps(isMobile, pageWidth)} />
@ -59,7 +60,26 @@ export default function Demographics() {
<ComponentWrapper
heading="Please select the gender identity option(s) with which you identify."
bodyText="The ratio between different genders and pronouns is pretty drastic, but it’s important to note that this is not representative of everyone. There is also an obvious correlation between the gender identities and used pronouns. Note that certain respondents have chosen two or more of the listed categories. We have counted each of them as a separate entry rather than a category itself."
bodyText={
<p>
About 33% of students identified as women or gender non-conforming
(women+). This statistic has been steadily increasing throughout the
years, as seen at{" "}
<BodyLink href="https://uwaterloo.ca/women-in-computer-science/statistics">
this link
</BodyLink>
. According to the same source, in 2017/2018 (when many 2022
graduates were admitted), around 24% of CS admits, 34% of CFM
admits, and 41% of CS/BBA admits were women+. Underrepresented
gender identities is a popular topic in the tech community, and so
it is promising that a more diverse range of people are becoming
interested in CS! Take a look at clubs such as
<BodyLink href="https://wics.uwaterloo.ca/"> WiCS </BodyLink> and
<BodyLink href="https://www.techplusuw.com/"> Tech+ </BodyLink>
that address these issues and work to provide an inclusive
environment in UW&apos;s tech scene.
</p>
}
align="right"
noBackground
>
@ -80,7 +100,17 @@ export default function Demographics() {
<ComponentWrapper
heading="Please select the racial category or categories with which you primarily identify."
bodyText="We have quite a bit diversity in here! It’s great to see that, and extrapolating this to the rest of the population would probably yield similar results. Note that certain respondents have chosen two or more of the listed categories. We have counted each of them as a separate entry rather than a category itself."
bodyText={
<p>
The largest racial group was East Asian at about 64%, followed by
White at 17%, and South Asian at 12%. Note that certain respondents
have chosen two or more of the listed categories. We have counted
each of them as a separate entry rather than a category itself.
Check out clubs such as
<BodyLink href="https://www.techplusuw.com/"> Tech+ </BodyLink>,
which supports ethnic minorities in tech!
</p>
}
align="left"
noBackground
>
@ -89,7 +119,7 @@ export default function Demographics() {
<ComponentWrapper
heading="What was your high school admissions average?"
bodyText="With a mean average of roughly 95.5%, getting into any of these programs is no easy feat. That makes everyone special from the day they were admitted into the school! :)"
bodyText="With a mean average of roughly 95.5%, getting into any of these programs is no easy feat. That makes everyone special from the day they were admitted into the school!"
>
<BarGraphVertical
data={D5}
@ -100,7 +130,20 @@ export default function Demographics() {
<ComponentWrapper
heading="Please select the sexual identity option(s) you identify with."
bodyText="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics. Note that certain respondents have chosen two or more of the listed categories. We have counted each of them as a separate entry rather than a category itself."
bodyText={
<p>
Over 27% of respondents identified as LGBTQ+. UW has plenty of
groups that support the LGBTQ+ community that can be found
<BodyLink href="https://uwaterloo.ca/human-rights-equity-inclusion/equity-office/pride-uwaterloo">
{" "}
here
</BodyLink>
. Clubs such as{" "}
<BodyLink href="https://www.techplusuw.com/"> Tech+ </BodyLink>
and <BodyLink href="https://ostem.clubs.wusa.ca/"> oSTEM </BodyLink>
support queer and trans students in tech and STEM environments!
</p>
}
align="right"
noBackground
>
@ -113,7 +156,7 @@ export default function Demographics() {
<ComponentWrapper
heading="Where did you live before coming to UW?"
bodyText="UW CS gets quite a bit from the GTA as most people may expect. But it’s always great to meet people that come from all over the place."
bodyText="The UW computing programs receive the most students from the GTA/Toronto, as most people may expect. But it’s always great to meet people from all over the world."
align="right"
>
<WordCloud
@ -128,7 +171,7 @@ export default function Demographics() {
<ComponentWrapper
heading="What is the highest education level of your parents?"
bodyText="There’s quite a bit of spread in this chart! The real question is, how many of us are matching our parent’s levels of education? Find out later in the Class Profile…"
bodyText="The most common education level of parents indicated by respondents was a Bachelor's Degree. That means that students will meet or surpass this level of education! The trend seems to be that children will follow in their parents' footsteps to graduate from a university. Find out later in the class profile how students want to continue past this stage of education..."
noBackground
>
<BarGraphVertical data={D8} {...barGraphProps(isMobile, pageWidth)} />
@ -136,7 +179,19 @@ export default function Demographics() {
<ComponentWrapper
heading="What was your family income before entering your current UW program?"
bodyText="Most families made more than the average income in Canada today, which has been an increasing number over the last several years (apart from 2019 to 2020). So, it’s safe to say the average income of these individuals was also higher than the average income of Canada at the time they started university."
bodyText={
<p>
Most families made more than the average family income in Canada in
2020 (
<BodyLink href="https://www150.statcan.gc.ca/t1/tbl1/en/tv.action?pid=1110001201">
$104,350
</BodyLink>
) The range of 51k to 200k was the most common among families. To
sustain a first-year tuition fee that can hover between $8,000 to
$55,000, it would make sense for many families to rely on other
sources of financial support.
</p>
}
align="right"
>
<BarGraphVertical
@ -148,7 +203,7 @@ export default function Demographics() {
<ComponentWrapper
heading="How many close relatives have attended UW (i.e. siblings, cousins, aunts & uncles, parents, etc.)?"
bodyText="Wow! There’s a lot of people that are coming to UW as the first in the family, but it’s great to see that we have people who have had older siblings or other family members come here as well."
bodyText="Wow! The vast majority of students are the first in the family to be a UW graduate. This could be explained by older relatives receiving education in other countries, or simply the vast number of other universities in Canada."
align="left"
noBackground
>
@ -161,7 +216,7 @@ export default function Demographics() {
<ComponentWrapper
heading="Please indicate your religion and/or spiritual affiliation."
bodyText="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics. Note that certain respondents have chosen two or more of the listed categories. We have counted each of them as a separate entry rather than a category itself."
bodyText="80 respondents identified themselves as non-religious, which is a surprising 72% of the total responses to this question. According to Statistics Canada, in 2019, 68% of Canadians reported being religious. However, this number has decreased over the years, and this is heavily reflected in the younger generations such as the students in this class profile."
align="right"
>
<BarGraphHorizontal

1
pages/frontpage.module.css
View File

@ -86,6 +86,7 @@
font-size: calc(30rem / 16);
color: var(--primary-accent-light);
font-weight: 700;
font-family: 'Inconsolata';
position: relative;
cursor: pointer;
padding: 0;

63
pages/index.tsx
View File

@ -3,6 +3,7 @@ import React from "react";
import { basePath } from "utils/getBasePath";
import { About } from "@/components/About";
import { BodyLink } from "@/components/BlankLink";
import { CenterWrapper } from "@/components/CenterWrapper";
import { Header } from "@/components/Header";
import { Sections } from "@/components/Sections";
@ -38,39 +39,47 @@ export default function Home() {
<CenterWrapper>
<h1>Preface</h1>
<p>
The CS Class Profile consists of data relevant to CS, CFM, and
CS/BBA students. These were combined with the knowledge that
students in these programs tend to have similar experiences, as many
of the same CS required courses are shared. In the standard co-op
offering, CS and CFM take 4 years and 2 semesters to complete, while
CS/BBA can take up to a full 5 years.
The 2022 CS Class Profile consists of data relevant to CS, CFM, and
CS/BBA students completing their undergrad in 2022. These were
combined with the knowledge that students in these programs tend to
have similar experiences, as they share many core courses. In the
standard co-op offering, CS and CFM take 4 years and 2 terms to
complete, while CS/BBA can take up to a full 5 years.
</p>
<p>
Computer Science (and the others) is known to be a very prestigious
program, and is very well known in Canada as well as across the
world. For prospective students or anyone who is interested in
learning more about what the students are like, this CS Class
Profile will attempt to answer some of your questions, and you may
even learn a thing or two you didn’t expect!
The University of Waterloo’s computer science programs are known to
be prestigious and well-known in Canada as well as across the world.
As of 2022, it ties for first place in Maclean’s university
rankings, and 25th internationally as a subject by the QS World
University rankings. For prospective students or anyone who is
interested in learning more about what the students are like, this
CS Class Profile will attempt to answer some of your questions, and
you may even learn a thing or two you didn’t expect!
</p>
<p>
The survey questions were approved by the Institutional Analysis &
Planning, where all University of Waterloo stakeholders that are
interested in conducting a non-academic research survey involving a
large portion of the UWaterloo population are reviewed and approved.
The entirety of the survey creation, data processing, and the
creation of this website was done by the{" "}
According to the{" "}
<b>
<a
href="https://csclub.uwaterloo.ca"
target="_blank"
rel="noreferrer"
>
<BodyLink href="https://uwaterloo.ca/institutional-analysis-planning/university-data-and-statistics/student-data/degrees-granted-0">
Institutional Analysis & Planning (IAP)
</BodyLink>
</b>
, there were a 613 graduates from CS, CFM, and CS/BBA, leading to a
overall survey turnout of 17%. By program, this is a 17% turnout
from CS graduates, 22% turnout from CS/BBA graduates, and 14%
turnout from CFM graduates.
</p>
<p>
The survey questions were approved by the IAP, where all University
of Waterloo stakeholders that are interested in conducting a
non-academic research survey involving a large portion of the UW
population are reviewed and approved. The entirety of the survey
creation and data processing was done by the{" "}
<b>
<BodyLink href="https://csclub.uwaterloo.ca">
UW Computer Science Club
</a>
</b>{" "}
so please check us out if you enjoy what you see! All of the graphs,
and designs on this website were built by us!
</BodyLink>
</b>
, so please check us out if you enjoy what you see!
</p>
</CenterWrapper>
<Sections data={pageRoutes} className={styles.homeSectionsStyles} />

6
utils/Color.ts
View File

@ -5,8 +5,11 @@ const colorNames = [
"primaryAccent",
"primaryAccentLight",
"primaryAccentLighter",
"primaryAccentDark",
"primaryAccentDarker",
"secondaryAccent",
"secondaryAccentLight",
"secondaryAccentLighter",
"primaryHeading",
"secondaryHeading",
"link",
@ -26,8 +29,11 @@ export const Color: { [key in ColorName]: string } = {
primaryAccent: "var(--primary-accent)",
primaryAccentLight: "var(--primary-accent-light)",
primaryAccentLighter: "var(--primary-accent-lighter)",
primaryAccentDark: "var(--primary-accent-dark)",
primaryAccentDarker: "var(--primary-accent-darker)",
secondaryAccent: "var(--secondary-accent)",
secondaryAccentLight: "var(--secondary-accent-light)",
secondaryAccentLighter: "var(--secondary-accent-lighter)",
primaryHeading: "var(--primary-heading)",
secondaryHeading: "var(--secondary-heading)",
link: "var(--link)",