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] 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);