Add academic page

This commit is contained in:
e26chiu 2022-11-23 00:00:47 -05:00
parent 552fe86aa7
commit b42528a3b1
3 changed files with 448 additions and 79 deletions

View File

@ -188,15 +188,15 @@ export const A5 = [
export const A6 = [
{
category: "WINDOWS",
value: "55",
value: 55,
},
{
category: "MACOS",
value: "60",
value: 60,
},
{
category: "LINUX",
value: "35",
value: 35,
},
];
@ -885,111 +885,74 @@ export const A12 = [
export const A12i = [
{
category: "CS146",
"3": 1,
"6": 3,
"7": 3,
"8": 5,
"9": 9,
"10": 11,
"1-4": 1,
"5-7": 6,
"8-10": 25,
},
{
category: "MATH145",
"5": 1,
"6": 1,
"7": 4,
"8": 9,
"9": 7,
"10": 11,
"1-4": 0,
"5-7": 6,
"8-10": 27,
},
{
category: "MATH146",
"3": 1,
"6": 3,
"7": 3,
"8": 5,
"9": 7,
"10": 9,
"1-4": 1,
"5-7": 6,
"8-10": 21,
},
{
category: "MATH147",
"2": 1,
"4": 1,
"6": 3,
"7": 2,
"8": 6,
"9": 1,
"10": 11,
"1-4": 2,
"5-7": 5,
"8-10": 18,
},
{
category: "MATH148",
"1": 1,
"4": 1,
"6": 3,
"7": 3,
"8": 3,
"9": 5,
"10": 3,
"1-4": 2,
"5-7": 6,
"8-10": 11,
},
{
category: "CS240E",
"1": 1,
"3": 1,
"4": 3,
"5": 1,
"6": 3,
"7": 1,
"8": 5,
"9": 4,
"10": 8,
"1-4": 5,
"5-7": 5,
"8-10": 17,
},
{
category: "CS241E",
"1": 1,
"3": 1,
"6": 2,
"7": 1,
"8": 1,
"9": 5,
"10": 3,
"1-4": 2,
"5-7": 3,
"8-10": 9,
},
{
category: "CS245E",
"3": 1,
"6": 1,
"7": 3,
"8": 2,
"9": 2,
"10": 1,
"1-4": 1,
"5-7": 4,
"8-10": 5,
},
{
category: "CS246E",
"2": 1,
"5": 1,
"6": 1,
"7": 2,
"8": 3,
"9": 5,
"10": 11,
"1-4": 1,
"5-7": 4,
"8-10": 19,
},
{
category: "STAT240E",
"6": 3,
"7": 1,
"8": 3,
"9": 1,
"10": 2,
"1-4": 0,
"5-7": 4,
"8-10": 6,
},
{
category: "STAT241E",
"4": 1,
"6": 2,
"7": 4,
"8": 6,
"9": 2,
"10": 1,
"1-4": 1,
"5-7": 6,
"8-10": 9,
},
];
export const A12iKeys = ["1-4", "5-7", "8-10"];
export const A13 = [
{
category: "NO",
@ -1627,15 +1590,15 @@ export const A21i = [
export const A21ii = [
{
category: "Paris, France",
text: "Paris, France",
value: 1,
},
{
category: "South Korea",
text: "South Korea",
value: 1,
},
{
category: "The Netherlands",
text: "The Netherlands",
value: 1,
},
];

View File

@ -96,7 +96,7 @@ export const mockStackedBarGraphData = [
{
category: "2A",
"geese watchers": 40,
"geese breeders": 50,
"geese breeders": 50,
"geese catchers": 70,
},
{

406
pages/academic.tsx Normal file
View File

@ -0,0 +1,406 @@
import {
A1,
A2,
A3,
A4,
A5,
A6,
A7,
A8,
A9,
A10,
A11,
A12,
A12i,
A12iKeys,
A13,
A13i,
A13ii,
A13iii,
A14,
A15,
A16,
A16Keys,
A18,
A18i,
A18ii,
A19,
A19i,
A20,
A21,
A21i,
A21ii,
A21iii,
A21iv,
A21v,
} from "data/academics";
import { pageRoutes } from "data/routes";
import React from "react";
import { Color } from "utils/Color";
import { barGraphProps, DefaultProp, pieChartProps } from "utils/defaultProps";
import { useWindowDimensions } from "utils/getWindowDimensions";
import { useIsMobile } from "utils/isMobile";
import { BarGraphVertical, BarGraphHorizontal } from "@/components/BarGraph";
import { BottomNav } from "@/components/BottomNav";
import { ComponentWrapper } from "@/components/ComponentWrapper";
import { Header } from "@/components/Header";
import { PieChart } from "@/components/PieChart";
import { QuotationCarousel } from "@/components/QuotationCarousel";
import { SectionHeader } from "@/components/SectionHeader";
import { StackedBarGraphVertical } from "@/components/StackedBarGraph";
import { WordCloud } from "@/components/WordCloud";
import styles from "./samplePage.module.css";
export default function Academics() {
const pageWidth = useWindowDimensions().width;
const isMobile = useIsMobile();
return (
<div className={styles.page}>
<Header />
<SectionHeader title="Academics" />
<!-- PROGRAMMING -->
<ComponentWrapper
heading="How many years of coding experience did you have prior to 1A?"
bodyText="Almost 70% of the students that participated had minimal to no coding experience (0 - 2 years), prior to coming into Waterloo. Goes to show that years of programming knowledge is not required to succeed at Waterloo."
>
<div className={styles.graphContainer}>
<PieChart data={A1} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="Is your expected graduation date the same as when you enrolled in the program?"
bodyText="Most people stayed on track with their original plans, but its not unheard of if your degree goes longer than expected."
align="center"
noBackground
>
<div className={styles.graphContainer}>
<PieChart data={A2} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="What is your favourite text editor or IDE?"
bodyText="The class favours VS Code, a versatile and great out of the box IDE with a lot of build in productivity features. Its no surprise its a fan favourite, from the SSHing capabilities to its fast and easy-to-use UI, its pretty popular among coders. We would also like to salute the individuals that enjoy using Microsoft Word and a text editor as their favourite IDE, which are equally as versatile :). Sad to see that no one still loves using the DrRacket IDE once graduating."
align="right"
>
<BarGraphVertical data={A3} {...barGraphProps(isMobile, pageWidth)} />
</ComponentWrapper>
<ComponentWrapper
heading="What is your favourite programming language?"
bodyText="The favourite programming language award for the class of 2022 goes to ….PYTHON! No surprise here, it sounds the most like English. C++ is a very notable language as a part of the CS program thus its no surprise it comes in as the second pick. (Once again its sad to see that the (graduating class of 2022) has losts its passion in being fellow Racket enjoyers). Hopefully post grad you are able to (rekindle your (love)) for using Racket."
align="center"
noBackground
>
<BarGraphVertical data={A4} {...barGraphProps(isMobile, pageWidth)} />
</ComponentWrapper>
<ComponentWrapper
heading="How many coding languages do you know?"
bodyText="85%+ of individuals that participated in the survey know 4 or more languages."
>
<BarGraphVertical data={A5} {...barGraphProps(isMobile, pageWidth)} />
</ComponentWrapper>
<ComponentWrapper
heading="What operating system(s) do you mainly use?"
bodyText="Almost a third of people use macOS exclusively! It is pretty popular among university students in most other programs, but also its interesting to see how even sometimes with the plethora of compatibility issues with macOS, so many CS students will use it."
>
<div className={styles.graphContainer}>
<PieChart data={A6} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<!-- ELECTIVES, SUBJECT, SCHOOL -->
<ComponentWrapper
heading="What category of electives for your degree did you enjoy most?"
bodyText="Seems like the class really enjoyed both their Communications and Humanities courses with almost half of the class choosing both categories as their most enjoyed."
>
<BarGraphVertical data={A7} {...barGraphProps(isMobile, pageWidth)} />
</ComponentWrapper>
<ComponentWrapper
heading="Which non-math elective was your favourite?"
bodyText="Lots of amazing non-math electives mentioned in the list, with CLAS 104 being a crowd favourite."
>
<WordCloud
data={A8}
width={isMobile ? pageWidth / 1.5 : 800}
height={DefaultProp.graphHeight}
wordPadding={7}
desktopMaxFontSize={75}
mobileMaxFontSize={48}
/>
</ComponentWrapper>
<ComponentWrapper
heading="Which CS course was your favourite?"
bodyText="CS246 is the most popular CS course for the class of 2022. Give description on the course and why it is so great. Algos and Data structures, amazing for coding interviews to come in the future. CS348 was also favoured by many students in the class. Facts and description about the course"
>
<WordCloud
data={A9}
width={isMobile ? pageWidth / 1.5 : 800}
height={DefaultProp.graphHeight}
wordPadding={7}
desktopMaxFontSize={75}
mobileMaxFontSize={48}
/>
</ComponentWrapper>
<ComponentWrapper
heading="Which CS course was your least favourite?"
bodyText="CS341 was the least favourite CS course students took. The course has lots of algorithms and efficiency involved, and it does get challenged. CS245 was also a disliked core CS course that students take in their 2A. If you get through this, then the following term is 2B or not 2B…"
>
<WordCloud
data={A10}
width={isMobile ? pageWidth / 1.5 : 800}
height={DefaultProp.graphHeight}
wordPadding={7}
desktopMaxFontSize={75}
mobileMaxFontSize={48}
/>
</ComponentWrapper>
<ComponentWrapper
heading="Which course did you find the most useful for job preparation?"
bodyText="CS246 was deemed the most useful CS core course for job preparation for students. This is interesting to see as it was also the least favourite course for many students. Goes to show that though a course may be disliked it does not deem it useless by any means."
>
<WordCloud
data={A11}
width={isMobile ? pageWidth / 1.5 : 800}
height={DefaultProp.graphHeight}
wordPadding={7}
desktopMaxFontSize={75}
mobileMaxFontSize={48}
/>
</ComponentWrapper>
<ComponentWrapper
heading="Did you take any advanced/enriched courses?"
bodyText="45% of the class has taken at least 1 enriched course before their graduation."
>
<div className={styles.graphContainer}>
<PieChart data={A12} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="If you took any advanced or enriched courses, for each course please indicated how much you enjoyed it?"
bodyText="Advanced/Enriched CS courses are rated pretty high, but generally it seems like the ones taken earlier tend to have better ratings."
>
<StackedBarGraphVertical
width={600}
height={400}
keys={A12iKeys}
colorRange={[
Color.primaryAccent,
Color.secondaryAccentLight,
Color.primaryAccentLighter,
]}
data={A12i}
margin={{
top: 20,
left: 20,
}}
/>
</ComponentWrapper>
<ComponentWrapper
heading="Who is your favourite professor in all of UW?"
bodyText="Class of 2022 would like to shout out Alice Gao, Carmen Bruni, and Lesley Istead as a majority favourites and leaving their mark on the students. However, we would also like to mention that every professor that is a part of the general Math faculty and helps with CS core courses has helped the class of 2022 to succeed and are amazing."
>
<WordCloud
data={A14}
width={isMobile ? pageWidth / 1.5 : 800}
height={DefaultProp.graphHeight}
wordPadding={7}
desktopMaxFontSize={75}
mobileMaxFontSize={48}
/>
</ComponentWrapper>
<ComponentWrapper
heading="Which study term did you think was the hardest?"
bodyText="Term 2 seems to be the hardest year for most CS students with 52% of the individual agreeing on this. 2B has the highest vote from individual which validates the saying, “Two B or not Two B” ADD SOME ANGRY Emojis"
>
<BarGraphVertical data={A15} {...barGraphProps(isMobile, pageWidth)} />
</ComponentWrapper>
<ComponentWrapper
heading="What were your averages for each term? Approximately, what is your cumulative average as of right now?"
bodyText="The majority of people did their best in 1A and their worst in 2A or 2B. However, all terms between 2A and 3B were lower than the other terms, likely because most of the mandatory CS courses that are challenging lie around that period of time."
>
<StackedBarGraphVertical
width={600}
height={400}
keys={A16Keys}
colorRange={[
Color.primaryAccent,
Color.secondaryAccentLight,
Color.primaryAccentLighter,
]}
data={A16}
margin={{
top: 20,
left: 20,
}}
/>
</ComponentWrapper>
<ComponentWrapper
heading="How many classes have you failed?"
bodyText="Most people tend to get by their degree without failing a course, but clearly its not over if you have failed some. :)"
>
<BarGraphVertical data={A20} {...barGraphProps(isMobile, pageWidth)} />
</ComponentWrapper>
<ComponentWrapper
heading="Did you complete an option, specialization or minor?"
bodyText="50% of the students have completed some form of option, specialization, or minor during their undergrad. These three are different categories of ways you can add qualifications to your degree using the electives spots that you have."
>
<div className={styles.graphContainer}>
<PieChart data={A18} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="Which option(s), specialization(s) or minor(s) did you complete?"
bodyText="The most common ones are Combinatorics & Optimization, Business, and Pure Mathematics. However, many people have combined specializations, making their degree very customized and tailored towards their specific interests."
>
<WordCloud
data={A18i}
width={isMobile ? pageWidth / 1.5 : 800}
height={DefaultProp.graphHeight}
wordPadding={7}
desktopMaxFontSize={75}
mobileMaxFontSize={48}
/>
</ComponentWrapper>
<ComponentWrapper heading="What made you want to complete the option, specialization or minor?">
<div className={styles.quotationCarouselDemo}>
<QuotationCarousel data={A18ii} circleDiameter={0} />
</div>
</ComponentWrapper>
<ComponentWrapper heading="Have you overloaded any of your semesters?">
<div className={styles.graphContainer}>
<PieChart data={A19} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="How many overloaded semesters did you take?"
bodyText="Waterloo academic terms can already be hectic however 53% of the individuals were able to overload at least 1 or more term. 16% of the students overloaded 3+ terms. Its also important to take into account that students in CS/BBA are recommended to overload _ terms."
>
<BarGraphVertical data={A19i} {...barGraphProps(isMobile, pageWidth)} />
</ComponentWrapper>
<ComponentWrapper
heading="Did you transfer into your current program?"
bodyText="Class of 2022 would like to shout out Alice Gao, Carmen Bruni, and Lesley Istead as a majority favourites and leaving their mark on the students. However, we would also like to mention that every professor that is a part of the general Math faculty and helps with CS core courses has helped the class of 2022 to succeed and are amazing."
>
<div className={styles.graphContainer}>
<PieChart data={A13} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<!-- TRANSFER -->
<ComponentWrapper
heading="What program did you transfer from?"
bodyText="Class of 2022 would like to shout out Alice Gao, Carmen Bruni, and Lesley Istead as a majority favourites and leaving their mark on the students. However, we would also like to mention that every professor that is a part of the general Math faculty and helps with CS core courses has helped the class of 2022 to succeed and are amazing."
>
<BarGraphVertical data={A13i} {...barGraphProps(isMobile, pageWidth)} />
</ComponentWrapper>
<ComponentWrapper
heading="What term did you transfer into your program?"
bodyText="Almost 25% of students that participated transferred into their current program. With the majority of those students transferring from CFM and Math. Majority of students choose to transfer into their current program of either CFM, CS/BBA, or CS in thier 2A and 2B terms."
>
<BarGraphVertical
data={A13ii}
{...barGraphProps(isMobile, pageWidth)}
/>
</ComponentWrapper>
<ComponentWrapper
heading="What was your reasoning behind transferring?"
bodyText="Having a flexible schedule is one of the more important reasons that people transfer into one of the three programs (most commonly transferring to CS, which has the most flexibility with electives)."
>
<BarGraphVertical
data={A13iii}
{...barGraphProps(isMobile, pageWidth)}
/>
</ComponentWrapper>
<!-- EXCHANGE -->
<ComponentWrapper
heading="Did you take any exchange terms?"
bodyText='According to Wikipedia, the term "exchange" means that a partner institution accepts a student, but does not necessarily mean that the students have to find a counterpart from the other institution with whom to exchange. Not many students took exchange terms from this sample.'
>
<div className={styles.graphContainer}>
<PieChart data={A21} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="What term did you take take an exchange in?"
bodyText="Only 7% of students decided to take an exchange term during their undergrad with most students going during their 3A and 4B terms. Interestingly enough 21% of students were interested in going on an exchange term however were interrupted an unable to go due to Covid."
>
<BarGraphVertical data={A21i} {...barGraphProps(isMobile, pageWidth)} />
</ComponentWrapper>
<ComponentWrapper
heading="Where did you take your exchange term?"
bodyText="Only three people declared exactly where their exchange term was."
>
<WordCloud
data={A21ii}
width={isMobile ? pageWidth / 1.5 : 800}
height={DefaultProp.graphHeight}
wordPadding={7}
desktopMaxFontSize={75}
mobileMaxFontSize={48}
/>
</ComponentWrapper>
<ComponentWrapper
heading="Were you unable to complete an exchange term an exchange term due to COVID-19?"
bodyText="Pretty unfortunate that a lot more people would have gone on exchange if it wasnt for the pandemic. :("
>
<div className={styles.graphContainer}>
<PieChart data={A21iii} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper heading="What was the hardest thing about going on exchange?">
<div className={styles.quotationCarouselDemo}>
<QuotationCarousel data={A21iv} circleDiameter={0} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="What is your favourite memory from your time during the exchange?"
bodyText="Hopefully more students in future classes have the opportunity to have cool experiences like these as well. :)"
>
<div className={styles.quotationCarouselDemo}>
<QuotationCarousel data={A21v} circleDiameter={0} />
</div>
</ComponentWrapper>
<BottomNav
leftPage={pageRoutes.demographics}
rightPage={pageRoutes.coop}
></BottomNav>
</div>
);
}