From 3936b7870eb3a6e23ad4f186f36ded9897936706 Mon Sep 17 00:00:00 2001
From: Beihao Zhou <b72zhou@csclub.uwaterloo.ca>
Date: Wed, 7 Dec 2022 21:12:33 -0500
Subject: [PATCH 1/4] Add LifeStyle + Interest Page (Close #56) (#101)

https://b72zhou-life-and-interest-page-csc-class-pro-snedadah.k8s.csclub.cloud/lifestyle-and-interests/
Co-authored-by: Rebecca-Chou <beihaozhou@gmail.com>
Co-authored-by: e26chiu <e26chiu@csc.uwaterloo.ca>
Co-authored-by: Mark Chiu <e26chiu@csclub.uwaterloo.ca>
Reviewed-on: https://git.csclub.uwaterloo.ca/www/cs-2022-class-profile/pulls/101
Reviewed-by: Mark Chiu <e26chiu@csclub.uwaterloo.ca>
---
 data/lifestyle-and-interests.ts   | 725 ++++++++++++++++++++++++++++++
 pages/lifestyle-and-interests.tsx | 255 +++++++++++
 2 files changed, 980 insertions(+)
 create mode 100644 data/lifestyle-and-interests.ts
 create mode 100644 pages/lifestyle-and-interests.tsx

diff --git a/data/lifestyle-and-interests.ts b/data/lifestyle-and-interests.ts
new file mode 100644
index 0000000..26d0af6
--- /dev/null
+++ b/data/lifestyle-and-interests.ts
@@ -0,0 +1,725 @@
+export const L1 = [
+  {
+    category: "Yes",
+    value: 85,
+  },
+  {
+    category: "No",
+    value: 15,
+  },
+];
+
+export const L2 = [
+  {
+    category: "3+",
+    value: 85.5,
+  },
+  {
+    category: "2",
+    value: 12.5,
+  },
+  {
+    category: "1",
+    value: 1,
+  },
+  {
+    category: "0",
+    value: 1,
+  },
+];
+
+export const L3 = [
+  {
+    category: "Never",
+    value: 76,
+  },
+  {
+    category: "No longer",
+    value: 5,
+  },
+  {
+    category: "Still",
+    value: 19,
+  },
+  {
+    category: "Became",
+    value: 2,
+  },
+];
+
+export const L4 = [
+  {
+    category: "Yes",
+    value: 55,
+  },
+  {
+    category: "No",
+    value: 12.5,
+  },
+  {
+    category: "Knew",
+    value: 34,
+  },
+];
+
+export const L5 = [
+  {
+    category: "0",
+    value: 9,
+  },
+  {
+    category: "1",
+    value: 6,
+  },
+  {
+    category: "2",
+    value: 12,
+  },
+  {
+    category: "3",
+    value: 24,
+  },
+  {
+    category: "4",
+    value: 16,
+  },
+  {
+    category: "5",
+    value: 17,
+  },
+  {
+    category: "6",
+    value: 11,
+  },
+  {
+    category: "7",
+    value: 8,
+  },
+];
+
+export const L6 = [
+  {
+    category: "Few times a week",
+    value: 4,
+  },
+  {
+    category: "Weekly",
+    value: 6,
+  },
+  {
+    category: "Once every few weeks",
+    value: 3,
+  },
+  {
+    category: "Monthly",
+    value: 7,
+  },
+  {
+    category: "Once every few months",
+    value: 43,
+  },
+  {
+    category: "Never",
+    value: 41,
+  },
+];
+
+export const L7 = [
+  {
+    category: "Strongly agree",
+    value: 9,
+  },
+  {
+    category: "Agree",
+    value: 43,
+  },
+  {
+    category: "Neither",
+    value: 19,
+  },
+  {
+    category: "Disagree",
+    value: 26,
+  },
+  {
+    category: "Strongly disagree",
+    value: 7,
+  },
+];
+
+export const L8 = [
+  {
+    category: "Almost every week",
+    value: 12,
+  },
+  {
+    category: "Couple times per month",
+    value: 36,
+  },
+  {
+    category: "Monthly",
+    value: 2,
+  },
+  {
+    category: "Holidays only",
+    value: 18,
+  },
+  {
+    category: "Rarely",
+    value: 35,
+  },
+];
+
+export const L9 = [
+  {
+    category: "Before 9",
+    value: 1,
+  },
+  {
+    category: "9pm - 11pm",
+    value: 11,
+  },
+  {
+    category: "11pm - 1am",
+    value: 29,
+  },
+  {
+    category: "1am - 3am",
+    value: 46,
+  },
+  {
+    category: "3am - 5am",
+    value: 12,
+  },
+  {
+    category: "5am onwards",
+    value: 3,
+  },
+];
+
+export const L10 = [
+  {
+    category: "0-2",
+    value: 1,
+  },
+  {
+    category: "3-4",
+    value: 2,
+  },
+  {
+    category: "5-6",
+    value: 30,
+  },
+  {
+    category: "7-8",
+    value: 63,
+  },
+  {
+    category: "9+",
+    value: 8,
+  },
+];
+
+export const L11 = [
+  {
+    category: "0",
+    value: 8,
+  },
+  {
+    category: "1",
+    value: 13,
+  },
+  {
+    category: "2",
+    value: 19,
+  },
+  {
+    category: "3",
+    value: 21,
+  },
+  {
+    category: "4",
+    value: 10,
+  },
+  {
+    category: "5",
+    value: 18,
+  },
+  {
+    category: "6",
+    value: 6,
+  },
+  {
+    category: "7",
+    value: 9,
+  },
+];
+
+export const L12 = [
+  {
+    text: "Gol's Lanzhou Noodle",
+    value: 15,
+  },
+  {
+    text: "Lazeez Shawarma",
+    value: 5,
+  },
+  {
+    text: "Nuri Village",
+    value: 5,
+  },
+  {
+    text: "Ken's sushi",
+    value: 8,
+  },
+  {
+    text: "Williams Fresh Cafe",
+    value: 4,
+  },
+  {
+    text: "Song's Lamian",
+    value: 2,
+  },
+  {
+    text: "Shinwa",
+    value: 3,
+  },
+  {
+    text: "Oka Sushi",
+    value: 2,
+  },
+  {
+    text: "Mel's",
+    value: 2,
+  },
+  {
+    text: "Shawarma Plus",
+    value: 3,
+  },
+  {
+    text: "iPotato",
+    value: 3,
+  },
+  {
+    text: "Kim's Kitchen",
+    value: 2,
+  },
+  {
+    text: "Baba grill",
+    value: 2,
+  },
+  {
+    text: "Waterloo Star",
+    value: 1,
+  },
+  {
+    text: "Loobapbap",
+    value: 1,
+  },
+  {
+    text: "Momo",
+    value: 1,
+  },
+  {
+    text: "Onnuri",
+    value: 1,
+  },
+  {
+    text: "Kinkaku",
+    value: 1,
+  },
+  {
+    text: "Tim Hortons",
+    value: 1,
+  },
+  {
+    text: "Fresh Burrito",
+    value: 1,
+  },
+  {
+    text: "Home Garden - Taste of Taiwan",
+    value: 1,
+  },
+  {
+    text: "Yangyum",
+    value: 1,
+  },
+  {
+    text: "Mozy's",
+    value: 1,
+  },
+  {
+    text: "Rolltations",
+    value: 1,
+  },
+  {
+    text: "Harvey's",
+    value: 1,
+  },
+  {
+    text: "Fantastic Wok",
+    value: 1,
+  },
+  {
+    text: "Foodie Fruitie",
+    value: 1,
+  },
+  {
+    text: "Bao Sandwich Bar",
+    value: 1,
+  },
+  {
+    text: "Soul Seoul",
+    value: 1,
+  },
+  {
+    text: "Burrito Boyz",
+    value: 1,
+  },
+  {
+    text: "Poke Box",
+    value: 1,
+  },
+  {
+    text: "Thai Express",
+    value: 1,
+  },
+  {
+    text: "Molly blooms",
+    value: 1,
+  },
+  {
+    text: "Better Chef",
+    value: 1,
+  },
+];
+
+export const L13 = [
+  {
+    category: "Sometimes easy",
+    value: 5,
+  },
+  {
+    category: "Always easy",
+    value: 5,
+  },
+  {
+    category: "Always easy and sometimes medium",
+    value: 25,
+  },
+  {
+    category: "Always easy and medium",
+    value: 22,
+  },
+  {
+    category: "Always medium and sometimes hard",
+    value: 32,
+  },
+  {
+    category: "Always medium and hard",
+    value: 10,
+  },
+];
+
+export const L14 = [
+  {
+    category: "0",
+    value: 22,
+  },
+  {
+    category: "1",
+    value: 18,
+  },
+  {
+    category: "2",
+    value: 22,
+  },
+  {
+    category: "3",
+    value: 21,
+  },
+  {
+    category: "4",
+    value: 5,
+  },
+  {
+    category: "5",
+    value: 8,
+  },
+  {
+    category: "6",
+    value: 4,
+  },
+  {
+    category: "7",
+    value: 1,
+  },
+  {
+    category: "8",
+    value: 1,
+  },
+];
+
+export const L16 = [
+  {
+    category: "Never or rarely",
+    value: 89.1,
+  },
+  {
+    category: "1+ per year",
+    value: 9.9,
+  },
+  {
+    category: "Weekly",
+    value: 1,
+  },
+];
+
+export const L17 = [
+  {
+    text: "MathSoc",
+    value: 9,
+  },
+  {
+    text: "Blueprint",
+    value: 8,
+  },
+  {
+    text: "Muay Thai",
+    value: 8,
+  },
+  {
+    text: "Volleyball",
+    value: 6,
+  },
+  {
+    text: "Dodgeball",
+    value: 6,
+  },
+  {
+    text: "Frisbee",
+    value: 7,
+  },
+  {
+    text: "CSC",
+    value: 5,
+  },
+  {
+    text: "Basketball",
+    value: 6,
+  },
+  {
+    text: "UWACC",
+    value: 5,
+  },
+  {
+    text: "Badminton",
+    value: 5,
+  },
+  {
+    text: "Watonomous",
+    value: 4,
+  },
+  {
+    text: "WiCS",
+    value: 4,
+  },
+  {
+    text: "Tech+",
+    value: 4,
+  },
+  {
+    text: "Chess",
+    value: 4,
+  },
+  {
+    text: "PMC",
+    value: 3,
+  },
+  {
+    text: "HipHop",
+    value: 3,
+  },
+  {
+    text: "Orchestra",
+    value: 3,
+  },
+  {
+    text: "Waterloop",
+    value: 3,
+  },
+  {
+    text: "Soccer",
+    value: 3,
+  },
+  {
+    text: "DSC",
+    value: 3,
+  },
+  {
+    text: "Hack the North",
+    value: 2,
+  },
+  {
+    text: "ACE",
+    value: 2,
+  },
+  {
+    text: "Cuban Salsa",
+    value: 2,
+  },
+  {
+    text: "Aquadrone",
+    value: 2,
+  },
+  {
+    text: "Magic",
+    value: 2,
+  },
+  {
+    text: "Fencing",
+    value: 2,
+  },
+  {
+    text: "CCF",
+    value: 2,
+  },
+  {
+    text: "DJ",
+    value: 2,
+  },
+  {
+    text: "Tennis",
+    value: 2,
+  },
+  {
+    text: "UWCSA",
+    value: 2,
+  },
+  {
+    text: "mathNEWS",
+    value: 2,
+  },
+  {
+    text: "Toastmasters",
+    value: 2,
+  },
+  {
+    text: "Chamber Ensembles",
+    value: 2,
+  },
+  {
+    text: "UWFA",
+    value: 2,
+  },
+  {
+    text: "WiSTEM",
+    value: 1,
+  },
+  {
+    text: "KC",
+    value: 1,
+  },
+  {
+    text: "WARG",
+    value: 1,
+  },
+  {
+    text: "Swimming",
+    value: 1,
+  },
+  {
+    text: "Skating",
+    value: 1,
+  },
+  {
+    text: "Boxing",
+    value: 1,
+  },
+  {
+    text: "Movie",
+    value: 1,
+  },
+  {
+    text: "Theatre",
+    value: 1,
+  },
+  {
+    text: "Cooking",
+    value: 1,
+  },
+  {
+    text: "TechNova",
+    value: 1,
+  },
+  {
+    text: "CTF",
+    value: 1,
+  },
+  {
+    text: "Robotics Design Team",
+    value: 1,
+  },
+  {
+    text: "EntSoc",
+    value: 1,
+  },
+  {
+    text: "UWEN",
+    value: 1,
+  },
+];
+
+export const L18 = [
+  {
+    category: "DC",
+    value: 22,
+  },
+  {
+    category: "MC",
+    value: 23,
+  },
+  {
+    category: "Res",
+    value: 16,
+  },
+  {
+    category: "E7",
+    value: 11,
+  },
+  {
+    category: "QNC",
+    value: 9,
+  },
+  {
+    category: "DP",
+    value: 5,
+  },
+  {
+    category: "SLC",
+    value: 4,
+  },
+  {
+    category: "E5",
+    value: 3,
+  },
+  {
+    category: "EV3",
+    value: 3,
+  },
+  {
+    category: "PHY",
+    value: 1,
+  },
+];
+
+export const L19 = [
+  {
+    category: "No",
+    value: 78,
+  },
+  {
+    category: "Yes",
+    value: 22,
+  },
+];
diff --git a/pages/lifestyle-and-interests.tsx b/pages/lifestyle-and-interests.tsx
new file mode 100644
index 0000000..63f7f97
--- /dev/null
+++ b/pages/lifestyle-and-interests.tsx
@@ -0,0 +1,255 @@
+import {
+  L1,
+  L2,
+  L3,
+  L4,
+  L5,
+  L6,
+  L7,
+  L8,
+  L9,
+  L10,
+  L11,
+  L12,
+  L13,
+  L14,
+  L16,
+  L17,
+  L18,
+  L19,
+} from "data/lifestyle-and-interests";
+import { pageRoutes } from "data/routes";
+import React from "react";
+import {
+  barGraphProps,
+  DefaultProp,
+  pieChartProps,
+  barGraphMargin,
+  barGraphWidth,
+} 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 { SectionHeader } from "@/components/SectionHeader";
+import { WordCloud } from "@/components/WordCloud";
+
+import styles from "./samplePage.module.css";
+
+export default function Demographics() {
+  const pageWidth = useWindowDimensions().width;
+  const isMobile = useIsMobile();
+
+  return (
+    <div className={styles.page}>
+      <Header />
+      <SectionHeader
+        title="Lifestyle and Interests"
+        subtitle="What do CS people do in their free time?"
+      />
+
+      <ComponentWrapper
+        heading="Did you move back home during the beginning of COVID-19?"
+        bodyText="The vast majority of respondents did move back home during the beginning of Covid, which makes sense given the situation. "
+      >
+        <div className={styles.graphContainer}>
+          <PieChart data={L1} {...pieChartProps(isMobile, pageWidth)} />
+        </div>
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="Have many doses of COVID-19 vaccination have you gotten?"
+        bodyText="Complete proof of vaccination used to be a requirement for entering campus, unless there are special circumstances. Here, we can see that everyone except for 2 people had 2 or more doses. The large majority had 3+ doses."
+        align="right"
+        noBackground
+      >
+        <div className={styles.graphContainer}>
+          <PieChart data={L2} {...pieChartProps(isMobile, pageWidth)} />
+        </div>
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="How did your outlook on religion change during university?"
+        bodyText="Interestingly, most of our respondents were never religious."
+      >
+        <BarGraphVertical
+          data={L3}
+          {...barGraphProps(isMobile, pageWidth)}
+          lowerLabelDy="0"
+        />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="Did you learn how to cook during university?"
+        bodyText="Only 12 people indicated that they have not learned to cook. As for the rest, more stated that they learned to cook during university rather than before. This could correlate to university being the first time that many students move out from their parent/gardian’s place."
+        align="right"
+        noBackground
+      >
+        <div className={styles.graphContainer}>
+          <PieChart data={L4} {...pieChartProps(isMobile, pageWidth)} />
+        </div>
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="How many days are you physically active in a week now?"
+        bodyText="It’s nice to see that most Waterloo student are active at least a few days a week! CS is an especially sedentary major so it’s important to stay active and take care of your bodies."
+      >
+        <BarGraphVertical
+          data={L5}
+          {...barGraphProps(isMobile, pageWidth)}
+          lowerLabelDy="0"
+        />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="How often did you pull all-nighters throughout university?"
+        bodyText="84 people have either never pulled an all-nighter or only once every few months. With decent time management skills, work is definitely manageable and sleep does not have to be sacrificed."
+        noBackground
+      >
+        <BarGraphVertical data={L6} {...barGraphProps(isMobile, pageWidth)} />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading='Rate how strongly you agree with the following statement: "Throughout my university experience, I felt like I had enough time to pursue my own hobbies."'
+        bodyText="However, it seems like many people did not find enough time for their hobbies. Workloads can often pile up."
+        align="right"
+      >
+        <BarGraphVertical data={L7} {...barGraphProps(isMobile, pageWidth)} />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="How often did you attend parties/gatherings?"
+        bodyText="A lot of students attend social events to relieve some stress and build relationships. Many Waterloo students our no exception. Although we are not know for our parties, they can still frequently be found in residence areas around campus."
+        align="left"
+        noBackground
+      >
+        <BarGraphHorizontal
+          data={L8}
+          width={barGraphWidth(isMobile, pageWidth)}
+          height={DefaultProp.graphHeight}
+          margin={{ ...barGraphMargin, ...{ left: 200 } }}
+        />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="What time do you usually sleep?"
+        bodyText="Looks like we have a lot of nightowls!"
+        align="right"
+      >
+        <BarGraphVertical data={L9} {...barGraphProps(isMobile, pageWidth)} />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="How many hours of sleep do you get on average per night?"
+        bodyText="Although many of our respondents sleep late, most people are getting 7+ hours every night. Our class schedules are typically somewhat flexible and morning classes are usually not super popular amoung students."
+        align="left"
+        noBackground
+      >
+        <BarGraphVertical data={L10} {...barGraphProps(isMobile, pageWidth)} />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="While on campus, how many days out of the week do you go out to eat at a restaurant?"
+        bodyText="Waterloo’s campus is surrounded by great food places. We have a plaza filled with restaurants that serve all sorts of food such as Mexican, East Asian, Persian, Indian, etc. Although most students have learned to cook, we still enjoy eating out ever so often."
+        align="right"
+      >
+        <BarGraphVertical data={L11} {...barGraphProps(isMobile, pageWidth)} />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="What is your favourite restaurant to go to on/around campus?"
+        bodyText="With all the diverse restaurant around campus, it seems like the most popular choices of food are sushi, noodles, and shawarma (Lazeez hehehe)."
+        noBackground
+      >
+        <WordCloud
+          data={L12}
+          width={isMobile ? pageWidth / 1.5 : 800}
+          height={DefaultProp.graphHeight}
+          wordPadding={7}
+          desktopMaxFontSize={75}
+          mobileMaxFontSize={48}
+        />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="What is your Leetcode proficiency level?"
+        bodyText="Most respondents can consistently solve medium leetcode questions, which are often asked by large tech companies during interviews. Some people also responded with being able to solve hard level questions on leetcode, going above and beyond."
+        align="right"
+      >
+        <BarGraphHorizontal
+          data={L13}
+          width={barGraphWidth(isMobile, pageWidth)}
+          height={DefaultProp.graphHeight}
+          margin={{ ...barGraphMargin, ...{ left: 270 } }}
+        />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="How many side projects have you completed during university, if any?"
+        bodyText="Students invest time into side projects to show companies their software experiences and skills. Building side projects is a great way to compensate for lack of actual work experience. Many of our respondents are shown to have completed a few side projects, however, a large amount of them have indicated that they have not down any at all. This shows that side projects are not the only factor to landing a job."
+        noBackground
+      >
+        <BarGraphVertical
+          data={L14}
+          {...barGraphProps(isMobile, pageWidth)}
+          lowerLabelDy="0"
+        />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="How often do you attend hackathons now?"
+        bodyText="Similar to side projects, hackathons allow students to show companies their software skills and passion in technology. Many creative projects stem from hackathons as well. But, hackathons are definitely not a necessity. In fact, we see that the vast majority of our respondents have never or very rarely attended hackathons."
+        align="right"
+      >
+        <div className={styles.graphContainer}>
+          <PieChart data={L16} {...pieChartProps(isMobile, pageWidth)} />
+        </div>
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="Which extracurricular activities (e.g., design teams, sports, intramurals, clubs, societies) did you participate in? "
+        bodyText="Many of our respondents are involved with one or more extracurricular activities during university. These include sports, clubs, societies, and more."
+        noBackground
+      >
+        <WordCloud
+          data={L17}
+          width={isMobile ? pageWidth / 1.5 : 800}
+          height={DefaultProp.graphHeight}
+          wordPadding={7}
+          desktopMaxFontSize={75}
+          mobileMaxFontSize={48}
+        />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="Where is your favourite place to study on campus?"
+        bodyText="The most popular study locations according to our respondents are the Mathematics & Computer Building (MC) and the William G. Davis Computer Research Centre (DC), each having 23 and 22 votes respectively. Other popular places include on residence, QNC, and E7."
+        align="right"
+      >
+        <BarGraphHorizontal
+          data={L18}
+          width={barGraphWidth(isMobile, pageWidth)}
+          height={DefaultProp.graphHeight}
+          margin={{ ...barGraphMargin, ...{ left: 50 } }}
+        />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="Have you done a URA (Undergraduate Research Assistantship)?"
+        bodyText="URA provide students with the opportunity to gain research experience, usually with a professor, while earning some money."
+        noBackground
+      >
+        <PieChart data={L19} {...pieChartProps(isMobile, pageWidth)} />
+      </ComponentWrapper>
+
+      <BottomNav
+        leftPage={pageRoutes.intimacyAndDrugs}
+        rightPage={pageRoutes.mentalHealth}
+      ></BottomNav>
+    </div>
+  );
+}

From f65939333516b256c65c4d227bba77b6e0217607 Mon Sep 17 00:00:00 2001
From: Mark Chiu <e26chiu@csclub.uwaterloo.ca>
Date: Wed, 7 Dec 2022 21:13:52 -0500
Subject: [PATCH 2/4] Add Academics page (Closes #54) (#94)

Summary of noteworthy changes:
- **Pie charts do NOT currently calculate percentages of values**. I left it as is, and just changed the data to reflect the percentages instead of the actual value (because that is what we're displaying)
- Minor fix to the Stacked Bar Graph so that the legend displays on top in a row instead of in a column to the right of the graph.
- Added styling to Carousel so that it is properly centered.
- In the Stacked Bar Graphs, I grouped certain ranges of values because the value for the individual categories would have been too small and insignificant otherwise.

Problems:
- [x] WordCloud still doesn't display the right text-value association no matter how much I tweak the values. The font size is correctly displayed though and all words are shown (I counted!). Errors still show in the console log.
- [ ] WordCloud still weirdly overflows sometimes when I resize my window. See figure below. (#98)
- [ ] Stacked Bar Graph still needs some fixing (to be done in a separate PR) related to how the legend is displayed + labels.
- [x] **Description blurbs NEED to be re-read before copy-pasting**. I just noticed that the given blurbs are sometimes incomplete, grammatically incorrect, or erroneous.
- [ ] Bar graphs and pie charts need to have tooltips. (all graphs) (#97)
- [ ] Tooltips in Stacked Bar Graphs are not well positioned when hovering over them. (#89)

Co-authored-by: e26chiu <e26chiu@csc.uwaterloo.ca>
Co-authored-by: shahanneda <shahan.neda@gmail.com>
Reviewed-on: https://git.csclub.uwaterloo.ca/www/cs-2022-class-profile/pulls/94
Reviewed-by: Shahan Nedadahandeh <snedadah@csclub.uwaterloo.ca>
---
 components/SectionWrapper.module.css  |    4 +
 components/SectionWrapper.tsx         |   15 +
 components/StackedBarGraph.module.css |    1 -
 components/StackedBarGraph.tsx        |   47 +-
 data/academics.ts                     | 1577 +++++++++++++++++++++++++
 data/mocks.ts                         |    2 +-
 pages/academics.tsx                   |  458 +++++++
 pages/samplePage.module.css           |    8 +
 8 files changed, 2088 insertions(+), 24 deletions(-)
 create mode 100644 components/SectionWrapper.module.css
 create mode 100644 components/SectionWrapper.tsx
 create mode 100644 data/academics.ts
 create mode 100644 pages/academics.tsx

diff --git a/components/SectionWrapper.module.css b/components/SectionWrapper.module.css
new file mode 100644
index 0000000..65db0fa
--- /dev/null
+++ b/components/SectionWrapper.module.css
@@ -0,0 +1,4 @@
+.sectionWrapper h2 {
+  color: var(--primary-heading);
+  padding-left: 4rem;
+}
diff --git a/components/SectionWrapper.tsx b/components/SectionWrapper.tsx
new file mode 100644
index 0000000..fede352
--- /dev/null
+++ b/components/SectionWrapper.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+
+import styles from "./SectionWrapper.module.css";
+
+type SectionWrapperProps = {
+  title: string;
+};
+
+export function SectionWrapper({ title }: SectionWrapperProps) {
+  return (
+    <div className={styles.sectionWrapper}>
+      <h2>{title}</h2>
+    </div>
+  );
+}
diff --git a/components/StackedBarGraph.module.css b/components/StackedBarGraph.module.css
index 4c25e0e..40646db 100644
--- a/components/StackedBarGraph.module.css
+++ b/components/StackedBarGraph.module.css
@@ -7,7 +7,6 @@
 }
 
 .legend {
-  position: absolute;
   display: flex;
   font-size: calc(16rem / 16);
   top: 0;
diff --git a/components/StackedBarGraph.tsx b/components/StackedBarGraph.tsx
index 9b0bd44..c9f77fd 100644
--- a/components/StackedBarGraph.tsx
+++ b/components/StackedBarGraph.tsx
@@ -88,7 +88,7 @@ export const StackedBarGraphVertical = withTooltip<
     strokeDashArray = "10,4",
     legendLeftOffset = 40,
     legendTopOffset = 40,
-    itemMargin = "15px 0 0 0",
+    itemMargin = "0 0 0 15px",
     categoryAxisLeftFactor = 1,
     tooltipOpen,
     tooltipLeft,
@@ -134,6 +134,18 @@ export const StackedBarGraphVertical = withTooltip<
 
     return width < 10 ? null : (
       <div className={styles.container}>
+        <div
+          className={styles.legend}
+          style={{ left: width + legendLeftOffset, top: legendTopOffset }}
+        >
+          <LegendOrdinal
+            scale={colorScale}
+            direction="row"
+            itemMargin={itemMargin}
+            labelAlign="center"
+          />
+        </div>
+
         <svg width={width} height={height}>
           <Group top={margin.top} left={margin.left}>
             <GridRows
@@ -238,16 +250,6 @@ export const StackedBarGraphVertical = withTooltip<
             />
           </Group>
         </svg>
-        <div
-          className={styles.legend}
-          style={{ left: width + legendLeftOffset, top: legendTopOffset }}
-        >
-          <LegendOrdinal
-            scale={colorScale}
-            direction="column"
-            itemMargin={itemMargin}
-          />
-        </div>
 
         {tooltipOpen && tooltipData ? (
           <TooltipWrapper
@@ -283,7 +285,7 @@ export const StackedBarGraphHorizontal = withTooltip<
     strokeDashArray = "10,4",
     legendLeftOffset = 40,
     legendTopOffset = 40,
-    itemMargin = "15px 0 0 0",
+    itemMargin = "0 0 0 15px",
     categoryAxisLeftFactor = 1,
     tooltipOpen,
     tooltipLeft,
@@ -329,6 +331,17 @@ export const StackedBarGraphHorizontal = withTooltip<
 
     return width < 10 ? null : (
       <div className={styles.container}>
+        <div
+          className={styles.legend}
+          style={{ left: width + legendLeftOffset, top: legendTopOffset }}
+        >
+          <LegendOrdinal
+            scale={colorScale}
+            direction="row"
+            itemMargin={itemMargin}
+          />
+        </div>
+
         <svg width={width} height={height}>
           <Group top={margin.top} left={margin.left}>
             <GridRows
@@ -426,16 +439,6 @@ export const StackedBarGraphHorizontal = withTooltip<
             />
           </Group>
         </svg>
-        <div
-          className={styles.legend}
-          style={{ left: width + legendLeftOffset, top: legendTopOffset }}
-        >
-          <LegendOrdinal
-            scale={colorScale}
-            direction="column"
-            itemMargin={itemMargin}
-          />
-        </div>
 
         {tooltipOpen && tooltipData ? (
           <TooltipWrapper
diff --git a/data/academics.ts b/data/academics.ts
new file mode 100644
index 0000000..085fa94
--- /dev/null
+++ b/data/academics.ts
@@ -0,0 +1,1577 @@
+export const A1 = [
+  {
+    category: "0",
+    value: 17,
+  },
+  {
+    category: "1",
+    value: 28,
+  },
+  {
+    category: "2",
+    value: 27,
+  },
+  {
+    category: "3",
+    value: 13,
+  },
+  {
+    category: "4",
+    value: 6,
+  },
+  {
+    category: "5+",
+    value: 9,
+  },
+];
+
+export const A2 = [
+  {
+    category: "Yes",
+    value: 87,
+  },
+  {
+    category: "No",
+    value: 13,
+  },
+];
+
+export const A3 = [
+  {
+    category: "IntelliJ",
+    value: 8,
+  },
+  {
+    category: "VSCode",
+    value: 59,
+  },
+  {
+    category: "Atom",
+    value: 4,
+  },
+  {
+    category: "Vim",
+    value: 12,
+  },
+  {
+    category: "JetBrains",
+    value: 8,
+  },
+  {
+    category: "Sublime Text",
+    value: 4,
+  },
+  {
+    category: "PyCharm",
+    value: 4,
+  },
+  {
+    category: "Notepad++",
+    value: 2,
+  },
+  {
+    category: "Emacs",
+    value: 1,
+  },
+  {
+    category: "Microsoft Word",
+    value: 1,
+  },
+  {
+    category: "TextEdit",
+    value: 1,
+  },
+  {
+    category: "Dev-C++",
+    value: 1,
+  },
+];
+
+export const A4 = [
+  {
+    category: "Dart",
+    value: 2,
+  },
+  {
+    category: "Python",
+    value: 56,
+  },
+  {
+    category: "C++",
+    value: 23,
+  },
+  {
+    category: "Scala",
+    value: 1,
+  },
+  {
+    category: "Kotlin",
+    value: 1,
+  },
+  {
+    category: "Go",
+    value: 4,
+  },
+  {
+    category: "Java",
+    value: 5,
+  },
+  {
+    category: "Racket",
+    value: 2,
+  },
+  {
+    category: "JavaScript",
+    value: 2,
+  },
+  {
+    category: "Rust",
+    value: 2,
+  },
+  {
+    category: "Swift",
+    value: 1,
+  },
+  {
+    category: "TypeScript",
+    value: 2,
+  },
+  {
+    category: "Zig",
+    value: 1,
+  },
+];
+
+export const A5 = [
+  {
+    category: "1",
+    value: 1,
+  },
+  {
+    category: "2",
+    value: 1,
+  },
+  {
+    category: "3",
+    value: 12,
+  },
+  {
+    category: "4",
+    value: 18,
+  },
+  {
+    category: "5",
+    value: 20,
+  },
+  {
+    category: "6",
+    value: 17,
+  },
+  {
+    category: "7",
+    value: 13,
+  },
+  {
+    category: "8",
+    value: 8,
+  },
+  {
+    category: "9",
+    value: 4,
+  },
+  {
+    category: "10",
+    value: 10,
+  },
+];
+
+export const A6 = [
+  {
+    category: "WINDOWS",
+    value: 37,
+  },
+  {
+    category: "MACOS",
+    value: 40,
+  },
+  {
+    category: "LINUX",
+    value: 23,
+  },
+];
+
+export const A7 = [
+  {
+    category: "Communications",
+    value: 2,
+  },
+  {
+    category: "Pure Science",
+    value: 14,
+  },
+  {
+    category: "Social Science",
+    value: 28,
+  },
+  {
+    category: "Humanities",
+    value: 47,
+  },
+  {
+    category: "Math",
+    value: 1,
+  },
+  {
+    category: "Applied Science",
+    value: 4,
+  },
+  {
+    category: "Combinatorics & Optimization",
+    value: 1,
+  },
+  {
+    category: "ECE",
+    value: 1,
+  },
+  {
+    category: "None of them",
+    value: 5,
+  },
+];
+
+export const A8 = [
+  {
+    text: "PHIL121",
+    value: 1,
+  },
+  {
+    text: "KOREA101R",
+    value: 2,
+  },
+  {
+    text: "ENGL140R",
+    value: 1,
+  },
+  {
+    text: "PSYCH312",
+    value: 1,
+  },
+  {
+    text: "BIOL110",
+    value: 1,
+  },
+  {
+    text: "SCI207",
+    value: 1,
+  },
+  {
+    text: "SMF211",
+    value: 1,
+  },
+  {
+    text: "CHINA120R",
+    value: 2,
+  },
+  {
+    text: "PSYCH207",
+    value: 2,
+  },
+  {
+    text: "SCI206",
+    value: 3,
+  },
+  {
+    text: "MUSIC116",
+    value: 2,
+  },
+  {
+    text: "ENGL210C",
+    value: 2,
+  },
+  {
+    text: "MUSIC240",
+    value: 1,
+  },
+  {
+    text: "AFM415",
+    value: 1,
+  },
+  {
+    text: "CFM301",
+    value: 1,
+  },
+  {
+    text: "MUSIC140",
+    value: 7,
+  },
+  {
+    text: "PHIL216",
+    value: 2,
+  },
+  {
+    text: "PHIL145",
+    value: 4,
+  },
+  {
+    text: "PSYCH253",
+    value: 1,
+  },
+  {
+    text: "BET100",
+    value: 1,
+  },
+  {
+    text: "PHYS225",
+    value: 1,
+  },
+  {
+    text: "PHYS122",
+    value: 1,
+  },
+  {
+    text: "PHIL256",
+    value: 1,
+  },
+  {
+    text: "ENGL306A",
+    value: 2,
+  },
+  {
+    text: "ANTH202",
+    value: 1,
+  },
+  {
+    text: "SYDE556",
+    value: 1,
+  },
+  {
+    text: "MUSIC246",
+    value: 6,
+  },
+  {
+    text: "PHYS234",
+    value: 1,
+  },
+  {
+    text: "BUS405",
+    value: 1,
+  },
+  {
+    text: "MUSIC275",
+    value: 1,
+  },
+  {
+    text: "PHIL228",
+    value: 1,
+  },
+  {
+    text: "MUSIC323",
+    value: 1,
+  },
+  {
+    text: "RS121",
+    value: 1,
+  },
+  {
+    text: "COMM400",
+    value: 1,
+  },
+  {
+    text: "CLAS104",
+    value: 6,
+  },
+  {
+    text: "ENGL335",
+    value: 1,
+  },
+  {
+    text: "PSYCH226R",
+    value: 1,
+  },
+  {
+    text: "BUS459W",
+    value: 1,
+  },
+  {
+    text: "ECON120",
+    value: 1,
+  },
+  {
+    text: "ENGL306A",
+    value: 1,
+  },
+  {
+    text: "ECON212",
+    value: 1,
+  },
+  {
+    text: "PHIL100J",
+    value: 1,
+  },
+  {
+    text: "CO380",
+    value: 1,
+  },
+  {
+    text: "BUS493V",
+    value: 1,
+  },
+  {
+    text: "PHYS121",
+    value: 1,
+  },
+  {
+    text: "SCI238",
+    value: 1,
+  },
+  {
+    text: "REES230",
+    value: 1,
+  },
+  {
+    text: "PSYCH101",
+    value: 4,
+  },
+  {
+    text: "PHIL101",
+    value: 1,
+  },
+  {
+    text: "INTEG240",
+    value: 1,
+  },
+  {
+    text: "LS235",
+    value: 1,
+  },
+  {
+    text: "BUS488",
+    value: 1,
+  },
+  {
+    text: "LS229",
+    value: 1,
+  },
+  {
+    text: "JAPAN301R",
+    value: 1,
+  },
+  {
+    text: "JAPAN101R",
+    value: 1,
+  },
+  {
+    text: "PSYCH232",
+    value: 1,
+  },
+  {
+    text: "ECON102",
+    value: 1,
+  },
+  {
+    text: "HIST236",
+    value: 1,
+  },
+  {
+    text: "ENVS205",
+    value: 1,
+  },
+  {
+    text: "PLAN100",
+    value: 1,
+  },
+  {
+    text: "FR203",
+    value: 1,
+  },
+  {
+    text: "ECE459",
+    value: 1,
+  },
+  {
+    text: "PSYCH256",
+    value: 1,
+  },
+  {
+    text: "None",
+    value: 1,
+  },
+];
+
+export const A9 = [
+  {
+    text: "CS246E",
+    value: 5,
+  },
+  {
+    text: "CS350",
+    value: 7,
+  },
+  {
+    text: "CS458",
+    value: 3,
+  },
+  {
+    text: "CS343",
+    value: 9,
+  },
+  {
+    text: "CS462",
+    value: 2,
+  },
+  {
+    text: "CS444",
+    value: 5,
+  },
+  {
+    text: "CS499T",
+    value: 1,
+  },
+  {
+    text: "CS341",
+    value: 3,
+  },
+  {
+    text: "CS486",
+    value: 9,
+  },
+  {
+    text: "CS466",
+    value: 3,
+  },
+  {
+    text: "CS246",
+    value: 8,
+  },
+  {
+    text: "CS484",
+    value: 1,
+  },
+  {
+    text: "CS241E",
+    value: 1,
+  },
+  {
+    text: "CS240E",
+    value: 1,
+  },
+  {
+    text: "CS492",
+    value: 3,
+  },
+  {
+    text: "CS451",
+    value: 4,
+  },
+  {
+    text: "CS360",
+    value: 1,
+  },
+  {
+    text: "CS762",
+    value: 2,
+  },
+  {
+    text: "CS442",
+    value: 3,
+  },
+  {
+    text: "CS145",
+    value: 1,
+  },
+  {
+    text: "CS456",
+    value: 1,
+  },
+  {
+    text: "CS349",
+    value: 2,
+  },
+  {
+    text: "CS480",
+    value: 1,
+  },
+  {
+    text: "CS251",
+    value: 1,
+  },
+  {
+    text: "CS145",
+    value: 1,
+  },
+  {
+    text: "CS135",
+    value: 3,
+  },
+  {
+    text: "CA486",
+    value: 1,
+  },
+  {
+    text: "CS487",
+    value: 1,
+  },
+  {
+    text: "CS241",
+    value: 6,
+  },
+  {
+    text: "CS488",
+    value: 1,
+  },
+  {
+    text: "CS442",
+    value: 2,
+  },
+  {
+    text: "CS458",
+    value: 1,
+  },
+  {
+    text: "CS341",
+    value: 1,
+  },
+  {
+    text: "CS135",
+    value: 1,
+  },
+  {
+    text: "CS136",
+    value: 1,
+  },
+  {
+    text: "CS225",
+    value: 1,
+  },
+  {
+    text: "CS452",
+    value: 1,
+  },
+  {
+    text: "CS105",
+    value: 1,
+  },
+  {
+    text: "CS240",
+    value: 1,
+  },
+  {
+    text: "CS449",
+    value: 1,
+  },
+  {
+    text: "CS146",
+    value: 1,
+  },
+];
+
+export const A10 = [
+  {
+    text: "CS348",
+    value: 11,
+  },
+  {
+    text: "CS454",
+    value: 2,
+  },
+  {
+    text: "CS136",
+    value: 4,
+  },
+  {
+    text: "CS349",
+    value: 1,
+  },
+  {
+    text: "CS145",
+    value: 1,
+  },
+  {
+    text: "CS466",
+    value: 2,
+  },
+  {
+    text: "CS492",
+    value: 1,
+  },
+  {
+    text: "CS245",
+    value: 26,
+  },
+  {
+    text: "CS135",
+    value: 3,
+  },
+  {
+    text: "CS246",
+    value: 1,
+  },
+  {
+    text: "CS350",
+    value: 7,
+  },
+  {
+    text: "CS241",
+    value: 6,
+  },
+  {
+    text: "CS251",
+    value: 8,
+  },
+  {
+    text: "CS365",
+    value: 2,
+  },
+  {
+    text: "CS444",
+    value: 1,
+  },
+  {
+    text: "CS146",
+    value: 1,
+  },
+  {
+    text: "CS240E",
+    value: 2,
+  },
+  {
+    text: "CS240",
+    value: 4,
+  },
+  {
+    text: "CS458",
+    value: 1,
+  },
+  {
+    text: "CS341",
+    value: 2,
+  },
+  {
+    text: "CS490",
+    value: 1,
+  },
+  {
+    text: "CS245E",
+    value: 1,
+  },
+  {
+    text: "CS134",
+    value: 1,
+  },
+  {
+    text: "CS130",
+    value: 1,
+  },
+  {
+    text: "CS233",
+    value: 1,
+  },
+  {
+    text: "CS446",
+    value: 1,
+  },
+  {
+    text: "CS492",
+    value: 1,
+  },
+  {
+    text: "CS456",
+    value: 1,
+  },
+  {
+    text: "CS246",
+    value: 1,
+  },
+  {
+    text: "CS484",
+    value: 1,
+  },
+  {
+    text: "CS488",
+    value: 1,
+  },
+  {
+    text: "CS486",
+    value: 1,
+  },
+  {
+    text: "CS370",
+    value: 1,
+  },
+  {
+    text: "CS250",
+    value: 1,
+  },
+];
+
+export const A11 = [
+  {
+    text: "CS245",
+    value: 1,
+  },
+  {
+    text: "CS240",
+    value: 6,
+  },
+  {
+    text: "CS246",
+    value: 24,
+  },
+  {
+    text: "CS341",
+    value: 40,
+  },
+  {
+    text: "CS350",
+    value: 7,
+  },
+  {
+    text: "CS343",
+    value: 1,
+  },
+  {
+    text: "CS246E",
+    value: 4,
+  },
+  {
+    text: "CS240E",
+    value: 1,
+  },
+  {
+    text: "CS456",
+    value: 2,
+  },
+  {
+    text: "CS136",
+    value: 3,
+  },
+  {
+    text: "CS132",
+    value: 1,
+  },
+  {
+    text: "CS135",
+    value: 3,
+  },
+  {
+    text: "CS225",
+    value: 1,
+  },
+  {
+    text: "None",
+    value: 4,
+  },
+  {
+    text: "CS449",
+    value: 1,
+  },
+  {
+    text: "CS146",
+    value: 1,
+  },
+];
+
+export const A12 = [
+  {
+    category: "Yes",
+    value: 46,
+  },
+  {
+    category: "No",
+    value: 54,
+  },
+];
+
+export const A12i = [
+  {
+    category: "CS146",
+    "1-4": 1,
+    "5-7": 6,
+    "8-10": 25,
+  },
+  {
+    category: "MATH145",
+    "1-4": 0,
+    "5-7": 6,
+    "8-10": 27,
+  },
+  {
+    category: "MATH146",
+    "1-4": 1,
+    "5-7": 6,
+    "8-10": 21,
+  },
+  {
+    category: "MATH147",
+    "1-4": 2,
+    "5-7": 5,
+    "8-10": 18,
+  },
+  {
+    category: "MATH148",
+    "1-4": 2,
+    "5-7": 6,
+    "8-10": 11,
+  },
+  {
+    category: "CS240E",
+    "1-4": 5,
+    "5-7": 5,
+    "8-10": 17,
+  },
+  {
+    category: "CS241E",
+    "1-4": 2,
+    "5-7": 3,
+    "8-10": 9,
+  },
+  {
+    category: "CS245E",
+    "1-4": 1,
+    "5-7": 4,
+    "8-10": 5,
+  },
+  {
+    category: "CS246E",
+    "1-4": 1,
+    "5-7": 4,
+    "8-10": 19,
+  },
+  {
+    category: "STAT240E",
+    "1-4": 0,
+    "5-7": 4,
+    "8-10": 6,
+  },
+  {
+    category: "STAT241E",
+    "1-4": 1,
+    "5-7": 6,
+    "8-10": 9,
+  },
+];
+
+export const A12iKeys = ["1-4", "5-7", "8-10"];
+
+export const A13 = [
+  {
+    category: "No",
+    value: 77,
+  },
+  {
+    category: "Yes",
+    value: 23,
+  },
+];
+
+export const A13i = [
+  {
+    category: "CFM",
+    value: 7,
+  },
+  {
+    category: "ENG",
+    value: 1,
+  },
+  {
+    category: "MECH ENG",
+    value: 1,
+  },
+  {
+    category: "MATH/BBA",
+    value: 1,
+  },
+  {
+    category: "SE",
+    value: 2,
+  },
+  {
+    category: "MATH",
+    value: 9,
+  },
+  {
+    category: "CS/BBA",
+    value: 1,
+  },
+  {
+    category: "CS",
+    value: 2,
+  },
+  {
+    category: "FARM",
+    value: 1,
+  },
+];
+
+export const A13ii = [
+  {
+    category: "1B",
+    value: 1,
+  },
+  {
+    category: "2A",
+    value: 15,
+  },
+  {
+    category: "2B",
+    value: 7,
+  },
+  {
+    category: "3A",
+    value: 2,
+  },
+];
+
+export const A13iii = [
+  {
+    category: "It was cheaper with the same course load",
+    value: 2,
+  },
+  {
+    category: "Flexible schedule",
+    value: 8,
+  },
+  {
+    category: "Originally wanted CS but did not get in",
+    value: 3,
+  },
+  {
+    category: "Didn’t have much interest in the previous major in comparison",
+    value: 11,
+  },
+  {
+    category: "Flexible course requirements",
+    value: 9,
+  },
+  {
+    category: "Future job prospects are better",
+    value: 8,
+  },
+  {
+    category: "Avoid one or more courses",
+    value: 5,
+  },
+];
+
+export const A14 = [
+  {
+    text: "Peter Buhr",
+    value: 3,
+  },
+  {
+    text: "Alice Gao",
+    value: 10,
+  },
+  {
+    text: "Stephen New",
+    value: 3,
+  },
+  {
+    text: "Carmen Bruni",
+    value: 10,
+  },
+  {
+    text: "Michael Wallace",
+    value: 1,
+  },
+  {
+    text: "Lesley Istead",
+    value: 11,
+  },
+  {
+    text: "Eric Blais",
+    value: 1,
+  },
+  {
+    text: "Martin Pei",
+    value: 2,
+  },
+  {
+    text: "Brad Lushman",
+    value: 6,
+  },
+  {
+    text: "Steve Balaban",
+    value: 1,
+  },
+  {
+    text: "Ryan Trelford",
+    value: 1,
+  },
+  {
+    text: "Greg Andres",
+    value: 1,
+  },
+  {
+    text: "Simon Wood",
+    value: 3,
+  },
+  {
+    text: "Chris Burris",
+    value: 1,
+  },
+  {
+    text: "Troy Vasiga",
+    value: 1,
+  },
+  {
+    text: "David Jao",
+    value: 2,
+  },
+  {
+    text: "Lapchi Lau",
+    value: 1,
+  },
+  {
+    text: "Jason Bell",
+    value: 2,
+  },
+  {
+    text: "Kathryn Hare",
+    value: 1,
+  },
+  {
+    text: "Blake Madill",
+    value: 2,
+  },
+  {
+    text: "Alfred Menezes",
+    value: 2,
+  },
+  {
+    text: "Laurent Marcoux",
+    value: 1,
+  },
+  {
+    text: "Zack Cramer",
+    value: 1,
+  },
+  {
+    text: "Jennifer Nelson",
+    value: 1,
+  },
+  {
+    text: "Dan Wolczuk",
+    value: 2,
+  },
+  {
+    text: "Michael Eden",
+    value: 1,
+  },
+  {
+    text: "Dave Tompkins",
+    value: 3,
+  },
+  {
+    text: "Bruno Tremblay",
+    value: 1,
+  },
+  {
+    text: "Garry Steven",
+    value: 1,
+  },
+  {
+    text: "Wilfred Tysoe",
+    value: 1,
+  },
+  {
+    text: "Jacqueline Feke",
+    value: 1,
+  },
+  {
+    text: "David W. Zucke",
+    value: 1,
+  },
+  {
+    text: "Stephen Mann",
+    value: 1,
+  },
+  {
+    text: "Firas Mansour",
+    value: 1,
+  },
+  {
+    text: "Shane Bauman",
+    value: 1,
+  },
+  {
+    text: "Nomair Naeem",
+    value: 1,
+  },
+  {
+    text: "Maura Grossman",
+    value: 1,
+  },
+];
+
+export const A15 = [
+  {
+    category: "1A",
+    value: 12,
+  },
+  {
+    category: "1B",
+    value: 13,
+  },
+  {
+    category: "2A",
+    value: 29,
+  },
+  {
+    category: "2B",
+    value: 27,
+  },
+  {
+    category: "3A",
+    value: 9,
+  },
+  {
+    category: "3B",
+    value: 5,
+  },
+  {
+    category: "4A",
+    value: 3,
+  },
+  {
+    category: "5A",
+    value: 1,
+  },
+];
+
+export const A16 = [
+  {
+    category: "1A",
+    "0-30": 0.04,
+    "30-60": 0,
+    "60-70": 0.04,
+    "70-80": 0.152,
+    "80-90": 0.495,
+    "90-95": 0.192,
+    "95-100": 0.081,
+  },
+  {
+    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,
+  },
+  {
+    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,
+  },
+  {
+    category: "2B",
+    "0-30": 0.051,
+    "30-60": 0,
+    "60-70": 0.112,
+    "70-80": 0.296,
+    "80-90": 0.378,
+    "90-95": 0.133,
+    "95-100": 0.031,
+  },
+  {
+    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,
+  },
+  {
+    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,
+  },
+  {
+    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,
+  },
+  {
+    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,
+  },
+  {
+    category: "5A",
+    "0-30": 0.02,
+    "30-60": 0.04,
+    "60-70": 0.02,
+    "70-80": 0.039,
+    "80-90": 0.137,
+    "90-95": 0,
+    "95-100": 0.059,
+  },
+  {
+    category: "Cumulative Average",
+    "0-30": 0,
+    "30-60": 0,
+    "60-70": 0.03774,
+    "70-80": 0.28302,
+    "80-90": 0.67924,
+    "90-95": 0,
+    "95-100": 0,
+  },
+];
+
+export const A16Keys = [
+  "0-30",
+  "30-60",
+  "60-70",
+  "70-80",
+  "80-90",
+  "90-95",
+  "95-100",
+];
+
+export const A18 = [
+  {
+    category: "No",
+    value: 50,
+  },
+  {
+    category: "Yes",
+    value: 50,
+  },
+];
+
+export const A18i = [
+  {
+    text: "Business",
+    value: 12,
+  },
+  {
+    text: "Pure Mathematics",
+    value: 12,
+  },
+  {
+    text: "Statistics",
+    value: 5,
+  },
+  {
+    text: "Psychology",
+    value: 3,
+  },
+  {
+    text: "C&O",
+    value: 18,
+  },
+  {
+    text: "Data Science",
+    value: 1,
+  },
+  {
+    text: "Music",
+    value: 1,
+  },
+  {
+    text: "Economics",
+    value: 1,
+  },
+  {
+    text: "Software Engineering",
+    value: 2,
+  },
+  {
+    text: "Human-Computer Interaction",
+    value: 3,
+  },
+  {
+    text: "Mathematics",
+    value: 2,
+  },
+  {
+    text: "Computing",
+    value: 1,
+  },
+  {
+    text: "Bioinformatics",
+    value: 2,
+  },
+  {
+    text: "Artificial Intelligence",
+    value: 4,
+  },
+  {
+    text: "Legal Studies",
+    value: 1,
+  },
+  {
+    text: "Cognitive Science Minor",
+    value: 2,
+  },
+];
+
+export const A18ii = [
+  "I was interested in business at the time, and I wanted to avoid Breadth & Depth",
+  "The business option allowed me to skip breadth and depth",
+  "No breadth + depth in the option",
+  "Interest; I like learning",
+  "Exploring the more mathematical side of computation",
+  "Overlap in requirements from CFM, also no breadth and depth requirements.",
+  "It was easy to add the minor, I figured why not. Plus, I use stats in my work",
+  "Spite",
+  "I came to university wanting to do a pure math major. I added CS because it has great job prospects.",
+  "The required coursework interested me.",
+  "I am horny for pure math",
+  "I like Number Theory",
+  "enjoyed the courses",
+  "I enjoyed math courses during my first and second year",
+  "Because CS is pretty boring by itself",
+  "I like music",
+  "No breadth and depth requirement",
+  "I enjoyed taking MATH 239",
+  "Only a few extra courses, I really enjoyed the required courses in the departments, and having a minor in “combinatorics and optimization” just sounds super cool B)",
+  "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",
+  "I just think that learning CS will be much more interesting if I complement it with more mathematics in form of Pure Math; in fact, I have stronger math background than CS background. It also helps with the upper-year CS courses I ended up taking.",
+  "Enjoyed the subject",
+  "Contained many courses I wanted to take anyway",
+  "I like hardware",
+  "It’s my calling",
+];
+
+export const A19 = [
+  {
+    category: "No",
+    value: 55,
+  },
+  {
+    category: "Yes",
+    value: 45,
+  },
+];
+
+export const A19i = [
+  {
+    category: "0",
+    value: 15,
+  },
+  {
+    category: "1",
+    value: 17,
+  },
+  {
+    category: "2",
+    value: 9,
+  },
+  {
+    category: "3",
+    value: 11,
+  },
+  {
+    category: "4",
+    value: 1,
+  },
+  {
+    category: "5",
+    value: 4,
+  },
+  {
+    category: "6",
+    value: 4,
+  },
+];
+
+export const A20 = [
+  {
+    category: "0",
+    value: 85,
+  },
+  {
+    category: "1",
+    value: 12,
+  },
+  {
+    category: "2",
+    value: 1,
+  },
+  {
+    category: "3",
+    value: 2,
+  },
+  {
+    category: "4+",
+    value: 2,
+  },
+];
+
+export const A21 = [
+  {
+    category: "No",
+    value: 93,
+  },
+  {
+    category: "Yes",
+    value: 7,
+  },
+];
+
+export const A21i = [
+  {
+    category: "3A",
+    value: 50,
+  },
+  {
+    category: "4B",
+    value: 33,
+  },
+  {
+    category: "5A",
+    value: 17,
+  },
+];
+
+export const A21ii = ["Paris, France", "South Korea", "The Netherlands"];
+
+export const A21iii = [
+  {
+    category: "Yes",
+    value: 85,
+  },
+  {
+    category: "No",
+    value: 15,
+  },
+];
+
+export const A21iv = [
+  "Feeling Belonged",
+  "Making new friends",
+  "The complications of COVID",
+];
+
+export const A21v = ["Travelling", "치맥 at the Han River", "Lots of biking"];
diff --git a/data/mocks.ts b/data/mocks.ts
index cfcf0c8..90bdace 100644
--- a/data/mocks.ts
+++ b/data/mocks.ts
@@ -96,7 +96,7 @@ export const mockStackedBarGraphData = [
   {
     category: "2A",
     "geese watchers": 40,
-    "geese breeders": 50,
+  "geese breeders": 50,
     "geese catchers": 70,
   },
   {
diff --git a/pages/academics.tsx b/pages/academics.tsx
new file mode 100644
index 0000000..d1cfc18
--- /dev/null
+++ b/pages/academics.tsx
@@ -0,0 +1,458 @@
+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,
+  barGraphMargin,
+  barGraphWidth,
+  wordCloudWidth,
+} 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 { SectionWrapper } from "@/components/SectionWrapper";
+import {
+  StackedBarGraphHorizontal,
+  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" />
+
+      <SectionWrapper title="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 be admitted in CS/CFM/CSBBA 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 it’s not unheard of students delaying their graduation date either due to re-taking failed classes, gap terms, completing minors, etc. It's normal to take time completing your degree! :)"
+        align="right"
+        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, lightweight, and customizable IDE. This is no surprise as VS Code is known to be a sweet spot between Vim and more complex IDEs like IntelliJ: It's fast, lightweight, easy to use, powerful with its extensions, offers a plethora of themes, etc."
+        align="right"
+      >
+        <BarGraphHorizontal
+          data={A3}
+          width={barGraphWidth(isMobile, pageWidth)}
+          height={DefaultProp.graphHeight}
+          margin={{ ...barGraphMargin, ...{ left: 180 } }}
+        />
+      </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 reads the most like English. C++ is a very notable language as a part of the CS program; thus, it’s no surprise it comes in second. Once again, its sad to see that the graduating class of 2022 has losts its passion in being fellow Racket enjoyers. Hopefully, post grads are able to rekindle their love for using Racket."
+        align="center"
+        noBackground
+      >
+        <BarGraphHorizontal 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. It's evident that, as students take more internships and classes, they learn more programming languages, especially in a field that is continuously evolving!"
+      >
+        <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 it’s interesting to see how even sometimes with the plethora of compatibility issues with macOS, so many CS students will still use it."
+        align="right"
+        noBackground
+      >
+        <div className={styles.graphContainer}>
+          <PieChart data={A6} {...pieChartProps(isMobile, pageWidth)} />
+        </div>
+      </ComponentWrapper>
+
+      <SectionWrapper title="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 Social Science and Humanities courses with almost half of the class choosing both categories as their most enjoyed. For context, CS students are required to complete a number of electives from certain categories to graduate."
+      >
+        <BarGraphHorizontal
+          data={A7}
+          width={barGraphWidth(isMobile, pageWidth)}
+          height={DefaultProp.graphHeight}
+          margin={{ ...barGraphMargin, ...{ left: 180 } }}
+        />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="Which non-math elective was your favourite?"
+        bodyText="Lots of amazing non-math electives mentioned in the list, with MUSIC140 being a crowd favourite. We can also note that MUSIC, PHIL, and PSYCH courses are well liked!"
+        align="center"
+        noBackground
+      >
+        <WordCloud
+          data={A8}
+          width={wordCloudWidth(isMobile, pageWidth)}
+          height={DefaultProp.graphHeight}
+          wordPadding={7}
+          desktopMaxFontSize={75}
+          mobileMaxFontSize={30}
+        />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="Which CS course was your favourite?"
+        bodyText="CS246 is the most popular CS course for the class of 2022. This course introduces Object-Oriented Programming, a fundamental programming paradigm that is used in many places. No wonder this course is so well liked! Next up, we have CS343 and CS486 both tying up in 2nd place. CS343 teaches concurrent parallel programming while CS486 delves into the realm of Artificial Intelligence. Both are very interesting courses, exploring different niche aspects of Computer Science!"
+        align="right"
+      >
+        <WordCloud
+          data={A9}
+          width={wordCloudWidth(isMobile, pageWidth)}
+          height={DefaultProp.graphHeight}
+          wordPadding={8}
+          desktopMaxFontSize={60}
+          desktopMinFontSize={15}
+          mobileMaxFontSize={60}
+        />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="Which CS course was your least favourite?"
+        bodyText="CS245, Logic and Computation, was the least favourite CS course students took. It can probably be explained by its difficulty, the theoretical focus of the course, the content being less applicable outside of class plus it being a core CS course. Honourable mention to CS348 (Intro to DB management), which, according to UWFlow, is a 'horribly' organized course with outdated content (RIP)."
+        noBackground
+      >
+        <WordCloud
+          data={A10}
+          width={wordCloudWidth(isMobile, pageWidth)}
+          height={DefaultProp.graphHeight}
+          wordPadding={11}
+          desktopMaxFontSize={80}
+          mobileMaxFontSize={70}
+        />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="Which course did you find the most useful for job preparation?"
+        bodyText="CS341 (Algorithms) was deemed the most useful CS core course for job preparation according to respondents. This is a no-brainer as Leetcode practice is crucial for passing the interview process! :) Meanwhile, CS246 (Object-Oriented Software Development) is rated 2nd. This can be correlated with students ranking it first as the most favourite CS class!"
+      >
+        <WordCloud
+          data={A11}
+          width={wordCloudWidth(isMobile, pageWidth)}
+          height={DefaultProp.graphHeight}
+          wordPadding={20}
+          desktopMaxFontSize={80}
+          mobileMaxFontSize={80}
+        />
+      </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. Damn, that's almost half of our participants!"
+        noBackground
+      >
+        <div className={styles.graphContainer}>
+          <PieChart data={A12} {...pieChartProps(isMobile, pageWidth)} />
+        </div>
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="Who is your favourite professor in all of UW?"
+        bodyText="Class of 2022 would like to give a shout out to Alice Gao, Carmen Bruni, and Lesley Istead as best professors in UW! Go read their ratings on UWFlow! ;) We would also like to give an honourable mention to every profs and TAs part of the Math faculty who have poured their passion in teaching to help the CS class of 2022 grow and succeed! You guys are amazing! ❤️"
+        align="right"
+      >
+        <WordCloud
+          data={A14}
+          width={wordCloudWidth(isMobile, pageWidth)}
+          height={DefaultProp.graphHeight}
+          wordPadding={3}
+          desktopMaxFontSize={75}
+          mobileMaxFontSize={48}
+        />
+      </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. 🤔"
+        align="center"
+        noBackground
+      >
+        <StackedBarGraphHorizontal
+          width={isMobile ? pageWidth / 1.5 : 600}
+          height={DefaultProp.graphHeight}
+          keys={A12iKeys}
+          colorRange={[
+            Color.primaryAccent,
+            Color.secondaryAccentLight,
+            Color.primaryAccentLighter,
+          ]}
+          data={A12i}
+          axisLeftOffset={80}
+          margin={{
+            top: 20,
+            left: 20,
+          }}
+        />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="Which study term did you think was the hardest?"
+        bodyText="2nd year seems to be the hardest year for most CS students with a whooping 52% of respondants agreeing on this (Prepare to be slapped in 2A). 2B has the second highest vote count which validates the saying, “Two B or not Two B”. The later terms are almost relaxing..."
+      >
+        <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 1B, 2A, or 2B, likely because most of the mandatory challenging CS+MATH courses lie around that period of time. Students started having better grades in 3A, correlating with the difficulty of the courses question seen previously."
+        align="center"
+        noBackground
+      >
+        <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 it’s not over if you have failed some. :)"
+        align="right"
+      >
+        <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 ways you can add qualifications to your degree using the electives that you have. That's what they mean when they say you can customize your CS degree! 😛"
+        noBackground
+      >
+        <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 (C&O), 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={wordCloudWidth(isMobile, pageWidth)}
+          height={DefaultProp.graphHeight}
+          wordPadding={7}
+          desktopMaxFontSize={60}
+          desktopMinFontSize={15}
+          mobileMaxFontSize={30}
+        />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="What made you want to complete the option, specialization or minor?"
+        align="center"
+        noBackground
+      >
+        <div className={styles.quotationCarouselContainer}>
+          <QuotationCarousel data={A18ii} circleDiameter={0} height={300} />
+        </div>
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="Have you overloaded any of your semesters?"
+        align="right"
+      >
+        <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 pretty charged; however, over 75% of participants were able to overload at least 1 or more term. 32.7% of students overloaded 3+ terms. 🤯"
+        noBackground
+      >
+        <BarGraphVertical data={A19i} {...barGraphProps(isMobile, pageWidth)} />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="Did you transfer into your current program?"
+        bodyText="23% of respondants transferred into their current program which is a surprisingly high number. CS is a pretty flexible degree though, so transferring your credits shouldn't be too hard! ;)"
+      >
+        <div className={styles.graphContainer}>
+          <PieChart data={A13} {...pieChartProps(isMobile, pageWidth)} />
+        </div>
+      </ComponentWrapper>
+
+      <SectionWrapper title="Transfer" />
+      <ComponentWrapper
+        heading="What program did you transfer from?"
+        bodyText="Most transfers came from MATH and CFM. One can note that people who didn't get CS as their first choice most likely got deferred into MATH. CFM transfers may be due to students not ending up liking the financial aspect of their original program."
+        noBackground
+      >
+        <BarGraphVertical data={A13i} {...barGraphProps(isMobile, pageWidth)} />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="What term did you transfer into your program?"
+        bodyText="Most of the transfers occurred during 2A and 2B terms, which makes sense since people have time to re-evaluate their academic/career path after spending a year in their original program."
+        align="right"
+      >
+        <BarGraphVertical
+          data={A13ii}
+          {...barGraphProps(isMobile, pageWidth)}
+        />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="What was your reasoning behind transferring?"
+        bodyText="Having a flexible schedule is one of the most important reasons that people transfer into CS/CSBBA. Many respondants also justified their transfer due to not being in the program of their choice or realizing their interest for CS later."
+        noBackground
+      >
+        <BarGraphVertical
+          data={A13iii}
+          widthAlternatingLabel={1000}
+          alternatingLabelSpace={200}
+          lowerLabelDy="60px"
+          {...barGraphProps(isMobile, pageWidth)}
+        />
+      </ComponentWrapper>
+
+      <SectionWrapper title="Exchange" />
+
+      <ComponentWrapper
+        heading="Did you take any exchange terms?"
+        bodyText="Students can apply to the exchange program starting in their 2nd year to experience studying abroad for a study term! Exchange does not necessarily imply changing school with another student. 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 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, 21% of students were interested in going on an exchange term, but were unable to go due to Covid."
+        noBackground
+      >
+        <div className={styles.graphContainer}>
+          <PieChart data={A21i} {...pieChartProps(isMobile, pageWidth)} />
+        </div>
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="Where did you take your exchange term?"
+        bodyText="Only three people declared exactly where their exchange term was."
+        align="right"
+      >
+        <div className={styles.quotationCarouselContainer}>
+          <QuotationCarousel data={A21ii} circleDiameter={0} />
+        </div>
+      </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 wasn’t for the pandemic. :("
+        noBackground
+      >
+        <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.quotationCarouselContainer}>
+          <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. :)"
+        noBackground
+      >
+        <div className={styles.quotationCarouselContainer}>
+          <QuotationCarousel data={A21v} circleDiameter={0} />
+        </div>
+      </ComponentWrapper>
+
+      <BottomNav
+        leftPage={pageRoutes.demographics}
+        rightPage={pageRoutes.coop}
+      ></BottomNav>
+    </div>
+  );
+}
diff --git a/pages/samplePage.module.css b/pages/samplePage.module.css
index f3761c2..5a817c9 100644
--- a/pages/samplePage.module.css
+++ b/pages/samplePage.module.css
@@ -8,6 +8,14 @@
   padding: 0 calc(70rem / 16);
 }
 
+.quotationCarouselContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: calc(48rem / 16);
+  margin: calc(32rem / 16);
+}
+
 @media screen and (max-width: 1200px) {
   .graphContainer {
     padding: 0 calc(40rem / 16);

From dbb1a5929fad25e0d56d97a99ed1692aca22e976 Mon Sep 17 00:00:00 2001
From: Beihao Zhou <b72zhou@csclub.uwaterloo.ca>
Date: Wed, 7 Dec 2022 21:24:02 -0500
Subject: [PATCH 3/4] Add Postgrad Page (Close #58) (#99)

https://b72zhou-postgrad-page-csc-class-profile-stag-snedadah.k8s.csclub.cloud/postgrad/
Co-authored-by: Rebecca-Chou <beihaozhou@gmail.com>
Co-authored-by: e26chiu <e26chiu@csc.uwaterloo.ca>
Reviewed-on: https://git.csclub.uwaterloo.ca/www/cs-2022-class-profile/pulls/99
Reviewed-by: Mark Chiu <e26chiu@csclub.uwaterloo.ca>
---
 data/post-grad.ts   | 231 ++++++++++++++++++++++++++++++++++++++++++++
 pages/post-grad.tsx | 137 ++++++++++++++++++++++++++
 2 files changed, 368 insertions(+)
 create mode 100644 data/post-grad.ts
 create mode 100644 pages/post-grad.tsx

diff --git a/data/post-grad.ts b/data/post-grad.ts
new file mode 100644
index 0000000..a6af396
--- /dev/null
+++ b/data/post-grad.ts
@@ -0,0 +1,231 @@
+export const P1 = [
+  {
+    category: "No",
+    value: 64.1,
+  },
+  {
+    category: "Not sure",
+    value: 20.4,
+  },
+  {
+    category: "Yes (Masters)",
+    value: 5,
+  },
+  {
+    category: "Yes (PhD)",
+    value: 4,
+  },
+  {
+    category: "Yes (PhD + Masters)",
+    value: 6.8,
+  },
+];
+
+export const P2 = [
+  {
+    category: "Yes",
+    value: 78.2,
+  },
+  {
+    category: "No",
+    value: 21.8,
+  },
+];
+
+export const P3 = [
+  {
+    text: "Seattle",
+    value: 8,
+  },
+  {
+    text: "New York",
+    value: 20,
+  },
+  {
+    text: "Chicago",
+    value: 4,
+  },
+  {
+    text: "San Francisco",
+    value: 13,
+  },
+  {
+    text: "California",
+    value: 13,
+  },
+  {
+    text: "GTA / Toronto",
+    value: 10,
+  },
+  {
+    text: "Boston",
+    value: 2,
+  },
+];
+
+export const P4 = [
+  {
+    category: "0",
+    value: 1,
+  },
+  {
+    category: "1",
+    value: 19,
+  },
+  {
+    category: "2",
+    value: 31,
+  },
+  {
+    category: "3",
+    value: 17,
+  },
+  {
+    category: "4",
+    value: 6,
+  },
+  {
+    category: "5",
+    value: 5,
+  },
+];
+
+export const P5 = [
+  {
+    category: "0",
+    value: 20,
+  },
+  {
+    category: "1",
+    value: 7,
+  },
+  {
+    category: "2",
+    value: 7,
+  },
+  {
+    category: "3",
+    value: 10,
+  },
+  {
+    category: "4",
+    value: 5,
+  },
+  {
+    category: "5",
+    value: 8,
+  },
+  {
+    category: "6",
+    value: 2,
+  },
+  {
+    category: "7",
+    value: 2,
+  },
+  {
+    category: "8",
+    value: 2,
+  },
+  {
+    category: "10",
+    value: 3,
+  },
+  {
+    category: "12",
+    value: 1,
+  },
+  {
+    category: "15",
+    value: 1,
+  },
+  {
+    category: "35",
+    value: 1,
+  },
+];
+
+export const P6 = [
+  {
+    category: "Yes",
+    value: 61.7,
+  },
+  {
+    category: "No",
+    value: 38.3,
+  },
+];
+
+export const P7 = [
+  {
+    category: "51k-100k",
+    value: 2,
+  },
+  {
+    category: "101k-150k",
+    value: 6,
+  },
+  {
+    category: "151k-200k",
+    value: 16,
+  },
+  {
+    category: "201k-250k",
+    value: 18,
+  },
+  {
+    category: "251k-300k",
+    value: 15,
+  },
+  {
+    category: "300k+",
+    value: 21,
+  },
+];
+
+export const P8 = [
+  {
+    text: "Web development",
+    value: 11,
+  },
+  {
+    text: "Finance",
+    value: 1,
+  },
+  {
+    text: "Cloud Computing",
+    value: 5,
+  },
+  {
+    text: "Artificial Intelligence",
+    value: 3,
+  },
+  {
+    text: "Robotics",
+    value: 1,
+  },
+  {
+    text: "Data Science",
+    value: 6,
+  },
+  {
+    text: "Research",
+    value: 3,
+  },
+  {
+    text: "Security",
+    value: 1,
+  },
+  {
+    text: "Hardware",
+    value: 2,
+  },
+  {
+    text: "Mobile Development",
+    value: 1,
+  },
+  {
+    text: "Computer Networking",
+    value: 2,
+  },
+];
diff --git a/pages/post-grad.tsx b/pages/post-grad.tsx
new file mode 100644
index 0000000..5c5c5b9
--- /dev/null
+++ b/pages/post-grad.tsx
@@ -0,0 +1,137 @@
+import { P1, P2, P3, P4, P5, P6, P7, P8 } from "data/post-grad";
+import { pageRoutes } from "data/routes";
+import React from "react";
+import {
+  barGraphProps,
+  DefaultProp,
+  pieChartProps,
+  barGraphMargin,
+  barGraphWidth,
+  wordCloudWidth,
+} 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 { SectionHeader } from "@/components/SectionHeader";
+import { WordCloud } from "@/components/WordCloud";
+
+import styles from "./samplePage.module.css";
+
+export default function Demographics() {
+  const pageWidth = useWindowDimensions().width;
+  const isMobile = useIsMobile();
+
+  return (
+    <div className={styles.page}>
+      <Header />
+      <SectionHeader
+        title="Post-grad"
+        subtitle="Further Computer Science Academic Journey"
+      />
+
+      <ComponentWrapper
+        heading="Do you plan on pursuing post-graduate education?"
+        bodyText="There are a total of 103 respondents. Interestingly, there is a huge number of students not pursuring post-grad learning. Post-graduate education is not necessarly for everyone!"
+        align="center"
+      >
+        <div className={styles.graphContainer}>
+          <PieChart data={P1} {...pieChartProps(isMobile, pageWidth)} />
+        </div>
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="Have you secured a full time position post-grad?"
+        bodyText="Most students have secured a full time position as they have probably received return offers from the companies they have interned at! UWaterloo's coop program's 2 year worth of work experience also paid off!"
+      >
+        <div className={styles.graphContainer}>
+          <PieChart data={P2} {...pieChartProps(isMobile, pageWidth)} />
+        </div>
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="Are you returning to a prior co-op?"
+        bodyText="It’s great to see that most people that have a full-time position have gotten it from a return offer! It goes to show how the co-op program improve the students' employability and allow them to find jobs that they enjoy!"
+        align="right"
+        noBackground
+      >
+        <div className={styles.graphContainer}>
+          <PieChart data={P6} {...pieChartProps(isMobile, pageWidth)} />
+        </div>
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="Where will you be working from post grad? (City, State/Province, Country)"
+        bodyText="The US and GTA/Toronto are huge hot spots here, but it’s great to see lots of that these programs can propel students to go to so many different places. Another noteworthy observation is that most students are going to work in the USA postgrad!"
+        align="right"
+      >
+        <WordCloud
+          data={P3}
+          width={wordCloudWidth(isMobile, pageWidth)}
+          height={DefaultProp.graphHeight}
+          wordPadding={7}
+          desktopMaxFontSize={75}
+          mobileMaxFontSize={48}
+        />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="How many offers did you decide between?"
+        bodyText="Over half of the participants only had to decide between one or two offers! 35% of respondants had to choose between 3+ offers!"
+        noBackground
+      >
+        <BarGraphVertical data={P4} {...barGraphProps(isMobile, pageWidth)} />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="How many onsites/interviews did you get?"
+        bodyText="As lots of people had return offers, it’s only imaginable that a significant portion of the higher end of the onsites / interviews are from the group that didn’t have return offers."
+        align="right"
+      >
+        <BarGraphHorizontal
+          data={P5}
+          width={barGraphWidth(isMobile, pageWidth)}
+          height={DefaultProp.graphHeight}
+          margin={barGraphMargin}
+        />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="What will be your first year total compensation (salary + signing + first year stock + bonus) in CAD?"
+        bodyText="The tech field has interesting levels of annual compensation, these numbers speak for themselves…😜"
+        noBackground
+      >
+        <BarGraphVertical
+          data={P7}
+          width={barGraphWidth(isMobile, pageWidth)}
+          height={DefaultProp.graphHeight}
+          margin={{ ...barGraphMargin }}
+        />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="What field/career path will you be in post-graduation?"
+        bodyText="Computer Science degrees can lead to so many things these days! Web development is an obvious field with web apps being used everywhere nowadays. Artificial Intelligence and Data Science are also becoming increasingly popular fields as they bring out new methods of solving business problems. Cloud computing is also growing in demand by virtualizing IT infrastructure, reducing its costs, and improving its scalability."
+        align="right"
+      >
+        <WordCloud
+          data={P8}
+          width={wordCloudWidth(isMobile, pageWidth)}
+          height={DefaultProp.graphHeight}
+          wordPadding={10}
+          desktopMaxFontSize={75}
+          mobileMaxFontSize={48}
+        />
+      </ComponentWrapper>
+
+      <BottomNav
+        leftPage={pageRoutes.intimacyAndDrugs}
+        rightPage={pageRoutes.friends}
+      ></BottomNav>
+    </div>
+  );
+}

From 7bcd11e18650a5a18625d51c637166f628bb9e84 Mon Sep 17 00:00:00 2001
From: Beihao Zhou <b72zhou@csclub.uwaterloo.ca>
Date: Sun, 11 Dec 2022 19:18:15 -0500
Subject: [PATCH 4/4] Add Friends Page (Close #59) (#105)

Co-authored-by: Rebecca-Chou <beihaozhou@gmail.com>
Co-authored-by: e26chiu <e26chiu@csc.uwaterloo.ca>
Reviewed-on: https://git.csclub.uwaterloo.ca/www/cs-2022-class-profile/pulls/105
Reviewed-by: Mark Chiu <e26chiu@csclub.uwaterloo.ca>
---
 data/friends.ts   | 487 ++++++++++++++++++++++++++++++++++++++++++++++
 pages/friends.tsx | 233 ++++++++++++++++++++++
 2 files changed, 720 insertions(+)
 create mode 100644 data/friends.ts
 create mode 100644 pages/friends.tsx

diff --git a/data/friends.ts b/data/friends.ts
new file mode 100644
index 0000000..698ee8d
--- /dev/null
+++ b/data/friends.ts
@@ -0,0 +1,487 @@
+export const F1 = [
+  {
+    category: "1",
+    value: 5,
+  },
+  {
+    category: "2",
+    value: 4,
+  },
+  {
+    category: "3",
+    value: 11,
+  },
+  {
+    category: "4",
+    value: 19,
+  },
+  {
+    category: "5",
+    value: 17,
+  },
+  {
+    category: "6",
+    value: 15,
+  },
+  {
+    category: "7",
+    value: 19,
+  },
+  {
+    category: "8",
+    value: 6,
+  },
+  {
+    category: "9",
+    value: 2,
+  },
+  {
+    category: "10",
+    value: 5,
+  },
+];
+
+export const F2 = [
+  {
+    category: "Introvert",
+    value: 53,
+  },
+  {
+    category: "Extrovert",
+    value: 11,
+  },
+  {
+    category: "Ambivert",
+    value: 39,
+  },
+];
+
+export const F3 = [
+  {
+    category: "None",
+    value: 5,
+  },
+  {
+    category: "Half",
+    value: 25,
+  },
+  {
+    category: "Some",
+    value: 28,
+  },
+  {
+    category: "Majority",
+    value: 42,
+  },
+  {
+    category: "All",
+    value: 3,
+  },
+];
+
+export const F4 = [
+  {
+    category: "Rarely",
+    value: 21,
+  },
+  {
+    category: "Sometimes",
+    value: 33,
+  },
+  {
+    category: "Often",
+    value: 34,
+  },
+  {
+    category: "Always",
+    value: 15,
+  },
+];
+
+export const F5 = [
+  {
+    category: "0",
+    value: 7,
+  },
+  {
+    category: "1-2",
+    value: 29,
+  },
+  {
+    category: "3-5",
+    value: 35,
+  },
+  {
+    category: "5-10",
+    value: 10,
+  },
+  {
+    category: "10+",
+    value: 6,
+  },
+  {
+    category: "Unsure",
+    value: 14,
+  },
+];
+
+export const F6 = [
+  {
+    category: "Often",
+    value: 8,
+  },
+  {
+    category: "Sometimes",
+    value: 37,
+  },
+  {
+    category: "Rarely",
+    value: 38,
+  },
+  {
+    category: "Never",
+    value: 17,
+  },
+  {
+    category: "Always",
+    value: 1,
+  },
+];
+
+export const F7 = [
+  {
+    category: "Often",
+    value: 36,
+  },
+  {
+    category: "Sometimes",
+    value: 35,
+  },
+  {
+    category: "Rarely",
+    value: 14,
+  },
+  {
+    category: "Never",
+    value: 3,
+  },
+  {
+    category: "Always",
+    value: 14,
+  },
+];
+
+export const F8 = [
+  {
+    category: "1A",
+    value: 52,
+  },
+  {
+    category: "1B",
+    value: 35,
+  },
+  {
+    category: "2A",
+    value: 23,
+  },
+  {
+    category: "2B",
+    value: 26,
+  },
+  {
+    category: "3A",
+    value: 7,
+  },
+  {
+    category: "3B",
+    value: 3,
+  },
+  {
+    category: "4A",
+    value: 7,
+  },
+  {
+    category: "4B",
+    value: 13,
+  },
+  {
+    category: "1st coop",
+    value: 7,
+  },
+  {
+    category: "2nd coop",
+    value: 8,
+  },
+  {
+    category: "3rd coop",
+    value: 8,
+  },
+  {
+    category: "4th coop",
+    value: 3,
+  },
+  {
+    category: "5th coop",
+    value: 5,
+  },
+  {
+    category: "6th coop",
+    value: 3,
+  },
+];
+
+export const F9 = [
+  {
+    category: "0",
+    value: 1,
+  },
+  {
+    category: "1",
+    value: 13,
+  },
+  {
+    category: "2",
+    value: 32,
+  },
+  {
+    category: "3-4",
+    value: 50,
+  },
+  {
+    category: "5-10",
+    value: 7,
+  },
+];
+
+export const F10 = [
+  {
+    category: "0",
+    value: 1,
+  },
+  {
+    category: "1-2",
+    value: 8,
+  },
+  {
+    category: "3-4",
+    value: 49,
+  },
+  {
+    category: "5-10",
+    value: 43,
+  },
+  {
+    category: "11+",
+    value: 1,
+  },
+];
+
+export const F11 = [
+  {
+    category: "0",
+    value: 2,
+  },
+  {
+    category: "1",
+    value: 9,
+  },
+  {
+    category: "2",
+    value: 20,
+  },
+  {
+    category: "3",
+    value: 29,
+  },
+  {
+    category: "4",
+    value: 27,
+  },
+  {
+    category: "5",
+    value: 16,
+  },
+];
+
+export const F12 = [
+  {
+    category: "Most",
+    value: 41,
+  },
+  {
+    category: "Some",
+    value: 49,
+  },
+  {
+    category: "All",
+    value: 4,
+  },
+  {
+    category: "Barely",
+    value: 8,
+  },
+  {
+    category: "No",
+    value: 1,
+  },
+];
+
+export const F13 = [
+  {
+    category: "Classes",
+    value: 81,
+  },
+  {
+    category: "Mutual friends",
+    value: 71,
+  },
+  {
+    category: "Extracurriculars",
+    value: 53,
+  },
+  {
+    category: "Coop",
+    value: 40,
+  },
+  {
+    category: "Parties",
+    value: 15,
+  },
+  {
+    category: "Online",
+    value: 9,
+  },
+  {
+    category: "Residence",
+    value: 3,
+  },
+];
+
+export const F14 = [
+  {
+    category: "Res",
+    value: 78,
+  },
+  {
+    category: "MC",
+    value: 36,
+  },
+  {
+    category: "DC",
+    value: 21,
+  },
+  {
+    category: "PAC",
+    value: 14,
+  },
+  {
+    category: "SLC",
+    value: 11,
+  },
+  {
+    category: "DP",
+    value: 4,
+  },
+  {
+    category: "E7",
+    value: 9,
+  },
+  {
+    category: "E5",
+    value: 3,
+  },
+  {
+    category: "E5",
+    value: 3,
+  },
+  {
+    category: "CIF",
+    value: 5,
+  },
+  {
+    category: "AL",
+    value: 2,
+  },
+  {
+    category: "CIF",
+    value: 5,
+  },
+  {
+    category: "Plaza",
+    value: 3,
+  },
+];
+
+export const F15 = [
+  {
+    text: "Chatting/Talking",
+    value: 12,
+  },
+  {
+    text: "Eating food",
+    value: 36,
+  },
+  {
+    text: "Workout",
+    value: 11,
+  },
+  {
+    text: "Drinking",
+    value: 7,
+  },
+  {
+    text: "Study",
+    value: 9,
+  },
+  {
+    text: "Board games",
+    value: 10,
+  },
+  {
+    text: "Video games",
+    value: 8,
+  },
+  {
+    text: "Watch TV Shows/Animes/Movies",
+    value: 4,
+  },
+  {
+    text: "Party",
+    value: 2,
+  },
+  {
+    text: "Cook",
+    value: 2,
+  },
+  {
+    text: "Exploring new places",
+    value: 1,
+  },
+  {
+    text: "Clubs",
+    value: 1,
+  },
+];
+
+export const F16 = [
+  {
+    category: "Most",
+    value: 49,
+  },
+  {
+    category: "Some",
+    value: 36,
+  },
+  {
+    category: "All",
+    value: 9,
+  },
+  {
+    category: "Barely",
+    value: 6,
+  },
+  {
+    category: "No",
+    value: 2,
+  },
+];
\ No newline at end of file
diff --git a/pages/friends.tsx b/pages/friends.tsx
new file mode 100644
index 0000000..192b9d7
--- /dev/null
+++ b/pages/friends.tsx
@@ -0,0 +1,233 @@
+import {
+  F1,
+  F2,
+  F3,
+  F4,
+  F5,
+  F6,
+  F7,
+  F8,
+  F9,
+  F10,
+  F11,
+  F12,
+  F13,
+  F14,
+  F15,
+  F16,
+} from "data/friends";
+import { pageRoutes } from "data/routes";
+import React from "react";
+import {
+  barGraphProps,
+  DefaultProp,
+  pieChartProps,
+  barGraphMargin,
+  barGraphWidth,
+  wordCloudWidth,
+} 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 { SectionHeader } from "@/components/SectionHeader";
+import { WordCloud } from "@/components/WordCloud";
+
+import styles from "./samplePage.module.css";
+
+export default function Demographics() {
+  const pageWidth = useWindowDimensions().width;
+  const isMobile = useIsMobile();
+
+  return (
+    <div className={styles.page}>
+      <Header />
+      <SectionHeader
+        title="Friends"
+        subtitle="The friends you make in university are friends you’ll have for life."
+      />
+
+      <ComponentWrapper
+        heading="Rate how social you are."
+        bodyText="Looks like most people consider themselves to be in the middle."
+        align="center"
+      >
+        <BarGraphVertical
+          data={F1}
+          {...barGraphProps(isMobile, pageWidth)}
+          lowerLabelDy="0"
+        />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="How would you describe yourself?"
+        bodyText="Ambiverts and introverts dominate CS at UWaterloo. Still, contrary to a popular Reddit opinion, it seems that introverted people do not necessarily comprise such a big majority of the CS student population. Extroverts and ambiverts are almost a half of the CS student population!"
+        align="right"
+      >
+        <div className={styles.graphContainer}>
+          <PieChart data={F2} {...pieChartProps(isMobile, pageWidth)} />
+        </div>
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="How many close friends throughout university were also in your program?"
+        bodyText="Most people had friends in the same program as them. For a lot of people, the majority of their friends are in the same program. Perhaps the shared classes, career goals, and pain from shared assignments make scheduling and conversations easier."
+        noBackground
+      >
+        <BarGraphVertical data={F3} {...barGraphProps(isMobile, pageWidth)} />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="How often do you keep in touch with high school friends?"
+        bodyText="Most people are still in touch with their friends in some form or another! Keeping in touch with high school friends can be especially difficult, given that high school friends often drift away from each other due to different career and/or academic paths."
+        align="right"
+      >
+        <div className={styles.graphContainer}>
+          <PieChart data={F4} {...pieChartProps(isMobile, pageWidth)} />
+        </div>
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="How many friends are going to be in the same city as you post-grad?"
+        bodyText="It is nice to know that the majority of our respondents have a few friends that are going to be in their city post-grad."
+        noBackground
+      >
+        <BarGraphVertical data={F5} {...barGraphProps(isMobile, pageWidth)} />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="How often do you stay in touch with friends that you made during co-op?"
+        bodyText="Many people do not really keep in touch with friends made during co-op. This makes sense as each co-op only lasts a short period of time. Interns are not necessarily given the opportunity to interact with each other during the co-op term either. A remote co-op experience can also affect friendships. To sum up, the ease of maintaining friends from co-ops varies on each co-op!"
+        align="right"
+      >
+        <div className={styles.graphContainer}>
+          <PieChart data={F6} {...pieChartProps(isMobile, pageWidth)} />
+        </div>
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="How often do you stay in touch with friends that you made during school terms?"
+        bodyText="Now, more people keep in touch with friends made during school terms. This could be because they can hang out during multiple school terms while on campus."
+        noBackground
+      >
+        <div className={styles.graphContainer}>
+          <PieChart data={F7} {...pieChartProps(isMobile, pageWidth)} />
+        </div>
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="Which term(s) did you meet most of your friends?"
+        bodyText="Establishing friendships is generally easier during the beginning of university as many core introductory courses are shared and all sequences have 1A and 1B at the same time. However, it is definitely still possible to make friends in later terms.😉"
+        align="right"
+      >
+        <BarGraphHorizontal
+          data={F8}
+          width={barGraphWidth(isMobile, pageWidth)}
+          height={DefaultProp.graphHeight}
+          margin={{ ...barGraphMargin, ...{ left: 100 } }}
+        />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="How many friend groups do you have?"
+        bodyText="According to our data, most people have 3-4 friend groups. These friend groups can come from classes, extracurriculars, high school friends, etc."
+        noBackground
+      >
+        <BarGraphVertical
+          data={F9}
+          {...barGraphProps(isMobile, pageWidth)}
+          lowerLabelDy="0"
+        />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="What is the average size of your friend groups?"
+        bodyText="UW's CS2022's friend groups typically consists of 3-4 people which is pretty normal. Groups of friends of this size allow people to do group activities while maintaining a sense of closeness between them."
+        align="right"
+      >
+        <BarGraphVertical
+          data={F10}
+          {...barGraphProps(isMobile, pageWidth)}
+          lowerLabelDy="0"
+        />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="How open are you to meeting new people?"
+        bodyText="Even though they are graduating, most of our respondents are still somewhat open to meeting new people. Meeting new people can make your life more exciting and make you discover new perspectives that change the way you approach life!"
+        noBackground
+      >
+        <BarGraphVertical
+          data={F11}
+          {...barGraphProps(isMobile, pageWidth)}
+          lowerLabelDy="0"
+        />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="How many of your friendships were made after starting university?"
+        bodyText="For a lot of people, most or at least some friendships are made during university. This goes to show how university is an important point in life where people form their most valuable relationships!"
+        align="right"
+      >
+        <div className={styles.graphContainer}>
+          <PieChart data={F12} {...pieChartProps(isMobile, pageWidth)} />
+        </div>
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="How did you meet most of your friends after starting university?"
+        bodyText="There are countless ways to meet new friends in university. Some of the most common ways include classes, mutual friends, and extracurriculars."
+        noBackground
+      >
+        <BarGraphHorizontal
+          data={F13}
+          width={barGraphWidth(isMobile, pageWidth)}
+          height={DefaultProp.graphHeight}
+          margin={{ ...barGraphMargin, ...{ left: 150 } }}
+        />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="Where do you and your friends usually hang out on campus? "
+        bodyText="There are many buildings on campus for students to chill and hang out. Looking at our data, hanging out at someone’s residence seems to be the most popular option. It makes sense as having fun outside of school buildings enable people to take their mind off from schoolwork. MC and DC are also fairly popular spots since they are where most classes take place for CS students and DC is the library where most students study at due to its nice vibes while MC has all the club offices."
+        align="right"
+      >
+        <BarGraphVertical data={F14} {...barGraphProps(isMobile, pageWidth)} />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="What is your go-to activity when hanging out with friends?"
+        bodyText="There is a variety of activities enjoyed by everyone! Most people enjoy eating food with their friends (Who doesn't love to eat or try out new restaurants?). Talking and going to the gym are the next social activities that are favoured the most by students. Hanging out with friends doesn't have to be complicated! 😉"
+        noBackground
+      >
+        <WordCloud
+          data={F15}
+          width={wordCloudWidth(isMobile, pageWidth)}
+          height={DefaultProp.graphHeight}
+          wordPadding={7}
+          desktopMaxFontSize={75}
+          mobileMaxFontSize={48}
+        />
+      </ComponentWrapper>
+
+      <ComponentWrapper
+        heading="What proportion of friends will you keep in contact with post graduation?"
+        bodyText="Some or even most friendships will be kept by our students post-grad! As mentioned previously, university is an experience where people make most of their long-term friends! This pie chart demonstrates it!"
+        align="right"
+      >
+        <div className={styles.graphContainer}>
+          <PieChart data={F16} {...pieChartProps(isMobile, pageWidth)} />
+        </div>
+      </ComponentWrapper>
+
+      <BottomNav
+        leftPage={pageRoutes.postGrad}
+        rightPage={pageRoutes.miscellaneous}
+      ></BottomNav>
+    </div>
+  );
+}