Merge branch 'main' into b72zhou-miscellaneous-page
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
commit
112f5dfd82
|
|
@ -0,0 +1,4 @@
|
|||
.sectionWrapper h2 {
|
||||
color: var(--primary-heading);
|
||||
padding-left: 4rem;
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import React from "react";
|
||||
|
||||
import styles from "./SectionWrapper.module.css";
|
||||
|
||||
type SectionWrapperProps = {
|
||||
title: string;
|
||||
};
|
||||
|
||||
export function SectionWrapper({ title }: SectionWrapperProps) {
|
||||
return (
|
||||
<div className={styles.sectionWrapper}>
|
||||
<h2>{title}</h2>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -7,7 +7,6 @@
|
|||
}
|
||||
|
||||
.legend {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
font-size: calc(16rem / 16);
|
||||
top: 0;
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@ export const StackedBarGraphVertical = withTooltip<
|
|||
strokeDashArray = "10,4",
|
||||
legendLeftOffset = 40,
|
||||
legendTopOffset = 40,
|
||||
itemMargin = "15px 0 0 0",
|
||||
itemMargin = "0 0 0 15px",
|
||||
categoryAxisLeftFactor = 1,
|
||||
tooltipOpen,
|
||||
tooltipLeft,
|
||||
|
|
@ -134,6 +134,18 @@ export const StackedBarGraphVertical = withTooltip<
|
|||
|
||||
return width < 10 ? null : (
|
||||
<div className={styles.container}>
|
||||
<div
|
||||
className={styles.legend}
|
||||
style={{ left: width + legendLeftOffset, top: legendTopOffset }}
|
||||
>
|
||||
<LegendOrdinal
|
||||
scale={colorScale}
|
||||
direction="row"
|
||||
itemMargin={itemMargin}
|
||||
labelAlign="center"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<svg width={width} height={height}>
|
||||
<Group top={margin.top} left={margin.left}>
|
||||
<GridRows
|
||||
|
|
@ -238,16 +250,6 @@ export const StackedBarGraphVertical = withTooltip<
|
|||
/>
|
||||
</Group>
|
||||
</svg>
|
||||
<div
|
||||
className={styles.legend}
|
||||
style={{ left: width + legendLeftOffset, top: legendTopOffset }}
|
||||
>
|
||||
<LegendOrdinal
|
||||
scale={colorScale}
|
||||
direction="column"
|
||||
itemMargin={itemMargin}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{tooltipOpen && tooltipData ? (
|
||||
<TooltipWrapper
|
||||
|
|
@ -283,7 +285,7 @@ export const StackedBarGraphHorizontal = withTooltip<
|
|||
strokeDashArray = "10,4",
|
||||
legendLeftOffset = 40,
|
||||
legendTopOffset = 40,
|
||||
itemMargin = "15px 0 0 0",
|
||||
itemMargin = "0 0 0 15px",
|
||||
categoryAxisLeftFactor = 1,
|
||||
tooltipOpen,
|
||||
tooltipLeft,
|
||||
|
|
@ -329,6 +331,17 @@ export const StackedBarGraphHorizontal = withTooltip<
|
|||
|
||||
return width < 10 ? null : (
|
||||
<div className={styles.container}>
|
||||
<div
|
||||
className={styles.legend}
|
||||
style={{ left: width + legendLeftOffset, top: legendTopOffset }}
|
||||
>
|
||||
<LegendOrdinal
|
||||
scale={colorScale}
|
||||
direction="row"
|
||||
itemMargin={itemMargin}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<svg width={width} height={height}>
|
||||
<Group top={margin.top} left={margin.left}>
|
||||
<GridRows
|
||||
|
|
@ -426,16 +439,6 @@ export const StackedBarGraphHorizontal = withTooltip<
|
|||
/>
|
||||
</Group>
|
||||
</svg>
|
||||
<div
|
||||
className={styles.legend}
|
||||
style={{ left: width + legendLeftOffset, top: legendTopOffset }}
|
||||
>
|
||||
<LegendOrdinal
|
||||
scale={colorScale}
|
||||
direction="column"
|
||||
itemMargin={itemMargin}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{tooltipOpen && tooltipData ? (
|
||||
<TooltipWrapper
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,725 @@
|
|||
export const L1 = [
|
||||
{
|
||||
category: "Yes",
|
||||
value: 85,
|
||||
},
|
||||
{
|
||||
category: "No",
|
||||
value: 15,
|
||||
},
|
||||
];
|
||||
|
||||
export const L2 = [
|
||||
{
|
||||
category: "3+",
|
||||
value: 85.5,
|
||||
},
|
||||
{
|
||||
category: "2",
|
||||
value: 12.5,
|
||||
},
|
||||
{
|
||||
category: "1",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
category: "0",
|
||||
value: 1,
|
||||
},
|
||||
];
|
||||
|
||||
export const L3 = [
|
||||
{
|
||||
category: "Never",
|
||||
value: 76,
|
||||
},
|
||||
{
|
||||
category: "No longer",
|
||||
value: 5,
|
||||
},
|
||||
{
|
||||
category: "Still",
|
||||
value: 19,
|
||||
},
|
||||
{
|
||||
category: "Became",
|
||||
value: 2,
|
||||
},
|
||||
];
|
||||
|
||||
export const L4 = [
|
||||
{
|
||||
category: "Yes",
|
||||
value: 55,
|
||||
},
|
||||
{
|
||||
category: "No",
|
||||
value: 12.5,
|
||||
},
|
||||
{
|
||||
category: "Knew",
|
||||
value: 34,
|
||||
},
|
||||
];
|
||||
|
||||
export const L5 = [
|
||||
{
|
||||
category: "0",
|
||||
value: 9,
|
||||
},
|
||||
{
|
||||
category: "1",
|
||||
value: 6,
|
||||
},
|
||||
{
|
||||
category: "2",
|
||||
value: 12,
|
||||
},
|
||||
{
|
||||
category: "3",
|
||||
value: 24,
|
||||
},
|
||||
{
|
||||
category: "4",
|
||||
value: 16,
|
||||
},
|
||||
{
|
||||
category: "5",
|
||||
value: 17,
|
||||
},
|
||||
{
|
||||
category: "6",
|
||||
value: 11,
|
||||
},
|
||||
{
|
||||
category: "7",
|
||||
value: 8,
|
||||
},
|
||||
];
|
||||
|
||||
export const L6 = [
|
||||
{
|
||||
category: "Few times a week",
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
category: "Weekly",
|
||||
value: 6,
|
||||
},
|
||||
{
|
||||
category: "Once every few weeks",
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
category: "Monthly",
|
||||
value: 7,
|
||||
},
|
||||
{
|
||||
category: "Once every few months",
|
||||
value: 43,
|
||||
},
|
||||
{
|
||||
category: "Never",
|
||||
value: 41,
|
||||
},
|
||||
];
|
||||
|
||||
export const L7 = [
|
||||
{
|
||||
category: "Strongly agree",
|
||||
value: 9,
|
||||
},
|
||||
{
|
||||
category: "Agree",
|
||||
value: 43,
|
||||
},
|
||||
{
|
||||
category: "Neither",
|
||||
value: 19,
|
||||
},
|
||||
{
|
||||
category: "Disagree",
|
||||
value: 26,
|
||||
},
|
||||
{
|
||||
category: "Strongly disagree",
|
||||
value: 7,
|
||||
},
|
||||
];
|
||||
|
||||
export const L8 = [
|
||||
{
|
||||
category: "Almost every week",
|
||||
value: 12,
|
||||
},
|
||||
{
|
||||
category: "Couple times per month",
|
||||
value: 36,
|
||||
},
|
||||
{
|
||||
category: "Monthly",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
category: "Holidays only",
|
||||
value: 18,
|
||||
},
|
||||
{
|
||||
category: "Rarely",
|
||||
value: 35,
|
||||
},
|
||||
];
|
||||
|
||||
export const L9 = [
|
||||
{
|
||||
category: "Before 9",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
category: "9pm - 11pm",
|
||||
value: 11,
|
||||
},
|
||||
{
|
||||
category: "11pm - 1am",
|
||||
value: 29,
|
||||
},
|
||||
{
|
||||
category: "1am - 3am",
|
||||
value: 46,
|
||||
},
|
||||
{
|
||||
category: "3am - 5am",
|
||||
value: 12,
|
||||
},
|
||||
{
|
||||
category: "5am onwards",
|
||||
value: 3,
|
||||
},
|
||||
];
|
||||
|
||||
export const L10 = [
|
||||
{
|
||||
category: "0-2",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
category: "3-4",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
category: "5-6",
|
||||
value: 30,
|
||||
},
|
||||
{
|
||||
category: "7-8",
|
||||
value: 63,
|
||||
},
|
||||
{
|
||||
category: "9+",
|
||||
value: 8,
|
||||
},
|
||||
];
|
||||
|
||||
export const L11 = [
|
||||
{
|
||||
category: "0",
|
||||
value: 8,
|
||||
},
|
||||
{
|
||||
category: "1",
|
||||
value: 13,
|
||||
},
|
||||
{
|
||||
category: "2",
|
||||
value: 19,
|
||||
},
|
||||
{
|
||||
category: "3",
|
||||
value: 21,
|
||||
},
|
||||
{
|
||||
category: "4",
|
||||
value: 10,
|
||||
},
|
||||
{
|
||||
category: "5",
|
||||
value: 18,
|
||||
},
|
||||
{
|
||||
category: "6",
|
||||
value: 6,
|
||||
},
|
||||
{
|
||||
category: "7",
|
||||
value: 9,
|
||||
},
|
||||
];
|
||||
|
||||
export const L12 = [
|
||||
{
|
||||
text: "Gol's Lanzhou Noodle",
|
||||
value: 15,
|
||||
},
|
||||
{
|
||||
text: "Lazeez Shawarma",
|
||||
value: 5,
|
||||
},
|
||||
{
|
||||
text: "Nuri Village",
|
||||
value: 5,
|
||||
},
|
||||
{
|
||||
text: "Ken's sushi",
|
||||
value: 8,
|
||||
},
|
||||
{
|
||||
text: "Williams Fresh Cafe",
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
text: "Song's Lamian",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
text: "Shinwa",
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
text: "Oka Sushi",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
text: "Mel's",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
text: "Shawarma Plus",
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
text: "iPotato",
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
text: "Kim's Kitchen",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
text: "Baba grill",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
text: "Waterloo Star",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
text: "Loobapbap",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
text: "Momo",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
text: "Onnuri",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
text: "Kinkaku",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
text: "Tim Hortons",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
text: "Fresh Burrito",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
text: "Home Garden - Taste of Taiwan",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
text: "Yangyum",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
text: "Mozy's",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
text: "Rolltations",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
text: "Harvey's",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
text: "Fantastic Wok",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
text: "Foodie Fruitie",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
text: "Bao Sandwich Bar",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
text: "Soul Seoul",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
text: "Burrito Boyz",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
text: "Poke Box",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
text: "Thai Express",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
text: "Molly blooms",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
text: "Better Chef",
|
||||
value: 1,
|
||||
},
|
||||
];
|
||||
|
||||
export const L13 = [
|
||||
{
|
||||
category: "Sometimes easy",
|
||||
value: 5,
|
||||
},
|
||||
{
|
||||
category: "Always easy",
|
||||
value: 5,
|
||||
},
|
||||
{
|
||||
category: "Always easy and sometimes medium",
|
||||
value: 25,
|
||||
},
|
||||
{
|
||||
category: "Always easy and medium",
|
||||
value: 22,
|
||||
},
|
||||
{
|
||||
category: "Always medium and sometimes hard",
|
||||
value: 32,
|
||||
},
|
||||
{
|
||||
category: "Always medium and hard",
|
||||
value: 10,
|
||||
},
|
||||
];
|
||||
|
||||
export const L14 = [
|
||||
{
|
||||
category: "0",
|
||||
value: 22,
|
||||
},
|
||||
{
|
||||
category: "1",
|
||||
value: 18,
|
||||
},
|
||||
{
|
||||
category: "2",
|
||||
value: 22,
|
||||
},
|
||||
{
|
||||
category: "3",
|
||||
value: 21,
|
||||
},
|
||||
{
|
||||
category: "4",
|
||||
value: 5,
|
||||
},
|
||||
{
|
||||
category: "5",
|
||||
value: 8,
|
||||
},
|
||||
{
|
||||
category: "6",
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
category: "7",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
category: "8",
|
||||
value: 1,
|
||||
},
|
||||
];
|
||||
|
||||
export const L16 = [
|
||||
{
|
||||
category: "Never or rarely",
|
||||
value: 89.1,
|
||||
},
|
||||
{
|
||||
category: "1+ per year",
|
||||
value: 9.9,
|
||||
},
|
||||
{
|
||||
category: "Weekly",
|
||||
value: 1,
|
||||
},
|
||||
];
|
||||
|
||||
export const L17 = [
|
||||
{
|
||||
text: "MathSoc",
|
||||
value: 9,
|
||||
},
|
||||
{
|
||||
text: "Blueprint",
|
||||
value: 8,
|
||||
},
|
||||
{
|
||||
text: "Muay Thai",
|
||||
value: 8,
|
||||
},
|
||||
{
|
||||
text: "Volleyball",
|
||||
value: 6,
|
||||
},
|
||||
{
|
||||
text: "Dodgeball",
|
||||
value: 6,
|
||||
},
|
||||
{
|
||||
text: "Frisbee",
|
||||
value: 7,
|
||||
},
|
||||
{
|
||||
text: "CSC",
|
||||
value: 5,
|
||||
},
|
||||
{
|
||||
text: "Basketball",
|
||||
value: 6,
|
||||
},
|
||||
{
|
||||
text: "UWACC",
|
||||
value: 5,
|
||||
},
|
||||
{
|
||||
text: "Badminton",
|
||||
value: 5,
|
||||
},
|
||||
{
|
||||
text: "Watonomous",
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
text: "WiCS",
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
text: "Tech+",
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
text: "Chess",
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
text: "PMC",
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
text: "HipHop",
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
text: "Orchestra",
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
text: "Waterloop",
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
text: "Soccer",
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
text: "DSC",
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
text: "Hack the North",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
text: "ACE",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
text: "Cuban Salsa",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
text: "Aquadrone",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
text: "Magic",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
text: "Fencing",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
text: "CCF",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
text: "DJ",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
text: "Tennis",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
text: "UWCSA",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
text: "mathNEWS",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
text: "Toastmasters",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
text: "Chamber Ensembles",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
text: "UWFA",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
text: "WiSTEM",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
text: "KC",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
text: "WARG",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
text: "Swimming",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
text: "Skating",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
text: "Boxing",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
text: "Movie",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
text: "Theatre",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
text: "Cooking",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
text: "TechNova",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
text: "CTF",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
text: "Robotics Design Team",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
text: "EntSoc",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
text: "UWEN",
|
||||
value: 1,
|
||||
},
|
||||
];
|
||||
|
||||
export const L18 = [
|
||||
{
|
||||
category: "DC",
|
||||
value: 22,
|
||||
},
|
||||
{
|
||||
category: "MC",
|
||||
value: 23,
|
||||
},
|
||||
{
|
||||
category: "Res",
|
||||
value: 16,
|
||||
},
|
||||
{
|
||||
category: "E7",
|
||||
value: 11,
|
||||
},
|
||||
{
|
||||
category: "QNC",
|
||||
value: 9,
|
||||
},
|
||||
{
|
||||
category: "DP",
|
||||
value: 5,
|
||||
},
|
||||
{
|
||||
category: "SLC",
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
category: "E5",
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
category: "EV3",
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
category: "PHY",
|
||||
value: 1,
|
||||
},
|
||||
];
|
||||
|
||||
export const L19 = [
|
||||
{
|
||||
category: "No",
|
||||
value: 78,
|
||||
},
|
||||
{
|
||||
category: "Yes",
|
||||
value: 22,
|
||||
},
|
||||
];
|
||||
|
|
@ -96,7 +96,7 @@ export const mockStackedBarGraphData = [
|
|||
{
|
||||
category: "2A",
|
||||
"geese watchers": 40,
|
||||
"geese breeders": 50,
|
||||
"geese breeders": 50,
|
||||
"geese catchers": 70,
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -0,0 +1,231 @@
|
|||
export const P1 = [
|
||||
{
|
||||
category: "No",
|
||||
value: 64.1,
|
||||
},
|
||||
{
|
||||
category: "Not sure",
|
||||
value: 20.4,
|
||||
},
|
||||
{
|
||||
category: "Yes (Masters)",
|
||||
value: 5,
|
||||
},
|
||||
{
|
||||
category: "Yes (PhD)",
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
category: "Yes (PhD + Masters)",
|
||||
value: 6.8,
|
||||
},
|
||||
];
|
||||
|
||||
export const P2 = [
|
||||
{
|
||||
category: "Yes",
|
||||
value: 78.2,
|
||||
},
|
||||
{
|
||||
category: "No",
|
||||
value: 21.8,
|
||||
},
|
||||
];
|
||||
|
||||
export const P3 = [
|
||||
{
|
||||
text: "Seattle",
|
||||
value: 8,
|
||||
},
|
||||
{
|
||||
text: "New York",
|
||||
value: 20,
|
||||
},
|
||||
{
|
||||
text: "Chicago",
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
text: "San Francisco",
|
||||
value: 13,
|
||||
},
|
||||
{
|
||||
text: "California",
|
||||
value: 13,
|
||||
},
|
||||
{
|
||||
text: "GTA / Toronto",
|
||||
value: 10,
|
||||
},
|
||||
{
|
||||
text: "Boston",
|
||||
value: 2,
|
||||
},
|
||||
];
|
||||
|
||||
export const P4 = [
|
||||
{
|
||||
category: "0",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
category: "1",
|
||||
value: 19,
|
||||
},
|
||||
{
|
||||
category: "2",
|
||||
value: 31,
|
||||
},
|
||||
{
|
||||
category: "3",
|
||||
value: 17,
|
||||
},
|
||||
{
|
||||
category: "4",
|
||||
value: 6,
|
||||
},
|
||||
{
|
||||
category: "5",
|
||||
value: 5,
|
||||
},
|
||||
];
|
||||
|
||||
export const P5 = [
|
||||
{
|
||||
category: "0",
|
||||
value: 20,
|
||||
},
|
||||
{
|
||||
category: "1",
|
||||
value: 7,
|
||||
},
|
||||
{
|
||||
category: "2",
|
||||
value: 7,
|
||||
},
|
||||
{
|
||||
category: "3",
|
||||
value: 10,
|
||||
},
|
||||
{
|
||||
category: "4",
|
||||
value: 5,
|
||||
},
|
||||
{
|
||||
category: "5",
|
||||
value: 8,
|
||||
},
|
||||
{
|
||||
category: "6",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
category: "7",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
category: "8",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
category: "10",
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
category: "12",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
category: "15",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
category: "35",
|
||||
value: 1,
|
||||
},
|
||||
];
|
||||
|
||||
export const P6 = [
|
||||
{
|
||||
category: "Yes",
|
||||
value: 61.7,
|
||||
},
|
||||
{
|
||||
category: "No",
|
||||
value: 38.3,
|
||||
},
|
||||
];
|
||||
|
||||
export const P7 = [
|
||||
{
|
||||
category: "51k-100k",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
category: "101k-150k",
|
||||
value: 6,
|
||||
},
|
||||
{
|
||||
category: "151k-200k",
|
||||
value: 16,
|
||||
},
|
||||
{
|
||||
category: "201k-250k",
|
||||
value: 18,
|
||||
},
|
||||
{
|
||||
category: "251k-300k",
|
||||
value: 15,
|
||||
},
|
||||
{
|
||||
category: "300k+",
|
||||
value: 21,
|
||||
},
|
||||
];
|
||||
|
||||
export const P8 = [
|
||||
{
|
||||
text: "Web development",
|
||||
value: 11,
|
||||
},
|
||||
{
|
||||
text: "Finance",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
text: "Cloud Computing",
|
||||
value: 5,
|
||||
},
|
||||
{
|
||||
text: "Artificial Intelligence",
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
text: "Robotics",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
text: "Data Science",
|
||||
value: 6,
|
||||
},
|
||||
{
|
||||
text: "Research",
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
text: "Security",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
text: "Hardware",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
text: "Mobile Development",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
text: "Computer Networking",
|
||||
value: 2,
|
||||
},
|
||||
];
|
||||
|
|
@ -0,0 +1,458 @@
|
|||
import {
|
||||
A1,
|
||||
A2,
|
||||
A3,
|
||||
A4,
|
||||
A5,
|
||||
A6,
|
||||
A7,
|
||||
A8,
|
||||
A9,
|
||||
A10,
|
||||
A11,
|
||||
A12,
|
||||
A12i,
|
||||
A12iKeys,
|
||||
A13,
|
||||
A13i,
|
||||
A13ii,
|
||||
A13iii,
|
||||
A14,
|
||||
A15,
|
||||
A16,
|
||||
A16Keys,
|
||||
A18,
|
||||
A18i,
|
||||
A18ii,
|
||||
A19,
|
||||
A19i,
|
||||
A20,
|
||||
A21,
|
||||
A21i,
|
||||
A21ii,
|
||||
A21iii,
|
||||
A21iv,
|
||||
A21v,
|
||||
} from "data/academics";
|
||||
import { pageRoutes } from "data/routes";
|
||||
import React from "react";
|
||||
import { Color } from "utils/Color";
|
||||
import {
|
||||
barGraphProps,
|
||||
DefaultProp,
|
||||
pieChartProps,
|
||||
barGraphMargin,
|
||||
barGraphWidth,
|
||||
wordCloudWidth,
|
||||
} from "utils/defaultProps";
|
||||
import { useWindowDimensions } from "utils/getWindowDimensions";
|
||||
import { useIsMobile } from "utils/isMobile";
|
||||
|
||||
import { BarGraphVertical, BarGraphHorizontal } from "@/components/BarGraph";
|
||||
import { BottomNav } from "@/components/BottomNav";
|
||||
import { ComponentWrapper } from "@/components/ComponentWrapper";
|
||||
import { Header } from "@/components/Header";
|
||||
import { PieChart } from "@/components/PieChart";
|
||||
import { QuotationCarousel } from "@/components/QuotationCarousel";
|
||||
import { SectionHeader } from "@/components/SectionHeader";
|
||||
import { SectionWrapper } from "@/components/SectionWrapper";
|
||||
import {
|
||||
StackedBarGraphHorizontal,
|
||||
StackedBarGraphVertical,
|
||||
} from "@/components/StackedBarGraph";
|
||||
import { WordCloud } from "@/components/WordCloud";
|
||||
|
||||
import styles from "./samplePage.module.css";
|
||||
|
||||
export default function Academics() {
|
||||
const pageWidth = useWindowDimensions().width;
|
||||
const isMobile = useIsMobile();
|
||||
|
||||
return (
|
||||
<div className={styles.page}>
|
||||
<Header />
|
||||
<SectionHeader title="Academics" />
|
||||
|
||||
<SectionWrapper title="Programming" />
|
||||
|
||||
<ComponentWrapper
|
||||
heading="How many years of coding experience did you have prior to 1A?"
|
||||
bodyText="Almost 70% of the students that participated had minimal to no coding experience (0 - 2 years), prior to coming into Waterloo. Goes to show that years of programming knowledge is not required to be admitted in CS/CFM/CSBBA at Waterloo."
|
||||
>
|
||||
<div className={styles.graphContainer}>
|
||||
<PieChart data={A1} {...pieChartProps(isMobile, pageWidth)} />
|
||||
</div>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="Is your expected graduation date the same as when you enrolled in the program?"
|
||||
bodyText="Most people stayed on track with their original plans, but it’s not unheard of students delaying their graduation date either due to re-taking failed classes, gap terms, completing minors, etc. It's normal to take time completing your degree! :)"
|
||||
align="right"
|
||||
noBackground
|
||||
>
|
||||
<div className={styles.graphContainer}>
|
||||
<PieChart data={A2} {...pieChartProps(isMobile, pageWidth)} />
|
||||
</div>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="What is your favourite text editor or IDE?"
|
||||
bodyText="The class favours VS Code, a versatile, lightweight, and customizable IDE. This is no surprise as VS Code is known to be a sweet spot between Vim and more complex IDEs like IntelliJ: It's fast, lightweight, easy to use, powerful with its extensions, offers a plethora of themes, etc."
|
||||
align="right"
|
||||
>
|
||||
<BarGraphHorizontal
|
||||
data={A3}
|
||||
width={barGraphWidth(isMobile, pageWidth)}
|
||||
height={DefaultProp.graphHeight}
|
||||
margin={{ ...barGraphMargin, ...{ left: 180 } }}
|
||||
/>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="What is your favourite programming language?"
|
||||
bodyText="The favourite programming language award for the class of 2022 goes to ….PYTHON! No surprise here, it reads the most like English. C++ is a very notable language as a part of the CS program; thus, it’s no surprise it comes in second. Once again, its sad to see that the graduating class of 2022 has losts its passion in being fellow Racket enjoyers. Hopefully, post grads are able to rekindle their love for using Racket."
|
||||
align="center"
|
||||
noBackground
|
||||
>
|
||||
<BarGraphHorizontal data={A4} {...barGraphProps(isMobile, pageWidth)} />
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="How many coding languages do you know?"
|
||||
bodyText="85%+ of individuals that participated in the survey know 4 or more languages. It's evident that, as students take more internships and classes, they learn more programming languages, especially in a field that is continuously evolving!"
|
||||
>
|
||||
<BarGraphVertical data={A5} {...barGraphProps(isMobile, pageWidth)} />
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="What operating system(s) do you mainly use?"
|
||||
bodyText="Almost a third of people use macOS exclusively! It is pretty popular among university students in most other programs, but also it’s interesting to see how even sometimes with the plethora of compatibility issues with macOS, so many CS students will still use it."
|
||||
align="right"
|
||||
noBackground
|
||||
>
|
||||
<div className={styles.graphContainer}>
|
||||
<PieChart data={A6} {...pieChartProps(isMobile, pageWidth)} />
|
||||
</div>
|
||||
</ComponentWrapper>
|
||||
|
||||
<SectionWrapper title="Electives, Subject, School" />
|
||||
|
||||
<ComponentWrapper
|
||||
heading="What category of electives for your degree did you enjoy most?"
|
||||
bodyText="Seems like the class really enjoyed both their Social Science and Humanities courses with almost half of the class choosing both categories as their most enjoyed. For context, CS students are required to complete a number of electives from certain categories to graduate."
|
||||
>
|
||||
<BarGraphHorizontal
|
||||
data={A7}
|
||||
width={barGraphWidth(isMobile, pageWidth)}
|
||||
height={DefaultProp.graphHeight}
|
||||
margin={{ ...barGraphMargin, ...{ left: 180 } }}
|
||||
/>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="Which non-math elective was your favourite?"
|
||||
bodyText="Lots of amazing non-math electives mentioned in the list, with MUSIC140 being a crowd favourite. We can also note that MUSIC, PHIL, and PSYCH courses are well liked!"
|
||||
align="center"
|
||||
noBackground
|
||||
>
|
||||
<WordCloud
|
||||
data={A8}
|
||||
width={wordCloudWidth(isMobile, pageWidth)}
|
||||
height={DefaultProp.graphHeight}
|
||||
wordPadding={7}
|
||||
desktopMaxFontSize={75}
|
||||
mobileMaxFontSize={30}
|
||||
/>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="Which CS course was your favourite?"
|
||||
bodyText="CS246 is the most popular CS course for the class of 2022. This course introduces Object-Oriented Programming, a fundamental programming paradigm that is used in many places. No wonder this course is so well liked! Next up, we have CS343 and CS486 both tying up in 2nd place. CS343 teaches concurrent parallel programming while CS486 delves into the realm of Artificial Intelligence. Both are very interesting courses, exploring different niche aspects of Computer Science!"
|
||||
align="right"
|
||||
>
|
||||
<WordCloud
|
||||
data={A9}
|
||||
width={wordCloudWidth(isMobile, pageWidth)}
|
||||
height={DefaultProp.graphHeight}
|
||||
wordPadding={8}
|
||||
desktopMaxFontSize={60}
|
||||
desktopMinFontSize={15}
|
||||
mobileMaxFontSize={60}
|
||||
/>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="Which CS course was your least favourite?"
|
||||
bodyText="CS245, Logic and Computation, was the least favourite CS course students took. It can probably be explained by its difficulty, the theoretical focus of the course, the content being less applicable outside of class plus it being a core CS course. Honourable mention to CS348 (Intro to DB management), which, according to UWFlow, is a 'horribly' organized course with outdated content (RIP)."
|
||||
noBackground
|
||||
>
|
||||
<WordCloud
|
||||
data={A10}
|
||||
width={wordCloudWidth(isMobile, pageWidth)}
|
||||
height={DefaultProp.graphHeight}
|
||||
wordPadding={11}
|
||||
desktopMaxFontSize={80}
|
||||
mobileMaxFontSize={70}
|
||||
/>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="Which course did you find the most useful for job preparation?"
|
||||
bodyText="CS341 (Algorithms) was deemed the most useful CS core course for job preparation according to respondents. This is a no-brainer as Leetcode practice is crucial for passing the interview process! :) Meanwhile, CS246 (Object-Oriented Software Development) is rated 2nd. This can be correlated with students ranking it first as the most favourite CS class!"
|
||||
>
|
||||
<WordCloud
|
||||
data={A11}
|
||||
width={wordCloudWidth(isMobile, pageWidth)}
|
||||
height={DefaultProp.graphHeight}
|
||||
wordPadding={20}
|
||||
desktopMaxFontSize={80}
|
||||
mobileMaxFontSize={80}
|
||||
/>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="Did you take any advanced/enriched courses?"
|
||||
bodyText="45% of the class has taken at least 1 enriched course before their graduation. Damn, that's almost half of our participants!"
|
||||
noBackground
|
||||
>
|
||||
<div className={styles.graphContainer}>
|
||||
<PieChart data={A12} {...pieChartProps(isMobile, pageWidth)} />
|
||||
</div>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="Who is your favourite professor in all of UW?"
|
||||
bodyText="Class of 2022 would like to give a shout out to Alice Gao, Carmen Bruni, and Lesley Istead as best professors in UW! Go read their ratings on UWFlow! ;) We would also like to give an honourable mention to every profs and TAs part of the Math faculty who have poured their passion in teaching to help the CS class of 2022 grow and succeed! You guys are amazing! ❤️"
|
||||
align="right"
|
||||
>
|
||||
<WordCloud
|
||||
data={A14}
|
||||
width={wordCloudWidth(isMobile, pageWidth)}
|
||||
height={DefaultProp.graphHeight}
|
||||
wordPadding={3}
|
||||
desktopMaxFontSize={75}
|
||||
mobileMaxFontSize={48}
|
||||
/>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="If you took any advanced or enriched courses, for each course please indicated how much you enjoyed it?"
|
||||
bodyText="Advanced/Enriched CS courses are rated pretty high, but generally, it seems like the ones taken earlier tend to have better ratings. 🤔"
|
||||
align="center"
|
||||
noBackground
|
||||
>
|
||||
<StackedBarGraphHorizontal
|
||||
width={isMobile ? pageWidth / 1.5 : 600}
|
||||
height={DefaultProp.graphHeight}
|
||||
keys={A12iKeys}
|
||||
colorRange={[
|
||||
Color.primaryAccent,
|
||||
Color.secondaryAccentLight,
|
||||
Color.primaryAccentLighter,
|
||||
]}
|
||||
data={A12i}
|
||||
axisLeftOffset={80}
|
||||
margin={{
|
||||
top: 20,
|
||||
left: 20,
|
||||
}}
|
||||
/>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="Which study term did you think was the hardest?"
|
||||
bodyText="2nd year seems to be the hardest year for most CS students with a whooping 52% of respondants agreeing on this (Prepare to be slapped in 2A). 2B has the second highest vote count which validates the saying, “Two B or not Two B”. The later terms are almost relaxing..."
|
||||
>
|
||||
<BarGraphVertical data={A15} {...barGraphProps(isMobile, pageWidth)} />
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="What were your averages for each term? Approximately, what is your cumulative average as of right now?"
|
||||
bodyText="The majority of people did their best in 1A and their worst in 1B, 2A, or 2B, likely because most of the mandatory challenging CS+MATH courses lie around that period of time. Students started having better grades in 3A, correlating with the difficulty of the courses question seen previously."
|
||||
align="center"
|
||||
noBackground
|
||||
>
|
||||
<StackedBarGraphVertical
|
||||
width={600}
|
||||
height={400}
|
||||
keys={A16Keys}
|
||||
colorRange={[
|
||||
Color.primaryAccent,
|
||||
Color.secondaryAccentLight,
|
||||
Color.primaryAccentLighter,
|
||||
]}
|
||||
data={A16}
|
||||
margin={{
|
||||
top: 20,
|
||||
left: 20,
|
||||
}}
|
||||
/>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="How many classes have you failed?"
|
||||
bodyText="Most people tend to get by their degree without failing a course, but clearly it’s not over if you have failed some. :)"
|
||||
align="right"
|
||||
>
|
||||
<BarGraphVertical data={A20} {...barGraphProps(isMobile, pageWidth)} />
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="Did you complete an option, specialization or minor?"
|
||||
bodyText="50% of the students have completed some form of option, specialization, or minor during their undergrad. These three are ways you can add qualifications to your degree using the electives that you have. That's what they mean when they say you can customize your CS degree! 😛"
|
||||
noBackground
|
||||
>
|
||||
<div className={styles.graphContainer}>
|
||||
<PieChart data={A18} {...pieChartProps(isMobile, pageWidth)} />
|
||||
</div>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="Which option(s), specialization(s) or minor(s) did you complete?"
|
||||
bodyText="The most common ones are Combinatorics & Optimization (C&O), Business, and Pure Mathematics. However, many people have combined specializations, making their degree very customized and tailored towards their specific interests."
|
||||
>
|
||||
<WordCloud
|
||||
data={A18i}
|
||||
width={wordCloudWidth(isMobile, pageWidth)}
|
||||
height={DefaultProp.graphHeight}
|
||||
wordPadding={7}
|
||||
desktopMaxFontSize={60}
|
||||
desktopMinFontSize={15}
|
||||
mobileMaxFontSize={30}
|
||||
/>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="What made you want to complete the option, specialization or minor?"
|
||||
align="center"
|
||||
noBackground
|
||||
>
|
||||
<div className={styles.quotationCarouselContainer}>
|
||||
<QuotationCarousel data={A18ii} circleDiameter={0} height={300} />
|
||||
</div>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="Have you overloaded any of your semesters?"
|
||||
align="right"
|
||||
>
|
||||
<div className={styles.graphContainer}>
|
||||
<PieChart data={A19} {...pieChartProps(isMobile, pageWidth)} />
|
||||
</div>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="How many overloaded semesters did you take?"
|
||||
bodyText="Waterloo academic terms can already be pretty charged; however, over 75% of participants were able to overload at least 1 or more term. 32.7% of students overloaded 3+ terms. 🤯"
|
||||
noBackground
|
||||
>
|
||||
<BarGraphVertical data={A19i} {...barGraphProps(isMobile, pageWidth)} />
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="Did you transfer into your current program?"
|
||||
bodyText="23% of respondants transferred into their current program which is a surprisingly high number. CS is a pretty flexible degree though, so transferring your credits shouldn't be too hard! ;)"
|
||||
>
|
||||
<div className={styles.graphContainer}>
|
||||
<PieChart data={A13} {...pieChartProps(isMobile, pageWidth)} />
|
||||
</div>
|
||||
</ComponentWrapper>
|
||||
|
||||
<SectionWrapper title="Transfer" />
|
||||
<ComponentWrapper
|
||||
heading="What program did you transfer from?"
|
||||
bodyText="Most transfers came from MATH and CFM. One can note that people who didn't get CS as their first choice most likely got deferred into MATH. CFM transfers may be due to students not ending up liking the financial aspect of their original program."
|
||||
noBackground
|
||||
>
|
||||
<BarGraphVertical data={A13i} {...barGraphProps(isMobile, pageWidth)} />
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="What term did you transfer into your program?"
|
||||
bodyText="Most of the transfers occurred during 2A and 2B terms, which makes sense since people have time to re-evaluate their academic/career path after spending a year in their original program."
|
||||
align="right"
|
||||
>
|
||||
<BarGraphVertical
|
||||
data={A13ii}
|
||||
{...barGraphProps(isMobile, pageWidth)}
|
||||
/>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="What was your reasoning behind transferring?"
|
||||
bodyText="Having a flexible schedule is one of the most important reasons that people transfer into CS/CSBBA. Many respondants also justified their transfer due to not being in the program of their choice or realizing their interest for CS later."
|
||||
noBackground
|
||||
>
|
||||
<BarGraphVertical
|
||||
data={A13iii}
|
||||
widthAlternatingLabel={1000}
|
||||
alternatingLabelSpace={200}
|
||||
lowerLabelDy="60px"
|
||||
{...barGraphProps(isMobile, pageWidth)}
|
||||
/>
|
||||
</ComponentWrapper>
|
||||
|
||||
<SectionWrapper title="Exchange" />
|
||||
|
||||
<ComponentWrapper
|
||||
heading="Did you take any exchange terms?"
|
||||
bodyText="Students can apply to the exchange program starting in their 2nd year to experience studying abroad for a study term! Exchange does not necessarily imply changing school with another student. Not many students took exchange terms from this sample."
|
||||
>
|
||||
<div className={styles.graphContainer}>
|
||||
<PieChart data={A21} {...pieChartProps(isMobile, pageWidth)} />
|
||||
</div>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="What term did you take an exchange in?"
|
||||
bodyText="Only 7% of students decided to take an exchange term during their undergrad with most students going during their 3A and 4B terms. Interestingly, 21% of students were interested in going on an exchange term, but were unable to go due to Covid."
|
||||
noBackground
|
||||
>
|
||||
<div className={styles.graphContainer}>
|
||||
<PieChart data={A21i} {...pieChartProps(isMobile, pageWidth)} />
|
||||
</div>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="Where did you take your exchange term?"
|
||||
bodyText="Only three people declared exactly where their exchange term was."
|
||||
align="right"
|
||||
>
|
||||
<div className={styles.quotationCarouselContainer}>
|
||||
<QuotationCarousel data={A21ii} circleDiameter={0} />
|
||||
</div>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="Were you unable to complete an exchange term an exchange term due to COVID-19?"
|
||||
bodyText="Pretty unfortunate that a lot more people would have gone on exchange if it wasn’t for the pandemic. :("
|
||||
noBackground
|
||||
>
|
||||
<div className={styles.graphContainer}>
|
||||
<PieChart data={A21iii} {...pieChartProps(isMobile, pageWidth)} />
|
||||
</div>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper heading="What was the hardest thing about going on exchange?">
|
||||
<div className={styles.quotationCarouselContainer}>
|
||||
<QuotationCarousel data={A21iv} circleDiameter={0} />
|
||||
</div>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="What is your favourite memory from your time during the exchange?"
|
||||
bodyText="Hopefully more students in future classes have the opportunity to have cool experiences like these as well. :)"
|
||||
noBackground
|
||||
>
|
||||
<div className={styles.quotationCarouselContainer}>
|
||||
<QuotationCarousel data={A21v} circleDiameter={0} />
|
||||
</div>
|
||||
</ComponentWrapper>
|
||||
|
||||
<BottomNav
|
||||
leftPage={pageRoutes.demographics}
|
||||
rightPage={pageRoutes.coop}
|
||||
></BottomNav>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,255 @@
|
|||
import {
|
||||
L1,
|
||||
L2,
|
||||
L3,
|
||||
L4,
|
||||
L5,
|
||||
L6,
|
||||
L7,
|
||||
L8,
|
||||
L9,
|
||||
L10,
|
||||
L11,
|
||||
L12,
|
||||
L13,
|
||||
L14,
|
||||
L16,
|
||||
L17,
|
||||
L18,
|
||||
L19,
|
||||
} from "data/lifestyle-and-interests";
|
||||
import { pageRoutes } from "data/routes";
|
||||
import React from "react";
|
||||
import {
|
||||
barGraphProps,
|
||||
DefaultProp,
|
||||
pieChartProps,
|
||||
barGraphMargin,
|
||||
barGraphWidth,
|
||||
} from "utils/defaultProps";
|
||||
import { useWindowDimensions } from "utils/getWindowDimensions";
|
||||
import { useIsMobile } from "utils/isMobile";
|
||||
|
||||
import { BarGraphVertical, BarGraphHorizontal } from "@/components/BarGraph";
|
||||
import { BottomNav } from "@/components/BottomNav";
|
||||
import { ComponentWrapper } from "@/components/ComponentWrapper";
|
||||
import { Header } from "@/components/Header";
|
||||
import { PieChart } from "@/components/PieChart";
|
||||
import { SectionHeader } from "@/components/SectionHeader";
|
||||
import { WordCloud } from "@/components/WordCloud";
|
||||
|
||||
import styles from "./samplePage.module.css";
|
||||
|
||||
export default function Demographics() {
|
||||
const pageWidth = useWindowDimensions().width;
|
||||
const isMobile = useIsMobile();
|
||||
|
||||
return (
|
||||
<div className={styles.page}>
|
||||
<Header />
|
||||
<SectionHeader
|
||||
title="Lifestyle and Interests"
|
||||
subtitle="What do CS people do in their free time?"
|
||||
/>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="Did you move back home during the beginning of COVID-19?"
|
||||
bodyText="The vast majority of respondents did move back home during the beginning of Covid, which makes sense given the situation. "
|
||||
>
|
||||
<div className={styles.graphContainer}>
|
||||
<PieChart data={L1} {...pieChartProps(isMobile, pageWidth)} />
|
||||
</div>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="Have many doses of COVID-19 vaccination have you gotten?"
|
||||
bodyText="Complete proof of vaccination used to be a requirement for entering campus, unless there are special circumstances. Here, we can see that everyone except for 2 people had 2 or more doses. The large majority had 3+ doses."
|
||||
align="right"
|
||||
noBackground
|
||||
>
|
||||
<div className={styles.graphContainer}>
|
||||
<PieChart data={L2} {...pieChartProps(isMobile, pageWidth)} />
|
||||
</div>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="How did your outlook on religion change during university?"
|
||||
bodyText="Interestingly, most of our respondents were never religious."
|
||||
>
|
||||
<BarGraphVertical
|
||||
data={L3}
|
||||
{...barGraphProps(isMobile, pageWidth)}
|
||||
lowerLabelDy="0"
|
||||
/>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="Did you learn how to cook during university?"
|
||||
bodyText="Only 12 people indicated that they have not learned to cook. As for the rest, more stated that they learned to cook during university rather than before. This could correlate to university being the first time that many students move out from their parent/gardian’s place."
|
||||
align="right"
|
||||
noBackground
|
||||
>
|
||||
<div className={styles.graphContainer}>
|
||||
<PieChart data={L4} {...pieChartProps(isMobile, pageWidth)} />
|
||||
</div>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="How many days are you physically active in a week now?"
|
||||
bodyText="It’s nice to see that most Waterloo student are active at least a few days a week! CS is an especially sedentary major so it’s important to stay active and take care of your bodies."
|
||||
>
|
||||
<BarGraphVertical
|
||||
data={L5}
|
||||
{...barGraphProps(isMobile, pageWidth)}
|
||||
lowerLabelDy="0"
|
||||
/>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="How often did you pull all-nighters throughout university?"
|
||||
bodyText="84 people have either never pulled an all-nighter or only once every few months. With decent time management skills, work is definitely manageable and sleep does not have to be sacrificed."
|
||||
noBackground
|
||||
>
|
||||
<BarGraphVertical data={L6} {...barGraphProps(isMobile, pageWidth)} />
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading='Rate how strongly you agree with the following statement: "Throughout my university experience, I felt like I had enough time to pursue my own hobbies."'
|
||||
bodyText="However, it seems like many people did not find enough time for their hobbies. Workloads can often pile up."
|
||||
align="right"
|
||||
>
|
||||
<BarGraphVertical data={L7} {...barGraphProps(isMobile, pageWidth)} />
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="How often did you attend parties/gatherings?"
|
||||
bodyText="A lot of students attend social events to relieve some stress and build relationships. Many Waterloo students our no exception. Although we are not know for our parties, they can still frequently be found in residence areas around campus."
|
||||
align="left"
|
||||
noBackground
|
||||
>
|
||||
<BarGraphHorizontal
|
||||
data={L8}
|
||||
width={barGraphWidth(isMobile, pageWidth)}
|
||||
height={DefaultProp.graphHeight}
|
||||
margin={{ ...barGraphMargin, ...{ left: 200 } }}
|
||||
/>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="What time do you usually sleep?"
|
||||
bodyText="Looks like we have a lot of nightowls!"
|
||||
align="right"
|
||||
>
|
||||
<BarGraphVertical data={L9} {...barGraphProps(isMobile, pageWidth)} />
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="How many hours of sleep do you get on average per night?"
|
||||
bodyText="Although many of our respondents sleep late, most people are getting 7+ hours every night. Our class schedules are typically somewhat flexible and morning classes are usually not super popular amoung students."
|
||||
align="left"
|
||||
noBackground
|
||||
>
|
||||
<BarGraphVertical data={L10} {...barGraphProps(isMobile, pageWidth)} />
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="While on campus, how many days out of the week do you go out to eat at a restaurant?"
|
||||
bodyText="Waterloo’s campus is surrounded by great food places. We have a plaza filled with restaurants that serve all sorts of food such as Mexican, East Asian, Persian, Indian, etc. Although most students have learned to cook, we still enjoy eating out ever so often."
|
||||
align="right"
|
||||
>
|
||||
<BarGraphVertical data={L11} {...barGraphProps(isMobile, pageWidth)} />
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="What is your favourite restaurant to go to on/around campus?"
|
||||
bodyText="With all the diverse restaurant around campus, it seems like the most popular choices of food are sushi, noodles, and shawarma (Lazeez hehehe)."
|
||||
noBackground
|
||||
>
|
||||
<WordCloud
|
||||
data={L12}
|
||||
width={isMobile ? pageWidth / 1.5 : 800}
|
||||
height={DefaultProp.graphHeight}
|
||||
wordPadding={7}
|
||||
desktopMaxFontSize={75}
|
||||
mobileMaxFontSize={48}
|
||||
/>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="What is your Leetcode proficiency level?"
|
||||
bodyText="Most respondents can consistently solve medium leetcode questions, which are often asked by large tech companies during interviews. Some people also responded with being able to solve hard level questions on leetcode, going above and beyond."
|
||||
align="right"
|
||||
>
|
||||
<BarGraphHorizontal
|
||||
data={L13}
|
||||
width={barGraphWidth(isMobile, pageWidth)}
|
||||
height={DefaultProp.graphHeight}
|
||||
margin={{ ...barGraphMargin, ...{ left: 270 } }}
|
||||
/>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="How many side projects have you completed during university, if any?"
|
||||
bodyText="Students invest time into side projects to show companies their software experiences and skills. Building side projects is a great way to compensate for lack of actual work experience. Many of our respondents are shown to have completed a few side projects, however, a large amount of them have indicated that they have not down any at all. This shows that side projects are not the only factor to landing a job."
|
||||
noBackground
|
||||
>
|
||||
<BarGraphVertical
|
||||
data={L14}
|
||||
{...barGraphProps(isMobile, pageWidth)}
|
||||
lowerLabelDy="0"
|
||||
/>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="How often do you attend hackathons now?"
|
||||
bodyText="Similar to side projects, hackathons allow students to show companies their software skills and passion in technology. Many creative projects stem from hackathons as well. But, hackathons are definitely not a necessity. In fact, we see that the vast majority of our respondents have never or very rarely attended hackathons."
|
||||
align="right"
|
||||
>
|
||||
<div className={styles.graphContainer}>
|
||||
<PieChart data={L16} {...pieChartProps(isMobile, pageWidth)} />
|
||||
</div>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="Which extracurricular activities (e.g., design teams, sports, intramurals, clubs, societies) did you participate in? "
|
||||
bodyText="Many of our respondents are involved with one or more extracurricular activities during university. These include sports, clubs, societies, and more."
|
||||
noBackground
|
||||
>
|
||||
<WordCloud
|
||||
data={L17}
|
||||
width={isMobile ? pageWidth / 1.5 : 800}
|
||||
height={DefaultProp.graphHeight}
|
||||
wordPadding={7}
|
||||
desktopMaxFontSize={75}
|
||||
mobileMaxFontSize={48}
|
||||
/>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="Where is your favourite place to study on campus?"
|
||||
bodyText="The most popular study locations according to our respondents are the Mathematics & Computer Building (MC) and the William G. Davis Computer Research Centre (DC), each having 23 and 22 votes respectively. Other popular places include on residence, QNC, and E7."
|
||||
align="right"
|
||||
>
|
||||
<BarGraphHorizontal
|
||||
data={L18}
|
||||
width={barGraphWidth(isMobile, pageWidth)}
|
||||
height={DefaultProp.graphHeight}
|
||||
margin={{ ...barGraphMargin, ...{ left: 50 } }}
|
||||
/>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="Have you done a URA (Undergraduate Research Assistantship)?"
|
||||
bodyText="URA provide students with the opportunity to gain research experience, usually with a professor, while earning some money."
|
||||
noBackground
|
||||
>
|
||||
<PieChart data={L19} {...pieChartProps(isMobile, pageWidth)} />
|
||||
</ComponentWrapper>
|
||||
|
||||
<BottomNav
|
||||
leftPage={pageRoutes.intimacyAndDrugs}
|
||||
rightPage={pageRoutes.mentalHealth}
|
||||
></BottomNav>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,137 @@
|
|||
import { P1, P2, P3, P4, P5, P6, P7, P8 } from "data/post-grad";
|
||||
import { pageRoutes } from "data/routes";
|
||||
import React from "react";
|
||||
import {
|
||||
barGraphProps,
|
||||
DefaultProp,
|
||||
pieChartProps,
|
||||
barGraphMargin,
|
||||
barGraphWidth,
|
||||
wordCloudWidth,
|
||||
} from "utils/defaultProps";
|
||||
import { useWindowDimensions } from "utils/getWindowDimensions";
|
||||
import { useIsMobile } from "utils/isMobile";
|
||||
|
||||
import { BarGraphVertical, BarGraphHorizontal } from "@/components/BarGraph";
|
||||
import { BottomNav } from "@/components/BottomNav";
|
||||
import { ComponentWrapper } from "@/components/ComponentWrapper";
|
||||
import { Header } from "@/components/Header";
|
||||
import { PieChart } from "@/components/PieChart";
|
||||
import { SectionHeader } from "@/components/SectionHeader";
|
||||
import { WordCloud } from "@/components/WordCloud";
|
||||
|
||||
import styles from "./samplePage.module.css";
|
||||
|
||||
export default function Demographics() {
|
||||
const pageWidth = useWindowDimensions().width;
|
||||
const isMobile = useIsMobile();
|
||||
|
||||
return (
|
||||
<div className={styles.page}>
|
||||
<Header />
|
||||
<SectionHeader
|
||||
title="Post-grad"
|
||||
subtitle="Further Computer Science Academic Journey"
|
||||
/>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="Do you plan on pursuing post-graduate education?"
|
||||
bodyText="There are a total of 103 respondents. Interestingly, there is a huge number of students not pursuring post-grad learning. Post-graduate education is not necessarly for everyone!"
|
||||
align="center"
|
||||
>
|
||||
<div className={styles.graphContainer}>
|
||||
<PieChart data={P1} {...pieChartProps(isMobile, pageWidth)} />
|
||||
</div>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="Have you secured a full time position post-grad?"
|
||||
bodyText="Most students have secured a full time position as they have probably received return offers from the companies they have interned at! UWaterloo's coop program's 2 year worth of work experience also paid off!"
|
||||
>
|
||||
<div className={styles.graphContainer}>
|
||||
<PieChart data={P2} {...pieChartProps(isMobile, pageWidth)} />
|
||||
</div>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="Are you returning to a prior co-op?"
|
||||
bodyText="It’s great to see that most people that have a full-time position have gotten it from a return offer! It goes to show how the co-op program improve the students' employability and allow them to find jobs that they enjoy!"
|
||||
align="right"
|
||||
noBackground
|
||||
>
|
||||
<div className={styles.graphContainer}>
|
||||
<PieChart data={P6} {...pieChartProps(isMobile, pageWidth)} />
|
||||
</div>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="Where will you be working from post grad? (City, State/Province, Country)"
|
||||
bodyText="The US and GTA/Toronto are huge hot spots here, but it’s great to see lots of that these programs can propel students to go to so many different places. Another noteworthy observation is that most students are going to work in the USA postgrad!"
|
||||
align="right"
|
||||
>
|
||||
<WordCloud
|
||||
data={P3}
|
||||
width={wordCloudWidth(isMobile, pageWidth)}
|
||||
height={DefaultProp.graphHeight}
|
||||
wordPadding={7}
|
||||
desktopMaxFontSize={75}
|
||||
mobileMaxFontSize={48}
|
||||
/>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="How many offers did you decide between?"
|
||||
bodyText="Over half of the participants only had to decide between one or two offers! 35% of respondants had to choose between 3+ offers!"
|
||||
noBackground
|
||||
>
|
||||
<BarGraphVertical data={P4} {...barGraphProps(isMobile, pageWidth)} />
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="How many onsites/interviews did you get?"
|
||||
bodyText="As lots of people had return offers, it’s only imaginable that a significant portion of the higher end of the onsites / interviews are from the group that didn’t have return offers."
|
||||
align="right"
|
||||
>
|
||||
<BarGraphHorizontal
|
||||
data={P5}
|
||||
width={barGraphWidth(isMobile, pageWidth)}
|
||||
height={DefaultProp.graphHeight}
|
||||
margin={barGraphMargin}
|
||||
/>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="What will be your first year total compensation (salary + signing + first year stock + bonus) in CAD?"
|
||||
bodyText="The tech field has interesting levels of annual compensation, these numbers speak for themselves…😜"
|
||||
noBackground
|
||||
>
|
||||
<BarGraphVertical
|
||||
data={P7}
|
||||
width={barGraphWidth(isMobile, pageWidth)}
|
||||
height={DefaultProp.graphHeight}
|
||||
margin={{ ...barGraphMargin }}
|
||||
/>
|
||||
</ComponentWrapper>
|
||||
|
||||
<ComponentWrapper
|
||||
heading="What field/career path will you be in post-graduation?"
|
||||
bodyText="Computer Science degrees can lead to so many things these days! Web development is an obvious field with web apps being used everywhere nowadays. Artificial Intelligence and Data Science are also becoming increasingly popular fields as they bring out new methods of solving business problems. Cloud computing is also growing in demand by virtualizing IT infrastructure, reducing its costs, and improving its scalability."
|
||||
align="right"
|
||||
>
|
||||
<WordCloud
|
||||
data={P8}
|
||||
width={wordCloudWidth(isMobile, pageWidth)}
|
||||
height={DefaultProp.graphHeight}
|
||||
wordPadding={10}
|
||||
desktopMaxFontSize={75}
|
||||
mobileMaxFontSize={48}
|
||||
/>
|
||||
</ComponentWrapper>
|
||||
|
||||
<BottomNav
|
||||
leftPage={pageRoutes.intimacyAndDrugs}
|
||||
rightPage={pageRoutes.friends}
|
||||
></BottomNav>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -8,6 +8,14 @@
|
|||
padding: 0 calc(70rem / 16);
|
||||
}
|
||||
|
||||
.quotationCarouselContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: calc(48rem / 16);
|
||||
margin: calc(32rem / 16);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
.graphContainer {
|
||||
padding: 0 calc(40rem / 16);
|
||||
|
|
|
|||
Loading…
Reference in New Issue