Trying willchange

.drone.yml

@@ -50,7 +50,7 @@ steps:
     registry: registry.cloud.csclub.uwaterloo.ca
     repo: registry.cloud.csclub.uwaterloo.ca/snedadah/csc-class-profile-staging
 
-- name: deploy-staging
+- name: deploy
   image: node:16
   depends_on:
   - publish
@@ -60,22 +60,7 @@ steps:
   commands:
     -  echo "The docker build tag is ${DRONE_BRANCH//\//-}"
     - 'curl -H "Authorization: $STAGING_AUTH_TOKEN"  https://csclub.uwaterloo.ca/~snedadah/webhooks/cscclassprofilestaging?ref=${DRONE_BRANCH//\//-}'
-
-- name: deploy-production
-  image: node:16
-  depends_on:
-  - export
-  environment:
-    SSH_KEY:
-      from_secret: DEPLOYMENT_SSH_KEY
-  commands:
-  - 'echo "$SSH_KEY" > /tmp/ssh_key'
-  - chmod 600 /tmp/ssh_key
-  - ssh -4 -i /tmp/ssh_key www@caffeine.csclub.uwaterloo.ca -o StrictHostKeyChecking=no '~/bin/classprofile/deploy-2022.sh'
-  when:
-    branch:
-    - main
-
+    
 trigger:
   event:
     exclude:

components/About.module.css

@@ -57,9 +57,3 @@
   bottom: 0;
   right: 0;
 }
-
-@media screen and (max-width: 900px) {
-  .about {
-    flex-direction: column;
-  }
-}

components/About.tsx

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

components/BarGraph.module.css

@@ -1,15 +1,9 @@
 .barBackground {
   fill: var(--card-background);
-  transition: fill 0.5s ease-out;
 }
 
 .bar {
   fill: var(--primary-accent-light);
-  transition: fill 0.5s ease-out;
-}
-
-.barGroup {
-  transition: fill 0.5s ease-out;
 }
 
 .barGroup:hover .bar {

components/BarGraph.tsx

@@ -1,15 +1,17 @@
 import { AxisBottom, AxisLeft } from "@visx/axis";
 import { bottomTickLabelProps } from "@visx/axis/lib/axis/AxisBottom";
 import { leftTickLabelProps } from "@visx/axis/lib/axis/AxisLeft";
+import { localPoint } from "@visx/event";
 import { GridColumns, GridRows } from "@visx/grid";
 import { Group } from "@visx/group";
+import { Point } from "@visx/point";
 import { scaleBand, scaleLinear } from "@visx/scale";
 import { Bar } from "@visx/shape";
 import { withTooltip } from "@visx/tooltip";
 import React from "react";
 import { Color } from "utils/Color";
 
-import { getTooltipPosition, TooltipWrapper } from "./TooltipWrapper";
+import { TooltipWrapper } from "./TooltipWrapper";
 
 import styles from "./BarGraph.module.css";
 
@@ -152,11 +154,17 @@ export const BarGraphHorizontal = withTooltip<BarGraphProps, TooltipData>(
                   <Group className={styles.barGroup} key={`bar-${barName}`}>
                     <Bar
                       onMouseMove={(e) => {
-                        const tooltipPos = getTooltipPosition(e);
+                        const eventSvgCoords = localPoint(
+                          // ownerSVGElement is given by visx docs but not recognized by typescript
+                          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                          // @ts-ignore
+                          e.target.ownerSVGElement as Element,
+                          e
+                        ) as Point;
                         showTooltip({
                           tooltipData: getValue(d).toString(),
-                          tooltipLeft: tooltipPos.x,
-                          tooltipTop: tooltipPos.y,
+                          tooltipTop: eventSvgCoords.y,
+                          tooltipLeft: eventSvgCoords.x,
                         });
                       }}
                       onMouseOut={hideTooltip}
@@ -319,11 +327,17 @@ export const BarGraphVertical = withTooltip<BarGraphProps, TooltipData>(
                   <Group className={styles.barGroup} key={`bar-${barName}`}>
                     <Bar
                       onMouseMove={(e) => {
-                        const tooltipPos = getTooltipPosition(e);
+                        const eventSvgCoords = localPoint(
+                          // ownerSVGElement is given by visx docs but not recognized by typescript
+                          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                          // @ts-ignore
+                          e.target.ownerSVGElement as Element,
+                          e
+                        ) as Point;
                         showTooltip({
                           tooltipData: getValue(d).toString(),
-                          tooltipLeft: tooltipPos.x,
-                          tooltipTop: tooltipPos.y,
+                          tooltipTop: eventSvgCoords.y,
+                          tooltipLeft: eventSvgCoords.x,
                         });
                       }}
                       onMouseOut={hideTooltip}

components/BlankLink.tsx

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

components/BottomNav.tsx

@@ -25,12 +25,12 @@ export function BottomNav(props: PagesInfo) {
     >
       {props.leftPage ? (
         <div className={styles.subBox + " " + styles.subBoxLeft}>
-          <Link href={props.leftPage.url} scroll={true}>
+          <Link href={props.leftPage.url}>
             <a>
               <Arrow />
             </a>
           </Link>
-          <Link href={props.leftPage.url} scroll={true}>
+          <Link href={props.leftPage.url}>
             <a className={styles.item + " " + styles.leftItem}>
               {props.leftPage.name}
             </a>
@@ -39,10 +39,10 @@ export function BottomNav(props: PagesInfo) {
       ) : null}
       {props.rightPage ? (
         <div className={styles.subBox}>
-          <Link href={props.rightPage.url} scroll={true}>
+          <Link href={props.rightPage.url}>
             <a className={styles.item}>{props.rightPage.name}</a>
           </Link>
-          <Link href={props.rightPage.url} scroll={true}>
+          <Link href={props.rightPage.url}>
             <a>
               <Arrow isPointingRight />
             </a>

components/Boxplot.module.css

@@ -1,6 +1,5 @@
 .boxplot {
   fill: var(--primary-accent-light);
-  transition: fill 0.5s ease-out;
 }
 
 .boxplot:hover {

components/Boxplot.tsx

@@ -11,7 +11,7 @@ import { WithTooltipProvidedProps } from "@visx/tooltip/lib/enhancers/withToolti
 import React from "react";
 import { Color } from "utils/Color";
 
-import { getTooltipPosition, TooltipWrapper } from "./TooltipWrapper";
+import { TooltipWrapper } from "./TooltipWrapper";
 
 import styles from "./Boxplot.module.css";
 
@@ -47,10 +47,16 @@ export type StatsPlotProps = {
   strokeDashArray?: string;
   /** Number of ticks for the value (y-)axis */
   numTicksLeftAxis?: number;
-  /** Left margin before the start of the graph for the left axis labels, in px. */
-  valueAxisLeftMargin?: number;
-  /** Distance between the left axis labels and the start of the graph */
-  valueAxisLabelOffset?: number;
+  /** Distance between the boxplot and the top of the grid, in px. */
+  plotTopOffset?: number;
+  /** Distance between the left axis labels and the start of the lines of the graph, in px. */
+  valueAxisLeftOffset?: number;
+  /** Distance between the top and the first label of the y axis, in px. */
+  valueAxisLabelTopOffset?: number;
+  /** Distance between the left and the labels of the y axis, in px. */
+  valueAxisLabelLeftOffset?: number;
+  /** Distance between the left and the start of the first label of the x axis, in px. */
+  categoryAxisLabelLeftOffset?: number;
   /** Distance between the top and the column lines of the grid of the graph, in px. */
   gridColumnTopOffset?: number;
   /** Distance between the top of the point in the boxplot and the start of the tooltip box, in px. */
@@ -67,10 +73,6 @@ export type StatsPlotProps = {
   boxPlotWidthFactor?: number;
   /** Factor multiplied with the compressed width to determine the distance between boxes, in px. */
   boxPlotLeftOffset?: number;
-  /** Boxplot padding  */
-  boxPlotPadding?: number;
-  /** Minimum width of the graph. */
-  minWidth?: number;
 };
 
 export const BoxPlot = withTooltip<StatsPlotProps, TooltipData>(
@@ -88,22 +90,19 @@ export const BoxPlot = withTooltip<StatsPlotProps, TooltipData>(
     strokeWidth = 2.5,
     strokeDashArray = "10,4",
     numTicksLeftAxis = 6,
-    valueAxisLeftMargin = 40,
+    plotTopOffset = 10,
+    valueAxisLeftOffset = 40,
     gridColumnTopOffset = -20,
-    valueAxisLabelOffset = -10,
-    toolTipTopOffset = 0,
-    toolTipLeftOffset = 0,
+    valueAxisLabelTopOffset = 5,
+    valueAxisLabelLeftOffset = 10,
+    categoryAxisLabelLeftOffset = 30,
+    toolTipTopOffset = 20,
+    toolTipLeftOffset = 5,
     categoryAxisLabelSize = DEFAULT_LABEL_SIZE,
     valueAxisLabelSize = DEFAULT_LABEL_SIZE,
     boxPlotWidthFactor = 0.4,
     boxPlotLeftOffset = 0.3,
-    boxPlotPadding = 0.3,
-    minWidth = 500,
   }: StatsPlotProps & WithTooltipProvidedProps<TooltipData>) => {
-    if (width < minWidth) {
-      width = minWidth;
-    }
-
     // bounds
     const xMax = width;
     const yMax = height - 120;
@@ -129,104 +128,60 @@ export const BoxPlot = withTooltip<StatsPlotProps, TooltipData>(
 
     // scales
     const xScale = scaleBand<string>({
-      range: [margin.left, xMax - 2 * margin.left - valueAxisLeftMargin], // scaling is needed due to left margin
+      range: [18, xMax - 80], // scaling is needed due to the left offset
       round: true,
       domain: plotData.map(getX),
-      padding: boxPlotPadding,
+      padding: 0.3,
     });
 
     const values = plotData.reduce((allValues, { boxPlot }) => {
       allValues.push(boxPlot.min, boxPlot.max);
       return allValues;
     }, [] as number[]);
+    const minYValue = Math.min(...values);
     const maxYValue = Math.max(...values);
 
     const yScale = scaleLinear<number>({
-      range: [yMax - margin.top, 0],
+      range: [yMax, 0],
       round: true,
-      domain: [0, maxYValue],
+      domain: [minYValue, maxYValue],
     });
 
     const constrainedWidth = Math.min(200, xScale.bandwidth());
 
-    const mouseOverEventHandler =
-      (d: Stats) =>
-      (e: React.MouseEvent<SVGLineElement | SVGRectElement, MouseEvent>) => {
-        const pos = getTooltipPosition(e);
-
-        showTooltip({
-          tooltipLeft: pos.x + toolTipLeftOffset,
-          tooltipTop: pos.y + toolTipTopOffset,
-          tooltipData: {
-            ...d.boxPlot,
-            category: getX(d),
-          },
-        });
-      };
-
     return width < 10 ? null : (
       <div>
         <svg width={width} height={height}>
           <Group top={margin.top} left={margin.left}>
-            <Group left={valueAxisLeftMargin}>
-              <GridRows
-                scale={yScale}
-                width={xMax}
-                numTicks={numTicksLeftAxis}
-                stroke={Color.tertiaryBackground}
-                strokeWidth={strokeWidth}
-                strokeDasharray={strokeDashArray}
-              />
-              <GridColumns
-                scale={xScale}
-                height={yMax - gridColumnTopOffset}
-                top={gridColumnTopOffset}
-                stroke={Color.tertiaryBackground}
-                strokeWidth={strokeWidth}
-                strokeDasharray={strokeDashArray}
-              />
-              <AxisBottom
-                top={yMax - gridColumnTopOffset}
-                scale={xScale}
-                hideAxisLine
-                hideTicks
-                labelProps={{
-                  fontSize: `${categoryAxisLabelSize / 16}rem`,
-                }}
-                tickLabelProps={() => {
-                  return {
-                    fill: Color.label,
-                    fontWeight: TICK_LABEL_FONT_WEIGHT,
-                    textAnchor: "middle",
-                  };
-                }}
-              />
-              <AxisLeft
-                scale={yScale}
-                left={valueAxisLabelOffset}
-                numTicks={numTicksLeftAxis}
-                hideAxisLine
-                labelProps={{
-                  fontSize: `${valueAxisLabelSize / 16}rem`,
-                }}
-                tickLabelProps={() => {
-                  return {
-                    fill: Color.label,
-                    fontWeight: TICK_LABEL_FONT_WEIGHT,
-                    textAnchor: "end",
-                    verticalAnchor: "middle",
-                  };
-                }}
-              />
-              <Line
-                fill={Color.tertiaryBackground}
-                to={new Point({ x: 0, y: gridColumnTopOffset })}
-                from={new Point({ x: 0, y: yMax })}
-                stroke={Color.tertiaryBackground}
-                strokeWidth={strokeWidth}
-                strokeDasharray={strokeDashArray}
-              />
-            </Group>
+            <GridRows
+              top={plotTopOffset}
+              left={valueAxisLeftOffset}
+              scale={yScale}
+              width={xMax}
+              numTicks={numTicksLeftAxis}
+              stroke={Color.tertiaryBackground}
+              strokeWidth={strokeWidth}
+              strokeDasharray={strokeDashArray}
+            />
+            <GridColumns
+              scale={xScale}
+              height={yMax + plotTopOffset - gridColumnTopOffset}
+              top={gridColumnTopOffset}
+              left={valueAxisLeftOffset}
+              stroke={Color.tertiaryBackground}
+              strokeWidth={strokeWidth}
+              strokeDasharray={strokeDashArray}
+            />
+            <Line
+              fill={Color.tertiaryBackground}
+              to={new Point({ x: valueAxisLeftOffset, y: gridColumnTopOffset })}
+              from={
+                new Point({ x: valueAxisLeftOffset, y: yMax + plotTopOffset })
+              }
+              stroke={Color.tertiaryBackground}
+              strokeWidth={strokeWidth}
+              strokeDasharray={strokeDashArray}
+            />
             <Line
               fill={Color.tertiaryBackground}
               to={
@@ -238,58 +193,150 @@ export const BoxPlot = withTooltip<StatsPlotProps, TooltipData>(
               from={
                 new Point({
                   x: xMax - margin.left - strokeWidth,
-                  y: yMax,
+                  y: yMax + plotTopOffset,
                 })
               }
               stroke={Color.tertiaryBackground}
               strokeWidth={strokeWidth}
               strokeDasharray={strokeDashArray}
             />
-            {plotData.map((d: Stats, i) => (
-              <Group key={i}>
-                <VisxBoxPlot
-                  className={styles.boxplot}
-                  min={getMin(d)}
-                  max={getMax(d)}
-                  left={
-                    xScale(getX(d))! +
-                    boxPlotLeftOffset * constrainedWidth +
-                    valueAxisLeftMargin
-                  }
-                  firstQuartile={getFirstQuartile(d)}
-                  thirdQuartile={getThirdQuartile(d)}
-                  median={getMedian(d)}
-                  boxWidth={constrainedWidth * boxPlotWidthFactor}
-                  rx={0}
-                  ry={0}
-                  stroke={Color.label}
-                  strokeWidth={strokeWidth}
-                  valueScale={yScale}
-                  minProps={{
-                    onMouseMove: mouseOverEventHandler(d),
-                    onMouseLeave: hideTooltip,
-                  }}
-                  maxProps={{
-                    onMouseMove: mouseOverEventHandler(d),
-                    onMouseLeave: hideTooltip,
-                  }}
-                  boxProps={{
-                    onMouseMove: mouseOverEventHandler(d),
-                    strokeWidth: 0,
-                    onMouseLeave: hideTooltip,
-                  }}
-                  medianProps={{
-                    style: {
-                      stroke: Color.label,
-                    },
-                    onMouseMove: mouseOverEventHandler(d),
-                    onMouseLeave: () => {
-                      hideTooltip();
-                    },
-                  }}
-                />
-              </Group>
-            ))}
+            <AxisBottom
+              top={yMax + plotTopOffset - gridColumnTopOffset}
+              left={categoryAxisLabelLeftOffset}
+              scale={xScale}
+              hideAxisLine
+              hideTicks
+              labelProps={{
+                fontSize: `${categoryAxisLabelSize / 16}rem`,
+              }}
+              tickLabelProps={() => {
+                return {
+                  fill: Color.label,
+                  fontWeight: TICK_LABEL_FONT_WEIGHT,
+                };
+              }}
+            />
+            <AxisLeft
+              scale={yScale}
+              top={plotTopOffset + valueAxisLabelTopOffset}
+              left={valueAxisLabelLeftOffset}
+              numTicks={numTicksLeftAxis}
+              hideAxisLine
+              labelProps={{
+                fontSize: `${valueAxisLabelSize / 16}rem`,
+              }}
+              tickLabelProps={() => {
+                return {
+                  fill: Color.label,
+                  fontWeight: TICK_LABEL_FONT_WEIGHT,
+                };
+              }}
+            />
+            <Group top={plotTopOffset}>
+              {plotData.map((d: Stats, i) => (
+                <Group key={i}>
+                  <VisxBoxPlot
+                    className={styles.boxplot}
+                    min={getMin(d)}
+                    max={getMax(d)}
+                    left={
+                      xScale(getX(d))! +
+                      boxPlotLeftOffset * constrainedWidth +
+                      valueAxisLeftOffset
+                    }
+                    firstQuartile={getFirstQuartile(d)}
+                    thirdQuartile={getThirdQuartile(d)}
+                    median={getMedian(d)}
+                    boxWidth={constrainedWidth * boxPlotWidthFactor}
+                    rx={0}
+                    ry={0}
+                    stroke={Color.label}
+                    strokeWidth={strokeWidth}
+                    valueScale={yScale}
+                    minProps={{
+                      onMouseOver: () => {
+                        showTooltip({
+                          tooltipTop:
+                            (yScale(getMin(d)) ?? 0) + toolTipTopOffset,
+                          tooltipLeft:
+                            xScale(getX(d))! +
+                            constrainedWidth +
+                            toolTipLeftOffset,
+                          tooltipData: {
+                            ...d.boxPlot,
+                            category: getX(d),
+                          },
+                        });
+                      },
+                      onMouseLeave: () => {
+                        hideTooltip();
+                      },
+                    }}
+                    maxProps={{
+                      onMouseOver: () => {
+                        showTooltip({
+                          tooltipTop:
+                            (yScale(getMax(d)) ?? 0) + toolTipTopOffset,
+                          tooltipLeft:
+                            xScale(getX(d))! +
+                            constrainedWidth +
+                            toolTipLeftOffset,
+                          tooltipData: {
+                            ...d.boxPlot,
+                            category: getX(d),
+                          },
+                        });
+                      },
+                      onMouseLeave: () => {
+                        hideTooltip();
+                      },
+                    }}
+                    boxProps={{
+                      onMouseOver: () => {
+                        showTooltip({
+                          tooltipTop:
+                            (yScale(getMedian(d)) ?? 0) + toolTipTopOffset,
+                          tooltipLeft:
+                            xScale(getX(d))! +
+                            constrainedWidth +
+                            toolTipLeftOffset,
+                          tooltipData: {
+                            ...d.boxPlot,
+                            category: getX(d),
+                          },
+                        });
+                      },
+                      strokeWidth: 0,
+                      onMouseLeave: () => {
+                        hideTooltip();
+                      },
+                    }}
+                    medianProps={{
+                      style: {
+                        stroke: Color.label,
+                      },
+                      onMouseOver: () => {
+                        showTooltip({
+                          tooltipTop:
+                            (yScale(getMedian(d)) ?? 0) + toolTipTopOffset,
+                          tooltipLeft:
+                            xScale(getX(d))! +
+                            constrainedWidth +
+                            toolTipLeftOffset,
+                          tooltipData: {
+                            ...d.boxPlot,
+                            category: getX(d),
+                          },
+                        });
+                      },
+                      onMouseLeave: () => {
+                        hideTooltip();
+                      },
+                    }}
+                  />
+                </Group>
+              ))}
+            </Group>
           </Group>
         </svg>
 

components/CenterWrapper.module.css

@@ -1,15 +1,7 @@
 .textbox {
-  display: flex;
-  flex-direction: column;
   width: 80%;
   padding: calc(80rem / 16);
   background-color: var(--secondary-background);
   border-radius: calc(20rem / 16);
-  align-self: center;
+  margin: 0 auto;
 }
-
-@media screen and (max-width: 900px) {
-  .textbox {
-    align-items: center;
-  }
-}

components/ComponentSwitcher.module.css

@@ -1,59 +0,0 @@
-.btn {
-  --button-color: var(--primary-accent-darker);
-  --border-color: var(--link);
-
-  --selected-button-color: var(--primary-accent-dark);
-  --selected-button-border-color: var(--link-hover);
-
-  --hover-button-color: var(--primary-accent-dark);
-  --hover-button-border-color: var(--link-hover);
-
-  display: inline-block;
-  height: calc(60rem / 16);
-  line-height: calc(30rem / 16);
-  background-color: var(--button-color);
-  padding: 0 calc(30rem / 16);
-  border-radius: 99em;
-  text-decoration: none;
-  color: #fff;
-  font-size: calc(18rem / 16);
-  vertical-align: bottom;
-  white-space: nowrap;
-  border: calc(3rem / 16) solid var(--border-color);
-  font-family: "Inconsolata", monospace;
-  transition: .15s background-color, .15s border-color, .15s color, .15s fill;
-  font-weight: 600;
-  cursor: pointer;
-  margin: calc(8rem / 16) calc(3rem / 16);
-  text-align: center;
-}
-
-.btn:hover {
-  --button-color: var(--hover-button-color);
-  --border-color: var(--hover-button-border-color);
-
-  background-color: var(--button-color);
-  border: calc(3rem / 16) solid var(--border-color);
-}
-
-.btnContainer {
-  display: block;
-  text-align: center;
-  margin: auto;
-}
-
-.selectedBtn {
-  --button-color: var(--selected-button-color);
-  --border-color: var(--selected-button-border-color);
-
-  background-color: var(--button-color);
-  border: calc(3rem / 16) solid var(--border-color);
-}
-
-.selectedBtn:hover {
-  --button-color: var(--hover-button-color);
-  --border-color: var(--hover-button-border-color);
-
-  background-color: var(--button-color);
-  border: calc(3rem / 16) solid var(--border-color);
-}

components/ComponentSwitcher.tsx

@@ -1,49 +0,0 @@
-import React, { useState, useEffect } from "react";
-
-import styles from "./ComponentSwitcher.module.css";
-
-type ComponentSwitcherProps = {
-  buttonList: string[];
-  graphList: React.ReactNode[];
-};
-
-export function ComponentSwitcher({
-  buttonList,
-  graphList,
-}: ComponentSwitcherProps) {
-  const [selectedButton, setSelectedButton] = useState(buttonList[0]);
-  const [currentGraph, setCurrentGraph] = useState(graphList[0]);
-  const [currentGraphNumber, setCurrentGraphNumber] = useState(0);
-
-  const handleSwitch = (buttonName: string) => {
-    const graphIndex = buttonList.indexOf(buttonName);
-    setSelectedButton(buttonName);
-    setCurrentGraph(graphList[graphIndex]);
-    setCurrentGraphNumber(graphIndex);
-  };
-
-  useEffect(() => {
-    setCurrentGraph(graphList[currentGraphNumber]);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [graphList]);
-
-  return (
-    <div>
-      <div>{currentGraph}</div>
-      <div className={styles.btnContainer}>
-        {buttonList.map((buttonName, idx) => (
-          // we may also apply style if currently selected button === buttonName
-          <button
-            key={idx}
-            className={`${styles.btn} ${
-              selectedButton === buttonName ? styles.selectedBtn : ""
-            }`}
-            onClick={() => handleSwitch(buttonName)}
-          >
-            {buttonName}
-          </button>
-        ))}
-      </div>
-    </div>
-  );
-}

components/ComponentWrapper.module.css

@@ -10,6 +10,7 @@
   composes: sideWrapperCommon;
   align-self: end;
   margin-right: 0;
+  padding-right: 0;
   border-radius: calc(200rem / 16) 0 0 calc(200rem / 16);
   flex-direction: row-reverse;
   padding-right: calc(50rem / 16);
@@ -19,6 +20,7 @@
   composes: sideWrapperCommon;
   align-self: start;
   margin-left: 0;
+  padding-left: 0;
   border-radius: 0 calc(200rem / 16) calc(200rem / 16) 0;
   flex-direction: row;
   padding-left: calc(50rem / 16);
@@ -40,6 +42,7 @@
    */
   margin: 0 0 calc(45rem / 16) 0;
   align-self: center;
+  padding: 0 15%;
 }
 
 .wrapperCenter .internalWrapper {
@@ -73,12 +76,7 @@
   }
 
   .horizontalScrollOnMobile {
-    overflow-x: scroll;
-  }
-
-  .internalWrapper {
-    /* Without this, some graphs will have an horizontal scroll bar thats not needed */
-    overflow-x: auto;
+    overflow: scroll;
   }
 }
 
@@ -90,11 +88,4 @@
   font-size: calc(24rem / 16);
   opacity: .85;
   line-height: 1.25;
-}
-
-.textWrapper {
-  /* We add this since we want the text to shrink before the graph ever shrinks */
-  flex-shrink: 1000;
-  /* So that text is still readable in the awkward 1000px width screen size */
-  min-width: 200px;
 }

components/ComponentWrapper.tsx

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

components/GroupedBarGraph.module.css

@@ -1,6 +1,8 @@
 .wrapper {
   display: flex;
   flex-direction: column;
+  align-items: center;
+  width: min-content;
 }
 
 .barBackground {
@@ -19,12 +21,8 @@
   fill: var(--label);
 }
 
-.bar {
-  transition: fill 0.5s ease-out;
-}
-
 .legend {
   display: flex;
   margin: calc(16rem / 16);
   justify-content: center;
-}
+}

components/GroupedBarGraph.tsx

@@ -1,9 +1,11 @@
 import { AxisBottom, AxisLeft } from "@visx/axis";
 import { bottomTickLabelProps } from "@visx/axis/lib/axis/AxisBottom";
 import { leftTickLabelProps } from "@visx/axis/lib/axis/AxisLeft";
+import { localPoint } from "@visx/event";
 import { GridColumns, GridRows } from "@visx/grid";
 import { Group } from "@visx/group";
 import { LegendOrdinal } from "@visx/legend";
+import { Point } from "@visx/point";
 import { scaleBand, scaleLinear, scaleOrdinal } from "@visx/scale";
 import { Bar, BarGroup, BarGroupHorizontal } from "@visx/shape";
 import { BarGroupBar as BarGroupBarType } from "@visx/shape/lib/types";
@@ -11,7 +13,7 @@ import { withTooltip } from "@visx/tooltip";
 import React, { useState } from "react";
 import { Color } from "utils/Color";
 
-import { getTooltipPosition, TooltipWrapper } from "./TooltipWrapper";
+import { TooltipWrapper } from "./TooltipWrapper";
 
 import styles from "./GroupedBarGraph.module.css";
 
@@ -255,12 +257,17 @@ export const GroupedBarGraphVertical = withTooltip<
                     {barGroup.bars.map((bar) => (
                       <HoverableBar
                         onMouseMove={(e) => {
-                          const tooltipPos = getTooltipPosition(e);
-
+                          const eventSvgCoords = localPoint(
+                            // ownerSVGElement is given by visx docs but not recognized by typescript
+                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                            // @ts-ignore
+                            e.target.ownerSVGElement as Element,
+                            e
+                          ) as Point;
                           showTooltip({
                             tooltipData: bar.value.toString(),
-                            tooltipTop: tooltipPos.y,
-                            tooltipLeft: tooltipPos.x,
+                            tooltipTop: eventSvgCoords.y,
+                            tooltipLeft: eventSvgCoords.x,
                           });
                         }}
                         onMouseOut={hideTooltip}
@@ -497,11 +504,17 @@ export const GroupedBarGraphHorizontal = withTooltip<
                     {barGroup.bars.map((bar) => (
                       <HoverableBar
                         onMouseMove={(e) => {
-                          const tooltipPos = getTooltipPosition(e);
+                          const eventSvgCoords = localPoint(
+                            // ownerSVGElement is given by visx docs but not recognized by typescript
+                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                            // @ts-ignore
+                            e.target.ownerSVGElement as Element,
+                            e
+                          ) as Point;
                           showTooltip({
                             tooltipData: bar.value.toString(),
-                            tooltipLeft: tooltipPos.x,
-                            tooltipTop: tooltipPos.y,
+                            tooltipTop: eventSvgCoords.y,
+                            tooltipLeft: eventSvgCoords.x,
                           });
                         }}
                         onMouseOut={hideTooltip}
@@ -603,7 +616,6 @@ function HoverableBar(props: HoverableBarProps) {
       }}
     >
       <Bar
-        className={styles.bar}
         onMouseMove={onMouseMove}
         onMouseOut={onMouseOut}
         x={bar.x}

components/Header.module.css

@@ -29,10 +29,13 @@
   padding-right: calc(20rem / 16);
   transition: transform 0.8s;
   overflow: auto;
+  will-change: transform;
 }
 
 .sideBarShown {
   composes: sideBarCommon;
+  /* -1% to hide slight line tip showing in some browsers */
+  transform: translateX(-1%);
 }
 
 .sideBarHidden {
@@ -79,7 +82,6 @@
 .menuIcon {
   background: none;
   border: none;
-  transition: opacity 0.5s ease-out;
 }
 
 .menuIcon:hover {
@@ -116,7 +118,6 @@
   margin-left: calc(20rem / 16);
   /* transparent border fixes weird coloring on the border in some browsers */
   border: calc(1rem / 16) solid transparent;
-  transition: background-color 0.25s ease-out;
 }
 
 .closeMenuButton:hover {

components/Header.tsx

@@ -1,7 +1,6 @@
 import { pageRoutes } from "data/routes";
 import Link from "next/link";
 import React, { useState } from "react";
-import { basePath } from "utils/getBasePath";
 
 import { Sections } from "./Sections";
 
@@ -33,7 +32,7 @@ export function Header() {
           className={styles.menuIcon}
         >
           <img
-            src={basePath + "/images/menuIcon.svg"}
+            src="/images/menuIcon.svg"
             width="50"
             height="50"
             draggable="false"
@@ -53,7 +52,7 @@ export function Header() {
             }}
           >
             <img
-              src={basePath + "/images/rightArrow.svg"}
+              src="/images/rightArrow.svg"
               className={styles.arrowIcon}
               width="50"
               height="50"

components/LineGraph.module.css

@@ -4,17 +4,14 @@
   fill: var(--label);
 }
 
-.line {
-  transition: filter 0.5s ease-out;
-}
-
 .line:hover {
   filter: drop-shadow(0 0 calc(4rem / 16) var(--primary-accent));
-  transition: filter 0.5s ease-out;
 }
 
+
 .wrapper {
   display: flex;
+  align-items: center;
   width: min-content;
 }
 
@@ -22,12 +19,4 @@
   display: flex;
   margin: calc(16rem / 8);
   justify-content: center;
-}
-
-@media screen and (max-width: 900px) {
-
-  /* To fix legend being cut off on mobile */
-  .legend {
-    justify-content: start;
-  }
 }

components/LineGraph.tsx

@@ -1,16 +1,18 @@
 import { AxisBottom, AxisLeft } from "@visx/axis";
 import { bottomTickLabelProps } from "@visx/axis/lib/axis/AxisBottom";
 import { leftTickLabelProps } from "@visx/axis/lib/axis/AxisLeft";
+import { localPoint } from "@visx/event";
 import { GridColumns, GridRows } from "@visx/grid";
 import { Group } from "@visx/group";
 import { LegendOrdinal } from "@visx/legend";
+import { Point } from "@visx/point";
 import { scaleBand, scaleLinear, scaleOrdinal } from "@visx/scale";
 import { LinePath } from "@visx/shape";
 import { withTooltip } from "@visx/tooltip";
 import React from "react";
 import { Color } from "utils/Color";
 
-import { getTooltipPosition, TooltipWrapper } from "./TooltipWrapper";
+import { TooltipWrapper } from "./TooltipWrapper";
 
 import styles from "./LineGraph.module.css";
 
@@ -50,8 +52,6 @@ interface LineGraphProps {
   yTickLabelSize?: number;
   /** Margin for each item in the legend */
   itemMargin?: string;
-  /** Minimum width of the graph. */
-  minWidth?: number;
 }
 
 const DEFAULT_LABEL_SIZE = 16;
@@ -74,12 +74,7 @@ export const LineGraph = withTooltip<LineGraphProps, TooltipData>(
     hideTooltip,
     showTooltip,
     itemMargin = "0 0 0 15px",
-    minWidth = 500,
   }) => {
-    if (width < minWidth) {
-      width = minWidth;
-    }
-
     const xLength = data.xValues.length;
 
     if (data.lines.length != colorRange.length) {
@@ -200,11 +195,17 @@ export const LineGraph = withTooltip<LineGraphProps, TooltipData>(
                   <Group key={`line-${i}`}>
                     <LinePath
                       onMouseMove={(e) => {
-                        const tooltipPos = getTooltipPosition(e);
+                        const eventSvgCoords = localPoint(
+                          // ownerSVGElement is given by visx docs but not recognized by typescript
+                          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                          // @ts-ignore
+                          e.target.ownerSVGElement as Element,
+                          e
+                        ) as Point;
                         showTooltip({
                           tooltipData: data.lines[i].label,
-                          tooltipLeft: tooltipPos.x,
-                          tooltipTop: tooltipPos.y,
+                          tooltipTop: eventSvgCoords.y,
+                          tooltipLeft: eventSvgCoords.x,
                         });
                       }}
                       onMouseOut={hideTooltip}

components/PieChart.module.css

@@ -1,21 +1,12 @@
 .piePath {
   fill: var(--tertiary-background);
-  stroke: var(--label);
-  stroke-width: 1px;
-  stroke-dasharray: 0;
-  stroke-linecap: round;
-  transition: fill 0.5s ease-out;
 }
 
 .labelPath {
   fill-opacity: 0;
 }
 
-.labelText {
-  fill: white;
-}
-
 .group:hover > .piePath {
   fill: var(--primary-accent);
   filter: drop-shadow(0px 0px calc(6rem / 16) var(--primary-accent));
-}
+}

components/PieChart.tsx

@@ -1,10 +1,12 @@
+import { localPoint } from "@visx/event";
 import { Group } from "@visx/group";
+import { Point } from "@visx/point";
 import Pie, { ProvidedProps } from "@visx/shape/lib/shapes/Pie";
 import { Text } from "@visx/text";
 import { withTooltip } from "@visx/tooltip";
 import React from "react";
 
-import { getTooltipPosition, TooltipWrapper } from "./TooltipWrapper";
+import { TooltipWrapper } from "./TooltipWrapper";
 
 import styles from "./PieChart.module.css";
 
@@ -24,10 +26,6 @@ interface PieChartProps {
   labelTextXOffset?: number;
   /** Y-axis offset of the label text, in pixels. */
   labelTextYOffset?: number;
-  /** The radial offset of the label text, in pixels. */
-  labelTextRadialOffset?: number;
-  /** If set, the minimum width of this graph */
-  minWidth?: number;
   /** Accessor function to get value to display as label text from datum. */
   getLabelDisplayValueFromDatum?: (datum: PieChartData) => string;
   className?: string;
@@ -43,13 +41,11 @@ export const PieChart = withTooltip<PieChartProps>(
     data,
     width,
     labelWidth,
-    padRadius = width * 0.25,
-    innerRadius = width * 0,
+    padRadius = width * 0.35,
+    innerRadius = width * 0.015,
     labelTextSize = 40,
     labelTextXOffset = 0,
     labelTextYOffset = 0,
-    labelTextRadialOffset = -20,
-    minWidth = 500,
     getLabelDisplayValueFromDatum = (datum: PieChartData) =>
       `${datum.category}`,
     className,
@@ -60,14 +56,7 @@ export const PieChart = withTooltip<PieChartProps>(
     hideTooltip,
     showTooltip,
   }) => {
-    if (minWidth) {
-      width = width < minWidth ? minWidth : width;
-    }
-
     const pieWidth = width * 0.5 - labelWidth;
-    const cornerRadius = 0;
-    const padAngle = 0;
-
     return (
       <div>
         <svg className={className} width={width} height={width}>
@@ -75,8 +64,8 @@ export const PieChart = withTooltip<PieChartProps>(
             <Pie
               data={data}
               pieValue={(d: PieChartData) => d.value}
-              cornerRadius={cornerRadius}
-              padAngle={padAngle}
+              cornerRadius={10}
+              padAngle={0.075}
               padRadius={padRadius}
               innerRadius={innerRadius}
               outerRadius={pieWidth}
@@ -91,11 +80,17 @@ export const PieChart = withTooltip<PieChartProps>(
                     >
                       <path
                         onMouseMove={(e) => {
-                          const tooltipPos = getTooltipPosition(e);
+                          const eventSvgCoords = localPoint(
+                            // ownerSVGElement is given by visx docs but not recognized by typescript
+                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                            // @ts-ignore
+                            e.target.ownerSVGElement as Element,
+                            e
+                          ) as Point;
                           showTooltip({
                             tooltipData: `${arc.data.category}: ${arc.data.value}%`,
-                            tooltipLeft: tooltipPos.x,
-                            tooltipTop: tooltipPos.y,
+                            tooltipTop: eventSvgCoords.y,
+                            tooltipLeft: eventSvgCoords.x,
                           });
                         }}
                         onMouseOut={hideTooltip}
@@ -119,7 +114,6 @@ export const PieChart = withTooltip<PieChartProps>(
                   labelTextSize={labelTextSize}
                   labelTextXOffset={labelTextXOffset}
                   labelTextYOffset={labelTextYOffset}
-                  labelTextRadialOffset={labelTextRadialOffset}
                   getLabelDisplayValueFromDatum={getLabelDisplayValueFromDatum}
                 />
               )}
@@ -143,7 +137,6 @@ type PieSliceLabelProps<PieChartData> = ProvidedProps<PieChartData> & {
   labelTextSize: number;
   labelTextXOffset: number;
   labelTextYOffset: number;
-  labelTextRadialOffset: number;
   getLabelDisplayValueFromDatum: (datum: PieChartData) => string;
 };
 
@@ -153,7 +146,6 @@ export function PieSliceLabel({
   labelTextSize,
   labelTextXOffset,
   labelTextYOffset,
-  labelTextRadialOffset,
   getLabelDisplayValueFromDatum,
 }: PieSliceLabelProps<PieChartData>) {
   return (
@@ -167,21 +159,9 @@ export function PieSliceLabel({
             <path className={styles.labelPath} d={pathArc} />
             <Text
               className={styles.labelText}
-              x={
-                (labelTextRadialOffset * centroidX) /
-                  Math.sqrt(centroidX ** 2 + centroidY ** 2) +
-                centroidX +
-                labelTextXOffset
-              }
-              y={
-                (labelTextRadialOffset * centroidY) /
-                  Math.sqrt(centroidX ** 2 + centroidY ** 2) +
-                centroidY +
-                labelTextYOffset
-              }
-              textAnchor={
-                centroidX > 100 ? "start" : centroidX < -100 ? "end" : "middle"
-              }
+              x={centroidX + labelTextXOffset}
+              y={centroidY + labelTextYOffset}
+              textAnchor="middle"
               fontSize={labelTextSize}
             >
               {`${getLabelDisplayValueFromDatum(arc.data)}`}

components/Sections.module.css

@@ -11,7 +11,7 @@
 }
 
 .separator {
-  flex: 2;
+  flex: 1;
   background-color: var(--label);
   height: calc(1rem / 16);
   width: 100%;
@@ -50,38 +50,11 @@
   color: var(--primary-text);
 }
 
-.linkName:after {
-  content: '';
-  position: absolute;
-  width: 100%;
-  transform: scaleX(0);
-  height: calc(1rem / 16);
-  bottom: 0;
-  left: 0;
-  background-color: var(--primary-text);
-  cursor: pointer;
-  transform-origin: bottom right;
-  transition: transform 0.25s ease-out;
+.nav li a:hover .linkName {
+  text-decoration: underline;
 }
 
-.linkName:hover:after {
-  transform: scaleX(1);
-  transform-origin: bottom left;
-}
-
-.linkName {
+.nav li .linkName {
   margin: 0;
   display: inline;
-  position: relative;
-}
-
-@media screen and (max-width: 900px) {
-  .sections {
-    flex-direction: column;
-  }
-
-  .sections h1 {
-    text-align: left;
-  }
-
 }

components/Sections.tsx

@@ -1,5 +1,4 @@
 import { PageRoutes } from "data/routes";
-import Link from "next/link";
 import React from "react";
 
 import styles from "./Sections.module.css";
@@ -7,23 +6,12 @@ import styles from "./Sections.module.css";
 interface SectionsProps {
   /* Whether to display the "Sections" title and separator that appears on the left. */
   showHeader?: boolean;
-  /* Width of the entire Sections, in px. */
-  width?: number;
   data: PageRoutes;
-  className?: string;
 }
 
-export function Sections({
-  data,
-  showHeader = true,
-  className,
-}: SectionsProps) {
+export function Sections({ data, showHeader = true }: SectionsProps) {
   return (
-    <section
-      className={
-        className ? `${className} ${styles.sections}` : `${styles.sections}`
-      }
-    >
+    <section className={styles.sections}>
       {showHeader ? (
         <>
           <h1>Sections</h1>
@@ -37,14 +25,12 @@ export function Sections({
           {Object.values(data).map((datum, index) => {
             return (
               <li key={`${datum.name}-${index}`}>
-                <span className={styles.linkNumber}>
-                  {String(index).padStart(2, "0")}{" "}
-                </span>
-                <span className={styles.linkName}>
-                  <Link className={styles.linkName} href={datum.url}>
-                    {datum.name}
-                  </Link>
-                </span>
+                <a href={datum.url}>
+                  <span className={styles.linkNumber}>
+                    {String(index).padStart(2, "0")}{" "}
+                  </span>
+                  <span className={styles.linkName}>{datum.name}</span>
+                </a>
               </li>
             );
           })}

components/StackedBarGraph.module.css

@@ -2,20 +2,14 @@
   position: relative;
 }
 
-.barStack {
-  transition: filter 0.5s ease-out;
-}
-
 .barStack:hover {
   filter: drop-shadow(0 0 calc(4rem / 16) var(--label));
-  transition: filter 0.5s ease-out;
 }
 
 .legend {
   display: flex;
   font-size: calc(16rem / 16);
   top: 0;
-  justify-content: center;
 }
 
 .key {

components/StackedBarGraph.tsx

@@ -1,4 +1,5 @@
 import { AxisLeft, AxisBottom } from "@visx/axis";
+import { localPoint } from "@visx/event";
 import { GridRows, GridColumns } from "@visx/grid";
 import { Group } from "@visx/group";
 import { LegendOrdinal } from "@visx/legend";
@@ -11,7 +12,7 @@ import { WithTooltipProvidedProps } from "@visx/tooltip/lib/enhancers/withToolti
 import React from "react";
 import { Color } from "utils/Color";
 
-import { getTooltipPosition, TooltipWrapper } from "./TooltipWrapper";
+import { TooltipWrapper } from "./TooltipWrapper";
 
 import styles from "./StackedBarGraph.module.css";
 
@@ -42,9 +43,17 @@ export type StackedBarProps = {
   /** Colours for each key */
   colorRange: string[];
   /** Distance between the edge of the graph and the area where the bars are drawn, in pixels. */
-  margin: { top: number; left: number; right: number; bottom: number };
+  margin: { top: number; left: number };
   /** Number of ticks for the value axis */
   numTicksValueAxis?: number;
+  /** Distance between the left axis labels and the start of the lines of the graph, in px. */
+  axisLeftOffset?: number;
+  /** Distance between the bottom axis and the bottom of the container of the graph, in px. */
+  axisBottomOffset?: number;
+  /** Distance between the right side of the graph and the legend, in px. */
+  legendLeftOffset?: number;
+  /** Distance between the top of the graph and the legend, in px. */
+  legendTopOffset?: number;
   /** Width of the lines in the graph, in px. */
   strokeWidth?: number;
   /** Length of the dashes and the gaps in the graph, in px. */
@@ -53,16 +62,9 @@ export type StackedBarProps = {
   scalePadding?: number;
   /** Margin for each item in the legend */
   itemMargin?: string;
-  /** Hide the first data value in tooltip*/
-  hideDataValueInTooltip?: boolean;
-  //** Top tooltip label */
-  tooltipTopLabel?: string;
-  //** Bottom tooltip label */
-  tooltipBottomLabel?: string;
-  //** Display percentage */
-  displayPercentage?: boolean;
-  /** Minimum width of the graph. */
-  minWidth?: number;
+  /** Factor multiplied with an offset to center the labels of the category-axis depending on the width/height of the graph.
+   * >1 for width/height <600 and <1 for width/height >600 (vertical=width/horizontal=height) */
+  categoryAxisLeftFactor?: number;
 };
 
 let tooltipTimeout: number;
@@ -80,25 +82,21 @@ export const StackedBarGraphVertical = withTooltip<
     margin,
     scalePadding = 0.3,
     numTicksValueAxis = 6,
+    axisLeftOffset = 40,
+    axisBottomOffset = 40,
     strokeWidth = 2.5,
     strokeDashArray = "10,4",
+    legendLeftOffset = 40,
+    legendTopOffset = 40,
     itemMargin = "0 0 0 15px",
+    categoryAxisLeftFactor = 1,
     tooltipOpen,
     tooltipLeft,
     tooltipTop,
     tooltipData,
     hideTooltip,
     showTooltip,
-    hideDataValueInTooltip,
-    tooltipBottomLabel = "",
-    tooltipTopLabel = "",
-    displayPercentage,
-    minWidth = 500,
   }: StackedBarProps & WithTooltipProvidedProps<TooltipData>) => {
-    if (width < minWidth) {
-      width = minWidth;
-    }
-
     const yTotals = data.reduce((allTotals, currCategory) => {
       const yTotal = keys.reduce((categoryTotal, k) => {
         categoryTotal += currCategory[k] as number;
@@ -128,15 +126,18 @@ export const StackedBarGraphVertical = withTooltip<
     });
 
     // bounds
-    const xMax = width - margin.left - margin.right;
-    const yMax = height - margin.top - margin.bottom;
+    const xMax = width;
+    const yMax = height - margin.top - axisBottomOffset;
 
-    categoryScale.rangeRound([0, xMax]);
+    categoryScale.rangeRound([0, xMax - axisLeftOffset]);
     valueScale.range([yMax, 0]);
 
     return width < 10 ? null : (
       <div className={styles.container}>
-        <div className={styles.legend}>
+        <div
+          className={styles.legend}
+          style={{ left: width + legendLeftOffset, top: legendTopOffset }}
+        >
           <LegendOrdinal
             scale={colorScale}
             direction="row"
@@ -151,6 +152,7 @@ export const StackedBarGraphVertical = withTooltip<
               scale={valueScale}
               width={xMax}
               height={yMax}
+              left={axisLeftOffset}
               numTicks={numTicksValueAxis}
               stroke={Color.tertiaryBackground}
               strokeWidth={strokeWidth}
@@ -159,88 +161,94 @@ export const StackedBarGraphVertical = withTooltip<
             <GridColumns
               scale={categoryScale}
               height={yMax}
+              left={axisLeftOffset}
               offset={categoryScale.bandwidth() / 2}
               stroke={Color.tertiaryBackground}
               strokeWidth={strokeWidth}
               strokeDasharray={strokeDashArray}
             />
-            <BarStack<StackedBarData, string>
-              data={data}
-              keys={keys}
-              x={getCategory}
-              xScale={categoryScale}
-              yScale={valueScale}
-              color={colorScale}
-            >
-              {(barStacks) =>
-                barStacks.map((barStack) =>
-                  barStack.bars.map((bar) => (
-                    <rect
-                      className={styles.barStack}
-                      key={`bar-stack-${barStack.index}-${bar.index}`}
-                      x={bar.x}
-                      y={bar.y}
-                      height={bar.height}
-                      width={bar.width / 2}
-                      fill={bar.color}
-                      onMouseLeave={() => {
-                        tooltipTimeout = window.setTimeout(() => {
-                          hideTooltip();
-                        }, 300);
-                      }}
-                      onMouseMove={(event) => {
-                        if (tooltipTimeout) clearTimeout(tooltipTimeout);
-                        const tooltipPos = getTooltipPosition(event);
-                        showTooltip({
-                          tooltipData: bar,
-                          tooltipLeft: tooltipPos.x,
-                          tooltipTop: tooltipPos.y,
-                        });
-                      }}
-                    />
-                  ))
-                )
-              }
-            </BarStack>
+            <Group left={axisLeftOffset}>
+              <BarStack<StackedBarData, string>
+                data={data}
+                keys={keys}
+                x={getCategory}
+                xScale={categoryScale}
+                yScale={valueScale}
+                color={colorScale}
+              >
+                {(barStacks) =>
+                  barStacks.map((barStack) =>
+                    barStack.bars.map((bar) => (
+                      <rect
+                        className={styles.barStack}
+                        key={`bar-stack-${barStack.index}-${bar.index}`}
+                        x={bar.x}
+                        y={bar.y}
+                        height={bar.height}
+                        width={bar.width / 2}
+                        fill={bar.color}
+                        onMouseLeave={() => {
+                          tooltipTimeout = window.setTimeout(() => {
+                            hideTooltip();
+                          }, 300);
+                        }}
+                        onMouseMove={(event) => {
+                          if (tooltipTimeout) clearTimeout(tooltipTimeout);
+                          const eventSvgCoords = localPoint(event);
+                          const left = bar.x + bar.width / 2;
+                          showTooltip({
+                            tooltipData: bar,
+                            tooltipTop: eventSvgCoords?.y,
+                            tooltipLeft: left,
+                          });
+                        }}
+                      />
+                    ))
+                  )
+                }
+              </BarStack>
+            </Group>
             <Line
               fill={Color.tertiaryBackground}
-              to={new Point({ x: 0, y: 0 })}
-              from={new Point({ x: 0, y: yMax })}
+              to={new Point({ x: axisLeftOffset, y: 0 })}
+              from={new Point({ x: axisLeftOffset, y: yMax })}
               stroke={Color.tertiaryBackground}
               strokeWidth={strokeWidth}
               strokeDasharray={strokeDashArray}
             />
-            <AxisLeft
-              scale={valueScale}
-              top={5}
-              numTicks={numTicksValueAxis}
-              hideAxisLine
+            <AxisBottom
+              top={yMax}
+              scale={categoryScale}
+              left={
+                ((categoryScale.bandwidth() * 100) / width) *
+                categoryAxisLeftFactor
+              }
               hideTicks
+              hideAxisLine
               labelProps={{
                 fontSize: `${10 / 16}rem`,
               }}
               tickLabelProps={() => ({
                 fill: Color.label,
                 fontWeight: TICK_LABEL_FONT_WEIGHT,
-                textAnchor: "end",
               })}
             />
+            <AxisLeft
+              scale={valueScale}
+              top={5}
+              numTicks={numTicksValueAxis}
+              hideAxisLine
+              labelProps={{
+                fontSize: `${10 / 16}rem`,
+              }}
+              tickLabelProps={() => {
+                return {
+                  fill: Color.label,
+                  fontWeight: TICK_LABEL_FONT_WEIGHT,
+                };
+              }}
+            />
           </Group>
-          <AxisBottom
-            top={yMax + margin.top}
-            scale={categoryScale}
-            left={margin.left - categoryScale.bandwidth() / 4}
-            hideTicks
-            hideAxisLine
-            labelProps={{
-              fontSize: `${10 / 16}rem`,
-            }}
-            tickLabelProps={() => ({
-              fill: Color.label,
-              fontWeight: TICK_LABEL_FONT_WEIGHT,
-              textAnchor: "middle",
-            })}
-          />
         </svg>
 
         {tooltipOpen && tooltipData ? (
@@ -249,15 +257,8 @@ export const StackedBarGraphVertical = withTooltip<
             left={tooltipLeft}
             header={tooltipData.key}
           >
-            {hideDataValueInTooltip ? null : (
-              <p>
-                {tooltipTopLabel} {tooltipData.bar.data[tooltipData.key]}
-                {displayPercentage ? "%" : ""}
-              </p>
-            )}
-            <p>
-              {tooltipBottomLabel} {getCategory(tooltipData.bar.data)}
-            </p>
+            <p>{tooltipData.bar.data[tooltipData.key]}</p>
+            <p>{getCategory(tooltipData.bar.data)}</p>
           </TooltipWrapper>
         ) : null}
       </div>
@@ -278,25 +279,21 @@ export const StackedBarGraphHorizontal = withTooltip<
     margin,
     scalePadding = 0.3,
     numTicksValueAxis = 6,
+    axisLeftOffset = 40,
+    axisBottomOffset = 40,
     strokeWidth = 2.5,
     strokeDashArray = "10,4",
+    legendLeftOffset = 40,
+    legendTopOffset = 40,
     itemMargin = "0 0 0 15px",
+    categoryAxisLeftFactor = 1,
     tooltipOpen,
     tooltipLeft,
     tooltipTop,
     tooltipData,
     hideTooltip,
     showTooltip,
-    hideDataValueInTooltip,
-    tooltipBottomLabel = "",
-    tooltipTopLabel = "",
-    displayPercentage,
-    minWidth = 500,
   }: StackedBarProps & WithTooltipProvidedProps<TooltipData>) => {
-    if (width < minWidth) {
-      width = minWidth;
-    }
-
     const yTotals = data.reduce((allTotals, currCategory) => {
       const yTotal = keys.reduce((categoryTotal, k) => {
         categoryTotal += currCategory[k] as number;
@@ -326,15 +323,18 @@ export const StackedBarGraphHorizontal = withTooltip<
     });
 
     // bounds
-    const xMax = width - margin.left - margin.right;
-    const yMax = height - margin.top - margin.bottom;
+    const xMax = width;
+    const yMax = height - margin.top - axisBottomOffset;
 
     categoryScale.rangeRound([yMax, 0]);
-    valueScale.range([0, xMax]);
+    valueScale.range([0, xMax - axisLeftOffset]);
 
     return width < 10 ? null : (
       <div className={styles.container}>
-        <div className={styles.legend}>
+        <div
+          className={styles.legend}
+          style={{ left: width + legendLeftOffset, top: legendTopOffset }}
+        >
           <LegendOrdinal
             scale={colorScale}
             direction="row"
@@ -349,6 +349,7 @@ export const StackedBarGraphHorizontal = withTooltip<
               width={xMax}
               height={yMax}
               offset={categoryScale.bandwidth() / 2}
+              left={axisLeftOffset}
               stroke={Color.tertiaryBackground}
               strokeWidth={strokeWidth}
               strokeDasharray={strokeDashArray}
@@ -357,59 +358,56 @@ export const StackedBarGraphHorizontal = withTooltip<
               scale={valueScale}
               height={yMax}
               numTicks={numTicksValueAxis}
+              left={axisLeftOffset}
               stroke={Color.tertiaryBackground}
               strokeWidth={strokeWidth}
               strokeDasharray={strokeDashArray}
             />
-            <Line
-              fill={Color.tertiaryBackground}
-              to={new Point({ x: 0, y: 2 })}
-              from={new Point({ x: xMax, y: 2 })}
-              stroke={Color.tertiaryBackground}
-              strokeWidth={strokeWidth}
-              strokeDasharray={strokeDashArray}
-            />
-            <BarStackHorizontal<StackedBarData, string>
-              data={data}
-              keys={keys}
-              y={getCategory}
-              xScale={valueScale}
-              yScale={categoryScale}
-              color={colorScale}
-            >
-              {(barStacks) =>
-                barStacks.map((barStack) =>
-                  barStack.bars.map((bar) => (
-                    <rect
-                      className={styles.barStack}
-                      key={`bar-stack-${barStack.index}-${bar.index}`}
-                      x={bar.x}
-                      y={bar.y}
-                      height={bar.height / 2}
-                      width={bar.width}
-                      fill={bar.color}
-                      onMouseLeave={() => {
-                        tooltipTimeout = window.setTimeout(() => {
-                          hideTooltip();
-                        }, 300);
-                      }}
-                      onMouseMove={(event) => {
-                        if (tooltipTimeout) clearTimeout(tooltipTimeout);
-                        const tooltipPos = getTooltipPosition(event);
-                        showTooltip({
-                          tooltipData: bar,
-                          tooltipLeft: tooltipPos.x,
-                          tooltipTop: tooltipPos.y,
-                        });
-                      }}
-                    />
-                  ))
-                )
-              }
-            </BarStackHorizontal>
+            <Group left={axisLeftOffset}>
+              <BarStackHorizontal<StackedBarData, string>
+                data={data}
+                keys={keys}
+                y={getCategory}
+                xScale={valueScale}
+                yScale={categoryScale}
+                color={colorScale}
+              >
+                {(barStacks) =>
+                  barStacks.map((barStack) =>
+                    barStack.bars.map((bar) => (
+                      <rect
+                        className={styles.barStack}
+                        key={`bar-stack-${barStack.index}-${bar.index}`}
+                        x={bar.x}
+                        y={bar.y}
+                        height={bar.height / 2}
+                        width={bar.width}
+                        fill={bar.color}
+                        onMouseLeave={() => {
+                          tooltipTimeout = window.setTimeout(() => {
+                            hideTooltip();
+                          }, 300);
+                        }}
+                        onMouseMove={(event) => {
+                          if (tooltipTimeout) clearTimeout(tooltipTimeout);
+                          const eventSvgCoords = localPoint(event);
+                          const left = bar.x + bar.width / 2;
+                          showTooltip({
+                            tooltipData: bar,
+                            tooltipTop: eventSvgCoords?.y,
+                            tooltipLeft: left,
+                          });
+                        }}
+                      />
+                    ))
+                  )
+                }
+              </BarStackHorizontal>
+            </Group>
             <AxisBottom
               top={yMax}
               scale={valueScale}
+              left={axisLeftOffset}
               numTicks={numTicksValueAxis}
               hideAxisLine
               hideTicks
@@ -419,21 +417,25 @@ export const StackedBarGraphHorizontal = withTooltip<
               tickLabelProps={() => ({
                 fill: Color.label,
                 fontWeight: TICK_LABEL_FONT_WEIGHT,
-                textAnchor: "middle",
               })}
             />
             <AxisLeft
+              top={
+                -((categoryScale.bandwidth() * 100) / width) *
+                categoryAxisLeftFactor
+              }
               scale={categoryScale}
               hideAxisLine
               hideTicks
               labelProps={{
                 fontSize: `${10 / 16}rem`,
               }}
-              tickLabelProps={() => ({
-                fill: Color.label,
-                fontWeight: TICK_LABEL_FONT_WEIGHT,
-                textAnchor: "end",
-              })}
+              tickLabelProps={() => {
+                return {
+                  fill: Color.label,
+                  fontWeight: TICK_LABEL_FONT_WEIGHT,
+                };
+              }}
             />
           </Group>
         </svg>
@@ -444,15 +446,8 @@ export const StackedBarGraphHorizontal = withTooltip<
             left={tooltipLeft}
             header={tooltipData.key}
           >
-            {hideDataValueInTooltip ? null : (
-              <p>
-                {tooltipTopLabel} {tooltipData.bar.data[tooltipData.key]}
-                {displayPercentage ? "%" : ""}
-              </p>
-            )}
-            <p>
-              {tooltipBottomLabel} {getCategory(tooltipData.bar.data)}
-            </p>
+            <p>{tooltipData.bar.data[tooltipData.key]}</p>
+            <p>{getCategory(tooltipData.bar.data)}</p>
           </TooltipWrapper>
         ) : null}
       </div>

components/Timeline.module.css

@@ -22,7 +22,7 @@
   width: 100%;
   display: flex;
   flex-direction: row;
-  justify-content: flex-end;
+  justify-content: center;
 }
 
 .time {
@@ -34,7 +34,7 @@
   word-wrap: break-word;
 }
 
-.outerCircle {
+.circle {
   background-color: var(--secondary-accent);
   box-shadow: calc(0rem / 16) calc(0rem / 16) calc(30rem / 16) var(--secondary-accent);
   display: flex;
@@ -72,21 +72,4 @@
 .timelineSection:hover .text {
   border: calc(2rem / 16) solid var(--secondary-accent-light);
   box-shadow: calc(0rem / 16) calc(0rem / 16) calc(20rem / 16) var(--secondary-accent);
-}
-
-.timelineSection .timeText {
-  display: none;
-}
-
-@media screen and (max-width: 900px) {
-  .timelineSection .time {
-    display: none;
-  }
-
-  .timelineSection .timeText {
-    display: block;
-    font-size: calc(26rem / 16);
-    color: var(--secondary-accent);
-    margin-bottom: calc(8rem /16)
-  }
 }

components/Timeline.tsx

@@ -17,6 +17,8 @@ interface TimelineProps {
   outerCircleWidth?: number;
   /** Width of the inner circles on the timeline, in pixels. */
   innerCircleWidth?: number;
+  /** Width of time label, in pixels. */
+  timeWidth?: number;
   /** Width of text label, in pixels. */
   textWidth?: number;
   /** Distance between the time label AND the text label to middle line, in pixels. */
@@ -30,12 +32,14 @@ export function Timeline({
   lineWidth = 5,
   outerCircleWidth = 30,
   innerCircleWidth = 15,
-  textWidth = 500,
+  timeWidth = 200,
+  textWidth = 300,
   gap = 50,
   className,
 }: TimelineProps) {
   const largerMiddleElement =
     outerCircleWidth > lineWidth ? outerCircleWidth : lineWidth;
+  const width = timeWidth + gap + largerMiddleElement + gap + textWidth;
   if (innerCircleWidth > outerCircleWidth) {
     throw new Error(
       `<Timeline /> - innerCircleWidth (${innerCircleWidth}) is larger than outerCircleWidth (${outerCircleWidth})`
@@ -47,12 +51,13 @@ export function Timeline({
       className={
         className ? `${className} ${styles.wrapper}` : `${styles.wrapper}`
       }
+      style={{ width: width }}
     >
       <div
         className={styles.line}
         style={{
           width: lineWidth,
-          right: textWidth + gap + largerMiddleElement / 2 - lineWidth / 2,
+          left: width / 2 - lineWidth / 2,
         }}
       />
       <div className={styles.timelineSections}>
@@ -60,9 +65,11 @@ export function Timeline({
           <TimelineSection
             key={datum.time}
             datum={datum}
+            width={width}
             isTimeUppercase={isTimeUppercase}
             outerCircleWidth={outerCircleWidth}
             innerCircleWidth={innerCircleWidth}
+            timeWidth={timeWidth}
             textWidth={textWidth}
             gap={gap}
           />
@@ -74,33 +81,42 @@ export function Timeline({
 
 interface TimelineSectionProps {
   datum: TimelineData;
+  width: number;
   isTimeUppercase: boolean;
   outerCircleWidth: number;
   innerCircleWidth: number;
+  timeWidth: number;
   textWidth: number;
   gap: number;
 }
 
 function TimelineSection({
   datum,
+  width,
   isTimeUppercase,
   outerCircleWidth,
   innerCircleWidth,
+  timeWidth,
   textWidth,
   gap,
 }: TimelineSectionProps) {
   return (
     <div className={styles.timelineSection} style={{ gap: gap }}>
-      <div className={styles.time}>
+      <div
+        className={styles.time}
+        style={{
+          width: timeWidth,
+          marginLeft: (width - 2 * gap - outerCircleWidth) / 2 - timeWidth,
+        }}
+      >
         {isTimeUppercase ? datum.time.toUpperCase() : datum.time}
       </div>
       <div
-        className={styles.outerCircle}
+        className={styles.circle}
         style={{
           width: outerCircleWidth,
           height: outerCircleWidth,
           borderRadius: outerCircleWidth,
-          flex: `0 0 calc(${outerCircleWidth}rem / 16)`,
         }}
       >
         <div
@@ -116,10 +132,9 @@ function TimelineSection({
         className={styles.text}
         style={{
           width: textWidth,
-          flex: `0 0 calc(${textWidth}rem / 16)`,
+          marginRight: (width - 2 * gap - outerCircleWidth) / 2 - textWidth,
         }}
       >
-        <div className={styles.timeText}>{datum.time}</div>
         {datum.text}
       </div>
     </div>

components/Title.tsx

@@ -1,19 +0,0 @@
-import Head from "next/head";
-import React from "react";
-
-interface Props {
-  children: string | string[];
-}
-
-export function Title(props: Props) {
-  const children =
-    typeof props.children === "string" ? [props.children] : props.children;
-
-  children.push("2022 CS Class Profile");
-
-  return (
-    <Head>
-      <title>{children.join(" - ")}</title>
-    </Head>
-  );
-}

components/TooltipWrapper.tsx

@@ -1,5 +1,3 @@
-import localPoint from "@visx/event/lib/localPoint";
-import { Point } from "@visx/point";
 import { Tooltip } from "@visx/tooltip";
 import React from "react";
 
@@ -13,23 +11,6 @@ type TooltipWrapperProps = {
   children?: React.ReactNode;
 };
 
-// Finds the SVG Element which is the outmost from element (highest parent of element which is svg)
-
-function getOutmostSVG(element: Element): SVGElement | undefined {
-  let rootSVG: HTMLElement | Element | null = element;
-  let current: HTMLElement | Element | null = element;
-
-  while (current) {
-    console.log(current);
-    if (current.tagName == "svg") {
-      rootSVG = current;
-    }
-    current = current.parentElement;
-  }
-
-  return rootSVG as SVGElement;
-}
-
 const TooltipWrapper = ({
   top,
   left,
@@ -51,35 +32,4 @@ const TooltipWrapper = ({
   );
 };
 
-function getTooltipPosition(
-  e: React.MouseEvent<
-    SVGTextElement | SVGPathElement | SVGLineElement,
-    MouseEvent
-  >
-) {
-  // ownerSVGElement is given by visx docs but not recognized by typescript
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  const eventElement = e.target.ownerSVGElement as Element;
-  const eventSvgCoords = localPoint(eventElement, e) as Point;
-  const rootSVG: SVGElement | undefined = getOutmostSVG(eventElement);
-
-  if (!rootSVG) {
-    console.error("Failed to find parent SVG for tooltip!");
-    return { x: 0, y: 0 };
-  }
-  const rootSVGLeft = rootSVG.getBoundingClientRect().left ?? 0;
-  const parentDivLeft =
-    rootSVG.parentElement?.getBoundingClientRect().left ?? 0;
-
-  // visx localPoint does not account for the horizontal shift due to centering of the parent element,
-  // so manually add any shift from that
-  const alignmentOffset = rootSVGLeft - parentDivLeft;
-
-  return {
-    x: eventSvgCoords.x + alignmentOffset,
-    y: eventSvgCoords.y,
-  };
-}
-
-export { TooltipWrapper, getTooltipPosition };
+export { TooltipWrapper };

components/WordCloud.module.css

@@ -2,8 +2,4 @@
   text-shadow: var(--primary-accent) 0 0 calc(20rem / 16);
   text-anchor: "middle";
   cursor: default;
-}
-
-.word {
-  transition: text-shadow 0.25s ease-out;
 }

components/WordCloud.tsx

@@ -1,3 +1,5 @@
+import { localPoint } from "@visx/event";
+import { Point } from "@visx/point";
 import { scaleLog } from "@visx/scale";
 import { Text } from "@visx/text";
 import { useTooltip, withTooltip } from "@visx/tooltip";
@@ -7,7 +9,7 @@ import { Color } from "utils/Color";
 import { inDevEnvironment } from "utils/inDevEnviroment";
 import { useIsMobile } from "utils/isMobile";
 
-import { getTooltipPosition, TooltipWrapper } from "./TooltipWrapper";
+import { TooltipWrapper } from "./TooltipWrapper";
 
 import styles from "./WordCloud.module.css";
 
@@ -195,22 +197,33 @@ const WordCloudWords: React.FC<WordCloudWordsProps> = ({
               className={styles.word}
               textAnchor="middle"
               onMouseMove={
-                ((
-                  e: React.MouseEvent<
-                    SVGTextElement | SVGLineElement,
-                    MouseEvent
-                  >
-                ) => {
-                  const tooltipPos = getTooltipPosition(e);
+                ((e: React.MouseEvent<SVGTextElement, MouseEvent>) => {
+                  // ownerSVGElement is given by visx docs but not recognized by typescript
+                  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                  // @ts-ignore
+                  const eventElement = e.target.ownerSVGElement as Element;
+                  const eventSvgCoords = localPoint(eventElement, e) as Point;
+                  const rootSVGLeft =
+                    eventElement.parentElement?.parentElement?.getBoundingClientRect()
+                      .left ?? 0;
+                  const parentDivLeft =
+                    eventElement.parentElement?.parentElement?.parentElement?.getBoundingClientRect()
+                      .left ?? 0;
+
+                  // visx localPoint does not account for the horizontal shift due to centering of the parent element,
+                  // so manually add any shift from that
+                  const alignmentOffset = rootSVGLeft - parentDivLeft;
+
                   if (word.text) {
                     showTooltip(
                       {
                         text: word.text,
                         value: (cloudWords[index] as WordData).value,
                       },
-                      tooltipPos.x -
-                        word.text.length * TOOLTIP_HORIZONTAL_SHIFT_SCALER,
-                      tooltipPos.y
+                      eventSvgCoords.x -
+                        word.text.length * TOOLTIP_HORIZONTAL_SHIFT_SCALER +
+                        alignmentOffset,
+                      eventSvgCoords.y
                     );
                   }
                 }) as React.MouseEventHandler<SVGTextElement>

data/academics.ts

@@ -187,15 +187,15 @@ export const A5 = [
 
 export const A6 = [
   {
-    category: "Windows",
+    category: "WINDOWS",
     value: 37,
   },
   {
-    category: "Macos",
+    category: "MACOS",
     value: 40,
   },
   {
-    category: "Linux",
+    category: "LINUX",
     value: 23,
   },
 ];
@@ -226,7 +226,7 @@ export const A7 = [
     value: 4,
   },
   {
-    category: "C&O",
+    category: "Combinatorics & Optimization",
     value: 1,
   },
   {
@@ -692,7 +692,7 @@ export const A10 = [
   },
   {
     text: "CS492",
-    value: 2,
+    value: 1,
   },
   {
     text: "CS245",
@@ -704,7 +704,7 @@ export const A10 = [
   },
   {
     text: "CS246",
-    value: 2,
+    value: 1,
   },
   {
     text: "CS350",
@@ -770,10 +770,18 @@ export const A10 = [
     text: "CS446",
     value: 1,
   },
+  {
+    text: "CS492",
+    value: 1,
+  },
   {
     text: "CS456",
     value: 1,
   },
+  {
+    text: "CS246",
+    value: 1,
+  },
   {
     text: "CS484",
     value: 1,
@@ -875,12 +883,6 @@ export const A12 = [
 ];
 
 export const A12i = [
-  {
-    category: "CS145",
-    "1-4": 1,
-    "5-7": 10,
-    "8-10": 23,
-  },
   {
     category: "CS146",
     "1-4": 1,
@@ -936,13 +938,13 @@ export const A12i = [
     "8-10": 19,
   },
   {
-    category: "STAT240",
+    category: "STAT240E",
     "1-4": 0,
     "5-7": 4,
     "8-10": 6,
   },
   {
-    category: "STAT241",
+    category: "STAT241E",
     "1-4": 1,
     "5-7": 6,
     "8-10": 9,
@@ -1066,7 +1068,7 @@ export const A14 = [
   },
   {
     text: "Carmen Bruni",
-    value: 9,
+    value: 10,
   },
   {
     text: "Michael Wallace",
@@ -1240,101 +1242,101 @@ export const A15 = [
 export const A16 = [
   {
     category: "1A",
-    "0-30": 4,
+    "0-30": 0.04,
     "30-60": 0,
-    "60-70": 4,
-    "70-80": 15.2,
-    "80-90": 49.5,
-    "90-95": 19.2,
-    "95-100": 8.1,
+    "60-70": 0.04,
+    "70-80": 0.152,
+    "80-90": 0.495,
+    "90-95": 0.192,
+    "95-100": 0.081,
   },
   {
     category: "1B",
-    "0-30": 4,
-    "30-60": 1,
-    "60-70": 9.1,
-    "70-80": 23.2,
-    "80-90": 43.4,
-    "90-95": 12.1,
-    "95-100": 7.1,
+    "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": 2.08,
-    "30-60": 3.12,
-    "60-70": 5.2,
-    "70-80": 26.04,
-    "80-90": 44.79,
-    "90-95": 13.54,
-    "95-100": 4.17,
+    "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": 5.1,
+    "0-30": 0.051,
     "30-60": 0,
-    "60-70": 11.2,
-    "70-80": 29.6,
-    "80-90": 37.8,
-    "90-95": 13.3,
-    "95-100": 3.1,
+    "60-70": 0.112,
+    "70-80": 0.296,
+    "80-90": 0.378,
+    "90-95": 0.133,
+    "95-100": 0.031,
   },
   {
     category: "3A",
-    "0-30": 3.2,
-    "30-60": 3.3,
-    "60-70": 3.2,
-    "70-80": 14.9,
-    "80-90": 44.7,
-    "90-95": 24.5,
-    "95-100": 6.4,
+    "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": 3.3,
-    "30-60": 3.3,
-    "60-70": 4.3,
-    "70-80": 10.8,
-    "80-90": 35.5,
-    "90-95": 31.2,
-    "95-100": 11.8,
+    "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": 1.1,
-    "30-60": 3.2,
-    "60-70": 5.3,
-    "70-80": 12.9,
-    "80-90": 35.5,
-    "90-95": 31.2,
-    "95-100": 10.8,
+    "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": 1.1,
-    "30-60": 3.3,
-    "60-70": 2.3,
-    "70-80": 14.9,
-    "80-90": 24.1,
-    "90-95": 13.8,
-    "95-100": 9.2,
+    "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": 2,
-    "30-60": 4,
-    "60-70": 2,
-    "70-80": 3.9,
-    "80-90": 13.7,
+    "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": 5.9,
+    "95-100": 0.059,
   },
   {
-    category: "CAV",
+    category: "Cumulative Average",
     "0-30": 0,
     "30-60": 0,
-    "60-70": 3.774,
-    "70-80": 28.302,
-    "80-90": 67.924,
+    "60-70": 0.03774,
+    "70-80": 0.28302,
+    "80-90": 0.67924,
     "90-95": 0,
     "95-100": 0,
   },
@@ -1451,6 +1453,7 @@ export const A18ii = [
   "To make getting a visa easier",
   "Interesting Courses",
   "Took a bunch of courses on the option's list originally, then realized I could just fill in the rest of the courses",
+  "asgfsd",
   "Interest in the field after CO250",
   "Interest",
   "Just to add a specialization",
@@ -1475,7 +1478,7 @@ export const A19 = [
 export const A19i = [
   {
     category: "0",
-    value: 56,
+    value: 15,
   },
   {
     category: "1",

data/contributors.ts

@@ -1,87 +0,0 @@
-export const communityReps = [
-  {
-    name: "Sat Arora",
-    link: "https://www.linkedin.com/in/sat-arora/",
-  },
-  {
-    name: "Mayank Mehra",
-    link: "https://www.linkedin.com/in/mayank808",
-  },
-  {
-    name: "Olivia Liu",
-    link: "",
-  },
-  {
-    name: "Amy Luo",
-    link: "https://www.linkedin.com/in/amytluo/",
-  },
-  {
-    name: "Juthika Hoque",
-    link: "https://www.linkedin.com/in/juthikahoque/",
-  },
-  {
-    name: "Ivy Lei",
-    link: "https://www.linkedin.com/in/ivy-lei/",
-  },
-  {
-    name: "Kevin Cui",
-    link: "https://www.linkedin.com/in/kevincui1/",
-  },
-  {
-    name: "Nikki Guo",
-    link: "https://www.linkedin.com/in/nikkiguo",
-  },
-];
-
-export const designers = [
-  {
-    name: "Jenny Zhang",
-    link: "https://www.instagram.com/j3nny_zhang",
-  },
-  {
-    name: "Vivian Guo",
-    link: "https://www.linkedin.com/in/vivianvg",
-  },
-  {
-    name: "Aaryan Shroff",
-    link: "https://www.linkedin.com/in/aaryan-shroff",
-  },
-  {
-    name: "Rachel Ma",
-    link: "",
-  },
-];
-
-export const webDevs = [
-  {
-    name: "Amy Wang",
-    link: "",
-  },
-  {
-    name: "Mark Chiu",
-    link: "https://linkedin.com/in/markchiu02",
-  },
-  {
-    name: "Shahan Nedadahandeh",
-    link: "https://shahan.ca/",
-  },
-  {
-    name: "Beihao Zhou",
-    link: "https://www.linkedin.com/in/beihaozhou/",
-  },
-  {
-    name: "Jared He",
-    link: "https://www.linkedin.com/in/jaredhe/",
-  },
-];
-
-export const sysCom = [
-  {
-    name: "Raymond Li",
-    link: "https://raymond.li/",
-  },
-  {
-    name: "Max Erenberg",
-    link: "https://maxerenberg.github.io/",
-  },
-];

data/demographics.ts

@@ -1,45 +1,45 @@
 export const D1 = [
   {
     category: "CS",
-    value: 83.8,
+    value: 88,
   },
   {
     category: "CS/BBA",
-    value: 11.4,
+    value: 12,
   },
   {
     category: "CFM",
-    value: 4.7,
+    value: 5,
   },
 ];
 
 export const D2 = [
   {
     category: "Man",
-    value: 68.6,
+    value: 72,
   },
   {
     category: "Woman",
-    value: 27.6,
+    value: 29,
   },
   {
     category: "Gender non-conforming",
-    value: 3.8,
+    value: 4,
   },
 ];
 
 export const D3 = [
   {
-    category: "She/Her/Hers",
-    value: 29.0,
+    category: "She/Her/Her",
+    value: 31,
   },
   {
     category: "He/Him/His",
-    value: 68.2,
+    value: 73,
   },
   {
     category: "They/Them/Their",
-    value: 2.8,
+    value: 3,
   },
 ];
 
@@ -199,7 +199,7 @@ export const D7 = [
   },
   {
     text: "GTA / Toronto",
-    value: 58,
+    value: 1,
   },
   {
     text: "United Arab Emirates",
@@ -311,12 +311,16 @@ export const D10 = [
 export const D11 = [
   {
     category: "No religious affiliation",
-    value: 80,
+    value: 79,
   },
   {
     category: "Christianity",
     value: 16,
   },
+  {
+    category: "Atheist",
+    value: 1,
+  },
   {
     category: "Judaism",
     value: 3,

data/friends.ts

@@ -321,7 +321,7 @@ export const F12 = [
     value: 8,
   },
   {
-    category: "None",
+    category: "No",
     value: 1,
   },
 ];
@@ -378,30 +378,38 @@ export const F14 = [
     category: "SLC",
     value: 11,
   },
-  {
-    category: "E7",
-    value: 9,
-  },
-  {
-    category: "CIF",
-    value: 5,
-  },
   {
     category: "DP",
     value: 4,
   },
+  {
+    category: "E7",
+    value: 9,
+  },
   {
     category: "E5",
     value: 3,
   },
   {
-    category: "Plaza",
+    category: "E5",
     value: 3,
   },
+  {
+    category: "CIF",
+    value: 5,
+  },
   {
     category: "AL",
     value: 2,
   },
+  {
+    category: "CIF",
+    value: 5,
+  },
+  {
+    category: "Plaza",
+    value: 3,
+  },
 ];
 
 export const F15 = [
@@ -469,11 +477,11 @@ export const F16 = [
     value: 9,
   },
   {
-    category: "Few",
+    category: "Barely",
     value: 6,
   },
   {
-    category: "None",
+    category: "No",
     value: 2,
   },
 ];

data/intimacy-and-drugs.ts

@@ -129,7 +129,7 @@ export const I2 = [
     },
   },
   {
-    category: "Magic Mushrooms",
+    category: "Mushrooms",
     values: {
       "Tried/used first before university": 0,
       "Tried/used first during university": 10,
@@ -285,6 +285,10 @@ export const I7 = [
     category: "Yes",
     value: 36,
   },
+  {
+    category: "N/A",
+    value: 24,
+  },
 ];
 
 export const I8 = [
@@ -324,10 +328,11 @@ export const I9 = [
   "I took a course on dating but am failing the course",
   "they're a part-time job",
   "Relationships take a lot of work, but they're worth it with the right people.",
+  "Umm",
   "It takes a lot of work and patience",
   "My understanding of dating and relationships got a lot more detailed. The reality takes a lot more work and emotional maturity.",
   "I stopped simping",
-  "I didn't know that soulmates exist, but I guess I do now.",
+  "I didn't know that soul mates exist, but I guess I do now.",
   "Learning to co-exist intimately with (an)other human being(s) is almost always difficult. However, if you can make it work, it is absolutely worth it.",
   "I have become lost in the sauce",
   "nill",
@@ -337,9 +342,9 @@ export const I9 = [
   "Much deeper understanding ",
   "Communication is the most important things in a relationship. You gotta figure out how to get to the root of a problem in order to truly tackle it. Sometimes what people say isn't what they're actually concerned about. Also, people often don't understand you and they don't understand themselves.",
   "I know I am not yet wanting to be in a relationship.",
-  "Hasn't",
+  "Hasnt",
   "I've changed. ",
-  "tbh it hasn't",
+  "tbh it hasnt",
   "I've become more understanding/open to long-distance relationships, especially after graduation since me and my partner are not living in the same city",
   "I now understand relationships are different for everyone, and that there isn't a particular way to be in a relationship. As long as you are happy in your relationship, it is good for you and works for you.",
   "Communication is very important",
@@ -347,6 +352,7 @@ export const I9 = [
   "Completely",
   "I asked a girl out for the first time! I feel like I know more about what I don't know when it comes to relationships and dating, and feel more confident than before about social situations in general.",
   "As someone who's been rejected and rejected, it's fine to just be single",
+  "dfgdfgdfg",
   "People change",
   "More casual now polyamorous.",
   "How others treat me, how I treat others.",
@@ -401,10 +407,12 @@ export const I10 = [
   "It's tough",
   "Confidence comes not from knowing whether you'll succeed, but from knowing you'll be okay no matter the outcome. Stay true to yourself, and find someone such that you can make each other better.",
   "5 years later and still don't have any to give sorry xD",
+  "rewgdhdhd",
   "without sexual more love no cheat",
   "I hope you'll come earlier",
   "It’ll happen when it does :)",
   "Reciprocity",
+  "just talk to girls irl sometime holy fucking shit",
   "Good luck :p",
   "Improve yourself, get self esteem, and put yourself out there! It's really not this big, super hard thing to attain for the average person. Don't get into a bad one though",
   "am unqualified, idk",

data/lifestyle-and-interests.ts

@@ -30,19 +30,19 @@ export const L2 = [
 
 export const L3 = [
   {
-    category: "Never religious",
+    category: "Never",
     value: 76,
   },
   {
-    category: "No longer religious",
+    category: "No longer",
     value: 5,
   },
   {
-    category: "Still religious",
+    category: "Still",
     value: 19,
   },
   {
-    category: "Became religious",
+    category: "Became",
     value: 2,
   },
 ];
@@ -172,7 +172,7 @@ export const L8 = [
 
 export const L9 = [
   {
-    category: "Before 9pm",
+    category: "Before 9",
     value: 1,
   },
   {
@@ -257,7 +257,7 @@ export const L11 = [
 
 export const L12 = [
   {
-    text: "Gol's",
+    text: "Gol's Lanzhou Noodle",
     value: 15,
   },
   {
@@ -671,14 +671,14 @@ export const L17 = [
 ];
 
 export const L18 = [
-  {
-    category: "MC",
-    value: 23,
-  },
   {
     category: "DC",
     value: 22,
   },
+  {
+    category: "MC",
+    value: 23,
+  },
   {
     category: "Res",
     value: 16,

data/mental-health.ts

@@ -1,480 +0,0 @@
-export const H1 = [
-  {
-    category: "Yes",
-    value: 58,
-  },
-  {
-    category: "No",
-    value: 42,
-  },
-];
-
-export const H2 = [
-  {
-    category: "Yes",
-    value: 83,
-  },
-  {
-    category: "No",
-    value: 17,
-  },
-];
-
-export const H2i = [
-  {
-    category: "Academic Term",
-    value: 83.9,
-  },
-  {
-    category: "Co-op Term",
-    value: 16.1,
-  },
-];
-
-export const H2ii = [
-  {
-    category: "In person",
-    value: 51,
-  },
-  {
-    category: "Online",
-    value: 45,
-  },
-  {
-    category: "Both",
-    value: 4,
-  },
-];
-
-export const H3 = [
-  {
-    category: "Yes",
-    value: 23,
-  },
-  {
-    category: "No",
-    value: 77,
-  },
-];
-
-export const H3i = [
-  {
-    category: "Yes",
-    value: 51.3,
-  },
-  {
-    category: "No",
-    value: 48.7,
-  },
-];
-
-export const H3ii = [
-  {
-    category: "Money",
-    value: 12,
-  },
-  {
-    category: "Stereotypes",
-    value: 8,
-  },
-  {
-    category: "Unresponsive therapist office",
-    value: 1,
-  },
-  {
-    category: "Scared",
-    value: 1,
-  },
-  {
-    category: "Judgment from others",
-    value: 3,
-  },
-  {
-    category: "Indifference",
-    value: 1,
-  },
-  {
-    category: "Lack of information",
-    value: 25,
-  },
-  {
-    category: "Skeptical",
-    value: 2,
-  },
-  {
-    category: "No strong need",
-    value: 1,
-  },
-  {
-    category: "Laziness",
-    value: 6,
-  },
-  {
-    category: "No time",
-    value: 20,
-  },
-];
-
-export const H4 = [
-  {
-    category: "Yes",
-    value: 24,
-  },
-  {
-    category: "No",
-    value: 76,
-  },
-];
-
-export const H4i = [
-  {
-    category: "Yes",
-    value: 26.6,
-  },
-  {
-    category: "No",
-    value: 73.4,
-  },
-];
-
-export const H4ii = [
-  {
-    category: "No time",
-    value: 14,
-  },
-  {
-    category: "Unresponsive therapist office",
-    value: 3,
-  },
-  {
-    category: "Scared",
-    value: 1,
-  },
-  {
-    category: "Lack of information",
-    value: 12,
-  },
-  {
-    category: "Stereotypes",
-    value: 5,
-  },
-  {
-    category: "Money",
-    value: 7,
-  },
-  {
-    category: "Judgment from others",
-    value: 1,
-  },
-  {
-    category: "Laziness",
-    value: 4,
-  },
-];
-
-export const H5 = [
-  {
-    category: "Yes",
-    value: 21.2,
-  },
-  {
-    category: "No",
-    value: 78.2,
-  },
-];
-
-export const H5i = [
-  "Depends on the person you get, some are really good but some I didn't click with",
-  "Good, although I never attended a session",
-  "It was average. The people there are kind and care about you.",
-  "Average",
-  "Mediocre",
-  "Pretty good minus how busy they are",
-  "meh",
-  "They tried their best, but I felt underwhelmed and it felt like I was wasting my time there.",
-  "Great",
-  "It is not as accessible as you would hope, and it is hard to continue to see your doctor",
-  "Good",
-  "not half bad.",
-  "No experience ",
-  "It was just alright.",
-  "Meh",
-];
-
-export const H6 = [
-  {
-    category: "1",
-    value: 3,
-  },
-  {
-    category: "2",
-    value: 9,
-  },
-  {
-    category: "3",
-    value: 19,
-  },
-  {
-    category: "4",
-    value: 52,
-  },
-  {
-    category: "5",
-    value: 15,
-  },
-];
-
-export const H7 = [
-  {
-    category: "1",
-    value: 4,
-  },
-  {
-    category: "2",
-    value: 13,
-  },
-  {
-    category: "3",
-    value: 35,
-  },
-  {
-    category: "4",
-    value: 41,
-  },
-  {
-    category: "5",
-    value: 7,
-  },
-];
-
-export const H8 = [
-  {
-    category: "3",
-    value: 1,
-  },
-  {
-    category: "4",
-    value: 2,
-  },
-  {
-    category: "5",
-    value: 1,
-  },
-  {
-    category: "6",
-    value: 9,
-  },
-  {
-    category: "7",
-    value: 22,
-  },
-  {
-    category: "8",
-    value: 27,
-  },
-  {
-    category: "9",
-    value: 26,
-  },
-  {
-    category: "10",
-    value: 12,
-  },
-];
-
-export const H9 = [
-  "Played games, video called, voice called.",
-  "Playing video games over Discord, meeting up in person and going on walks or picnics",
-  "Scheduled game nights with a large group of friends (to play mafia/among us)  + did secret santa food edition",
-];
-
-export const H9i = [
-  "If you ever feel your mental health is declining, don't be afraid to talk to your profs and TA's about it, they're all there to help you. Don't isolate yourself from your friend group, as that'll only make things worse. The most important thing is to not keep everything bottled up.",
-  "Mental health at Waterloo is pretty bad. The environment generates a lot of pressure and people crack very much under that pressure.",
-  "Everyone deals with mental health. You aren't some special snowflake, and you also aren't immune. It will always get better once you accept that and are able to talk about it at least to yourself. ",
-  "Take breaks",
-  "I wish some of the people here remembered that at the end of the day, life moves on, and are things that make life worth living besides the prestige and money that comes with being sexy",
-  "Don't be afraid to reach out for help, therapy is worth it!",
-  "Competition at Waterloo can be tough on mental health sometimes.",
-  "It is pretty scary that you could just be totally unknown in university, nobody would never know anything that happens to you. I feel that a lot of people with mental health problems can go down like this.",
-  "Consider reaching out to professionals if you are struggling with mental health. However, it is completely normal to try multiple therapists until you can find the one that really vibes with you.",
-  "UW has terrible support nets for students who are struggling. This is the biggest differentiator between UW and say a liberator arts college. Recognizing that you are on your own is an important step to taking control of your own mental health.",
-  "I think the support systems for mental health in university are definitely less structured, and it's easier to 'fall through the cracks', especially being away from long-time friends and family from your hometown.",
-  "The school does not seem to care at all",
-  "I hope we can work on mental health in general, not just for disorders but also just a general wellbeing",
-  "Mental health at the University of Waterloo in particular is very challenging to navigate. We all hear a lot about the toxic environment and the 'cali or bust' mentality and all this and all that all the time, and for good reason I think it's very tough for an 18 year old growing up with traditional Canadian values dumped into a prestigious tech school to avoid falling into these thought traps and seemingly zero sum games. I think we should all step back and take some time to reflect on how different our university experiences here at the University of Waterloo are compared to those of other schools, just to give us some perspective on things. ",
-  "Mental health at Waterloo has never been really great. Back in first year, there were a bunch of people that committed suicide and since then, the pandemic has happened. Arguably, that's made it worse (being in quarantine the whole two years). Hopefully it gets better in future years, but Waterloo's mental health generally stems from the highly competitive environment that the students curate themselves. It's a vicious cycle.",
-  "I find my mental health is the worst when I'm under a lot of stress and spread myself too thin. During the pandemic, I find myself too focused on school work which made the stress worse.",
-  "Uw provides good resources if you seek them out/really need them. Otherwise, just git gud. ",
-  "I used to think I was sad in high school, I was stressed in high school, but never have I felt such intense versions of sadness and stress as I have during my undergrad. With that being said, I will never feel as proud and accomplished as I did when I got my first “big coop” or when I pulled off a near perfect in a CS course!",
-  "You have to look out for yourself, your parents are there with you",
-  "Having somewhere to vent or someone to listen and bounce thoughts off is really helpful for mental health. You're definitely not alone in experiencing what you're experiencing. It helps to put thoughts into words (by talking/writing/typing it out).",
-  "You're probably going to struggle a lot at some points and that's ok if you know how to deal with it",
-  "Will likely deteriorate, especially if you struggle with maintaining friendships.",
-  "1. Maintaining mental health and believing in yourself are essential conditions for developing your intellectual potential. 2. Pay attention to exploration and innovation in study. 3. Scientific use and rational development of the brain. 4. Focus on self-encouragement and reflection, and constantly awaken self-realization and self-transcendence. 5. Make good use of sound and beauty activities to develop innovative potential.",
-  "I think the competitive nature of CS forces a lot of student to value coops and school over their mental health. Its hard to not as we came to this program to be the best and its hard to not compare your self to everyone else. ",
-  "school gives me anxiety but if i care less then it's okay, it's mostly just me placing dumb expectations on myself",
-  "overthinking is bad",
-  "No one can truly understand or appreciate your suffering. Your challenge is unique to yourself, but you still likely need some other input (doctor, friend, counsellor etc.) to overcome it. ",
-  "I didn't feel supported in courses it felt like everything was a competition.",
-  "Being consistently overwhelmed can lead to mental health problems. That's why it's so important to take breaks. It's also crucial to stay organized (easier said than done). But the way I stay accountable and on top of things is a simple schedule. I put every due date in my calendar on the first day of class and set up a grade calculator. And that's all I do on the first day of class. From then on, I make a table labelled Monday through Friday, and put every task to start/continue/finish underneath. This is where the calendar comes in, which will help you prioritize the tasks. On top of that, I couldn't survive a term without study buddies. My keys to success have literally been keep a calendar of due dates, schedule your week, and find people who can help you when you just don't think you can do it.",
-  "I really dont know, high school courses were all easy for me but university courses tend to be a lot harder. But i am already in this program so what can i say. I already switched my program once, so i am already behind, if i switch back i will be even more behind and i dont have enough money to delay my gradutaion even more. So what else can i do besides bare with it.",
-  "I have developed a deep hatred for UW faculty. Avoiding thinking about my time in university is the best thing i can do for my mental health. ",
-  "Figure out a sleep schedule that works and prioritize it. ",
-  "Please, please take care of your mental health.",
-  "Multiple co-op sequences causes people to feel lonely and depressed",
-  "I think I have ADHD or a learning disability but I never knew what I should do about that, if anything (since I was still passing... mostly)",
-  "A lot of sudden change going into university, everyone is struggling",
-  "People need to go outside more",
-];
-
-export const H10 = [
-  {
-    category: "Yes",
-    value: 27.4,
-  },
-  {
-    category: "No",
-    value: 72.6,
-  },
-];
-
-export const H11 = [
-  "Talk to friends",
-  "Physical activity, playing guitar/singing, talking with friends, moving to a new city for a fresh start",
-  "I study therapy and counseling theory",
-  "Exercise",
-  "Go on walks, music",
-  "Go on long walks",
-  "Talk to close friends",
-  "I write to myself, go outside, listen to music, watch films about parts of the world I want to visit, do photography",
-  "Breathing exercises, healthy living, relaxation activities like reading and meditation",
-  "I vent to friends and meditate",
-  "Hang out with friends, reading a good book",
-  "Coffee, League of Legends",
-  "Friends",
-  "Write diaries and seeking professional help",
-  "physical exercise, video games, cooking, spending time with significant other",
-  "sleep, cry, eat, alcohol",
-  "hobbies, sport",
-  "Have a good night sleep",
-  "meditate",
-  "drink, sleep, academics, walk, music",
-  "Journal.",
-  "Assignments",
-  "Therapy, spend time alone, find outlets for self-expression, avoid social media, try and eat healthy, exercise, self-reflection/values reevaluation, meditate, incorporate flow",
-  "Self harm, talking to friends, drinking",
-  "Friends, self reflection, food",
-  "Tiktok and talk to friends",
-  "Distract myself with something I enjoy doing, try to be productive in a different way",
-  "I talk to and spend time with my friends, and allow myself to wallow and take days off when needed.",
-  "Step away from work, cry if needed",
-  "Make sure I have enough time to feel relaxed and do things I enjoy",
-  "Talking to friends",
-  "Talking with others",
-  "Chatting with friends, playing an instrument, talking out loud to myself",
-  "Try my best. If it doesn't work out \"C'est la vie\" and get high",
-  "Journaling, watching shows, playing video games, hanging out with friends",
-  "Feel it out",
-  "Develop innovation potential.",
-  "Look at the bigger picture",
-  "Go for walks, reach out to friends, pick up hobbies to keep busy",
-  "Meet friends, keep myself distracted",
-  "Go on Walk, Hang out with friends, talk to girl friend.",
-  "take a nap",
-  "Indulge in my hobbies",
-  "Never focusing too much time or energy on one aspect of life/identity. Sunshine and exercise are underrated. ",
-  "binge eat",
-  "See H9",
-  "Just think at least i passed and i am still alive, and being alive is good, aftet COVID, nothing else is important besides staying alive.",
-  "Talk to partner",
-  "Talk to my friends",
-  "Exercise, pace",
-  "Bike, pray, walk, call a friend",
-  "Taking a break, sleeping, going out, having fun.",
-  "Cry and distract myself with work, go see friends",
-  "Go for walks by laurel creek",
-  "Over the years, I've learned to prioritize my physical health (sleep, diet, exercise) and I have found it extremely beneficially to my mental health as well. Sleeping 8 hours a night, eating 3 meals a day, and getting some fresh air will do wonders. ",
-  "Meditate and exercise",
-  "Play games with friends",
-];
-
-export const H12 = [
-  "It stresses out the people you love the most. It also makes it 10 times harder to get things done and to push yourself when you're already so strained.",
-  "Mental health affects every aspect of your life. If you aren't in a good place mentally, everything you do will take a hit. Your relationships will be strained, studying will become harder, and you'll burn out much faster. Always take care of yourself first.",
-  "I make sure I am ok before I focus on any of those things.",
-  "It affects my ability to communicate with a clear head and also my productivity during work",
-  "Hasn't really",
-  "Affects friendships the most. If I'm not in a good state of mind, I can't even talk to my friends properly or given them the attention they deserve.",
-  "My stress and anxiety make it harder to put effort into the things I do, even if I like doing them. Tends to make my work worse and makes me a worse boyfriend. ",
-  "It introduces a lot of unnecessary stress that interferes with everything",
-  "My productivity and motivation decreases when I am stressed or burnt out. I also don't socialize as much when I am stressed.",
-  "Quite a lot",
-  "makes everything else alot more difficult",
-  "affects my motivation to maintain relationships and be focused on career",
-  "Honestly I don't really know.",
-  "Affects my growth in all areas and how I deal with problems ",
-  "I personally feel like my mental health affects everything. The only way I can describe the affect is that positive mental health leads to positive effects in these areas. ",
-  "Significant impact ",
-  "Depression affects the motivation to do anything. Sometimes you just lay in bed and can't get out to face the day. Multiple days waste away and you just can't function properly. Lots of friends have trouble helping me and from my social anxiety, I miss out on a ton of social events. ",
-  "It can hinder some parts",
-  "It forces me to prioritize and stay on top of my work, because I have to account for the sporadic and spontaneous bad days that prevent me from getting things done. It’s also made my hyper aware of being a burden on my friends, and occasionally made me less productive on work terms than I should have been.",
-  "Its necessary to be successful/have fun when pursuing relationships, doing work/studying",
-  "It affects my relationship with my parents the most, because they are the most invested in me. It is hard to make them understand how I feel. My relationship with my boyfriend is generally great, because I feel I can share whatever I like with him. Similarly with friends, mental health does not affect my relationships with them, because we have 0 expectations from each other but are always supportive of each other. My academics have definitely suffered, but speak to your profs, they are amazing and very understanding! You will be surprised at the accommodations they can offer. ",
-  "Negatively affects relationships",
-  "It's easier to study when your mental is good",
-  "It definitely affects my mood, which unconsciously affects how I go about the various aspects of my life.",
-  "Bad mental health affects all of them negatively.",
-  "Occupation",
-  "Anxious about risks and failure",
-  "It just takes time out of my day, even though there are sometimes that I'd want to be more productive/meet new people anxiety or other issues make that difficult sometimes",
-  "Makes me less motivated in all aspects of life",
-  "Motivation loss in everything",
-  "makes it harder to maintain consistent output/effort",
-  "I am too tired to do anything just want to lay in the bed for the whole day.",
-  "Makes me less interested in pursuing relationships with others. I cut myself off from people. ",
-  "Not much at all anymore",
-  "Definitely makes studying/work much harder if I'm not feeling great.",
-  "Friendships feel painful sometimes due to anxiety",
-  "Stress of school and time taken by procrastination leaves little time for enjoying life",
-  "Very adversely",
-];
-
-export const H13 = [
-  {
-    category: "Yes",
-    value: 73.2,
-  },
-  {
-    category: "No",
-    value: 26.8,
-  },
-];
-
-export const H14 = [
-  "Help people be more aware, provide more resources and accomodation.",
-  "Promote better school involvement and school spirit! Also offer and push counselling/therapy services more. ",
-  "communicate what situations warrant a trip to see a professional ",
-  "More accessible mental health services, wait times are too long",
-  "Better and standardized accommodations for students going through mental health difficulties during the term. Some instructors are just so insensitive. UW's accessibility services are pretty good in my experience, and should be better publicized as a resource for everyone.",
-  "Definitely, for me it's that I don't really feel a sense of belonging in the school community. Waterloo never really felt like home, it was just somewhere I stayed for a few months at a time.",
-  "Promote more dialogue on mental health in general.",
-  "Hire better mental health professionals",
-  "There are many things that can be done but all of which are too expensive to actually implement for UW.",
-  "Not throwing me false Policy 71 accusations, then having me fight it for a whole month.",
-  "Maybe a webpage for easy to understand instructions on how to get resources",
-  "more accessible counselling",
-  "Normalize reduce course loads",
-  "Not sure UW can do anything to help. Maybe more awareness and attempts at supporting us throughout the terms.",
-  "never go fully remote ever again :)",
-  "Have more visibility on mental health services + improve wait times",
-  "Maybe not make such terrible CS Finals geez.",
-  "Stimulate learning motivation, motivation is to promote people to engage in something idea or desire, is directly to promote a person to carry out activities of the internal power. Learning motivation is an internal psychological process or internal psychological state that stimulates individual learning activities, maintains the learning activities that have been caused, and makes behavior toward a certain learning goal.",
-  "I think they need to be more lenient with failed/dropped courses, the student here value their program a lot and the fear of failing out is one of the main drivers of mental health struggles (IMO), so giving the students who are struggling academic flexibility will help imo.",
-  "hire more counsellors",
-  "I would say make the finals easier but that's not going to happen so i think there's nothing you can do.",
-  "Ask professors to pretend to care about students success",
-  "Better promotion of available services, more availability.",
-  "Be more accommodating of student stress",
-  "Support study group opportunities for students without friends to even the playing field first year calculus was very stressful :(",
-];

data/miscellaneous.ts

@@ -66,7 +66,7 @@ export const M2 = [
 
 export const M3 = [
   {
-    category: "CS / CS/BBA / CFM",
+    category: "Computer Science!",
     value: 84,
   },
   {
@@ -179,7 +179,7 @@ export const M6 = [
     value: 2,
   },
   {
-    text: "Resting and Learning",
+    text: "Resting and Learing",
     value: 1,
   },
   {
@@ -218,7 +218,7 @@ export const M7 = [
     value: 3,
   },
   {
-    text: "Weightlifting",
+    text: "Weight Lifting",
     value: 2,
   },
   {
@@ -306,7 +306,7 @@ export const M7 = [
     value: 1,
   },
   {
-    text: "Ultimate frisbee",
+    text: "Ultimate frisbe",
     value: 1,
   },
   {
@@ -314,15 +314,15 @@ export const M7 = [
     value: 1,
   },
   {
-    text: "Bodybuilding",
+    text: "Body building",
     value: 3,
   },
   {
-    text: "Mindfulness",
+    text: "Mindfullness & Mature",
     value: 4,
   },
   {
-    text: "Self-regulation",
+    text: "Self regulation",
     value: 1,
   },
   {
@@ -338,7 +338,7 @@ export const M7 = [
     value: 1,
   },
   {
-    text: "Drawing",
+    text: "Draw gooderer",
     value: 1,
   },
   {

data/post-grad.ts

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

data/routes.ts

@@ -4,7 +4,6 @@ export interface PageRoute {
 }
 
 type PageID =
-  | "home"
   | "demographics"
   | "academics"
   | "coop"
@@ -19,10 +18,6 @@ type PageID =
 
 export type PageRoutes = { [key in PageID]: PageRoute };
 export const pageRoutes: PageRoutes = {
-  home: {
-    name: "Home",
-    url: "/",
-  },
   demographics: {
     name: "Demographics",
     url: "/demographics",

deploy.sh

@@ -1,27 +0,0 @@
-#!/usr/bin/env bash
-
-set -ex
-ulimit -u 512
-
-DIR=$(mktemp --directory)
-trap "rm -rf $DIR" EXIT
-
-pushd $DIR
-
-git clone file:///srv/git/www/cs-2022-class-profile.git --depth=1
-cd cs-2022-class-profile
-
-export NEXT_PUBLIC_BASE_PATH="/classprofile/2022"
-npm install
-npm run build
-npm run export
-
-chgrp -R www out
-chmod -R g+w out
-
-shopt -s dotglob
-
-rm -rf /srv/classprofile/2022/*
-mv out/* /srv/classprofile/2022/
-
-popd

next.config.js

@@ -1,18 +1,11 @@
 /** @type {import('next').NextConfig} */
-let basePath = process.env.NEXT_PUBLIC_BASE_PATH ? process.env.NEXT_PUBLIC_BASE_PATH : "";
 const nextConfig = {
-  basePath: basePath,
-  assetPrefix: basePath + "/",
-
-  publicRuntimeConfig : { basePath: basePath },
-
-  // test comment
   reactStrictMode: true,
   trailingSlash: true,
   // This image loader supports `next export`, for optimizing next <Image /> tags
   images: {
     loader: 'akamai',
-    path: basePath,
+    path: '',
   },
 }
 

pages/_app.css

@@ -1,16 +1,9 @@
 html {
   scroll-behavior: smooth;
-  scroll-padding-top: calc(92rem / 16);
 }
 
-@-moz-document url-prefix() {
-
-  /* Firefox has a bug relating to smooth scrolling
-      https://github.com/vercel/next.js/issues/22858 
-  */
-  html {
-    scroll-behavior: auto;
-  }
+html, body {
+  overflow-x: hidden;
 }
 
 body {
@@ -20,7 +13,6 @@ body {
   --lighter-pink: #FFE7E7;
   --orange: #F5917B;
   --light-orange: #FFC4A9;
-  --lighter-orange: #ffddcd;
   --navy: #252D41;
   --light-navy: #354265;
   --dark-navy: #141D34;
@@ -47,11 +39,8 @@ body {
   --dark--primary-accent: var(--pink);
   --dark--primary-accent-light: var(--light-pink);
   --dark--primary-accent-lighter: var(--lighter-pink);
-  --dark--primary-accent-dark: #dc538e;
-  --dark--primary-accent-darker: #c8417c;
   --dark--secondary-accent: var(--orange);
   --dark--secondary-accent-light: var(--light-orange);
-  --dark--secondary-accent-lighter: var(--lighter-orange);
   --dark--translucent-accent: rgba(239, 131, 157, 0.75);
   --dark--primary-heading: #FFC48D;
   --dark--secondary-heading: var(--pink);
@@ -68,11 +57,8 @@ body {
   --primary-accent: var(--dark--primary-accent);
   --primary-accent-light: var(--dark--primary-accent-light);
   --primary-accent-lighter: var(--dark--primary-accent-lighter);
-  --primary-accent-dark: var(--dark--primary-accent-dark);
-  --primary-accent-darker: var(--dark--primary-accent-darker);
   --secondary-accent: var(--dark--secondary-accent);
   --secondary-accent-light: var(--dark--secondary-accent-light);
-  --secondary-accent-lighter: var(--dark--secondary-accent-lighter);
   --translucent-accent: var(--dark--translucent-accent);
   --primary-heading: var(--dark--primary-heading);
   --secondary-heading: var(--dark--secondary-heading);
@@ -138,7 +124,6 @@ p {
 a {
   color: var(--link);
   text-decoration: none;
-  transition: color 0.5s ease-out;
 }
 
 a:hover {
@@ -165,20 +150,4 @@ a:hover {
     --card-background: var(--dark--card-background);
     --label: var(--dark--label);
   }
-}
-
-/* Custom styles for scroll bars on chromium */
-::-webkit-scrollbar {
-  width: 1em;
-  height: 1em;
-}
-
-::-webkit-scrollbar-track,
-::-webkit-scrollbar-track:horizontal {
-  background: var(--card-background);
-}
-
-::-webkit-scrollbar-thumb,
-::-webkit-scrollbar-thumb:horizontal {
-  background-color: var(--tertiary-background);
 }

pages/academics.tsx

@@ -49,7 +49,6 @@ import { useWindowDimensions } from "utils/getWindowDimensions";
 import { useIsMobile } from "utils/isMobile";
 
 import { BarGraphVertical, BarGraphHorizontal } from "@/components/BarGraph";
-import { BodyLink } from "@/components/BlankLink";
 import { BottomNav } from "@/components/BottomNav";
 import { ComponentWrapper } from "@/components/ComponentWrapper";
 import { Header } from "@/components/Header";
@@ -61,7 +60,6 @@ import {
   StackedBarGraphHorizontal,
   StackedBarGraphVertical,
 } from "@/components/StackedBarGraph";
-import { Title } from "@/components/Title";
 import { WordCloud } from "@/components/WordCloud";
 
 import styles from "./samplePage.module.css";
@@ -73,14 +71,13 @@ export default function Academics() {
   return (
     <div className={styles.page}>
       <Header />
-      <Title>Academics</Title>
       <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 UW. It goes to show that years of programming knowledge is not required to be admitted into CS / CFM / CS/BBA at UW."
+        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)} />
@@ -89,7 +86,7 @@ export default function Academics() {
 
       <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 for students to delay their graduation date due to retaking failed classes, gap terms, completing minors, etc. Students are also able to shorten their undergraduate career through various ways such as removing co-op from their degree. It's normal to diverge from the planned route for your degree!"
+        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
       >
@@ -100,7 +97,7 @@ export default function Academics() {
 
       <ComponentWrapper
         heading="What is your favourite text editor or IDE?"
-        bodyText="The class favours VS Code, a versatile and customizable code editor. 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, and offers a plethora of themes. Shout out to the one Microsoft Word user out there!"
+        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
@@ -113,7 +110,7 @@ export default function Academics() {
 
       <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. It looks like we’ve come a long way from the days of Racket in first year!"
+        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
       >
@@ -121,7 +118,7 @@ export default function Academics() {
       </ComponentWrapper>
 
       <ComponentWrapper
-        heading="How many programming languages do you know?"
+        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)} />
@@ -129,7 +126,7 @@ export default function Academics() {
 
       <ComponentWrapper
         heading="What operating system(s) do you mainly use?"
-        bodyText="MacOS and Windows are the predominant operating systems used by our respondents. Each OS provides its own benefits, capabilities, and downsides. As such, choosing the right operating system largely boils down to personal preference and comfort for daily use or programming. We can establish that UNIX based OS (MacOS and Linux) are favoured by our respondents, due to the various tools and features that cater to programmers."
+        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
       >
@@ -138,11 +135,11 @@ export default function Academics() {
         </div>
       </ComponentWrapper>
 
-      <SectionWrapper title="Courses and Grade Averages" />
+      <SectionWrapper title="Electives, Subject, School" />
 
       <ComponentWrapper
         heading="What category of electives for your degree did you enjoy most?"
-        bodyText="It seems like the class really enjoyed their humanities courses! Perhaps this is due to the stark contrast between the content of courses that belong in this category compared to their mandatory math and computer science courses. The refreshing subject matter, combined with the overall ease of the courses, makes for some of students' favourite electives. For context, these electives are a part of the computer science degrees at UW due to breadth and depth requirements for graduation."
+        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}
@@ -154,24 +151,7 @@ export default function Academics() {
 
       <ComponentWrapper
         heading="Which non-math elective was your favourite?"
-        bodyText={
-          <p>
-            There are lots of amazing non-math electives mentioned in the list,
-            with{" "}
-            <BodyLink href="https://uwflow.com/course/music140">
-              MUSIC 140
-            </BodyLink>
-            ,{" "}
-            <BodyLink href="https://uwflow.com/course/music246">
-              MUSIC 246
-            </BodyLink>
-            , and{" "}
-            <BodyLink href="https://uwflow.com/course/clas104">
-              CLAS 104
-            </BodyLink>{" "}
-            being crowd favourites!
-          </p>
-        }
+        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
       >
@@ -187,22 +167,7 @@ export default function Academics() {
 
       <ComponentWrapper
         heading="Which CS course was your favourite?"
-        bodyText={
-          <p>
-            <BodyLink href="https://uwflow.com/course/cs343">CS 343</BodyLink>{" "}
-            and{" "}
-            <BodyLink href="https://uwflow.com/course/cs486">CS 486</BodyLink>{" "}
-            both tied up in first place. CS 343 teaches concurrent parallel
-            programming while CS 486 delves into the realm of artificial
-            intelligence. Both are very interesting courses, exploring niche
-            aspects of computer science!{" "}
-            <BodyLink href="https://uwflow.com/course/cs246">CS 246</BodyLink>{" "}
-            is the third 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!
-          </p>
-        }
+        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
@@ -218,21 +183,7 @@ export default function Academics() {
 
       <ComponentWrapper
         heading="Which CS course was your least favourite?"
-        bodyText={
-          <p>
-            <BodyLink href="https://uwflow.com/course/cs245">CS 245</BodyLink>,
-            Logic and Computation, was the least favourite CS course students
-            took by large margin. 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. As
-            of December 2022, the course has a 28% liked rating on UWFlow.
-            Coming in second place is{" "}
-            <BodyLink href="https://uwflow.com/course/cs348">CS 348</BodyLink>,
-            Introduction to Database Management, which has a 36% liked rating on
-            UWFlow. Some common complaints of these courses include organization
-            of the course and how interesting the course content is.
-          </p>
-        }
+        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
@@ -247,18 +198,7 @@ export default function Academics() {
 
       <ComponentWrapper
         heading="Which course did you find the most useful for job preparation?"
-        bodyText={
-          <p>
-            <BodyLink href="https://uwflow.com/course/cs341">CS 341</BodyLink>,
-            Algorithms, was deemed the most useful CS core course for job
-            preparation according to respondents. This could be linked to how
-            common software engineering positions are among computing students,
-            and how LeetCode practice is crucial for passing technical
-            interviews! Meanwhile, CS 246, Object-Oriented Software Development,
-            is ranked second. This can be correlated with students ranking it as
-            one of their favourite CS classes!
-          </p>
-        }
+        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}
@@ -272,8 +212,7 @@ export default function Academics() {
 
       <ComponentWrapper
         heading="Did you take any advanced/enriched courses?"
-        bodyText="45% of the class has taken at least 1 advanced/enriched course before their graduation. Advanced and enriched courses have a reputation to be time-consuming and contain much more difficult course material, which can already be hard in the first place! However, for those seeking an academic challenge or are curious about math and computer science topics, this deeper dive into the content can be worth the additional struggle. Additionally, many students claim that some courses are simply taught better. Ultimately, it is up to every individual student to decide what they are capable of and desire. Looks like most of the participants were not afraid to take on this challenge!
-        "
+        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}>
@@ -281,54 +220,10 @@ export default function Academics() {
         </div>
       </ComponentWrapper>
 
-      <ComponentWrapper
-        heading="If you took any advanced or enriched courses, how much did you enjoy each course?"
-        bodyText="Advanced/enriched CS courses are rated pretty high overall, and it looks like most respondents decide to take them in earlier terms. Trying out advanced courses early and seeing if they’re right for you can be a good strategy to figure out what you’re comfortable with before the workload starts ramping up."
-        align="right"
-      >
-        <StackedBarGraphHorizontal
-          width={isMobile ? pageWidth / 1.5 : 600}
-          height={DefaultProp.graphHeight}
-          keys={A12iKeys}
-          colorRange={[
-            Color.primaryAccent,
-            Color.secondaryAccentLight,
-            Color.primaryAccentLighter,
-          ]}
-          data={A12i}
-          margin={{ ...barGraphMargin, ...{ left: 90 } }}
-        />
-      </ComponentWrapper>
-
       <ComponentWrapper
         heading="Who is your favourite professor in all of UW?"
-        bodyText={
-          <p>
-            The class of 2022 would like to give a shout out to &nbsp;
-            <BodyLink href="https://uwflow.com/professor/alice_gao">
-              Alice Gao
-            </BodyLink>
-            ,&nbsp;
-            <BodyLink href="https://uwflow.com/professor/carmen_bruni">
-              Carmen Bruni
-            </BodyLink>
-            ,&nbsp;
-            <BodyLink href="https://uwflow.com/professor/lesley_istead">
-              Lesley Istead
-            </BodyLink>
-            , and&nbsp;
-            <BodyLink href="https://uwflow.com/professor/brad_lushman">
-              Brad Lushman
-            </BodyLink>
-            &nbsp; as some of the best professors at UW! Go read their ratings
-            UWFlow! We would also like to give an honourable mention to every
-            professor who has poured their passion into teaching. This has
-            helped the CS Class of 2022 grow and succeed! You guys are all
-            amazing! ❤️
-          </p>
-        }
+        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"
-        noBackground
       >
         <WordCloud
           data={A14}
@@ -340,16 +235,40 @@ export default function Academics() {
         />
       </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="Second year seems to be the hardest year for most respondents with a whooping 52% of respondents agreeing on this. 2B has the second highest vote which  comparatively makes the later terms look almost relaxing…🤔"
+        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 termly and cumulative averages?"
-        bodyText="The majority of people did their best in 1A and their worst in 1B, 2A, or 2B, likely because of the mandatory challenging computer science and math courses that lie around that period of time. Students started getting better grades in 3A, correlating with the term difficulty question. As a clarification, CAV stands for Cumulative Average."
+        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
       >
@@ -358,23 +277,21 @@ export default function Academics() {
           height={400}
           keys={A16Keys}
           colorRange={[
-            Color.primaryAccentLighter,
-            Color.secondaryAccentLighter,
-            Color.secondaryAccentLight,
-            Color.primaryAccentLight,
             Color.primaryAccent,
-            Color.primaryAccentDark,
-            Color.primaryAccentDarker,
+            Color.secondaryAccentLight,
+            Color.primaryAccentLighter,
           ]}
           data={A16}
-          margin={barGraphMargin}
-          displayPercentage={true}
+          margin={{
+            top: 20,
+            left: 20,
+          }}
         />
       </ComponentWrapper>
 
       <ComponentWrapper
         heading="How many classes have you failed?"
-        bodyText="Most people tend to complete their degree without failing a course, but clearly it's not over if you have failed some."
+        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)} />
@@ -382,7 +299,7 @@ export default function Academics() {
 
       <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 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!"
+        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}>
@@ -390,7 +307,10 @@ export default function Academics() {
         </div>
       </ComponentWrapper>
 
-      <ComponentWrapper heading="Which option(s), specialization(s), or minor(s) did you complete?">
+      <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)}
@@ -423,25 +343,25 @@ export default function Academics() {
 
       <ComponentWrapper
         heading="How many overloaded semesters did you take?"
-        bodyText="UW academic terms can already be challenging; however, over 45% of participants were able to overload at least 1 term. 20% of students overloaded 3 or more terms. 🤯"
+        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>
 
-      <SectionWrapper title="Transfer" />
       <ComponentWrapper
         heading="Did you transfer into your current program?"
-        bodyText="23% of respondents transferred into their current program, which is a surprisingly high number. We can assume that the majority, if not all, of the people that transferred programs transferred into CS as getting into CS/BBA and CFM after initial applications can be exceedingly difficult."
+        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. Math and CS share a lot of courses through the first year of the degree, which might have resulted in many of those students pursuing their passion for CS directly by transferring. CFM transfers may be due to students disliking the finance side of their degree."
+        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)} />
@@ -449,7 +369,7 @@ export default function Academics() {
 
       <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 students have time to re-evaluate their academic/career path after spending a year in their original 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
@@ -460,8 +380,7 @@ export default function Academics() {
 
       <ComponentWrapper
         heading="What was your reasoning behind transferring?"
-        bodyText="Program interest, flexible course requirements, and a flexible schedule were the most common reasons people transferred into their current program. Many respondents also justified their transfer due to future job prospects and to avoid mandatory courses in their original program. With so many industries relying on technology, it's no wonder computing degrees are so in demand!
-"
+        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
@@ -477,7 +396,7 @@ export default function Academics() {
 
       <ComponentWrapper
         heading="Did you take any exchange terms?"
-        bodyText="Students can apply to the exchange program starting in their second year to experience studying abroad for a term! Note that exchange does not necessarily imply switching schools with another student. It seems that not many students took exchange terms from this sample."
+        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)} />
@@ -486,7 +405,7 @@ export default function Academics() {
 
       <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. Unfortunately, 21% of students were interested in going on an exchange term but were interrupted and unable to go due to the COVID-19 pandemic."
+        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}>
@@ -505,8 +424,8 @@ export default function Academics() {
       </ComponentWrapper>
 
       <ComponentWrapper
-        heading="Were you unable to complete an exchange term due to the COVID-19 pandemic?"
-        bodyText="With the severity of the pandemic restrictions in Canada extending from the beginning of 2020 until 2022, it is understandable that most 2022 graduates’ exchange terms were interrupted. Unfortunately, our results show that a lot more people would have gone on exchange if it wasn’t for the pandemic."
+        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}>
@@ -522,7 +441,7 @@ export default function Academics() {
 
       <ComponentWrapper
         heading="What is your favourite memory from your time during the exchange?"
-        bodyText="Hopefully more students in future classes will have the chance to experience cool opportunities like these as well."
+        bodyText="Hopefully more students in future classes have the opportunity to have cool experiences like these as well. :)"
         noBackground
       >
         <div className={styles.quotationCarouselContainer}>
@@ -533,7 +452,7 @@ export default function Academics() {
       <BottomNav
         leftPage={pageRoutes.demographics}
         rightPage={pageRoutes.coop}
-      />
+      ></BottomNav>
     </div>
   );
 }

pages/contributors.tsx

@@ -1,115 +0,0 @@
-import { communityReps, designers, webDevs, sysCom } from "data/contributors";
-import { pageRoutes } from "data/routes";
-import React from "react";
-
-import { BottomNav } from "@/components/BottomNav";
-import { CenterWrapper } from "@/components/CenterWrapper";
-import { Header } from "@/components/Header";
-import { SectionHeader } from "@/components/SectionHeader";
-import { Title } from "@/components/Title";
-
-import styles from "./samplePage.module.css";
-
-interface ContributorProfile {
-  name: string;
-  link: string;
-}
-
-interface ContributorGroupProps {
-  group: Array<ContributorProfile>;
-}
-
-export function ContributorGroup({ group }: ContributorGroupProps) {
-  return (
-    <ul>
-      {group
-        .sort((a, b) => a.name.localeCompare(b.name))
-        .map((d, idx) => {
-          return (
-            <li key={idx}>
-              {d.link ? (
-                <a href={d.link} target="_blank" rel="noreferrer">
-                  {d.name}
-                </a>
-              ) : (
-                <a href="#" onClick={(e) => e.preventDefault()}>
-                  {d.name}
-                </a>
-              )}
-            </li>
-          );
-        })}
-    </ul>
-  );
-}
-
-export default function Contributors() {
-  return (
-    <div className={styles.page}>
-      <Header />
-      <Title>Contributors</Title>
-      <SectionHeader
-        title="Contributors"
-        subtitle="Huge thanks to all CSC members who have contributed to creating the first ever uWaterloo CS class profile!"
-      />
-      <CenterWrapper>
-        <p>
-          The 2022 CS Class Profile was completed by members of the UW Computer
-          Science Club. Specifically, several current and past members (as of
-          this writing) of the Community Representatives, Designers, Web
-          Committee, and Systems Committee put lots of time into making it what
-          it is. Please contact{" "}
-          <a href="mailto: exec@csclub.uwaterloo.ca">
-            exec@csclub.uwaterloo.ca
-          </a>{" "}
-          for specific concerns for the CS Class Profile, but the specific
-          contributors include the following:
-        </p>
-        <ul>
-          <li>
-            Community Representatives
-            <ContributorGroup group={communityReps} />
-          </li>
-          <li>
-            Designers
-            <ContributorGroup group={designers} />
-          </li>
-          <li>
-            Website Committee
-            <ContributorGroup group={webDevs} />
-          </li>
-          <li>
-            Systems Committee
-            <ContributorGroup group={sysCom} />
-          </li>
-        </ul>
-        <p>
-          Furthermore, special thanks to former CSC President and Vice
-          President,{" "}
-          <a
-            href="https://www.linkedin.com/in/kallentu/"
-            target="_blank"
-            rel="noreferrer"
-          >
-            Kallen Tu
-          </a>{" "}
-          and{" "}
-          <a
-            href=" https://www.linkedin.com/in/gordonle/"
-            target="_blank"
-            rel="noreferrer"
-          >
-            Gordon Le
-          </a>
-          , for kickstarting the existence of the CS Class Profile and for
-          providing feedback! Note there may be other anonymous contributors on
-          any of the teams or committees, but their names are not listed here.
-        </p>
-      </CenterWrapper>
-      <BottomNav
-        leftPage={pageRoutes.personal}
-        rightPage={pageRoutes.home}
-      ></BottomNav>
-    </div>
-  );
-}

pages/coop.tsx

@@ -20,18 +20,12 @@ import {
 import { pageRoutes } from "data/routes";
 import React from "react";
 import { Color } from "utils/Color";
-import {
-  barGraphMargin,
-  DefaultProp,
-  pieChartProps,
-  wordCloudWidth,
-} from "utils/defaultProps";
+import { DefaultProp, pieChartProps, wordCloudWidth } from "utils/defaultProps";
 import { useWindowDimensions } from "utils/getWindowDimensions";
 import { useIsMobile } from "utils/isMobile";
 
 import { BottomNav } from "@/components/BottomNav";
 import { BoxPlot } from "@/components/Boxplot";
-import { ComponentSwitcher } from "@/components/ComponentSwitcher";
 import { ComponentWrapper } from "@/components/ComponentWrapper";
 import { Header } from "@/components/Header";
 import { LineGraph } from "@/components/LineGraph";
@@ -41,7 +35,6 @@ import {
   StackedBarGraphHorizontal,
   StackedBarGraphVertical,
 } from "@/components/StackedBarGraph";
-import { Title } from "@/components/Title";
 
 import { WordCloud } from "../components/WordCloud";
 
@@ -61,7 +54,6 @@ export default function CoopPage() {
   return (
     <div className={styles.page}>
       <Header />
-      <Title>Co-op</Title>
       <SectionHeader
         title="Co-op"
         subtitle="Explore careers, gain experience and earn money through UWaterloo's co-op program!"
@@ -69,7 +61,7 @@ export default function CoopPage() {
       {/* C1 */}
       <ComponentWrapper
         heading="Are you in a co-op program?"
-        bodyText="Surprisingly, all 106 individuals that participated in this class profile were in a co-op program! Most don't opt out of it because co-op can be one of the best experiences you can get from attending UW!"
+        bodyText="There are a total of 106 respondents of the CS Class Profile. Surprisingly, all individuals that participated were in a co-op program! Being part of the co-op program is the default option when applying to CS/CFM/CSBBA. Most don't opt out of it because co-op is one of the best experience you can get from attending the University of Waterloo!"
       >
         <div className={styles.graphContainer}>
           <PieChart data={C1} {...pieChartProps(isMobile, pageWidth)} />
@@ -79,7 +71,7 @@ export default function CoopPage() {
       {/* C7ii */}
       <ComponentWrapper
         heading="Where were you located during work?"
-        bodyText="Many students started in the GTA/Toronto or Waterloo region, then slowly progressed to the USA. Software jobs in California in particular are known for their prestige and high paying salary, which may explain why most students eventually try them out. However, due to the pandemic, the last 3 co-op placements were predominantly remote."
+        bodyText="Many students started in GTA or Waterloo region, then slowly progressed to California / USA. Software jobs in California / USA are known for their prestige and their high paying salary which may explain why most students eventually try them out. However, due to the pandemic, the last 3 co-op placements locations were dominantly remote."
         align="right"
         noBackground
       >
@@ -100,7 +92,7 @@ export default function CoopPage() {
       {/* C2 */}
       <ComponentWrapper
         heading="What was your favourite co-op location?"
-        bodyText="32% of students enjoyed their co-op terms in Toronto. Students really enjoyed their time working in California as a close second."
+        bodyText="32% of students enjoyed their co-op terms working in Toronto. A close second was students really enjoying their time working in California."
         align="right"
       >
         <WordCloud
@@ -116,30 +108,24 @@ export default function CoopPage() {
       {/* C7i */}
       <ComponentWrapper
         heading="What company did you work for?"
-        bodyText="There are lots of companies that people have worked at! This just goes to show that the software world is HUGE."
+        bodyText="There are lots of companies that people have worked at! It just goes to show that the software world is HUGE. Most people have worked at Google, Meta, Jane Street, and HRT!"
         align="center"
         noBackground
       >
-        <ComponentSwitcher
-          graphList={C7i.map((coopTerm, i) => (
-            <WordCloud
-              data={coopTerm}
-              width={wordCloudWidth(isMobile, pageWidth)}
-              height={DefaultProp.graphHeight}
-              wordPadding={7}
-              desktopMaxFontSize={75}
-              mobileMaxFontSize={38}
-              key={i}
-            />
-          ))}
-          buttonList={C7i.map((_, i) => "Co-op #" + (i + 1).toString())}
+        <WordCloud
+          data={C7i}
+          width={wordCloudWidth(isMobile, pageWidth)}
+          height={DefaultProp.graphHeight}
+          wordPadding={7}
+          desktopMaxFontSize={75}
+          mobileMaxFontSize={38}
         />
       </ComponentWrapper>
 
       {/* c4 */}
       <ComponentWrapper
         heading="In your opinion, what is the best company to work at?"
-        bodyText="There’s a fair share of companies around here, with Google being the most popular vote. Jane Street ranks 2nd highest, followed by Meta/Facebook."
+        bodyText="We’ve got a fair share of companies around here, with Google being dominant as the best. Jane Street ranks 2nd highest. These results seem to be correlating with the most popular companies that students have worked at!"
       >
         <WordCloud
           data={C4}
@@ -154,7 +140,7 @@ export default function CoopPage() {
       {/* c3 */}
       <ComponentWrapper
         heading="Have you ever had a co-op term without a placement?"
-        bodyText="A sixth of respondents have gone through a term without a co-op placement. You’re not alone if you are here and can’t find one! Finding your first job can be especially difficult. Another possible reason for these results can be due to pandemic conditions."
+        bodyText="A sixth of respondents have gone through a term without a co-op. You’re not alone if you here and can’t find one! Finding your first co-op can be especially difficult."
         align="right"
         noBackground
       >
@@ -166,7 +152,7 @@ export default function CoopPage() {
       {/* c5 */}
       <ComponentWrapper
         heading="Were you ever banned from WaterlooWorks for renegotiating an offer/match?"
-        bodyText="Reneging an offer can be a risky move, but it can still be beneficial when you believe that your other contract or salary can be better."
+        bodyText="Re-negotiating an offer or a match can be a risky move, especially since students are not supposed to directly contact the employers. Re-negotiating can still be beneficial when you believe that your contract or salary can be better. A lot of people also get banned from WaterlooWork by accepting an external offer while getting matched with another company on WaterlooWorks. Make sure to fill out the 'Arrange your own job' form to avoid this!"
         align="right"
       >
         <div className={styles.graphContainer}>
@@ -177,7 +163,7 @@ export default function CoopPage() {
       {/* c6 */}
       <ComponentWrapper
         heading="How many co-op positions did you lose due to COVID-19, if any?"
-        bodyText="Most people probably lost a position immediately when the pandemic began (Winter 2020), but it seems that the effects have not spread too much. Most CS / CFM / CS/BBA students hold software-related jobs, which make for a relatively easy transition to a remote work environment."
+        bodyText="Most people probably lost a position immediately when the pandemic began (Winter 2020), but it’s good to see the effects have not trickled too much. Most CS/CFM/CSBBA students do software-related jobs which are easier to transition into a remote environment."
         noBackground
       >
         <div className={styles.graphContainer}>
@@ -188,7 +174,7 @@ export default function CoopPage() {
       {/* C7iii */}
       <ComponentWrapper
         heading="What was your salary per hour in CAD (excluding other forms of compensation)?"
-        bodyText="Compensation generally increased throughout the terms! For reference, in 2021, the average co-op salaries in the Faculty of Mathematics in Canada were $20.15, $22.05, $24.98, $27.60, $28.96, and $30.95 CAD, respectively. The same amounts in the USA were $28.08, $30.82, $33.65, $34.50, $37.15, and $37.60 USD, respectively. So, CS students tend to get paid more than the faculty average."
+        bodyText="Compensation generally went up throughout the terms! For reference, in 2021, the average co-op salaries in the Faculty of Mathematics in Canada were $20.15, $22.05, $24.98, $27.60, $28.96, and $30.95 CAD, respectively. The same amounts in the USA were $28.08, $30.82, $33.65, $34.50, $37.15, and $37.60 USD, respectively. So, CS students tend to get paid more than the faculty average."
         align="right"
       >
         <BoxPlot
@@ -212,7 +198,7 @@ export default function CoopPage() {
           width={isMobile ? pageWidth / 1.5 : 600}
           height={DefaultProp.graphHeight}
           data={C7iv}
-          valueAxisLeftMargin={75}
+          valueAxisLeftOffset={75}
           margin={{
             top: 20,
             left: 20,
@@ -222,10 +208,10 @@ export default function CoopPage() {
 
       {/* C7v */}
       <ComponentWrapper
-        heading="What was your co-op evaluation rating?"
-        bodyText="Ratings were pretty positive overall, with “Outstanding” and “Excellent” making up the vast majority of evaluations! Respondents did not receive any ratings below “Very Good” in their 3rd, 4th, and 5th co-op terms."
+        heading="What was your coop evaluation rating?"
+        bodyText="Ratings were pretty positive overall! It seems that it's not extremely hard to get an outstanding rating!"
       >
-        <div>
+        <div style={{ paddingRight: "150px" }}>
           <StackedBarGraphHorizontal
             width={isMobile ? pageWidth / 1.5 : 600}
             height={DefaultProp.graphHeight}
@@ -237,21 +223,22 @@ export default function CoopPage() {
               Color.secondaryAccent,
             ]}
             data={C7v}
-            margin={barGraphMargin}
-            displayPercentage
-            tooltipBottomLabel="Co-op Term: "
+            margin={{
+              top: 20,
+              left: 20,
+            }}
           />
         </div>
       </ComponentWrapper>
 
       {/* C7vi */}
       <ComponentWrapper
-        heading="How happy were you with your co-op during the work term specified?"
-        bodyText="The ratio of people rating 4+ in happiness stayed roughly the same throughout the terms. There seems to be more 5s towards the last work term, likely due to students being more satisfied with better jobs that suit their interests."
+        heading="How happy were you with your coop during the work term specified?"
+        bodyText="The ratio of people rating 4+ in happiness stayed roughly the same throughout the terms. There seem to be more 5s towards the last work term as students usually get better jobs that suit their interests and are thus, more satisfied."
         align="right"
         noBackground
       >
-        <div>
+        <div style={{ paddingRight: "150px" }}>
           <StackedBarGraphVertical
             width={isMobile ? pageWidth / 1.5 : 600}
             height={DefaultProp.graphHeight}
@@ -261,20 +248,21 @@ export default function CoopPage() {
               Color.secondaryAccentLight,
               Color.primaryAccentLighter,
               Color.secondaryAccent,
-              Color.primaryHeading,
+              Color.primaryText,
             ]}
             data={C7vi}
-            margin={barGraphMargin}
-            tooltipBottomLabel="Co-op Term: "
-            displayPercentage
+            margin={{
+              top: 20,
+              left: 20,
+            }}
           />
         </div>
       </ComponentWrapper>
 
       {/* C7vii */}
       <ComponentWrapper
-        heading="How did you find your co-op?"
-        bodyText="People found more co-ops externally and through return offers as the terms progressed, which makes sense as people gain more experience as they learn and grow. WaterlooWorks was still really good in helping people find jobs in the main and continuous rounds."
+        heading="How did you find your job?"
+        bodyText="People found more co-ops externally and got more return offers as terms progressed, which makes sense as people gain more experience, become more selective of their co-op positions, and become closer to their graduation date. Companies also generally love to re-hire their interns! WaterlooWorks was still really good in helping people find jobs in the main and continuous rounds."
         align="right"
       >
         <div style={{ padding: "10px" }}>
@@ -295,20 +283,21 @@ export default function CoopPage() {
 
       {/* C7viii */}
       <ComponentWrapper
-        heading="Were you referred for the co-op?"
-        bodyText="Interestingly, the referral to non-referral ratio stayed roughly the same as the co-op terms progressed, apart from the first one which had the most referrals. This goes to show that, without a doubt, networking can really give you some great opportunities!"
+        heading="Were you referred for the job?"
+        bodyText="Interestingly, the referral to non-referral ratio stayed roughly the same as the co-op terms progressed, apart from the first one which had the most referrals. This goes to show that, without a doubt, networking can really get you some great opportunities! Especially in your first co-ops when your experience may be lacking!"
         noBackground
       >
-        <div>
+        <div style={{ paddingRight: "150px" }}>
           <StackedBarGraphVertical
             width={isMobile ? pageWidth / 1.5 : 600}
             height={DefaultProp.graphHeight}
             keys={C7viiiKey}
             colorRange={[Color.primaryAccent, Color.secondaryAccentLight]}
             data={C7viii}
-            margin={barGraphMargin}
-            displayPercentage={true}
-            tooltipBottomLabel="Co-op term: "
+            margin={{
+              top: 20,
+              left: 20,
+            }}
           />
         </div>
       </ComponentWrapper>
@@ -316,7 +305,7 @@ export default function CoopPage() {
       <BottomNav
         leftPage={pageRoutes.academics}
         rightPage={pageRoutes.lifestyleAndInterests}
-      />
+      ></BottomNav>
     </div>
   );
 }

pages/demographics.tsx

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

pages/friends.tsx

@@ -10,11 +10,11 @@ import {
   F9,
   F10,
   F11,
+  F12,
   F13,
   F14,
   F15,
   F16,
-  F12,
 } from "data/friends";
 import { pageRoutes } from "data/routes";
 import React from "react";
@@ -35,7 +35,6 @@ import { ComponentWrapper } from "@/components/ComponentWrapper";
 import { Header } from "@/components/Header";
 import { PieChart } from "@/components/PieChart";
 import { SectionHeader } from "@/components/SectionHeader";
-import { Title } from "@/components/Title";
 import { WordCloud } from "@/components/WordCloud";
 
 import styles from "./samplePage.module.css";
@@ -47,7 +46,6 @@ export default function Demographics() {
   return (
     <div className={styles.page}>
       <Header />
-      <Title>Friends</Title>
       <SectionHeader
         title="Friends"
         subtitle="The friends you make in university are friends you’ll have for life."
@@ -55,8 +53,8 @@ export default function Demographics() {
 
       <ComponentWrapper
         heading="Rate how social you are."
-        bodyText="It looks like most people were neither antisocial or extremely sociable."
-        align="right"
+        bodyText="Looks like most people consider themselves to be in the middle."
+        align="center"
       >
         <BarGraphVertical
           data={F1}
@@ -67,35 +65,17 @@ export default function Demographics() {
 
       <ComponentWrapper
         heading="How would you describe yourself?"
-        bodyText="Introverts dominate CS at UW. Still, contrary to popular opinion, it seems that introverted people do not necessarily comprise such a large majority of the CS student population. Extroverts and ambiverts make up almost half of the CS student population!"
-        align="left"
-        noBackground
+        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)}
-            labelWidth={145}
-            labelTextRadialOffset={-50}
-          />
+          <PieChart data={F2} {...pieChartProps(isMobile, pageWidth)} />
         </div>
       </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="left"
-      >
-        <BarGraphVertical
-          data={F12}
-          {...barGraphProps(isMobile, pageWidth)}
-          lowerLabelDy="0"
-        />
-      </ComponentWrapper>
-
       <ComponentWrapper
         heading="How many close friends throughout university were also in your program?"
-        bodyText="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."
+        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)} />
@@ -103,7 +83,7 @@ export default function Demographics() {
 
       <ComponentWrapper
         heading="How often do you keep in touch with high school friends?"
-        bodyText="Most people are still in touch with their high friends in one way 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."
+        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}>
@@ -113,7 +93,7 @@ export default function Demographics() {
 
       <ComponentWrapper
         heading="How many friends are going to be in the same city as you post-grad?"
-        bodyText="It’s nice to know that the majority of our respondents have a few friends that are going to be in their city 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)} />
@@ -121,23 +101,17 @@ export default function Demographics() {
 
       <ComponentWrapper
         heading="How often do you stay in touch with friends that you made during co-op?"
-        bodyText="Many people don’t keep in touch with friends made during co-op. This makes sense as each co-op term only lasts a short period of time and a remote co-op experience can also affect friendships. It can also be difficult for many students to keep in touch afterwards due to the fact that interns can be from different programs and universities."
-        align="left"
+        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)}
-            labelTextRadialOffset={-30}
-            labelTextSize={20}
-            minWidth={600}
-          />
+          <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="In comparison to co-op friends, more people keep in touch with friends made during school terms. This could be because they hang out with each other during multiple school terms while on campus."
+        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}>
@@ -147,7 +121,7 @@ export default function Demographics() {
 
       <ComponentWrapper
         heading="Which term(s) did you meet most of your friends?"
-        bodyText="Establishing friendships is generally easier during the beginning of the university experience. Due to all math faculty sequences having their 1A and 1B terms aligned, students take their shared core introductory courses at the same time. However, it is still possible to make friends in later terms."
+        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
@@ -160,7 +134,7 @@ export default function Demographics() {
 
       <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, and high school."
+        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
@@ -172,8 +146,8 @@ export default function Demographics() {
 
       <ComponentWrapper
         heading="What is the average size of your friend groups?"
-        bodyText="Our respondents’ friend groups typically consist of 3-4 people."
-        align="left"
+        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}
@@ -184,7 +158,7 @@ export default function Demographics() {
 
       <ComponentWrapper
         heading="How open are you to meeting new people?"
-        bodyText="Although 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!"
+        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
@@ -196,7 +170,7 @@ export default function Demographics() {
 
       <ComponentWrapper
         heading="How many of your friendships were made after starting university?"
-        bodyText="For a lot of people, some or most friendships are made during university. This goes to show how university is an important point in life where people form their most valuable relationships!"
+        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"
       >
         <BarGraphVertical
@@ -208,7 +182,7 @@ export default function Demographics() {
 
       <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 common ways include classes, mutual friends, and extracurriculars."
+        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
@@ -221,15 +195,15 @@ export default function Demographics() {
 
       <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 enables people to take their mind off schoolwork. In addition, MC and DC are fairly popular spots since MC has a variety of club offices, computer labs, and classrooms for studying, while DC has a library where many students study."
-        align="left"
+        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 are a variety of activities enjoyed by everyone! Most people enjoy eating food with their friends - who doesn't love eating and trying out new restaurants? Talking and going to the gym are the social activities that are the next most favoured by students. Hanging out with friends doesn't have to be complicated!"
+        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
@@ -244,7 +218,7 @@ export default function Demographics() {
 
       <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!"
+        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}>
@@ -255,7 +229,7 @@ export default function Demographics() {
       <BottomNav
         leftPage={pageRoutes.postGrad}
         rightPage={pageRoutes.miscellaneous}
-      />
+      ></BottomNav>
     </div>
   );
 }

pages/frontpage.module.css

@@ -1,151 +0,0 @@
-.main {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.main > * {
-  margin-bottom: calc(65rem / 16);
-}
-
-.title {
-  position: relative;
-  width: 80vw;
-  height: 90vh;
-}
-
-.titleImage {
-  position: absolute;
-  top: 10vh;
-  margin: auto;
-  max-width: 800px;
-}
-
-.titleImage img {
-  max-width: 100%;
-  height: auto;
-}
-
-.blurb {
-  position: absolute;
-  bottom: 10vh;
-  right: 10vw;
-  width: fit-content;
-  height: fit-content;
-  padding: calc(30rem / 16);
-  background-color: var(--translucent-accent);
-  border: calc(2rem / 16) solid var(--primary-text);
-  box-shadow: 0 calc(1rem / 16) calc(10rem / 16) var(--primary-accent);
-  border-radius: calc(50rem / 16);
-  z-index: 1;
-}
-
-.blurb h1 {
-  margin-top: 0;
-}
-
-.classYear {
-  color: var(--primary-text);
-}
-
-.classProfile {
-  color: var(--primary-heading)
-}
-
-.blurb h3 {
-  color: var(--primary-accent-light);
-}
-
-.decoratorSolid {
-  position: absolute;
-  top: 2vh;
-  right: 13vw;
-  width: 16vw;
-  height: 24vh;
-  background-color: var(--primary-accent-lighter);
-  opacity: 50%;
-  border-radius: calc(50rem / 16);
-}
-
-.decoratorDots {
-  position: absolute;
-  top: 40vh;
-  right: 0.8vw;
-  width: 11vw;
-  height: 36vh;
-  background-image: radial-gradient(var(--link) 35%, transparent 35%);
-  background-position: 0 0;
-  background-size: calc(25rem / 16) calc(25rem / 16);
-  z-index: -1;
-}
-
-.viewButton {
-  background: none;
-  display: flex;
-  border: none;
-  font-size: calc(30rem / 16);
-  color: var(--primary-accent-light);
-  font-weight: 700;
-  font-family: 'Inconsolata';
-  position: relative;
-  cursor: pointer;
-  padding: 0;
-  transition: color 0.5s ease-out;
-}
-
-.viewButton:hover {
-  color: var(--label);
-}
-
-.viewButton:after {
-  content: '';
-  position: absolute;
-  width: 100%;
-  height: calc(2rem / 16);
-  bottom: 0px;
-  background-color: var(--primary-accent-lighter);
-  cursor: pointer;
-  transition: background-color 0.5s ease-out;
-}
-
-.viewButton:hover:after {
-  background-color: var(--primary-accent-light);
-}
-
-
-@media screen and (max-width: 700px) {
-  .decoratorDots {
-    display: none;
-  }
-
-  .decoratorSolid {
-    display: none;
-  }
-
-  .titleImage {
-    top: 2vh;
-  }
-
-  .blurb {
-    right: 0;
-    top: 30vh;
-    margin: 0.5rem 0;
-  }
-
-  .blurb h1 {
-    font-size: calc(38rem / 16);
-  }
-
-  .blurb h3 {
-    font-size: calc(25rem / 16);
-  }
-
-  .viewButton {
-    font-size: calc(25rem / 16);
-  }
-}
-
-.homeSectionsStyles {
-  width: 70vw;
-  max-width: 1000px;
-}

pages/index.tsx

@@ -1,89 +1,12 @@
-import { pageRoutes } from "data/routes";
+import Link from "next/link";
 import React from "react";
-import { basePath } from "utils/getBasePath";
-
-import { About } from "@/components/About";
-import { BodyLink } from "@/components/BlankLink";
-import { CenterWrapper } from "@/components/CenterWrapper";
-import { Header } from "@/components/Header";
-import { Sections } from "@/components/Sections";
-import { Title } from "@/components/Title";
-
-import styles from "./frontpage.module.css";
 
 export default function Home() {
   return (
-    <>
-      <Header />
-      <div className={styles.main}>
-        <Title>Home</Title>
-        <div className={styles.title}>
-          <div className={styles.titleImage}>
-            <img
-              src={basePath + "/images/frontPageTitle.png"}
-              alt="A picture of the University of Waterloo campus"
-            />
-          </div>
-          <div className={styles.blurb}>
-            <h1 className={styles.classYear}>UW Computer Science 2022</h1>
-            <h1 className={styles.classProfile}>Class Profile</h1>
-            <h3>Welcome to UW Computer Science 2022 Class Profile.</h3>
-            <a href="#about">
-              <button className={styles.viewButton}>View</button>
-            </a>
-          </div>
-          <div className={styles.decoratorSolid} />
-          <div className={styles.decoratorDots} />
-        </div>
-        <About />
-        <CenterWrapper>
-          <h1>Preface</h1>
-          <p>
-            The 2022 CS Class Profile consists of data relevant to CS, CFM, and
-            CS/BBA students completing their undergrad in 2022. These were
-            combined with the knowledge that students in these programs tend to
-            have similar experiences, as they share many core courses. In the
-            standard co-op offering, CS and CFM take 4 years and 2 terms to
-            complete, while CS/BBA can take up to a full 5 years.
-          </p>
-          <p>
-            The University of Waterloo’s computer science programs are known to
-            be prestigious and well-known in Canada as well as across the world.
-            As of 2022, it ties for first place in Maclean’s university
-            rankings, and 25th internationally as a subject by the QS World
-            University rankings. For prospective students or anyone who is
-            interested in learning more about what the students are like, this
-            CS Class Profile will attempt to answer some of your questions, and
-            you may even learn a thing or two you didn’t expect!
-          </p>
-          <p>
-            According to the{" "}
-            <b>
-              <BodyLink href="https://uwaterloo.ca/institutional-analysis-planning/university-data-and-statistics/student-data/degrees-granted-0">
-                Institutional Analysis & Planning (IAP)
-              </BodyLink>
-            </b>
-            , there were a 613 graduates from CS, CFM, and CS/BBA, leading to a
-            overall survey turnout of 17%. By program, this is a 17% turnout
-            from CS graduates, 22% turnout from CS/BBA graduates, and 14%
-            turnout from CFM graduates.
-          </p>
-          <p>
-            The survey questions were approved by the IAP, where all University
-            of Waterloo stakeholders that are interested in conducting a
-            non-academic research survey involving a large portion of the UW
-            population are reviewed and approved. The entirety of the survey
-            creation and data processing was done by the{" "}
-            <b>
-              <BodyLink href="https://csclub.uwaterloo.ca">
-                UW Computer Science Club
-              </BodyLink>
-            </b>
-            , so please check us out if you enjoy what you see!
-          </p>
-        </CenterWrapper>
-        <Sections data={pageRoutes} className={styles.homeSectionsStyles} />
-      </div>
-    </>
+    <p>
+      Click <Link href="/playground">here</Link> to visit the playground
+      <br />
+      Click <Link href="/samplePage">here</Link> to visit a sample page
+    </p>
   );
 }

pages/intimacy-and-drugs.tsx

@@ -35,7 +35,6 @@ import { Header } from "@/components/Header";
 import { PieChart } from "@/components/PieChart";
 import { QuotationCarousel } from "@/components/QuotationCarousel";
 import { SectionHeader } from "@/components/SectionHeader";
-import { Title } from "@/components/Title";
 
 import { Color } from "../utils/Color";
 
@@ -48,23 +47,22 @@ export default function Demographics() {
   return (
     <div className={styles.page}>
       <Header />
-      <Title>Intimacy and Drugs</Title>
       <SectionHeader
         title="Intimacy and Drugs"
-        subtitle="What have people tried during university?"
+        subtitle="What have people tried/already done during university?👀"
       />
 
       <ComponentWrapper
-        heading="Which drugs have you used?"
-        bodyText="Many students experiment with substances during university. However, we can see that most students have not tried drugs that are stronger than marijuana, such as LSD, cigarettes, or magic mushrooms."
+        heading="Which drugs have you tried/used?"
+        bodyText="A lot of students also experiment with substances during university. However, we can see that most students have not tried drugs that are more harsh than Marijuana, such as nicotine, cigarettes, or mushrooms."
       >
         <GroupedBarGraphHorizontal
           className={styles.barGraphDemo}
           data={I2}
-          barColors={[Color.primaryAccentLight, Color.primaryAccentDark]}
+          barColors={[Color.primaryAccentLight, Color.secondaryAccentLight]}
           barHoverColorsMap={{
-            [Color.primaryAccentLight]: Color.primaryAccentLighter,
-            [Color.primaryAccentDark]: Color.primaryAccentDarker,
+            [Color.primaryAccentLight]: Color.primaryAccent,
+            [Color.secondaryAccentLight]: Color.secondaryAccent,
           }}
           width={barGraphWidth(isMobile, pageWidth)}
           minWidth={700}
@@ -74,19 +72,18 @@ export default function Demographics() {
       </ComponentWrapper>
 
       <ComponentWrapper
-        heading="What level of intimacy have you experienced?"
-        bodyText="Undergrad is a time when we are surrounded by many people of our age and are given more freedom to seek out relationships. This is reflected in our data by how many respondents first experienced different levels of intimacy during university. However, it is also worth noting that a large portion of people did not respond for all of the intimacy levels, showing how they have not had these experiences or are uncomfortable sharing.
-"
+        heading="What level of intimacy have you reached?"
+        bodyText="Undergrad is a time when we are surrounded by mostly people of our age and given more freedom to seek out relationships. This is reflected in our data by how many respondents first experienced different levels of intimacy during university. But, it is also worth noting that a large chunk of people did not respond for all of the intimacy levels, showing how they have not yet reached there or are uncomfortable sharing."
         align="center"
         noBackground
       >
         <GroupedBarGraphVertical
           className={styles.barGraphDemo}
           data={I1}
-          barColors={[Color.primaryAccentLight, Color.primaryAccentDark]}
+          barColors={[Color.primaryAccentLight, Color.secondaryAccentLight]}
           barHoverColorsMap={{
-            [Color.primaryAccentLight]: Color.primaryAccentLighter,
-            [Color.primaryAccentDark]: Color.primaryAccentDarker,
+            [Color.primaryAccentLight]: Color.primaryAccent,
+            [Color.secondaryAccentLight]: Color.secondaryAccent,
           }}
           width={barGraphWidth(isMobile, pageWidth)}
           height={700}
@@ -100,7 +97,7 @@ export default function Demographics() {
 
       <ComponentWrapper
         heading="How many committed relationships have you been in during university?"
-        bodyText="Our respondents most commonly have been in either 0 or 1 committed relationships during their undergraduate careers. On the other end, 5 is the highest number of committed relationships indicated."
+        bodyText="Our respondents most commonly have been in either 0 or 1 committed relationship during their undergrad. On the other end, 5 is the most number of committed relationships indicated."
       >
         <BarGraphVertical
           data={I3}
@@ -111,7 +108,7 @@ export default function Demographics() {
 
       <ComponentWrapper
         heading="How many sexual partners have you had during university?"
-        bodyText="Similar to the relationships question, most people responded with having 0 or 1 sexual partners during university. However, one individual wrote 20, another wrote 50, and most surprisingly another wrote 120."
+        bodyText="Similar to the relationships question, most people responded with having 0 or 1 sexual partner during univeristy. However, one individual wrote 20, another wrote 50, and most impressively (or not depending on how you want to look at it) another wrote 120."
         align="left"
         noBackground
       >
@@ -124,7 +121,7 @@ export default function Demographics() {
 
       <ComponentWrapper
         heading="Have you ever cheated on someone, been cheated on, or helped someone cheat?"
-        bodyText="14 out of 96 people have selected yes to having been involved in cheating situations."
+        bodyText="14 out of 96 people have selected yes to having been involved in cheating."
       >
         <div className={styles.graphContainer}>
           <PieChart data={I5} {...pieChartProps(isMobile, pageWidth)} />
@@ -133,7 +130,7 @@ export default function Demographics() {
 
       <ComponentWrapper
         heading="Did you ever date another CS / CS/BBA / CFM student?"
-        bodyText="27 respondents have dated another CS / CS/BBA / CFM student, which is about 1 in 4 students."
+        bodyText="27 people have dated another CS/CSBBA/CFM student. That’s about 1 in 4 students."
         align="right"
         noBackground
       >
@@ -144,7 +141,7 @@ export default function Demographics() {
 
       <ComponentWrapper
         heading="If you answered no to the previous question, did you want to?"
-        bodyText="Out of everyone who answered no to the last question, 29 people did want to date someone in their program. Dating someone in the same program can be great in giving students something similar to bond over. On the other hand, finding someone with different interests than yourself can also be very fulfilling. "
+        bodyText="Out of everyone who answered no to the last question, 28 people out of 70 did want to date someone in their program. That’s a little more than 1 in 4 students, meaning a little less than half of CS/CSBBA/CFA students did not want to date one another."
         align="right"
       >
         <div className={styles.graphContainer}>
@@ -153,8 +150,8 @@ export default function Demographics() {
       </ComponentWrapper>
 
       <ComponentWrapper
-        heading="If you've had a significant other, have you ever lived together for a term?"
-        bodyText="Out of people who have had a relationship, around half of them have lived together and the other half have not."
+        heading="If you've had a significant other, have you ever roomed together for a term?"
+        bodyText="Out of people who have had a relationship, around half of them have roomed together and the other half have not."
         align="right"
         noBackground
       >
@@ -167,7 +164,7 @@ export default function Demographics() {
 
       <ComponentWrapper
         heading="Are you currently in a relationship?"
-        bodyText="A little less than half of our respondents were in a relationship at the time that they filled out this survey!"
+        bodyText="A little less than half of our respondents are in a relationship as of the time they filled out this survey."
         align="left"
       >
         <BarGraphVertical
@@ -179,7 +176,7 @@ export default function Demographics() {
 
       <ComponentWrapper
         heading="If you answered yes to the previous question, will you be living in the same city/region post-grad?"
-        bodyText="For those who are currently in a relationship, 25 of them will be in the same city post-grad. The rest will either be in a long-distance relationship or are currently unsure."
+        bodyText="For those who are currently in a relationship, 25 of them will be in the same city post-grad. The rest are will either be in a long-distance relationship or are currently unsure."
         align="right"
         noBackground
       >
@@ -219,7 +216,7 @@ export default function Demographics() {
       <BottomNav
         leftPage={pageRoutes.lifestyleAndInterests}
         rightPage={pageRoutes.postGrad}
-      />
+      ></BottomNav>
     </div>
   );
 }

pages/lifestyle-and-interests.tsx

@@ -36,7 +36,6 @@ import { ComponentWrapper } from "@/components/ComponentWrapper";
 import { Header } from "@/components/Header";
 import { PieChart } from "@/components/PieChart";
 import { SectionHeader } from "@/components/SectionHeader";
-import { Title } from "@/components/Title";
 import { WordCloud } from "@/components/WordCloud";
 
 import styles from "./samplePage.module.css";
@@ -48,15 +47,14 @@ export default function Demographics() {
   return (
     <div className={styles.page}>
       <Header />
-      <Title>Lifestyle and Interests</Title>
       <SectionHeader
         title="Lifestyle and Interests"
-        subtitle="What did the class of 2022 do in their free time?"
+        subtitle="What do CS people do in their free time?"
       />
 
       <ComponentWrapper
-        heading="Did you move back home during the beginning of the COVID-19 pandemic?"
-        bodyText="The vast majority of respondents moved back home during the beginning of the COVID-19 pandemic, which makes sense given the situation."
+        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)} />
@@ -64,8 +62,8 @@ export default function Demographics() {
       </ComponentWrapper>
 
       <ComponentWrapper
-        heading="How many doses of the COVID-19 vaccination have you received?"
-        bodyText="Proof of vaccination used to be a requirement for entering campus, barring special circumstances. Here, we can see that everyone except for 2 people had 2 or more doses. The large majority had 3+ doses."
+        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
       >
@@ -76,7 +74,7 @@ export default function Demographics() {
 
       <ComponentWrapper
         heading="How did your outlook on religion change during university?"
-        bodyText="Although most of our respondents were never religious, most religious students continued to stay religious throughout their undergraduate years."
+        bodyText="Interestingly, most of our respondents were never religious."
       >
         <BarGraphVertical
           data={L3}
@@ -87,8 +85,7 @@ export default function Demographics() {
 
       <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 of them stated that they learned to cook during university as opposed to before. This may be because going to university is the first time that many students move out from their parents’/guardians’ home and live on their own.
-"
+        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
       >
@@ -99,7 +96,7 @@ export default function Demographics() {
 
       <ComponentWrapper
         heading="How many days are you physically active in a week now?"
-        bodyText="Contrary to stereotypes, most UW students 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 body."
+        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}
@@ -110,7 +107,7 @@ export default function Demographics() {
 
       <ComponentWrapper
         heading="How often did you pull all-nighters throughout university?"
-        bodyText="84 people have either never pulled an all-nighter or do so only once every few months. With decent time management skills, work is definitely doable and sleep does not have to be sacrificed."
+        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)} />
@@ -118,7 +115,7 @@ export default function Demographics() {
 
       <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="52 respondents agree or strongly agree with this statement, contrasted to the 33 who disagree or strongly disagree. Based on our data, It seems like many people did not find enough time for their hobbies. Workload can often pile up."
+        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)} />
@@ -126,7 +123,7 @@ export default function Demographics() {
 
       <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 UW students are no exception. Although we are not known for our parties, they can still frequently be found in residential areas around campus."
+        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
       >
@@ -140,7 +137,7 @@ export default function Demographics() {
 
       <ComponentWrapper
         heading="What time do you usually sleep?"
-        bodyText="Looks like we have a lot of night owls!"
+        bodyText="Looks like we have a lot of nightowls!"
         align="right"
       >
         <BarGraphVertical data={L9} {...barGraphProps(isMobile, pageWidth)} />
@@ -148,7 +145,7 @@ export default function Demographics() {
 
       <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 among students."
+        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
       >
@@ -156,8 +153,8 @@ export default function Demographics() {
       </ComponentWrapper>
 
       <ComponentWrapper
-        heading="While on campus, how many days of the week do you eat out at a restaurant?"
-        bodyText="Waterloo students have a wide variety of options when it comes to food. 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 every so often."
+        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
@@ -169,7 +166,7 @@ export default function Demographics() {
 
       <ComponentWrapper
         heading="What is your favourite restaurant to go to on/around campus?"
-        bodyText="With all the diverse restaurants around campus, it seems like the most popular food choices are sushi, noodles, and shawarma."
+        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
@@ -183,8 +180,8 @@ export default function Demographics() {
       </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."
+        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
@@ -197,8 +194,7 @@ export default function Demographics() {
 
       <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 a lack of relevant work experience. Many of our respondents have completed a few side projects. However, a large number of them have indicated that they have not done any at all during university. This could be explained by the time-consuming academic obligations that take away time to do projects. Furthermore, this also demonstrates that recent side projects are not the only factor to landing a job.
-"
+        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
@@ -210,22 +206,17 @@ export default function Demographics() {
 
       <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. Despite this, hackathons are definitely not a necessity for graduating students. In fact, we see that the vast majority of our respondents never or very rarely attend hackathons currently."
+        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)}
-            labelTextSize={20}
-            minWidth={600}
-          />
+          <PieChart data={L16} {...pieChartProps(isMobile, pageWidth)} />
         </div>
       </ComponentWrapper>
 
       <ComponentWrapper
-        heading="Which extracurricular activities did you participate in?"
-        bodyText="Many of our respondents are involved with one or more extracurricular activities during university. These include sports, programming, council positions, and many more!"
+        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
@@ -240,7 +231,7 @@ export default function Demographics() {
 
       <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), having 23 and 22 votes respectively. Other popular places include on residence, QNC, and E7."
+        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
@@ -252,8 +243,8 @@ export default function Demographics() {
       </ComponentWrapper>
 
       <ComponentWrapper
-        heading="Have you done an Undergraduate Research Assistantship (URA)?"
-        bodyText="URAs are great for students interested in gaining research experience. Students work under a professor of their choice and also get paid! Almost a quarter of the respondents had completed a URA."
+        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)} />
@@ -262,7 +253,7 @@ export default function Demographics() {
       <BottomNav
         leftPage={pageRoutes.coop}
         rightPage={pageRoutes.intimacyAndDrugs}
-      />
+      ></BottomNav>
     </div>
   );
 }

pages/mental-health.tsx

@@ -1,357 +0,0 @@
-import {
-  H1,
-  H2,
-  H2i,
-  H2ii,
-  H3,
-  H3i,
-  H3ii,
-  H4,
-  H4i,
-  H4ii,
-  H5,
-  H5i,
-  H6,
-  H7,
-  H8,
-  H9,
-  H9i,
-  H10,
-  H11,
-  H12,
-  H13,
-  H14,
-} from "data/mental-health";
-import { pageRoutes } from "data/routes";
-import React from "react";
-import {
-  barGraphProps,
-  pieChartProps,
-  barGraphWidth,
-} from "utils/defaultProps";
-import { useWindowDimensions } from "utils/getWindowDimensions";
-import { useIsMobile } from "utils/isMobile";
-
-import { BarGraphVertical } from "@/components/BarGraph";
-import { BodyLink } from "@/components/BlankLink";
-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 { Title } from "@/components/Title";
-
-import styles from "./samplePage.module.css";
-
-export default function Demographics() {
-  const pageWidth = useWindowDimensions().width;
-  const isMobile = useIsMobile();
-
-  return (
-    <div className={styles.page}>
-      <Header />
-      <Title>Mental Health</Title>
-      <SectionHeader title="Mental Health" />
-
-      <ComponentWrapper
-        heading="Have you struggled with mental health during undergrad?"
-        bodyText="Mental health is a serious issue that affects the well-being of countless students. More than half of our respondents reported that they have struggled with mental health during undergrad. Oftentimes, university can be the cause of stress, anxiety or other forms of mental health problems. Thus, it is crucial to take care of yourself as well as support one another during tough times."
-      >
-        <div className={styles.graphContainer}>
-          <PieChart data={H1} {...pieChartProps(isMobile, pageWidth)} />
-        </div>
-      </ComponentWrapper>
-
-      <ComponentWrapper
-        heading="Have you ever experienced burnout?"
-        bodyText="Burnouts are extremely common in our respondents, with the vast majority of people reporting that they have experienced it at some point. The constant demand for work is likely to leave students feeling overwhelmed or emotionally drained. Just keep in mind that it is completely normal to feel this way and remember to let yourself take breaks."
-        align="center"
-        noBackground
-      >
-        <div className={styles.graphContainer}>
-          <PieChart data={H2} {...pieChartProps(isMobile, pageWidth)} />
-        </div>
-      </ComponentWrapper>
-
-      <ComponentWrapper
-        heading="Do you feel burnout more during co-op or academic term?"
-        bodyText="Most of our respondents indicated that they are more likely to experience a burnout during their academic terms. This could be due to heavy course work and assessments, as well as interview preparation and co-op search. Co-op terms may be preferred because it gives students a break from studying."
-        align="right"
-      >
-        <div className={styles.graphContainer}>
-          <PieChart data={H2i} {...pieChartProps(isMobile, pageWidth)} />
-        </div>
-      </ComponentWrapper>
-
-      <ComponentWrapper
-        heading="Do you feel burnout more online or in person?"
-        bodyText="It seems like both online and in-person terms can cause burnout. It looks like for many respondents, being forced to learn online due to COVID-19 has helped a bit with burnout."
-        align="left"
-        noBackground
-      >
-        <BarGraphVertical
-          data={H2ii}
-          {...barGraphProps(isMobile, pageWidth)}
-          lowerLabelDy="0"
-        />
-      </ComponentWrapper>
-
-      <ComponentWrapper
-        heading="Have you ever been to therapy?"
-        bodyText="The words therapy and counselling are often used interchangeably, but therapy is generally more long-term and focuses on you as an individual. Meanwhile, counselling is usually for a specific issue for a limited amount of time. Although some respondents have sought out therapy, this number is less than half of the number of respondents who reported struggling with mental health. This could speak to the need to have more accessible and available resources in regards to therapy around UW. In the meantime, if you’re struggling with mental health, don’t hesitate to reach out to professionals."
-      >
-        <div className={styles.graphContainer}>
-          <PieChart data={H3} {...pieChartProps(isMobile, pageWidth)} />
-        </div>
-      </ComponentWrapper>
-
-      <ComponentWrapper
-        heading="If you haven’t been to therapy, have you considered going?"
-        bodyText="Around half of those who responded to this question reported that they have considered therapy. Again, this is almost double the number of respondents who have actually been to therapy."
-        align="right"
-        noBackground
-      >
-        <div className={styles.graphContainer}>
-          <PieChart data={H3i} {...pieChartProps(isMobile, pageWidth)} />
-        </div>
-      </ComponentWrapper>
-
-      <ComponentWrapper
-        heading="If you have considered going to therapy, what factors prevented you from going?"
-        bodyText="Seeking professional help can dramatically improve one's well-being. However, many avoidance factors prevent people from doing so. According to our respondents, some of the most common barriers for them include the lack of information, money, stereotypes, and the lack of time."
-        align="right"
-      >
-        <BarGraphVertical
-          data={H3ii}
-          {...barGraphProps(isMobile, pageWidth)}
-          widthAlternatingLabel={1000}
-          minWidth={700}
-          lowerLabelDy="60px"
-          valueAxisLabelOffset={0}
-        />
-      </ComponentWrapper>
-
-      <ComponentWrapper
-        heading="Have you ever been to counselling?"
-        bodyText="Out of the 101 respondents who answered this question, 24 said yes to having gone to counselling before. This number is very similar to the number of people who have been to therapy."
-        align="right"
-        noBackground
-      >
-        <div className={styles.graphContainer}>
-          <PieChart data={H4} {...pieChartProps(isMobile, pageWidth)} />
-        </div>
-      </ComponentWrapper>
-
-      <ComponentWrapper
-        heading="If you haven’t been to counselling, have you considered going?"
-        bodyText={
-          <p>
-            Not many of our respondents have considered going to counselling.
-            This is significantly less than the number of people who have
-            considered going to therapy. UW Health Services offers great
-            counselling services and resources for all students, you can check
-            them out
-            <BodyLink href="https://uwaterloo.ca/campus-wellness/counselling-services">
-              {" "}
-              here
-            </BodyLink>
-            .
-          </p>
-        }
-        align="left"
-      >
-        <div className={styles.graphContainer}>
-          <PieChart data={H4i} {...pieChartProps(isMobile, pageWidth)} />
-        </div>
-      </ComponentWrapper>
-
-      <ComponentWrapper
-        heading="If you have considered going to counselling, what factors prevented you from going?"
-        bodyText="The factors that inhibit people from going to counselling are similar to those that limit people from trying out therapy."
-        align="right"
-        noBackground
-      >
-        <BarGraphVertical
-          data={H4ii}
-          {...barGraphProps(isMobile, pageWidth)}
-          widthAlternatingLabel={680}
-          lowerLabelDy="50px"
-        />
-      </ComponentWrapper>
-
-      <ComponentWrapper
-        heading="Have you used UW Health Services for your mental health?"
-        bodyText={
-          <p>
-            UW Health Services is a program that provides accessible medical
-            services. It’s great to see a chunk of our respondents were able to
-            utilize it for their benefit and we hope that these services
-            continue to be used even more in the future. University life is
-            stressful, and turning to UW Health Services is something you would
-            not be alone in doing. To book an appointment with them, you can
-            call (519) 888-4096 or{" "}
-            <BodyLink href="mailto:hsforms@uwaterloo.ca">
-              email hsforms@uwaterloo.ca
-            </BodyLink>{" "}
-            if you are unable to book by phone.
-          </p>
-        }
-      >
-        <div className={styles.graphContainer}>
-          <PieChart data={H5} {...pieChartProps(isMobile, pageWidth)} />
-        </div>
-      </ComponentWrapper>
-
-      <ComponentWrapper
-        heading="How was your experience with UW Health Services?"
-        bodyText="Our respondents have a wide range of opinions and feedback about their experiences with UW Health Services. Here is some of the feedback that was provided."
-        noBackground
-      >
-        <div className={styles.quotationCarouselContainer}>
-          <QuotationCarousel
-            data={H5i}
-            circleDiameter={0}
-            width={barGraphWidth(isMobile, pageWidth)}
-            height={200}
-          />
-        </div>
-      </ComponentWrapper>
-
-      <ComponentWrapper
-        heading="How would you rate your mental health over your entire undergraduate career?"
-        bodyText="Overall, the majority of respondents rated their mental health over their undergrad career as a 3 or 4 out of 5."
-        align="right"
-      >
-        <BarGraphVertical
-          data={H7}
-          {...barGraphProps(isMobile, pageWidth)}
-          lowerLabelDy="0"
-        />
-      </ComponentWrapper>
-
-      <ComponentWrapper
-        heading="How would you rate your current mental health?"
-        bodyText="Similar to the question above, most students rated their current mental health as a 3 or 4 out of 5. However, more people indicated a mental health score of 4 or 55, showing a slight increase in general mental health status after graduation."
-        noBackground
-      >
-        <BarGraphVertical
-          data={H6}
-          {...barGraphProps(isMobile, pageWidth)}
-          lowerLabelDy="0"
-        />
-      </ComponentWrapper>
-
-      <ComponentWrapper
-        heading="How much do you value your mental health?"
-        bodyText="Thankfully, most people do highly value their mental health. As shown by the stats, most people gave a score on the higher end."
-      >
-        <BarGraphVertical
-          data={H8}
-          {...barGraphProps(isMobile, pageWidth)}
-          lowerLabelDy="0"
-        />
-      </ComponentWrapper>
-
-      <ComponentWrapper
-        heading="What are some ways you have kept in touch with others during co-op and the pandemic?"
-        bodyText="Co-op and the pandemic can separate friends you make at UW. However, here are some ways that our respondents kept in touch with their friends."
-        align="right"
-        noBackground
-      >
-        <div className={styles.quotationCarouselContainer}>
-          <QuotationCarousel
-            data={H9}
-            circleDiameter={0}
-            width={barGraphWidth(isMobile, pageWidth)}
-            height={200}
-          />
-        </div>
-      </ComponentWrapper>
-
-      <ComponentWrapper
-        heading="Please give any general comments about mental health in university."
-        bodyText="With mental health being such a large concern in university, many of our respondents have commented on this topic. Here are some quotes from students that describe how UW’s environment affects students’ mental health as well as suggestions for improving mental health."
-        align="right"
-      >
-        <div className={styles.quotationCarouselContainer}>
-          <QuotationCarousel
-            data={H9i}
-            circleDiameter={0}
-            width={barGraphWidth(isMobile, pageWidth)}
-            height={800}
-          />
-        </div>
-      </ComponentWrapper>
-
-      <ComponentWrapper
-        heading="Do you feel like you have enough support for your mental health?"
-        bodyText="Most of our respondents indicated that they did not feel like they received enough support for their mental health. It’s important to remember that there are people and services out there looking to help you. UW is a very stressful environment, so don’t be afraid to turn to loved ones or professionals for help."
-        noBackground
-      >
-        <div className={styles.graphContainer}>
-          <PieChart data={H10} {...pieChartProps(isMobile, pageWidth)} />
-        </div>
-      </ComponentWrapper>
-
-      <ComponentWrapper
-        heading="What do you do to help cope with your mental health issues?"
-        align="right"
-      >
-        <div className={styles.quotationCarouselContainer}>
-          <QuotationCarousel
-            data={H11}
-            circleDiameter={0}
-            width={barGraphWidth(isMobile, pageWidth)}
-            height={250}
-          />
-        </div>
-      </ComponentWrapper>
-
-      <ComponentWrapper
-        heading="How does mental health affect different aspects of your life (e.g., relationships, studies, career)?"
-        align="center"
-        noBackground
-      >
-        <div className={styles.quotationCarouselContainer}>
-          <QuotationCarousel
-            data={H12}
-            circleDiameter={0}
-            width={barGraphWidth(isMobile, pageWidth)}
-            height={600}
-          />
-        </div>
-      </ComponentWrapper>
-
-      <ComponentWrapper
-        heading='Do you feel "senioritis" at this time?'
-        bodyText="Most students feel “senioritis” at the time of this survey. This makes sense, as they’re so close to being free."
-        align="right"
-      >
-        <div className={styles.graphContainer}>
-          <PieChart data={H13} {...pieChartProps(isMobile, pageWidth)} />
-        </div>
-      </ComponentWrapper>
-
-      <ComponentWrapper
-        heading="What do you think UW can do better to accommodate your mental health?"
-        align="center"
-        noBackground
-      >
-        <div className={styles.quotationCarouselContainer}>
-          <QuotationCarousel
-            data={H14}
-            circleDiameter={0}
-            width={barGraphWidth(isMobile, pageWidth)}
-            height={500}
-          />
-        </div>
-      </ComponentWrapper>
-
-      <BottomNav
-        leftPage={pageRoutes.miscellaneous}
-        rightPage={pageRoutes.personal}
-      />
-    </div>
-  );
-}

pages/miscellaneous.tsx

@@ -13,13 +13,11 @@ import { useWindowDimensions } from "utils/getWindowDimensions";
 import { useIsMobile } from "utils/isMobile";
 
 import { BarGraphVertical, BarGraphHorizontal } from "@/components/BarGraph";
-import { BodyLink } from "@/components/BlankLink";
 import { BottomNav } from "@/components/BottomNav";
 import { ComponentWrapper } from "@/components/ComponentWrapper";
 import { Header } from "@/components/Header";
 import { PieChart } from "@/components/PieChart";
 import { SectionHeader } from "@/components/SectionHeader";
-import { Title } from "@/components/Title";
 import { WordCloud } from "@/components/WordCloud";
 
 import styles from "./samplePage.module.css";
@@ -31,12 +29,11 @@ export default function Demographics() {
   return (
     <div className={styles.page}>
       <Header />
-      <Title>Miscellaneous</Title>
       <SectionHeader title="Miscellaneous" subtitle="" />
 
       <ComponentWrapper
         heading="How often did you cry per school term?"
-        bodyText="University is an experience where students face all kinds of rough patches as they grow. To those reading this and feeling down, it does get better! We all need someone to talk to when things don't go well, so don't bury your feelings away with you."
+        bodyText="Crying is definitely okay and not unheard of in university. University is an experience where we can face all kinds of rough patches as we grow up and move away from our parents. To those reading this and feeling down, it does get better! Reach out to close ones and the mental health hotline when you're feeling down! We all need someone to talk to when things don't go well! Don't bury your feelings away with you."
         noBackground
       >
         <BarGraphVertical
@@ -48,18 +45,7 @@ export default function Demographics() {
 
       <ComponentWrapper
         heading="How many hours per week do you spend on the UW subreddit?"
-        bodyText={
-          <p>
-            There’s a reason why{" "}
-            <BodyLink href="https://www.reddit.com/r/uwaterloo/">
-              r/uwaterloo{" "}
-            </BodyLink>
-            is one of the most popular university Reddit communities. It is very
-            highly propelled by students, with over 87k members as of January
-            2023, and even has some profs on there too! Check it out if you
-            haven’t heard of it!
-          </p>
-        }
+        bodyText="There’s a reason why r/uwaterloo is one of the most popular University Reddit communities, very highly propelled by students but even has some profs on there too! Check it out if you haven’t heard of it :D"
         align="right"
       >
         <BarGraphVertical
@@ -71,7 +57,7 @@ export default function Demographics() {
 
       <ComponentWrapper
         heading="If you had to restart university, what program would you enroll in?"
-        bodyText="As expected, most respondents would still choose CS if given the chance to start over, but it’s great to see some respondents wanting to branch out into other areas like business and psychology! University provides you a great avenue to explore your interests, and it’s totally okay if the program you start out in is different from what you end up liking!"
+        bodyText="Good to see that most CS postgrads don’t necessarily regret doing CS or a related degree!"
         noBackground
       >
         <BarGraphHorizontal
@@ -84,7 +70,7 @@ export default function Demographics() {
 
       <ComponentWrapper
         heading="Have you considered dropping/transferring out of your program?"
-        bodyText="Roughly a quarter of respondents have considered dropping out at some point. Staying in a program that doesn't align with your interests or is too demanding are probably the main reasons a student might consider switching out to another program."
+        bodyText="Roughly ¼ of respondents have considered dropping at some point... Staying in a program that doesn't align with your interests or is too demanding are probably the main reasons a student might consider to switch out to another program."
         align="right"
       >
         <div className={styles.graphContainer}>
@@ -94,7 +80,7 @@ export default function Demographics() {
 
       <ComponentWrapper
         heading="Have you considered dropping out of university or transferring to another university?"
-        bodyText="Around one in six respondents thought about leaving or transferring, so you’re not alone if you have also considered this option! Wanting to transfer to another university can be caused by students feeling lonely in their program, feeling overwhelmed by the schoolwork required in that program, or disliking the UW campus/campus life."
+        bodyText="Around one over six thought about leaving or transferring, so you’re not alone if you have also considered this option! Wanting to transfer to another university can be caused by students feeling lonely in their program, feeling overwhelmed by the schoolwork required in that program, disliking the UW campus/campus life, etc."
         noBackground
       >
         <div className={styles.graphContainer}>
@@ -104,7 +90,7 @@ export default function Demographics() {
 
       <ComponentWrapper
         heading="If you couldn't go to UW, what would you have done instead?"
-        bodyText="The University of Toronto (UofT) was a popular answer possibly due to similarly reputable CS programs and for their research, but for better or for worse, all of our students choose UW instead. Meanwhile, the University of British Columbia (UBC) is known for its visually-appealing campus and number of highly-ranked programs, which could also explain its popularity."
+        bodyText="UofT is very popular here, but for better or worse, you all went to UW instead. :) Meanwhile, UBC is known for its pretty campus which could explain its popularity. A lot of entrepreneurs are also present."
         align="right"
       >
         <WordCloud
@@ -119,9 +105,8 @@ export default function Demographics() {
 
       <ComponentWrapper
         heading="In what areas have you grown that are unrelated to CS?"
-        bodyText="University is an unforgettable, life-changing, and learning experience that we only get once in a lifetime! Make the most out of it!"
+        bodyText="University is an unforgettable, life-changing, and learning experience that we only get once in a lifetime! Make the most out of it! :)"
         align="center"
-        noBackground
       >
         <WordCloud
           data={M7}
@@ -136,7 +121,7 @@ export default function Demographics() {
       <BottomNav
         leftPage={pageRoutes.friends}
         rightPage={pageRoutes.mentalHealth}
-      />
+      ></BottomNav>
     </div>
   );
 }

pages/personal.tsx

@@ -7,7 +7,6 @@ import { ComponentWrapper } from "@/components/ComponentWrapper";
 import { Header } from "@/components/Header";
 import { QuotationCarousel } from "@/components/QuotationCarousel";
 import { SectionHeader } from "@/components/SectionHeader";
-import { Title } from "@/components/Title";
 
 import styles from "./samplePage.module.css";
 
@@ -15,12 +14,11 @@ export default function Personal() {
   return (
     <div className={styles.page}>
       <Header />
-      <Title>Personal</Title>
       <SectionHeader title="Personal" subtitle="Life lessons from students" />
 
       <ComponentWrapper
         heading="What is your favourite memory from your time at UW?"
-        bodyText="Most students' favourite memories relate to their time spent with friends and significant others! This goes to show how important the people around us are!"
+        bodyText="Most students' favourite memory relates to their time spent with friends and significant ones! This goes to show how friends are an important factor to our happiness! :D"
         align="right"
       >
         <div className={styles.quotationCarouselContainer}>
@@ -30,7 +28,7 @@ export default function Personal() {
 
       <ComponentWrapper
         heading="What is one thing that you wish you could tell your first year self?"
-        bodyText="In summary, don't spend too much time worrying about your grades or co-op during university. Develop new hobbies, be more open-minded, and talk to more people. There's a lot to experience in university that you don't want to miss or regret not being a part of. And as always, remember to drink responsibly!"
+        bodyText="In summary, don't spend too much time worrying about your grades or coop during university. Develop new hobbies, be more open-minded, and talk to more people! There's a lot to experience in university that you don't want to miss or regret! Drink responsibly!"
         noBackground
       >
         <div className={styles.quotationCarouselContainer}>
@@ -49,7 +47,7 @@ export default function Personal() {
 
       <ComponentWrapper
         heading="What is the nicest thing a classmate did for you?"
-        bodyText="Any small act of kindness can make someone else's day and possibly remain etched in their memory for a lifetime. We see that a lot of respondents' classmates helped them with their assignments and exams. Some respondents fondly remember when their classmate asked them if they were okay and struck up a conversation with them."
+        bodyText="Any small act of kindness can make someone else's day and remain etched in their memory for a lifetime! We see that a lot of the respondants' classmates helped them with their assignments and exams. Some participants remember fondly when their classmate asked them if they were ok and struck a conversation with them!"
         noBackground
       >
         <div className={styles.quotationCarouselContainer}>
@@ -59,7 +57,7 @@ export default function Personal() {
 
       <ComponentWrapper
         heading="What is the best life hack/tip?"
-        bodyText="We have a wide range of life hacks about submitting assignments, coding shortcuts, and living healthily. Take notes and use them to your advantage!"
+        bodyText="We have a range of life hacks around submitting assignments, coding shortcuts, living a healthy life (sleeping and eating well), etc. Take notes! ;)"
         align="right"
       >
         <div className={styles.quotationCarouselContainer}>
@@ -69,7 +67,7 @@ export default function Personal() {
 
       <ComponentWrapper
         heading="What is the best lesson you learned from your time at UW?"
-        bodyText="In short, challenge yourself to get out of your comfort zone; new opportunities and experiences can help you grow and you might even find something new that you really enjoy! A lot of the small, insignificant things you worry about won't matter in the end. Most importantly, be sure to take care of yourself, enjoy your life and savour each moment!"
+        bodyText="In short, always say 'yes' to opportunities as it can lead you to new experiences in life that you may enjoy! A lot of the small insignificant things you worry about won't matter at the end. Take care of yourself. Most importantly, enjoy your life is a message that most students agree with."
         noBackground
       >
         <div className={styles.quotationCarouselContainer}>
@@ -79,7 +77,7 @@ export default function Personal() {
 
       <ComponentWrapper
         heading="What is one aspect of your life that makes you the happiest?"
-        bodyText="Both romantic and platonic relationships, as well as hobbies, are the areas of respondents’ lives that make them the happiest!"
+        bodyText="Relationships whether friendships or romantic ones and hobbies are the aspects of CS 2022 students' life that make them the happiest!"
         align="right"
       >
         <div className={styles.quotationCarouselContainer}>
@@ -89,7 +87,7 @@ export default function Personal() {
 
       <ComponentWrapper
         heading="What advice would you give current/future CS students at UW?"
-        bodyText="The main takeaways here are to be social, take care of yourself and your mental health, and do things beyond just school and co-op. UW is a truly unique experience and you should try to make the most of all aspects of it!"
+        bodyText="Big recap: Socialize. Take care of yourself and your mental health. Do things beyond school and coop."
         noBackground
         align="center"
       >
@@ -106,7 +104,7 @@ export default function Personal() {
       <BottomNav
         leftPage={pageRoutes.mentalHealth}
         rightPage={pageRoutes.contributors}
-      />
+      ></BottomNav>
     </div>
   );
 }

pages/playground.tsx

@@ -125,9 +125,7 @@ export default function Home() {
         data={mockStackedBarGraphData}
         margin={{
           top: 20,
-          left: 28,
-          right: 20,
-          bottom: 20,
+          left: 20,
         }}
       />
 
@@ -149,10 +147,8 @@ export default function Home() {
         ]}
         data={mockStackedBarGraphData}
         margin={{
-          top: 60,
+          top: 20,
           left: 20,
-          right: 20,
-          bottom: 40,
         }}
       />
 

pages/post-grad.tsx

@@ -18,7 +18,6 @@ import { ComponentWrapper } from "@/components/ComponentWrapper";
 import { Header } from "@/components/Header";
 import { PieChart } from "@/components/PieChart";
 import { SectionHeader } from "@/components/SectionHeader";
-import { Title } from "@/components/Title";
 import { WordCloud } from "@/components/WordCloud";
 
 import styles from "./samplePage.module.css";
@@ -30,31 +29,25 @@ export default function Demographics() {
   return (
     <div className={styles.page}>
       <Header />
-      <Title>Post-grad</Title>
       <SectionHeader
         title="Post-grad"
-        subtitle="Furthering your Computer Science Academic Journey"
+        subtitle="Further Computer Science Academic Journey"
       />
 
       <ComponentWrapper
-        heading="Do you plan on pursuing postgraduate education?"
-        bodyText="There are a total of 103 respondents to this section. There is a large number of students not pursuing postgraduate studies. Postgraduate education is not necessarily for everyone!"
+        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"
         noBackground
       >
         <div className={styles.graphContainer}>
-          <PieChart
-            data={P1}
-            {...pieChartProps(isMobile, pageWidth)}
-            labelTextSize={20}
-            minWidth={500}
-          />
+          <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, but how many of those received return offers from the companies that they’ve interned at? Regardless, it seems that the 2 years worth of work experience in the co-op program has paid off!"
+        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)} />
@@ -63,7 +56,7 @@ export default function Demographics() {
 
       <ComponentWrapper
         heading="Are you returning to a prior co-op?"
-        bodyText="It looks like most people that have a full-time position have gotten it from a return offer! This goes to show how the co-op program improves the students' employability and allows them to find jobs that they enjoy."
+        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
       >
@@ -74,7 +67,7 @@ export default function Demographics() {
 
       <ComponentWrapper
         heading="Where will you be working from post grad? (City, State/Province, Country)"
-        bodyText="New York and California are huge hot spots here, and it’s great to see that these programs can propel students to go to so many different places. Interestingly, a large majority of respondents will be working in the USA post-grad. This brain drain shows the wealth of opportunities available in computer science in the USA compared to Canada."
+        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
@@ -89,7 +82,7 @@ export default function Demographics() {
 
       <ComponentWrapper
         heading="How many offers did you decide between?"
-        bodyText="Over half of the respondents only had to decide between 1 or 2 offers and 35% of them chose between 3+ offers!"
+        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)} />
@@ -97,7 +90,7 @@ export default function Demographics() {
 
       <ComponentWrapper
         heading="How many onsites/interviews did you get?"
-        bodyText="49 out of 69 respondents had at least one onsite/interview. Out of these students, more people had at least 4 of them! Note that some respondents may not have had any interviews because they could be taking a return offer. "
+        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
@@ -109,8 +102,8 @@ export default function Demographics() {
       </ComponentWrapper>
 
       <ComponentWrapper
-        heading="What will be your first-year total compensation in CAD?"
-        bodyText="The tech field has interesting levels of annual compensation - these numbers speak for themselves… Compensation can include a combination of salary, signing, first-year stock, and bonus. Many numbers are converted from USD to CAD. The conversion rate was approximately 1 USD = 1.26 CAD during the time frame of the survey."
+        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
@@ -122,8 +115,8 @@ export default function Demographics() {
       </ComponentWrapper>
 
       <ComponentWrapper
-        heading="What field/career path will you be in post-grad?"
-        bodyText="Computer science degrees can lead to so many different things these days! Web development is a popular field with the presence of web apps. Artificial intelligence and data science are also becoming increasingly popular fields as they continue to innovate our approaches to solving business problems. Cloud computing is also growing in demand by virtualizing IT infrastructure, reducing its costs, and improving its scalability."
+        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
@@ -139,7 +132,7 @@ export default function Demographics() {
       <BottomNav
         leftPage={pageRoutes.intimacyAndDrugs}
         rightPage={pageRoutes.friends}
-      />
+      ></BottomNav>
     </div>
   );
 }

pages/samplePage.tsx

@@ -13,12 +13,10 @@ import { useIsMobile } from "utils/isMobile";
 import { BarGraphVertical, BarGraphHorizontal } from "@/components/BarGraph";
 import { BottomNav } from "@/components/BottomNav";
 import { BoxPlot } from "@/components/Boxplot";
-import { ComponentSwitcher } from "@/components/ComponentSwitcher";
 import { ComponentWrapper } from "@/components/ComponentWrapper";
 import { Header } from "@/components/Header";
 import { LineGraph } from "@/components/LineGraph";
 import { SectionHeader } from "@/components/SectionHeader";
-import { SectionWrapper } from "@/components/SectionWrapper";
 import { WordCloud } from "@/components/WordCloud";
 
 import styles from "./samplePage.module.css";
@@ -48,107 +46,10 @@ export default function SamplePage() {
   return (
     <div className={styles.page}>
       <Header />
-      <SectionWrapper title="Transfer" />
       <SectionHeader
         title="Demographics"
         subtitle="An insight into the demographics of UW’s CS programs"
       />
-      <ComponentWrapper
-        heading="TESTING?"
-        bodyText="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
-        align="right"
-        noBackground
-      >
-        <ComponentSwitcher
-          graphList={[
-            <BarGraphHorizontal
-              className={styles.barGraphDemo}
-              data={mockCategoricalData}
-              width={defaultGraphWidth}
-              height={defaultGraphHeight}
-              margin={defaultHorizontalBarGraphMargin}
-              key={1}
-            />,
-            <LineGraph
-              data={mockLineData}
-              width={defaultGraphWidth}
-              height={417}
-              margin={{
-                top: 20,
-                bottom: 80,
-                left: 30,
-                right: 20,
-              }}
-              colorRange={[Color.primaryAccent, Color.secondaryAccentLight]}
-              key={1}
-            />,
-            <BarGraphHorizontal
-              className={styles.barGraphDemo}
-              data={mockCategoricalData}
-              width={defaultGraphWidth}
-              height={defaultGraphHeight}
-              margin={defaultHorizontalBarGraphMargin}
-              key={1}
-            />,
-            <LineGraph
-              data={mockLineData}
-              width={defaultGraphWidth}
-              height={417}
-              margin={{
-                top: 20,
-                bottom: 80,
-                left: 30,
-                right: 20,
-              }}
-              colorRange={[Color.primaryAccent, Color.secondaryAccentLight]}
-              key={1}
-            />,
-            <BarGraphHorizontal
-              className={styles.barGraphDemo}
-              data={mockCategoricalData}
-              width={defaultGraphWidth}
-              height={defaultGraphHeight}
-              margin={defaultHorizontalBarGraphMargin}
-              key={1}
-            />,
-            <LineGraph
-              data={mockLineData}
-              width={defaultGraphWidth}
-              height={417}
-              margin={{
-                top: 20,
-                bottom: 80,
-                left: 30,
-                right: 20,
-              }}
-              colorRange={[Color.primaryAccent, Color.secondaryAccentLight]}
-              key={1}
-            />,
-            <BarGraphHorizontal
-              className={styles.barGraphDemo}
-              data={mockCategoricalData}
-              width={defaultGraphWidth}
-              height={defaultGraphHeight}
-              margin={defaultHorizontalBarGraphMargin}
-              key={1}
-            />,
-            <LineGraph
-              data={mockLineData}
-              width={defaultGraphWidth}
-              height={417}
-              margin={{
-                top: 20,
-                bottom: 80,
-                left: 30,
-                right: 20,
-              }}
-              colorRange={[Color.primaryAccent, Color.secondaryAccentLight]}
-              key={1}
-            />,
-          ]}
-          buttonList={["1A", "1B", "2A", "2B", "3A", "3B", "4A", "4B"]}
-        />
-      </ComponentWrapper>
       <ComponentWrapper
         heading="What program are you in?"
         bodyText="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
@@ -164,7 +65,6 @@ export default function SamplePage() {
         heading="What program are you in?"
         bodyText="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
         align="center"
-        noBackground
       >
         <WordCloud
           data={moreMockCategoricalData.map((word) => ({
@@ -234,11 +134,7 @@ export default function SamplePage() {
           height={defaultGraphHeight}
         />
       </ComponentWrapper>
-      <ComponentWrapper
-        heading="What program are you in?"
-        align="center"
-        noBackground
-      >
+      <ComponentWrapper heading="What program are you in?" align="center">
         <WordCloud
           data={moreMockCategoricalData.map((word) => ({
             text: word.key,
@@ -261,7 +157,8 @@ export default function SamplePage() {
       <ComponentWrapper
         heading="What program are you in?"
         bodyText="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
-        align="left"
+        align="right"
+        noBackground
       >
         <BarGraphHorizontal
           className={styles.barGraphDemo}
@@ -273,9 +170,18 @@ export default function SamplePage() {
       </ComponentWrapper>
       <ComponentWrapper
         heading="What program are you in?"
-        align="center"
-        noBackground
+        bodyText="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
+        align="left"
       >
+        <BarGraphHorizontal
+          className={styles.barGraphDemo}
+          data={mockCategoricalData}
+          width={defaultGraphWidth}
+          height={defaultGraphHeight}
+          margin={defaultHorizontalBarGraphMargin}
+        />
+      </ComponentWrapper>
+      <ComponentWrapper heading="What program are you in?" align="center">
         <BoxPlot
           width={600}
           height={400}

scripts/convertDataToTextAndValue.py

@@ -1,26 +0,0 @@
-data1 = {"":25,"ConsenSys":2,"Google":3,"Imagine Communications":2,"Tricolops Technology Inc":1,"Citadel":1,"Konrad Group":1,"DragonAgile":1,"York Region":1,"fb":1,"TD":1,"Hubdoc":1,"Dell EMC":1,"Nokia":1,"RBC":3,"Mawer Investment Management":1,"Jasper":1,"Clearpath Robotics":1,"Procom":1,"CIBC":2,"Yuan Control Technology":1,"RiverPay Inc.":1,"rbc capital markets":1,"Exiger":1,"Infrastructure Ontario":1,"Seismic Software, Inc.":1,"Encircle Inc.":1,"IBM":1,"P&P Optica":1,"University of Waterloo":2,"Martello":1,"Polar":1,"MCAP":1,"EQ Bank":1,"Kinaxis":1,"CAE":1,"Computer Talk Technology":1,"ADP":1,"Finastra":2,"reachwebexperts":1,"Marlena Books":1,"TeamX Technologies Inc.":1,"Carego Tek":1,"Ford":1,"John Hancock Financial":1,"Infinera":1,"SnapCommerce":1,"Scotiabank":1,"TD Bank":1,"dfhhrtg":1,"GOOGLE":1,"Hilti":1,"NCR":1,"Microsoft":2,"Uber ATG":1,"Connected":1,"Government of Ontario":1,"Opentext":1,"Synqrinus":1,"PointClickCare":1,"Flipp":1,"Bold Commerce":1,"Honeywell":1,"Ultimate software":1,"Symantec":1,"Innunco Academy":1,"BlackBerry":1,"OLG":1,"Encircle":1,"YuJa":1,"WSIB":1,"NeuroBlot":1,"Achievers":1,"Rich media":1,"Gay Lea":1,"TD Lab":1}
-data2 = {"":34,"League":1,"Snap Inc.":2,"Amazon":1,"Avenza System":1,"Citadel":1,"Konrad Group":1,"Arrowstreet Capital":1,"D2L":1,"Splunk":1,"Connected":2,"Consensys":1,"SideFX":2,"Tribalscale":1,"Redfin":1,"CPP Investment Board":1,"Jasper":1,"The Co-operators":1,"Bdo ":1,"Novus Health":1,"KeepTruckin Inc.":1,"scotiabank":1,"Wish":1,"BMO Capital Markets":1,"SAP Labs":1,"Level Home Inc.":1,"Clearbanc":1,"Escrypt":1,"Scotiabank":1,"Uber ATG":1,"ConsenSys":1,"TD":1,"The Cooperators":1,"NCR":1,"University of Waterloo":1,"Loopio":1,"Blackberry":1,"Hubdoc":1,"ruby":1,"Clearbridge Mobile":1,"Kaleidescape":1,"Yahoo":1,"CIBC":1,"Secret Mission Software":1,"Arup":1,"Canadian Security Intelligence Service":1,"Ford":2,"Google":2,"Asana":1,"Shopify":2,"Shareworks By Morgan Stanley":1,"Ritual ":1,"hdfhdfgh":1,"Fleet Complete":1,"Microsoft":1,"Rippling":1,"Nuance Communications":1,"North":1,"Intelex":1,"StackAdapt":1,"Honeywell":1,"Ultimate software":1,"Auvik":1,"Accedo":1,"Genesys":1,"YuJa":1,"VirtaMove":1,"LevelJump":1,"Intel ":1,"Kenna":1,"Wattpad":1}
-data3 = {"":35,"Wish":7,"Google":4,"LinkedIn":1,"Condos.ca":1,"Hudson River Trading":2,"IBM":1,"Jane Street":1,"A Thinking Ape":1,"Tableau":1,"Postmates":1,"Citadel":1,"TextNow":1,"Khazanah Americas Investments":1,"Brisk Synerges":1,"DarwinAI":1,"hyperPad":1,"CI Technologies":1,"Yahoo":1,"Carrot Inc.":1,"scotiabank":1,"Scribd":1,"TD Asset Management":1,"Facebook":1,"Google LLC":1,"Darkvision":1,"Flipp":1,"Nvidia":1,"KitchenMate":1,"Local Line":1,"Miovision":1,"SAP":1,"Behaviour Interactive":1,"DNAstack":1,"Uken Games":2,"Deloitte":1,"huawei":1,"Inscopix":1,"Ultimate software":1,"Pixlee":1,"Uber ATG":2,"Splunk":1,"Kofax":1,"Circle Internet Financial":1,"Huawei":1,"Birch Hill Equity":1,"fhjfghfd":1,"Thomson Reuters":1,"Faire":2,"Ops Level":1,"Asana":1,"Cooperators":1,"Salesforce":1,"Arctic Wolf":1,"Loblaw Digital":1,"Shopify":1,"Textnow":1,"Bluescape":1,"BlackBerry":1,"Manulife":1,"Curvegrid":1,"Kenna":1,"Wish ":1}
-data4 = {"":38,"Shopify":3,"Riot Games":2,"Wish":5,"Bloomberg":2,"Jane Street":2,"ServiceNow":1,"Hudson River Trading":1,"Electronic Arts":1,"data.world":1,"Citadel":1,"Google":4,"Boosted.ai":1,"Amazon":1,"Akasha Imaging":1,"Together software ":1,"Rocket Innovation Studio":1,"Wise Systems":1,"veeva systems":1,"University of Waterloo":2,"Manulife Financial":1,"University of Waterloo, Department of Combinatorics & Optimization":1,"Virtek Vision":1,"1Password":1,"Side Effects Software":1,"KitchenMate":1,"NerdWallet":1,"Later":1,"SAP":2,"Uken Games ":1,"Process Fusion ":1,"ZeMind Game Studio":1,"capital one":1,"Apple":2,"Ultimate software":1,"Pencil Learning Technologies":1,"Uber ATG":1,"Virtu Financial":1,"GTS":1,"NVIDIA":1,"Coherent Logix":1,"Property.ca":1,"dfgfdhfg":1,"Thomson Reuters":1,"Faire":1,"OMERS":1,"Coinbase":1,"Loblaw Digital":1,"BitGo":1,"Twitch":1,"Appficiency":1,"Auvik":1,"RBC":1,"Huawei":1,"Curvegrid":1,"Sheertex":1,"Tucows":1,"Shopify ":1}
-data5 = {"":39,"Riot Games":1,"Google":4,"LinkedIn":2,"Bloomberg":4,"Jane Street":4,"Lyft":1,"Amazon":6,"Nvidia":1,"Facebook":5,"Twitch":1,"Akasha Imaging":1,"Honey":1,"A thinking ape":1,"Opal":1,"Salesforce Inc.":1,"lifion":1,"The Co-operators":1,"Microsoft Research":1,"HomeX Labs":1,"NVIDIA":1,"Wish":1,"1Password":2,"Hudson River Trading":1,"StackAdapt":1,"NerdWallet":1,"Autodesk":1,"Cerebras":1,"IBM":1,"Carrot":1,"capital one":1,"Snowflake":1,"Coffee Meets Bagel":1,"Tophatter":2,"Cisco Meraki":1,"GTS":1,"Citadel":1,"Arctic Wolf ":1,"hgdfhefd":1,"Meta":1,"D2L":1,"Yugabyte":1,"Vidyard":1,"Datadog":2,"Facebook/Meta":1,"Wave":1,"RBC":1,"Research group at University of Waterloo":1,"Lyft Inc":1,"Thomson Reuters":1}
-data6 = {"":56,"Lyft":1,"Noom Inc.":2,"Facebook":3,"Whist":1,"Jane Street":4,"Databricks":2,"Meta":4,"Tableau":1,"Bloomberg":2,"YouTube/Google":1,"Boosted.ai":1,"Citadel":3,"Akasha Imaging":1,"PayPal":1,"Nvidia":1,"Yugabyte":2,"Carrot Inc.":1,"Twitter":1,"Hudson River Trading":1,"GTS":1,"Tesla":1,"BitGo":1,"CSE":1,"Voiceflow":1,"Adentro":1,"Verkada":1,"stackadapt":1,"Datadog":2,"EA":1,"Soundhound":1,"Wish":2,"BetterUp":1,"fdgdhdfg":1,"Instagram":1,"Faire":1,"Shopify":1,"Coursera":1,"Salesforce":1} 
-
-# Clean names are names all lowercase
-
-cleanNameToRealName = {}
-cleanNameToVal = {}
-
-for name, value in data6.items():
-	cleanName = name.lower();
-	cleanNameToVal[cleanName] = cleanNameToVal.get(cleanName, 0 ) + value
-	cleanNameToRealName[cleanName] = name
-
-
-print("[")
-for cleanName, val in cleanNameToVal.items():
-	print("{")
-	print(f"text : \"{cleanNameToRealName[cleanName]}\",")
-	print(f"value : {cleanNameToVal[cleanName]}"),
-	print("},")
-print("]")
-

utils/Color.ts

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

utils/defaultProps.ts

@@ -32,7 +32,7 @@ export const barGraphMargin = {
 export const DefaultProp: { [key in PropName]: number } = {
   graphHeight: 500,
   labelSize: 24,
-  labelWidth: 120,
+  labelWidth: 100,
 };
 
 export const barGraphProps = (isMobile: boolean, pageWidth: number) => {
@@ -50,5 +50,3 @@ export const pieChartProps = (isMobile: boolean, pageWidth: number) => {
     labelTextSize: DefaultProp.labelSize,
   };
 };
-
-export const termsList = ["1A", "1B", "2A", "2B", "3A", "3B", "4A", "4B"];

utils/getBasePath.ts

@@ -1,6 +0,0 @@
-import config from "next/config";
-// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-const { publicRuntimeConfig } = config();
-// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-const basePath = publicRuntimeConfig.basePath as string;
-export { basePath };