www
/
cs-2022-class-profile
16
0
Fork 0
Code Issues 11 Pull Requests 1 Projects Releases Wiki Activity

Merge branch 'main' of https://git.csclub.uwaterloo.ca/www/cs-2022-class-profile into j285he-front-page

This commit is contained in:
e26chiu 2022-12-19 18:27:18 -05:00
parent 421fbac793 d77ebe0f8d
commit 8e77c965cf
47 changed files with 7461 additions and 7495 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
components/BarGraph.tsx
View File

@ -43,6 +43,16 @@ interface BarGraphProps {
valueAxisLabelSize?: number;
/** Controls the distance between the value axis label and the value axis. */
valueAxisLabelOffset?: number;
/** Minimum width of the graph. */
minWidth?: number;
/** Breakpoint width of graph where alernating labels are displayed. Only for Vertical graphs */
widthAlternatingLabel?: number;
/** Space added to the bottom of the graph to show overflowing labels. Only for Vertical graphs */
alternatingLabelSpace?: number;
/** Default position of labels in x-axis, in px. */
defaultLabelDy?: string;
/** Position of lower labels in x-axis, in px. Only for Vertical graphs */
lowerLabelDy?: string;
}
interface BarGraphData {
@ -54,11 +64,11 @@ const DEFAULT_LABEL_SIZE = 16;
export function BarGraphHorizontal(props: BarGraphProps) {
const {
width,
height,
margin,
data,
className,
minWidth = 500,
categoryTickLabelSize = DEFAULT_LABEL_SIZE,
valueTickLabelSize = DEFAULT_LABEL_SIZE,
hoverLabelSize,
@ -68,8 +78,9 @@ export function BarGraphHorizontal(props: BarGraphProps) {
valueAxisLabel,
valueAxisLabelSize = DEFAULT_LABEL_SIZE,
valueAxisLabelOffset = 0,
defaultLabelDy = "0",
} = props;
const width = props.width < minWidth ? minWidth : props.width; // Ensuring graph's width >= minWidth
const barPadding = 0.4;
const categoryMax = height - margin.top - margin.bottom;
@ -163,8 +174,6 @@ export function BarGraphHorizontal(props: BarGraphProps) {
return {
...leftTickLabelProps(),
className: styles.tickLabel,
dx: "-0.5rem",
dy: "0.25rem",
fontSize: `${categoryTickLabelSize / 16}rem`,
};
}}
@ -186,7 +195,7 @@ export function BarGraphHorizontal(props: BarGraphProps) {
return {
...bottomTickLabelProps(),
className: styles.tickLabel,
dy: "0.25rem",
dy: defaultLabelDy,
fontSize: `${valueTickLabelSize / 16}rem`,
};
}}
@ -203,11 +212,11 @@ export function BarGraphHorizontal(props: BarGraphProps) {
export function BarGraphVertical(props: BarGraphProps) {
const {
width,
height,
margin,
data,
className,
minWidth = 500,
categoryTickLabelSize = DEFAULT_LABEL_SIZE,
valueTickLabelSize = DEFAULT_LABEL_SIZE,
hoverLabelSize,
@ -217,12 +226,20 @@ export function BarGraphVertical(props: BarGraphProps) {
valueAxisLabel,
valueAxisLabelSize = DEFAULT_LABEL_SIZE,
valueAxisLabelOffset = 0,
widthAlternatingLabel = 600,
alternatingLabelSpace = 80,
defaultLabelDy = `0px`,
lowerLabelDy = `30px`,
} = props;
const width = props.width < minWidth ? minWidth : props.width; // Ensuring graph's width >= minWidth
const barPadding = 0.4;
const alternatingLabel = width <= widthAlternatingLabel;
const final_margin_bottom = alternatingLabel
? margin.bottom + alternatingLabelSpace
: margin.bottom;
const categoryMax = width - margin.left - margin.right;
const valueMax = height - margin.top - margin.bottom;
const valueMax = height - margin.top - final_margin_bottom;
const getCategory = (d: BarGraphData) => d.category;
const getValue = (d: BarGraphData) => d.value;
@ -308,11 +325,12 @@ export function BarGraphVertical(props: BarGraphProps) {
left={margin.left}
hideAxisLine
hideTicks
tickLabelProps={() => {
tickLabelProps={(value, index) => {
const alternatingDy = index % 2 == 0 ? defaultLabelDy : lowerLabelDy;
return {
...bottomTickLabelProps(),
className: styles.tickLabel,
dy: "-0.25rem",
dy: alternatingLabel ? alternatingDy : defaultLabelDy,
fontSize: `${categoryTickLabelSize / 16}rem`,
width: categoryScale.bandwidth(),
verticalAnchor: "start",

4
components/BottomNav.module.css
View File

@ -10,6 +10,10 @@
display: inline-block;
}
.leftItem {
text-align: right;
}
.item {
color: var(--primary-text);
font-size: calc(28rem / 16);

4
components/BottomNav.tsx
View File

@ -31,7 +31,9 @@ export function BottomNav(props: PagesInfo) {
</a>
</Link>
<Link href={props.leftPage.url}>
<a className={styles.item}>{props.leftPage.name}</a>
<a className={styles.item + " " + styles.leftItem}>
{props.leftPage.name}
</a>
</Link>
</div>
) : null}

32
components/Boxplot.module.css
View File

@ -5,34 +5,4 @@
.boxplot:hover {
fill: var(--primary-accent);
filter: drop-shadow(0 0 calc(4rem / 16) var(--primary-accent));
}
.tooltip {
font-family: "Inconsolata", monospace;
top: 0;
left: 0;
position: absolute;
background-color: var(--label);
color: var(--primary-background);
pointer-events: none;
padding: calc(10rem / 16);
border-radius: calc(10rem / 16);
}
.tooltip .category {
margin: calc(10rem / 16) 0 0 0;
font-size: calc(16rem / 16);
font-weight: 700;
}
.tooltip .toolTipData {
margin-top: calc(5rem / 16);
margin-bottom: calc(10rem / 16);
font-size: calc(16rem / 16);
}
.tooltip .toolTipData p {
margin: 0;
padding: 0;
font-size: calc(16rem / 16);
}
}

26
components/Boxplot.tsx
View File

@ -6,11 +6,13 @@ import { Point } from "@visx/point";
import { scaleBand, scaleLinear } from "@visx/scale";
import { Line } from "@visx/shape";
import { BoxPlot as VisxBoxPlot } from "@visx/stats";
import { withTooltip, Tooltip } from "@visx/tooltip";
import { withTooltip } from "@visx/tooltip";
import { WithTooltipProvidedProps } from "@visx/tooltip/lib/enhancers/withTooltip";
import React from "react";
import { Color } from "utils/Color";
import { TooltipWrapper } from "./TooltipWrapper";
import styles from "./Boxplot.module.css";
const DEFAULT_LABEL_SIZE = 16;
@ -339,21 +341,17 @@ export const BoxPlot = withTooltip<StatsPlotProps, TooltipData>(
</svg>
{tooltipOpen && tooltipData && (
<Tooltip
top={tooltipTop}
<TooltipWrapper
left={tooltipLeft}
className={styles.tooltip}
unstyled
top={tooltipTop}
header={tooltipData.category}
>
<p className={styles.category}>{tooltipData.category}</p>
<div className={styles.toolTipData}>
<p>max: {tooltipData.max}</p>
<p>third quartile: {tooltipData.thirdQuartile}</p>
<p>median: {tooltipData.median}</p>
<p>first quartile: {tooltipData.firstQuartile}</p>
<p>min: {tooltipData.min}</p>
</div>
</Tooltip>
<p>max: {tooltipData.max}</p>
<p>third quartile: {tooltipData.thirdQuartile}</p>
<p>median: {tooltipData.median}</p>
<p>first quartile: {tooltipData.firstQuartile}</p>
<p>min: {tooltipData.min}</p>
</TooltipWrapper>
)}
</div>
);

25
components/ComponentWrapper.module.css
View File

@ -32,6 +32,7 @@
}
.wrapperCenter {
composes: sideWrapperCommon;
flex-direction: column;
text-align: center;
gap: calc(25rem / 16);
@ -40,12 +41,20 @@
0px top margin, since h3 contributes 45px and internal wrapper contributes 20px for the center component
*/
margin: 0 0 calc(45rem / 16) 0;
align-self: center;
padding: 0 15%;
}
.wrapperCenter .internalWrapper {
margin: auto;
}
.wrapperNoBodyText {
flex-direction: column;
align-items: center;
}
.wrapperNoBodyText .internalWrapper {
text-align: center;
}
@media screen and (max-width: 900px) {
@ -58,11 +67,25 @@
width: 100%;
}
.wrapperCenter .internalWrapper {
margin: initial;
}
.wrapperCenter {
padding: 0;
}
.horizontalScrollOnMobile {
overflow: scroll;
}
}
.internalWrapper {
padding: calc(20rem / 16);
}
.internalWrapper p {
font-size: calc(24rem / 16);
opacity: .85;
line-height: 1.25;
}

6
components/ComponentWrapper.tsx
View File

@ -37,7 +37,11 @@ export function ComponentWrapper({
<h3>{heading}</h3>
{bodyText ? <p>{bodyText}</p> : null}
</div>
<div className={styles.internalWrapper}>{children}</div>
<div
className={`${styles.internalWrapper} ${styles.horizontalScrollOnMobile}`}
>
{children}
</div>
</div>
);
}

2
components/GroupedBarGraph.module.css
View File

@ -1,5 +1,6 @@
.wrapper {
display: flex;
flex-direction: column;
align-items: center;
width: min-content;
}
@ -35,4 +36,5 @@
.legend {
display: flex;
margin: calc(16rem / 16);
justify-content: center;
}

137
components/GroupedBarGraph.tsx
View File

@ -49,7 +49,18 @@ interface GroupedBarGraphProps {
valueAxisLabelSize?: number;
/** Controls the distance between the value axis label and the value axis. */
valueAxisLabelOffset?: number;
legendProps?: LegendProps;
/** Margin for each item in the legend */
itemMargin?: string;
/** Minimum width of the graph. */
minWidth?: number;
/** Breakpoint width of graph where alernating labels are displayed. Only for Vertical graphs */
widthAlternatingLabel?: number;
/** Space added to the bottom of the graph to show overflowing labels. Only for Vertical graphs */
alternatingLabelSpace?: number;
/** Default position of labels in x-axis, in px. */
defaultLabelDy?: string;
/** Position of lower labels in x-axis, in px. Only for Vertical graphs */
lowerLabelDy?: string;
}
// Best format for props
@ -66,38 +77,21 @@ interface BarGroupData {
[key: string]: string | number;
}
interface LegendProps {
/** Position of the legend, relative to the graph. */
position?: "top" | "right";
/** Font size of the labels in the legend, in pixels. Default is 16px. */
itemLabelSize?: number;
/** Gap between items in the legend, in pixels. */
itemGap?: number;
/** Distance between the legend and other adjacent elements, in pixels. */
margin?: {
top?: number;
bottom?: number;
left?: number;
right?: number;
};
}
// BAR_PADDING must be in the range [0, 1)
const BAR_PADDING = 0.2;
const BAR_TEXT_PADDING = 12;
const DEFAULT_LABEL_SIZE = 16;
const DEFAULT_LEGEND_GAP = 16;
export function GroupedBarGraphVertical(props: GroupedBarGraphProps) {
const {
data: propsData,
barColors,
barHoverColorsMap,
width,
height,
margin,
className,
minWidth = 500,
categoryTickLabelSize = DEFAULT_LABEL_SIZE,
valueTickLabelSize = DEFAULT_LABEL_SIZE,
hoverLabelSize,
@ -107,15 +101,17 @@ export function GroupedBarGraphVertical(props: GroupedBarGraphProps) {
valueAxisLabel,
valueAxisLabelSize = DEFAULT_LABEL_SIZE,
valueAxisLabelOffset = 0,
legendProps,
itemMargin = "0 0 0 15px",
widthAlternatingLabel = 600,
alternatingLabelSpace = 80,
defaultLabelDy = `0px`,
lowerLabelDy = `30px`,
} = props;
const {
position: legendPosition = "right",
itemLabelSize: legendLabelSize = DEFAULT_LABEL_SIZE,
itemGap: legendItemGap = DEFAULT_LEGEND_GAP,
margin: legendMargin = {},
} = legendProps ?? {};
const width = props.width < minWidth ? minWidth : props.width; // Ensuring graph's width >= minWidth
const alternatingLabel = width <= widthAlternatingLabel;
const final_margin_bottom = alternatingLabel
? margin.bottom + alternatingLabelSpace
: margin.bottom;
const data: BarGroupData[] = propsData.map((datum: GroupedBarGraphData) => {
return { category: datum.category, ...datum.values };
@ -139,7 +135,7 @@ export function GroupedBarGraphVertical(props: GroupedBarGraphProps) {
.flat();
const categoryMax = width - margin.left - margin.right;
const valueMax = height - margin.top - margin.bottom;
const valueMax = height - margin.top - final_margin_bottom;
const getCategory = (d: BarGroupData) => d.category;
@ -168,10 +164,15 @@ export function GroupedBarGraphVertical(props: GroupedBarGraphProps) {
return (
<div
className={className ? `${className} ${styles.wrapper}` : styles.wrapper}
style={{
flexDirection: legendPosition === "right" ? "row" : "column-reverse",
}}
>
<div className={styles.legend}>
<LegendOrdinal
scale={colorScale}
direction="row"
itemMargin={itemMargin}
labelAlign="center"
/>
</div>
<svg width={width} height={height}>
<defs>
{Object.keys(barHoverColorsMap).map((color: string) => {
@ -256,11 +257,13 @@ export function GroupedBarGraphVertical(props: GroupedBarGraphProps) {
left={margin.left}
hideAxisLine
hideTicks
tickLabelProps={() => {
tickLabelProps={(value, index) => {
const alternatingDy =
index % 2 == 0 ? defaultLabelDy : lowerLabelDy;
return {
...bottomTickLabelProps(),
className: styles.tickLabel,
dy: "-0.25rem",
dy: alternatingLabel ? alternatingDy : defaultLabelDy,
fontSize: `${categoryTickLabelSize / 16}rem`,
width: categoryScale.bandwidth(),
verticalAnchor: "start",
@ -297,27 +300,6 @@ export function GroupedBarGraphVertical(props: GroupedBarGraphProps) {
}}
/>
</svg>
<LegendOrdinal
className={styles.legend}
style={{
marginTop: legendMargin.top,
marginRight: legendMargin.right,
marginBottom: legendMargin.bottom,
marginLeft: legendMargin.left,
fontSize: legendLabelSize,
}}
scale={colorScale}
direction={legendPosition === "right" ? "column" : "row"}
itemMargin={
legendPosition === "right"
? `calc(${legendItemGap / 2}rem / 16) 0 calc(${
legendItemGap / 2
}rem / 16) 0`
: `0 calc(${legendItemGap / 2}rem / 16) 0 calc(${
legendItemGap / 2
}rem / 16)`
}
/>
</div>
);
}
@ -327,10 +309,10 @@ export function GroupedBarGraphHorizontal(props: GroupedBarGraphProps) {
data: propsData,
barColors,
barHoverColorsMap,
width,
height,
margin,
className,
minWidth = 600,
categoryTickLabelSize = DEFAULT_LABEL_SIZE,
valueTickLabelSize = DEFAULT_LABEL_SIZE,
hoverLabelSize,
@ -340,15 +322,10 @@ export function GroupedBarGraphHorizontal(props: GroupedBarGraphProps) {
valueAxisLabel,
valueAxisLabelSize = DEFAULT_LABEL_SIZE,
valueAxisLabelOffset = 0,
legendProps,
itemMargin = "0 0 0 15px",
defaultLabelDy = "0",
} = props;
const {
position: legendPosition = "top",
itemLabelSize: legendLabelSize = DEFAULT_LABEL_SIZE,
itemGap: legendItemGap = DEFAULT_LEGEND_GAP,
margin: legendMargin = {},
} = legendProps ?? {};
const width = props.width < minWidth ? minWidth : props.width; // Ensuring graph's width >= minWidth
const data: BarGroupData[] = propsData.map((datum: GroupedBarGraphData) => {
return { category: datum.category, ...datum.values };
@ -401,10 +378,15 @@ export function GroupedBarGraphHorizontal(props: GroupedBarGraphProps) {
return (
<div
className={className ? `${className} ${styles.wrapper}` : styles.wrapper}
style={{
flexDirection: legendPosition === "right" ? "row" : "column-reverse",
}}
>
<div className={styles.legend}>
<LegendOrdinal
scale={colorScale}
direction="row"
itemMargin={itemMargin}
labelAlign="center"
/>
</div>
<svg width={width} height={height}>
<defs>
{Object.keys(barHoverColorsMap).map((color: string) => {
@ -495,7 +477,7 @@ export function GroupedBarGraphHorizontal(props: GroupedBarGraphProps) {
...leftTickLabelProps(),
className: styles.tickLabel,
dx: "-0.5rem",
dy: "0.25rem",
dy: defaultLabelDy,
fontSize: `${valueTickLabelSize / 16}rem`,
height: categoryScale.bandwidth(),
};
@ -531,27 +513,6 @@ export function GroupedBarGraphHorizontal(props: GroupedBarGraphProps) {
}}
/>
</svg>
<LegendOrdinal
className={styles.legend}
style={{
marginTop: legendMargin.top,
marginRight: legendMargin.right,
marginBottom: legendMargin.bottom,
marginLeft: legendMargin.left,
fontSize: legendLabelSize,
}}
scale={colorScale}
direction={legendPosition === "right" ? "column" : "row"}
itemMargin={
legendPosition === "right"
? `calc(${legendItemGap / 2}rem / 16) 0 calc(${
legendItemGap / 2
}rem / 16) 0`
: `0 calc(${legendItemGap / 2}rem / 16) 0 calc(${
legendItemGap / 2
}rem / 16)`
}
/>
</div>
);
}

15
components/LineGraph.module.css
View File

@ -8,20 +8,6 @@
filter: drop-shadow(0 0 calc(4rem / 16) var(--primary-accent));
}
.tooltip {
font-family: "Inconsolata", monospace;
font-weight: bold;
top: 0;
left: 0;
position: absolute;
background-color: var(--label);
color: var(--primary-background);
box-shadow: 0px calc(1rem / 16) calc(2rem / 16) var(--card-background);
pointer-events: none;
padding: calc(10rem / 16);
font-size: calc(18rem / 16);
border-radius: calc(10rem / 16);
}
.wrapper {
display: flex;
@ -32,4 +18,5 @@
.legend {
display: flex;
margin: calc(16rem / 8);
justify-content: center;
}

404
components/LineGraph.tsx
View File

@ -8,10 +8,12 @@ import { LegendOrdinal } from "@visx/legend";
import { Point } from "@visx/point";
import { scaleBand, scaleLinear, scaleOrdinal } from "@visx/scale";
import { LinePath } from "@visx/shape";
import { useTooltip, useTooltipInPortal } from "@visx/tooltip";
import { withTooltip } from "@visx/tooltip";
import React from "react";
import { Color } from "utils/Color";
import { TooltipWrapper } from "./TooltipWrapper";
import styles from "./LineGraph.module.css";
interface LineData {
@ -29,22 +31,6 @@ interface LineGraphData {
lines: LineData[];
}
interface LegendProps {
/** Position of the legend, relative to the graph. */
position?: "top" | "right";
/** Font size of the labels in the legend, in pixels. Default is 16px. */
itemLabelSize?: number;
/** Gap between items in the legend, in pixels. */
itemGap?: number;
/** Distance between the legend and other adjacent elements, in pixels. */
margin?: {
top?: number;
bottom?: number;
left?: number;
right?: number;
};
}
interface LineGraphProps {
data: LineGraphData;
/** Width of the entire graph, in pixels. */
@ -58,254 +44,196 @@ interface LineGraphProps {
left: number;
right: number;
};
className?: string;
/** List of hexademical colours for each line, length of colorRange should match the length of data. */
colorRange: string[];
/** Font size of the category tick labels, in pixels. Default is 16px. */
xTickLabelSize?: number;
/** Font size of the value tick labels, in pixels. Default is 16px. */
yTickLabelSize?: number;
/** Font size of the value that appears when hovering over a bar, in pixels. */
hoverLabelSize?: number;
/** Label text for the category axis. */
xAxisLabel?: string;
/** Font size of the label for the cateogry axis, in pixels. */
xAxisLabelSize?: number;
/** Controls the distance between the category axis label and the category axis. */
xAxisLabelOffset?: number;
/** Label text for the value axis. */
yAxisLabel?: string;
/** Font size of the label for the value axis, in pixels. */
yAxisLabelSize?: number;
/** Controls the distance between the value axis label and the value axis. */
yAxisLabelOffset?: number;
legendProps?: LegendProps;
/** Margin for each item in the legend */
itemMargin?: string;
}
const DEFAULT_LABEL_SIZE = 16;
const DEFAULT_LEGEND_GAP = 16;
// TODO: Address unused props in this file
/* eslint-disable unused-imports/no-unused-vars*/
export function LineGraph(props: LineGraphProps) {
const {
type TooltipData = string;
export const LineGraph = withTooltip<LineGraphProps, TooltipData>(
({
width,
height,
margin,
data,
className,
colorRange,
xTickLabelSize = DEFAULT_LABEL_SIZE,
yTickLabelSize = DEFAULT_LABEL_SIZE,
hoverLabelSize,
xAxisLabel,
xAxisLabelSize = DEFAULT_LABEL_SIZE,
xAxisLabelOffset = 0,
yAxisLabel,
yAxisLabelSize = DEFAULT_LABEL_SIZE,
yAxisLabelOffset = 0,
legendProps,
} = props;
const {
position: legendPosition = "right",
itemLabelSize: legendLabelSize = DEFAULT_LABEL_SIZE,
itemGap: legendItemGap = DEFAULT_LEGEND_GAP,
margin: legendMargin = {},
} = legendProps ?? {};
const xLength = data.xValues.length;
data.lines.forEach((line) => {
if (line.yValues.length != xLength) {
throw new Error("Invalid data with wrong length.");
}
});
const {
tooltipData,
tooltipOpen,
tooltipLeft,
tooltipTop,
tooltipOpen,
showTooltip,
tooltipData,
hideTooltip,
} = useTooltip();
showTooltip,
itemMargin = "0 0 0 15px",
}) => {
const xLength = data.xValues.length;
const { containerRef, TooltipInPortal } = useTooltipInPortal({
// use TooltipWithBounds
detectBounds: true,
// when tooltip containers are scrolled, this will correctly update the Tooltip position
scroll: true,
});
if (data.lines.length != colorRange.length) {
throw new Error("Invalid data with wrong length.");
}
const yMax = height - margin.top - margin.bottom;
const xMax = width - margin.left - margin.right;
const actualData = data.lines.map((line) => {
return line.yValues.map((val, idx) => {
return { x: data.xValues[idx], y: val };
data.lines.forEach((line) => {
if (line.yValues.length != xLength) {
throw new Error("Invalid data with wrong length.");
}
});
});
const yMaxValue = Math.max(
...data.lines.map((line) => {
return Math.max(...line.yValues);
})
);
const yMax = height - margin.top - margin.bottom;
const xMax = width - margin.left - margin.right;
// data accessors
const getX = (d: PointData) => d.x;
const getY = (d: PointData) => d.y;
const actualData = data.lines.map((line) => {
return line.yValues.map((val, idx) => {
return { x: data.xValues[idx], y: val };
});
});
// scales
const xScale = scaleBand({
range: [0, xMax],
domain: data.xValues,
});
const yMaxValue = Math.max(
...data.lines.map((line) => {
return Math.max(...line.yValues);
})
);
const yScale = scaleLinear<number>({
range: [0, yMax],
nice: true,
domain: [yMaxValue, 0],
});
// data accessors
const getX = (d: PointData) => d.x;
const getY = (d: PointData) => d.y;
const keys = data.lines.map((line) => line.label);
// scales
const xScale = scaleBand({
range: [0, xMax],
domain: data.xValues,
});
const legendScale = scaleOrdinal<string, string>({
domain: keys,
range: [Color.primaryAccent, Color.secondaryAccent],
});
const yScale = scaleLinear<number>({
range: [0, yMax],
nice: true,
domain: [yMaxValue, 0],
});
return (
<div
className={className ? `${className} ${styles.wrapper}` : styles.wrapper}
style={{
flexDirection: legendPosition === "right" ? "row" : "column-reverse",
}}
>
<svg ref={containerRef} width={width} height={height}>
<Group top={margin.top} left={margin.left}>
<GridColumns
scale={xScale}
height={yMax}
left={margin.left}
numTicks={5}
stroke={Color.tertiaryBackground}
strokeWidth={4}
strokeDasharray="10"
strokeLinecap="round"
const keys = data.lines.map((line) => line.label);
const colorScale = scaleOrdinal<string, string>({
domain: keys,
range: colorRange,
});
return (
<div>
<div className={styles.legend}>
<LegendOrdinal
scale={colorScale}
direction="row"
itemMargin={itemMargin}
labelAlign="center"
/>
<GridRows
scale={yScale}
width={xMax}
left={margin.left * 2.3}
numTicks={data.xValues.length}
stroke={Color.tertiaryBackground}
strokeWidth={4}
strokeDasharray="10"
strokeLinecap="round"
/>
<AxisBottom
scale={xScale}
top={margin.top + yMax}
left={margin.left}
hideAxisLine
hideTicks
tickLabelProps={() => {
return {
...bottomTickLabelProps(),
className: styles.tickLabel,
dy: "-0.25rem",
fontSize: `${xTickLabelSize / 16}rem`,
width: xScale.bandwidth(),
};
}}
/>
<AxisLeft
scale={yScale}
left={margin.left}
hideAxisLine
hideTicks
numTicks={5}
tickLabelProps={() => {
return {
...leftTickLabelProps(),
className: styles.tickLabel,
dx: "1.25rem",
dy: "0.25rem",
fontSize: `${yTickLabelSize / 16}rem`,
};
}}
/>
<Group left={margin.left + xMax / (data.xValues.length * 2)}>
{actualData.map((lineData, i) => {
const isEven = i % 2 === 0;
return (
<Group key={`line-${i}`}>
<LinePath
onMouseMove={(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,
tooltipTop: eventSvgCoords.y,
tooltipLeft: eventSvgCoords.x,
});
}}
onMouseOut={hideTooltip}
data={lineData}
className={styles.line}
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
x={(d) => xScale(getX(d))!}
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
y={(d) => yScale(getY(d))!}
stroke={
isEven ? Color.primaryAccent : Color.secondaryAccent
}
strokeWidth={4}
strokeOpacity={2}
/>
</Group>
);
})}
</div>
<svg width={width} height={height}>
<Group top={margin.top} left={margin.left}>
<GridColumns
scale={xScale}
height={yMax}
left={margin.left}
numTicks={5}
stroke={Color.tertiaryBackground}
strokeWidth={4}
strokeDasharray="10"
strokeLinecap="round"
/>
<GridRows
scale={yScale}
width={xMax}
left={margin.left * 2.3}
numTicks={data.xValues.length}
stroke={Color.tertiaryBackground}
strokeWidth={4}
strokeDasharray="10"
strokeLinecap="round"
/>
<AxisBottom
scale={xScale}
top={margin.top + yMax}
left={margin.left}
hideAxisLine
hideTicks
tickLabelProps={() => {
return {
...bottomTickLabelProps(),
className: styles.tickLabel,
dy: "-0.25rem",
fontSize: `${xTickLabelSize / 16}rem`,
width: xScale.bandwidth(),
};
}}
/>
<AxisLeft
scale={yScale}
left={margin.left}
hideAxisLine
hideTicks
numTicks={5}
tickLabelProps={() => {
return {
...leftTickLabelProps(),
className: styles.tickLabel,
dx: "1.25rem",
dy: "0.25rem",
fontSize: `${yTickLabelSize / 16}rem`,
};
}}
/>
<Group left={margin.left + xMax / (data.xValues.length * 2)}>
{actualData.map((lineData, i) => {
return (
<Group key={`line-${i}`}>
<LinePath
onMouseMove={(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,
tooltipTop: eventSvgCoords.y,
tooltipLeft: eventSvgCoords.x,
});
}}
onMouseOut={hideTooltip}
data={lineData}
className={styles.line}
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
x={(d) => xScale(getX(d))!}
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
y={(d) => yScale(getY(d))!}
stroke={colorRange[i]}
strokeWidth={4}
strokeOpacity={2}
/>
</Group>
);
})}
</Group>
</Group>
</Group>
</svg>
<LegendOrdinal
className={styles.legend}
style={{
marginTop: legendMargin.top,
marginRight: legendMargin.right,
marginBottom: legendMargin.bottom,
marginLeft: legendMargin.left,
fontSize: legendLabelSize,
}}
scale={legendScale}
direction={legendPosition === "right" ? "column" : "row"}
itemMargin={
legendPosition === "right"
? `calc(${legendItemGap / 2}rem / 16) 0 calc(${
legendItemGap / 2
}rem / 16) 0`
: `0 calc(${legendItemGap / 2}rem / 16) 0 calc(${
legendItemGap / 2
}rem / 16)`
}
/>
</svg>
{tooltipOpen && (
<TooltipInPortal
top={tooltipTop}
left={tooltipLeft}
className={styles.tooltip}
unstyled
applyPositionStyle
>
<>{tooltipData}</>
</TooltipInPortal>
)}
</div>
);
}
{tooltipOpen && (
<TooltipWrapper
top={tooltipTop}
left={tooltipLeft}
header={tooltipData as string}
></TooltipWrapper>
)}
</div>
);
}
);

1
components/QuotationCarousel.module.css
View File

@ -4,6 +4,7 @@
justify-content: space-between;
align-items: center;
gap: calc(8rem / 16);
margin: auto;
}
.circle {

10
components/QuotationCarousel.tsx
View File

@ -12,6 +12,8 @@ interface QuotationCarouselProps {
/** Diameter of the background circles, in px. Set to 0 for no circles. */
circleDiameter?: number;
className?: string;
/** Minimum width of the graph. */
minWidth?: number;
}
interface CarouselButtonProps {
@ -25,9 +27,10 @@ export function QuotationCarousel(props: QuotationCarouselProps) {
width = 600,
height = 100,
circleDiameter = 120,
minWidth = 600,
className,
} = props;
const actualWidth = width < minWidth ? minWidth : width;
const [activeIdx, setActiveIdx] = useState(0);
function showNextCard() {
@ -43,7 +46,10 @@ export function QuotationCarousel(props: QuotationCarouselProps) {
className={
className ? `${className} ${styles.carousel}` : styles.carousel
}
style={{ width: `${width / 16}rem`, minHeight: `${height / 16}rem` }}
style={{
width: `${actualWidth / 16}rem`,
minHeight: `${height / 16}rem`,
}}
>
<Circle className={styles.circle} diameter={circleDiameter} />
<Circle

13
components/SectionHeader.module.css
View File

@ -10,10 +10,23 @@
color: var(--primary-accent-light);
font-size: calc(70rem / 16);
margin: calc(40rem / 16) auto;
word-break: break-word;
}
.subTitle {
color: var(--primary-accent-lighter);
font-size: calc(26rem / 16);
margin: auto;
}
@media screen and (max-width: 900px) {
.title {
font-size: calc(50rem / 16);
margin: calc(20rem / 16) auto;
}
.subTitle {
font-size: calc(30rem / 16);
margin: auto calc(15rem / 16);
}
}

11
components/SectionWrapper.module.css Normal file
View File

@ -0,0 +1,11 @@
.sectionWrapper h2 {
color: var(--primary-heading);
padding-left: 4rem;
}
@media screen and (max-width: 900px) {
.sectionWrapper h2 {
text-align: center;
padding-left: 0;
}
}

15
components/SectionWrapper.tsx Normal file
View File

@ -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>
);
}

18
components/StackedBarGraph.module.css
View File

@ -7,29 +7,11 @@
}
.legend {
position: absolute;
display: flex;
font-size: calc(16rem / 16);
top: 0;
}
.toolTip {
font-family: "Inconsolata", monospace;
top: 0;
left: 0;
position: absolute;
background-color: var(--label);
color: var(--primary-background);
pointer-events: none;
border-radius: calc(10rem / 16);
padding: calc(10rem / 16);
}
.toolTip p {
margin: 0 calc(5rem / 16);
font-size: calc(16rem / 16);
}
.key {
font-weight: bold;
}

67
components/StackedBarGraph.tsx
View File

@ -7,11 +7,13 @@ import { Point } from "@visx/point";
import { scaleBand, scaleLinear, scaleOrdinal } from "@visx/scale";
import { BarStack, BarStackHorizontal, Line } from "@visx/shape";
import { SeriesPoint } from "@visx/shape/lib/types";
import { withTooltip, Tooltip } from "@visx/tooltip";
import { withTooltip } from "@visx/tooltip";
import { WithTooltipProvidedProps } from "@visx/tooltip/lib/enhancers/withTooltip";
import React from "react";
import { Color } from "utils/Color";
import { TooltipWrapper } from "./TooltipWrapper";
import styles from "./StackedBarGraph.module.css";
interface StackedBarData {
@ -86,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,
@ -132,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
@ -236,28 +250,16 @@ 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 ? (
<Tooltip
className={styles.toolTip}
<TooltipWrapper
top={tooltipTop}
left={tooltipLeft}
unstyled
header={tooltipData.key}
>
<p className={styles.key}>{tooltipData.key}</p>
<p>{tooltipData.bar.data[tooltipData.key]}</p>
<p>{getCategory(tooltipData.bar.data)}</p>
</Tooltip>
</TooltipWrapper>
) : null}
</div>
);
@ -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,28 +439,16 @@ 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 ? (
<Tooltip
className={styles.toolTip}
<TooltipWrapper
top={tooltipTop}
left={tooltipLeft}
unstyled
header={tooltipData.key}
>
<p className={styles.key}>{tooltipData.key}</p>
<p>{tooltipData.bar.data[tooltipData.key]}</p>
<p>{getCategory(tooltipData.bar.data)}</p>
</Tooltip>
</TooltipWrapper>
) : null}
</div>
);

31
components/TooltipWrapper.module.css Normal file
View File

@ -0,0 +1,31 @@
.tooltip {
font-family: "Inconsolata", monospace;
top: 0;
left: 0;
position: absolute;
background-color: var(--label);
pointer-events: none;
padding: calc(10rem / 16);
border-radius: calc(10rem / 16);
font-size: calc(18rem / 16);
}
.header {
color: var(--primary-background);
margin: 0;
font-size: calc(16rem / 16);
font-weight: 700;
}
.body {
color: var(--primary-background);
margin-top: calc(5rem / 16);
font-size: calc(16rem / 16);
}
.body p {
color: var(--primary-background);
margin: 0;
padding: 0;
font-size: calc(16rem / 16) !important;
}

35
components/TooltipWrapper.tsx Normal file
View File

@ -0,0 +1,35 @@
import { Tooltip } from "@visx/tooltip";
import React from "react";
import styles from "./TooltipWrapper.module.css";
type TooltipWrapperProps = {
top?: number;
left?: number;
className?: string;
header?: string;
children?: React.ReactNode;
};
const TooltipWrapper = ({
top,
left,
className,
header,
children,
}: TooltipWrapperProps) => {
return (
<Tooltip
top={top}
left={left}
className={`${styles.tooltip} ${className ?? ""}`}
unstyled
applyPositionStyle
>
{header ? <span className={styles.header}>{header}</span> : null}
{children ? <div className={styles.body}>{children}</div> : null}
</Tooltip>
);
};
export { TooltipWrapper };

15
components/WordCloud.module.css
View File

@ -2,19 +2,4 @@
text-shadow: var(--primary-accent) 0 0 calc(20rem / 16);
text-anchor: "middle";
cursor: default;
}
.tooltip {
font-family: "Inconsolata", monospace;
font-weight: bold;
top: 0;
left: 0;
position: absolute;
background-color: var(--label);
color: var(--primary-background);
box-shadow: 0px calc(1rem / 16) calc(2rem / 16) var(--card-background);
pointer-events: none;
padding: calc(10rem / 16);
font-size: calc(18rem / 16);
border-radius: calc(10rem / 16);
}

122
components/WordCloud.tsx
View File

@ -2,10 +2,14 @@ import { localPoint } from "@visx/event";
import { Point } from "@visx/point";
import { scaleLog } from "@visx/scale";
import { Text } from "@visx/text";
import { TooltipWithBounds, useTooltip, withTooltip } from "@visx/tooltip";
import { useTooltip, withTooltip } from "@visx/tooltip";
import { Wordcloud as VisxWordcloud } from "@visx/wordcloud";
import React from "react";
import { Color } from "utils/Color";
import { inDevEnvironment } from "utils/inDevEnviroment";
import { useIsMobile } from "utils/isMobile";
import { TooltipWrapper } from "./TooltipWrapper";
import styles from "./WordCloud.module.css";
@ -13,16 +17,22 @@ interface WordCloudProps {
data: Array<WordData>;
/** Width of the graph, in px */
width?: number;
/** The minimum width of the graph */
minWidth?: number;
/** Height of the graph, in px */
height?: number;
/** Minimum padding between words, in px */
wordPadding?: number;
/** Weight of the font of the words */
fontWeight?: number;
/** The desired font size of the smallest word, in px.*/
minFontSize?: number;
/** The desired font size of the largest word, in px. */
maxFontSize?: number;
/** The desired font size of the smallest word on desktop, in px.*/
desktopMinFontSize?: number;
/** The desired font size of the smallest word on mobile, in px.*/
mobileMinFontSize?: number;
/** The desired font size of the largest word on desktop, in px. */
desktopMaxFontSize?: number;
/** The desired font size of the largest word on mobile, in px. */
mobileMaxFontSize?: number;
/** A random seed in the range [0, 1) used for placing the words, change this value to get an alternate placement of words */
randomSeed?: number;
/** Type of spiral used for rendering the words, either rectangular or archimedean */
@ -46,11 +56,14 @@ export const WordCloud = withTooltip(
height,
wordPadding,
fontWeight,
minFontSize,
maxFontSize,
desktopMinFontSize,
mobileMinFontSize,
desktopMaxFontSize,
mobileMaxFontSize,
randomSeed,
spiral,
className,
minWidth,
}: WordCloudProps) => {
const {
tooltipData,
@ -69,8 +82,10 @@ export const WordCloud = withTooltip(
data={data}
wordPadding={wordPadding}
fontWeight={fontWeight}
minFontSize={minFontSize}
maxFontSize={maxFontSize}
desktopMinFontSize={desktopMinFontSize}
mobileMinFontSize={mobileMinFontSize}
desktopMaxFontSize={desktopMaxFontSize}
mobileMaxFontSize={mobileMaxFontSize}
showTooltip={(data, left, top) => {
showTooltip({
tooltipData: data,
@ -83,20 +98,18 @@ export const WordCloud = withTooltip(
tooltipTop={tooltipTop}
randomSeed={randomSeed}
spiral={spiral}
isMobile={useIsMobile()}
minWidth={minWidth}
/>
{tooltipOpen && tooltipData ? (
<TooltipWithBounds
<TooltipWrapper
// set this to random so it correctly updates with parent bounds
key={Math.random()}
top={tooltipTop}
left={tooltipLeft}
className={styles.tooltip}
unstyled
applyPositionStyle
>
{tooltipData.text} ({tooltipData.value})
</TooltipWithBounds>
header={`${tooltipData.text} (${tooltipData.value})`}
></TooltipWrapper>
) : null}
</div>
);
@ -114,27 +127,38 @@ type WordCloudWordsProps = Omit<WordCloudProps, "className"> & {
// tooltipLeft and tooltipTop are used for preventing unnessary renders
tooltipLeft?: number;
tooltipTop?: number;
isMobile: boolean; // passing in isMobile as a prop so we can rerender if this changes
};
const WordCloudWords: React.FC<WordCloudWordsProps> = ({
data,
width = 1000,
minWidth = 500,
height = 500,
wordPadding = 30,
fontWeight = 500,
minFontSize = 20,
maxFontSize = 150,
wordPadding = 20,
fontWeight = 400,
desktopMinFontSize = 15,
desktopMaxFontSize = 100,
mobileMinFontSize = 15,
mobileMaxFontSize = 60,
randomSeed = 0.5,
spiral = "rectangular",
showTooltip,
hideTooltip,
isMobile,
}) => {
width = width < minWidth ? minWidth : width;
const minFontSize = isMobile ? mobileMinFontSize : desktopMinFontSize;
const maxFontSize = isMobile ? mobileMaxFontSize : desktopMaxFontSize;
const maxVal = Math.max(...data.map((w) => w.value));
const minVal = Math.min(...data.map((w) => w.value));
const fontScale = scaleLog({
domain: [
Math.min(...data.map((w) => w.value)),
Math.max(...data.map((w) => w.value)),
],
domain: [minVal, maxVal],
range: [minFontSize, maxFontSize],
});
const fontSizeSetter = (datum: WordData) => fontScale(datum.value);
const fixedValueGenerator = () => randomSeed;
return (
@ -149,8 +173,19 @@ const WordCloudWords: React.FC<WordCloudWordsProps> = ({
rotate={0}
random={fixedValueGenerator}
>
{(cloudWords) =>
cloudWords.map((word, index) => {
{(cloudWords) => {
if (
inDevEnvironment &&
cloudWords.length != 0 && // since on initial load the length is 0, but thats not an error
cloudWords.length != data.length
) {
console.error(
`Not all words rendered for wordcloud! (${
data.length - cloudWords.length
} words missing) Please try adjusting the min/max font size, the random seed, and the wordPadding`
);
}
return cloudWords.map((word, index) => {
return (
<Text
key={`wordcloud-word-${word.text ?? ""}-${index}`}
@ -163,19 +198,31 @@ const WordCloudWords: React.FC<WordCloudWordsProps> = ({
textAnchor="middle"
onMouseMove={
((e: React.MouseEvent<SVGTextElement, MouseEvent>) => {
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;
// 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: data[index].value },
{
text: word.text,
value: (cloudWords[index] as WordData).value,
},
eventSvgCoords.x -
word.text.length * TOOLTIP_HORIZONTAL_SHIFT_SCALER,
word.text.length * TOOLTIP_HORIZONTAL_SHIFT_SCALER +
alignmentOffset,
eventSvgCoords.y
);
}
@ -186,8 +233,8 @@ const WordCloudWords: React.FC<WordCloudWordsProps> = ({
{word.text}
</Text>
);
})
}
});
}}
</VisxWordcloud>
);
};
@ -199,6 +246,7 @@ const shouldNotRerender = (
if (
// if width changes, rerender, else don't rerender for a tooltip change
prevProps.width === nextProps.width &&
prevProps.isMobile === nextProps.isMobile &&
(prevProps.tooltipLeft !== nextProps.tooltipLeft ||
prevProps.tooltipTop !== nextProps.tooltipTop ||
nextProps.tooltipLeft === undefined ||

1577
data/academics.ts Normal file
View File

File diff suppressed because it is too large Load Diff

589
data/coop.ts Normal file
View File

@ -0,0 +1,589 @@
export const C1 = [
{
category: "Coop",
value: 100,
},
{
category: "Regular",
value: 0,
},
];
export const C2 = [
{
text: "Toronto",
value: 32,
},
{
text: "California",
value: 26,
},
{
text: "West CA",
value: 12,
},
{
text: "East USA",
value: 11,
},
{
text: "Waterloo",
value: 9,
},
];
export const C3 = [
{
category: "Yes",
value: 17,
},
{
category: "No",
value: 83,
},
];
export const C4 = [
{
text: "Google",
value: 14,
},
{
text: "Jane Street",
value: 8,
},
{
text: "Meta/Facebook",
value: 4,
},
{
text: "Databricks",
value: 3,
},
{
text: "HRT",
value: 2,
},
{
text: "Cisco Meraki",
value: 2,
},
{
text: "Apple",
value: 2,
},
{
text: "Datadog",
value: 2,
},
{
text: "Shopify",
value: 2,
},
{
text: "Stripe",
value: 1,
},
{
text: "Citadel",
value: 1,
},
{
text: "Faire",
value: 1,
},
{
text: "Square",
value: 1,
},
{
text: "Salesforce",
value: 1,
},
{
text: "Capital One",
value: 1,
},
];
export const C5 = [
{
category: "Yes",
value: 6,
},
{
category: "No",
value: 94,
},
];
export const C6 = [
{
category: "0",
value: 92,
},
{
category: "1",
value: 8,
},
];
export const C7i = [
{
text: "Google",
value: 2,
},
{
text: "Konrad",
value: 1,
},
{
text: "Jane Street",
value: 2,
},
{
text: "Meta/Facebook",
value: 2,
},
{
text: "Microsoft",
value: 2,
},
{
text: "Databricks",
value: 1,
},
{
text: "HRT",
value: 2,
},
{
text: "Asana",
value: 1,
},
{
text: "Bloomberg",
value: 1,
},
{
text: "SAP",
value: 1,
},
{
text: "Cisco Meraki",
value: 1,
},
{
text: "Apple",
value: 1,
},
{
text: "Datadog",
value: 1,
},
{
text: "Shopify",
value: 1,
},
{
text: "Stripe",
value: 1,
},
{
text: "Citadel",
value: 1,
},
{
text: "Faire",
value: 1,
},
{
text: "Square",
value: 1,
},
{
text: "Salesforce",
value: 1,
},
{
text: "Capital One",
value: 1,
},
{
text: "Wish",
value: 1,
},
{
text: "Thomson Reuters",
value: 1,
},
{
text: "Uber",
value: 1,
},
{
text: "Rippling",
value: 1,
},
{
text: "Intel",
value: 1,
},
{
text: "NVIDIA",
value: 1,
},
{
text: "Twitch",
value: 1,
},
{
text: "RBC",
value: 1,
},
{
text: "Huawei",
value: 1,
},
{
text: "LinkedIn",
value: 1,
},
{
text: "Lyft",
value: 1,
},
{
text: "1Password",
value: 1,
},
{
text: "IBM",
value: 1,
},
{
text: "Snowflake",
value: 1,
},
{
text: "Autodesk",
value: 1,
},
{
text: "Tableau",
value: 1,
},
{
text: "Yugabyte",
value: 1,
},
{
text: "Twitter",
value: 1,
},
{
text: "Tesla",
value: 1,
},
{
text: "Coursera",
value: 1,
},
{
text: "EA",
value: 1,
},
];
export const C7ii = {
xValues: ["1", "2", "3", "4", "5", "6"],
lines: [
{
label: "Waterloo",
yValues: [22.1, 18.1, 16.9, 2.6, 1.3, 3.6],
},
{
label: "Toronto",
yValues: [50.2, 48.2, 30.4, 7, 4, 3.6],
},
{
label: "Remote",
yValues: [7.4, 4.8, 4.8, 82.1, 80.5, 73.2],
},
{
label: "USA(California, Washington, New York)",
yValues: [8.4, 18.1, 35, 0, 5.2, 17.9],
},
],
};
export const C7iii = [
{
category: "1",
min: 14,
firstQuartile: 18,
median: 22,
thirdQuartile: 40,
max: 50,
outliers: [105, 147],
},
{
category: "2",
min: 17.5,
firstQuartile: 22,
median: 25,
thirdQuartile: 36,
max: 76,
outliers: [105],
},
{
category: "3",
min: 16,
firstQuartile: 26,
median: 33,
thirdQuartile: 55,
max: 95,
outliers: [130],
},
{
category: "4",
min: 16,
firstQuartile: 30,
median: 35,
thirdQuartile: 60,
max: 140,
outliers: [],
},
{
category: "5",
min: 26,
firstQuartile: 39,
median: 44,
thirdQuartile: 60,
max: 145,
outliers: [],
},
{
category: "6",
min: 24,
firstQuartile: 40,
median: 48,
thirdQuartile: 72,
max: 132,
outliers: [],
},
];
export const C7iv = [
{
category: "1",
min: 0,
firstQuartile: 0,
median: 0,
thirdQuartile: 300,
max: 4000,
outliers: [10000],
},
{
category: "2",
min: 0,
firstQuartile: 0,
median: 0,
thirdQuartile: 2000,
max: 14000,
outliers: [],
},
{
category: "3",
min: 0,
firstQuartile: 0,
median: 250,
thirdQuartile: 10000,
max: 20500,
outliers: [],
},
{
category: "4",
min: 0,
firstQuartile: 0,
median: 0,
thirdQuartile: 4000,
max: 12000,
outliers: [],
},
{
category: "5",
min: 0,
firstQuartile: 0,
median: 1250,
thirdQuartile: 8000,
max: 20000,
outliers: [],
},
{
category: "6",
min: 0,
firstQuartile: 0,
median: 1000,
thirdQuartile: 15000,
max: 30493,
outliers: [],
},
];
export const C7vKey = ["Outstanding", "Excellent", "Very Good", "Good"];
export const C7v = [
{
category: "1",
Outstanding: 48.9,
Excellent: 33.7,
"Very Good": 10.9,
Good: 4.3,
},
{
category: "2",
Outstanding: 44.6,
Excellent: 48.2,
"Very Good": 4.8,
Good: 1.2,
},
{
category: "3",
Outstanding: 54.9,
Excellent: 35.4,
"Very Good": 8.5,
Good: 0,
},
{
category: "4",
Outstanding: 49.4,
Excellent: 39.2,
"Very Good": 3.8,
Good: 0,
},
{
category: "5",
Outstanding: 54.9,
Excellent: 35.4,
"Very Good": 8.5,
Good: 0,
},
{
category: "6",
Outstanding: 30.4,
Excellent: 30.4,
"Very Good": 10.7,
Good: 3.6,
},
];
export const C7viKey = ["5", "4", "3", "2", "1"];
export const C7vi = [
{
category: "1",
5: 41.3,
4: 26.1,
3: 20.7,
2: 8.7,
1: 3.3,
},
{
category: "2",
5: 37.8,
4: 36.6,
3: 14.6,
2: 9.8,
1: 1.2,
},
{
category: "3",
5: 39.5,
4: 40.7,
3: 11.1,
2: 4.9,
1: 3.7,
},
{
category: "4",
5: 33.8,
4: 37.7,
3: 18.2,
2: 9.1,
1: 1.3,
},
{
category: "5",
5: 51.9,
4: 32.5,
3: 14.3,
2: 1.3,
1: 0,
},
{
category: "6",
5: 53.7,
4: 20.4,
3: 18.5,
2: 5.6,
1: 1.9,
},
];
export const C7vii = {
xValues: ["1", "2", "3", "4", "5", "6"],
lines: [
{
label: "Main rounds",
yValues: [66.7, 61.4, 62.2, 49.4, 52.6, 46.4],
},
{
label: "Continuous Rounds",
yValues: [20.4, 16.9, 13.4, 7.6, 1.3, 1.8],
},
{
label: "Externally",
yValues: [12.9, 16.9, 20.7, 35.4, 32.9, 39.3],
},
{
label: "Return",
yValues: [0, 4.8, 3.7, 7.8, 11.8, 12.5],
},
],
};
export const C7viiiKey = ["No", "Yes"];
export const C7viii = [
{
category: "1",
Yes: 16.3,
No: 83.7,
},
{
category: "2",
Yes: 6.1,
No: 93.9,
},
{
category: "3",
Yes: 8.5,
No: 91.5,
},
{
category: "4",
Yes: 7.7,
No: 92.3,
},
{
category: "5",
Yes: 9.1,
No: 90.9,
},
{
category: "6",
Yes: 5.5,
No: 94.5,
},
];

348
data/demographics.ts Normal file
View File

@ -0,0 +1,348 @@
export const D1 = [
{
category: "CS",
value: 88,
},
{
category: "CS/BBA",
value: 12,
},
{
category: "CFM",
value: 5,
},
];
export const D2 = [
{
category: "Man",
value: 72,
},
{
category: "Woman",
value: 29,
},
{
category: "Gender non-conforming",
value: 4,
},
];
export const D3 = [
{
category: "She/Her/Her",
value: 31,
},
{
category: "He/Him/His",
value: 73,
},
{
category: "They/Them/Their",
value: 3,
},
];
export const D4 = [
{
category: "Black",
value: 2,
},
{
category: "Latin",
value: 1,
},
{
category: "East Asian",
value: 68,
},
{
category: "Middle Eastern",
value: 2,
},
{
category: "South Asian",
value: 13,
},
{
category: "Southeast Asian",
value: 2,
},
{
category: "White",
value: 18,
},
{
category: "Prefer not to say",
value: 1,
},
];
export const D5 = [
{
category: "89",
value: 1,
},
{
category: "90",
value: 6,
},
{
category: "91",
value: 1,
},
{
category: "92",
value: 5,
},
{
category: "93",
value: 4,
},
{
category: "94",
value: 10,
},
{
category: "95",
value: 15,
},
{
category: "96",
value: 22,
},
{
category: "97",
value: 21,
},
{
category: "98",
value: 10,
},
{
category: "99",
value: 8,
},
];
export const D6 = [
{
category: "Asexual",
value: 6,
},
{
category: "Bisexual",
value: 12,
},
{
category: "Gay",
value: 3,
},
{
category: "Heterosexual",
value: 81,
},
{
category: "Queer",
value: 3,
},
{
category: "Pansexual",
value: 3,
},
{
category: "Questioning",
value: 2,
},
{
category: "Prefer not to say",
value: 2,
},
];
export const D7 = [
{
text: "Ontario (Other)",
value: 15,
},
{
text: "British Columbia",
value: 11,
},
{
text: "Kitchener / Waterloo",
value: 5,
},
{
text: "Alberta",
value: 3,
},
{
text: "Quebec",
value: 3,
},
{
text: "USA",
value: 2,
},
{
text: "Hong Kong",
value: 2,
},
{
text: "Manitoba",
value: 2,
},
{
text: "India",
value: 1,
},
{
text: "GTA / Toronto",
value: 1,
},
{
text: "United Arab Emirates",
value: 1,
},
{
text: "Indonesia",
value: 1,
},
{
text: "Saskatchewan",
value: 1,
},
];
export const D8 = [
{
category: "High School Diploma",
value: 2,
},
{
category: "College Diploma",
value: 6,
},
{
category: "Bachelor's Degree",
value: 43,
},
{
category: "Master's Degree",
value: 33,
},
{
category: "Doctoral Degree",
value: 17,
},
{
category: "Not Applicable",
value: 1,
},
{
category: "Prefer not to say",
value: 2,
},
];
export const D9 = [
{
category: "0-50",
value: 9,
},
{
category: "51-100",
value: 28,
},
{
category: "101-150",
value: 22,
},
{
category: "151-200",
value: 23,
},
{
category: "201-250",
value: 7,
},
{
category: "251-300",
value: 4,
},
{
category: "301+",
value: 5,
},
{
category: "Prefer not to say",
value: 6,
},
];
export const D10 = [
{
category: "0",
value: 74,
},
{
category: "1",
value: 17,
},
{
category: "2",
value: 5,
},
{
category: "3",
value: 2,
},
{
category: "4",
value: 4,
},
{
category: "5",
value: 2,
},
];
export const D11 = [
{
category: "No religious affiliation",
value: 79,
},
{
category: "Christianity",
value: 16,
},
{
category: "Atheist",
value: 1,
},
{
category: "Judaism",
value: 3,
},
{
category: "Buddhism",
value: 2,
},
{
category: "Islam",
value: 1,
},
{
category: "Hinduism",
value: 5,
},
{
category: "Jainism",
value: 1,
},
{
category: "Prefer not to say",
value: 2,
},
];

487
data/friends.ts Normal file
View File

@ -0,0 +1,487 @@
export const F1 = [
{
category: "1",
value: 5,
},
{
category: "2",
value: 4,
},
{
category: "3",
value: 11,
},
{
category: "4",
value: 19,
},
{
category: "5",
value: 17,
},
{
category: "6",
value: 15,
},
{
category: "7",
value: 19,
},
{
category: "8",
value: 6,
},
{
category: "9",
value: 2,
},
{
category: "10",
value: 5,
},
];
export const F2 = [
{
category: "Introvert",
value: 51,
},
{
category: "Extrovert",
value: 11,
},
{
category: "Ambivert",
value: 38,
},
];
export const F3 = [
{
category: "None",
value: 5,
},
{
category: "Half",
value: 25,
},
{
category: "Some",
value: 28,
},
{
category: "Majority",
value: 42,
},
{
category: "All",
value: 3,
},
];
export const F4 = [
{
category: "Rarely",
value: 20,
},
{
category: "Sometimes",
value: 32,
},
{
category: "Often",
value: 33,
},
{
category: "Always",
value: 15,
},
];
export const F5 = [
{
category: "0",
value: 7,
},
{
category: "1-2",
value: 29,
},
{
category: "3-5",
value: 35,
},
{
category: "5-10",
value: 10,
},
{
category: "10+",
value: 6,
},
{
category: "Unsure",
value: 14,
},
];
export const F6 = [
{
category: "Often",
value: 8,
},
{
category: "Sometimes",
value: 37,
},
{
category: "Rarely",
value: 37,
},
{
category: "Never",
value: 17,
},
{
category: "Always",
value: 1,
},
];
export const F7 = [
{
category: "Often",
value: 35,
},
{
category: "Sometimes",
value: 34,
},
{
category: "Rarely",
value: 14,
},
{
category: "Never",
value: 3,
},
{
category: "Always",
value: 14,
},
];
export const F8 = [
{
category: "1A",
value: 52,
},
{
category: "1B",
value: 35,
},
{
category: "2A",
value: 23,
},
{
category: "2B",
value: 26,
},
{
category: "3A",
value: 7,
},
{
category: "3B",
value: 3,
},
{
category: "4A",
value: 7,
},
{
category: "4B",
value: 13,
},
{
category: "1st coop",
value: 7,
},
{
category: "2nd coop",
value: 8,
},
{
category: "3rd coop",
value: 8,
},
{
category: "4th coop",
value: 3,
},
{
category: "5th coop",
value: 5,
},
{
category: "6th coop",
value: 3,
},
];
export const F9 = [
{
category: "0",
value: 1,
},
{
category: "1",
value: 13,
},
{
category: "2",
value: 32,
},
{
category: "3-4",
value: 50,
},
{
category: "5-10",
value: 7,
},
];
export const F10 = [
{
category: "0",
value: 1,
},
{
category: "1-2",
value: 8,
},
{
category: "3-4",
value: 49,
},
{
category: "5-10",
value: 43,
},
{
category: "11+",
value: 1,
},
];
export const F11 = [
{
category: "0",
value: 2,
},
{
category: "1",
value: 9,
},
{
category: "2",
value: 20,
},
{
category: "3",
value: 29,
},
{
category: "4",
value: 27,
},
{
category: "5",
value: 16,
},
];
export const F12 = [
{
category: "All",
value: 4,
},
{
category: "Most",
value: 41,
},
{
category: "Some",
value: 49,
},
{
category: "Barely",
value: 8,
},
{
category: "No",
value: 1,
},
];
export const F13 = [
{
category: "Classes",
value: 81,
},
{
category: "Mutual friends",
value: 71,
},
{
category: "Extracurriculars",
value: 53,
},
{
category: "Coop",
value: 40,
},
{
category: "Parties",
value: 15,
},
{
category: "Online",
value: 9,
},
{
category: "Residence",
value: 3,
},
];
export const F14 = [
{
category: "Res",
value: 78,
},
{
category: "MC",
value: 36,
},
{
category: "DC",
value: 21,
},
{
category: "PAC",
value: 14,
},
{
category: "SLC",
value: 11,
},
{
category: "DP",
value: 4,
},
{
category: "E7",
value: 9,
},
{
category: "E5",
value: 3,
},
{
category: "E5",
value: 3,
},
{
category: "CIF",
value: 5,
},
{
category: "AL",
value: 2,
},
{
category: "CIF",
value: 5,
},
{
category: "Plaza",
value: 3,
},
];
export const F15 = [
{
text: "Chatting/Talking",
value: 12,
},
{
text: "Eating food",
value: 36,
},
{
text: "Workout",
value: 11,
},
{
text: "Drinking",
value: 7,
},
{
text: "Study",
value: 9,
},
{
text: "Board games",
value: 10,
},
{
text: "Video games",
value: 8,
},
{
text: "Watch TV Shows/Animes/Movies",
value: 4,
},
{
text: "Party",
value: 2,
},
{
text: "Cook",
value: 2,
},
{
text: "Exploring new places",
value: 1,
},
{
text: "Clubs",
value: 1,
},
];
export const F16 = [
{
category: "Most",
value: 48,
},
{
category: "Some",
value: 35,
},
{
category: "All",
value: 9,
},
{
category: "Barely",
value: 6,
},
{
category: "No",
value: 2,
},
];

430
data/intimacy-and-drugs.ts Normal file
View File

@ -0,0 +1,430 @@
export const I1 = [
{
category: "Held hands romantically",
values: {
"Experienced first before university": 55,
"Experienced first during university": 21,
},
},
{
category: "Been on a date",
values: {
"Experienced first before university": 50,
"Experienced first during university": 30,
},
},
{
category: "Kissed someone romantically",
values: {
"Experienced first before university": 47,
"Experienced first during university": 27,
},
},
{
category: "Been in a committed relationship",
values: {
"Experienced first before university": 41,
"Experienced first during university": 29,
},
},
{
category: "Been in a long distance relationship",
values: {
"Experienced first before university": 14,
"Experienced first during university": 42,
},
},
{
category: "Had friends with benefits",
values: {
"Experienced first before university": 12,
"Experienced first during university": 20,
},
},
{
category: "Sent/received nudes",
values: {
"Experienced first before university": 23,
"Experienced first during university": 17,
},
},
{
category: "Given/received oral sex",
values: {
"Experienced first before university": 30,
"Experienced first during university": 29,
},
},
{
category: "Engaged in sexual intercourse",
values: {
"Experienced first before university": 20,
"Experienced first during university": 33,
},
},
{
category: "Engaged in casual sex",
values: {
"Experienced first before university": 21,
"Experienced first during university": 8,
},
},
{
category: "Had sex with 2+ people at same time",
values: {
"Experienced first before university": 1,
"Experienced first during university": 3,
},
},
];
export const I2 = [
{
category: "Caffeine",
values: {
"Tried/used first before university": 80,
"Tried/used first during university": 9,
},
},
{
category: "Alcohol",
values: {
"Tried/used first before university": 63,
"Tried/used first during university": 22,
},
},
{
category: "Marijuana",
values: {
"Tried/used first before university": 43,
"Tried/used first during university": 15,
},
},
{
category: "Nicotine (Vaping)",
values: {
"Tried/used first before university": 16,
"Tried/used first during university": 7,
},
},
{
category: "Nicotine (Other)",
values: {
"Tried/used first before university": 12,
"Tried/used first during university": 1,
},
},
{
category: "Cigarettes",
values: {
"Tried/used first before university": 12,
"Tried/used first during university": 5,
},
},
{
category: "Adderall/Ritalin",
values: {
"Tried/used first before university": 5,
"Tried/used first during university": 1,
},
},
{
category: "Mushrooms",
values: {
"Tried/used first before university": 0,
"Tried/used first during university": 10,
},
},
{
category: "LSD",
values: {
"Tried/used first before university": 0,
"Tried/used first during university": 6,
},
},
{
category: "Cocaine",
values: {
"Tried/used first before university": 0,
"Tried/used first during university": 5,
},
},
{
category: "Ecstasy",
values: {
"Tried/used first before university": 0,
"Tried/used first during university": 5,
},
},
{
category: "Other",
values: {
"Tried/used first before university": 1,
"Tried/used first during university": 4,
},
},
];
export const I3 = [
{
category: "0",
value: 29,
},
{
category: "1",
value: 39,
},
{
category: "2",
value: 16,
},
{
category: "3",
value: 7,
},
{
category: "4",
value: 1,
},
{
category: "5",
value: 3,
},
];
export const I4 = [
{
category: "0",
value: 29,
},
{
category: "1",
value: 29,
},
{
category: "2",
value: 14,
},
{
category: "3",
value: 8,
},
{
category: "4",
value: 3,
},
{
category: "5",
value: 1,
},
{
category: "6",
value: 2,
},
{
category: "8",
value: 2,
},
{
category: "11",
value: 1,
},
{
category: "20",
value: 1,
},
{
category: "50",
value: 1,
},
{
category: "120",
value: 1,
},
];
export const I5 = [
{
category: "No",
value: 85,
},
{
category: "Yes",
value: 15,
},
];
export const I6 = [
{
category: "No",
value: 73,
},
{
category: "Yes",
value: 27,
},
];
export const I6i = [
{
category: "No",
value: 60,
},
{
category: "Yes",
value: 40,
},
];
export const I7 = [
{
category: "No",
value: 37,
},
{
category: "Yes",
value: 36,
},
{
category: "N/A",
value: 24,
},
];
export const I8 = [
{
category: "No",
value: 51,
},
{
category: "Yes",
value: 44,
},
{
category: "It's complicated",
value: 3,
},
];
export const I8i = [
{
category: "No",
value: 15,
},
{
category: "Yes",
value: 25,
},
{
category: "Unsure",
value: 9,
},
];
export const I9 = [
"Talk to one another. Communication is the one thing that makes or breaks your relationship and you have to learn how to properly get to the root of your problems. Sometimes resolving a problem means really understanding what your partner is worried about. Also, learn each others' core values. This is very important for long term relationships",
"It's drastically changed. I feel like when I was first entering university, I was really obsessed with the idea of being in a relationship it felt like if I couldn't get in one, then that meant that I was undesirable/unlovable. This is obviously not the case. Being in a relationship just means you have a higher degree of dedication and commitment to someone, and you don't always have to date with the intention to marry them/be with them forever. If it's fun now, and you're being responsible, go for it!",
"Communication is key! Minor inconveniences to help the other can go a very long way.",
"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 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",
"Co-dependency is bad",
"Relationships are very difficult to maintain, and are a lottttt of work",
"Relationships do not solve all your problems",
"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.",
"Hasnt",
"I've changed. ",
"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",
"I'm still a mega virgin",
"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.",
"yes",
"I've developed a more realistic expectation and now value someone I am comfortable with and can depend on more.",
"You shouldn't depend on it to make you happy, your worth should come from other places too",
"I'm more indifferent now",
"a lot",
"lots of people are very immature/inexperienced/not self aware",
"It's not like the movies.",
"Didn't change",
"Having compatible lifestyles and interests is very important.",
"I'd really like to be in a relationship",
"Communication and honesty are so important!!",
"I thought I would hold out on the 'no sex before marriage' thing. I did not.",
"Relationships are really hard and don't get into one unless you are ready for the work",
"A lot ",
];
export const I10 = [
"Work on yourself, make sure you know yourself pretty well and know what you want to get into. Confidence is attractive. Learn to be better texters and try to be more emotionally, socially intelligent. Try to be genuine.",
"Just be yourself and don't rush it. If you love who you are and are proud of that, then people you're compatible with will start to present themselves. Get out there, meet new people and have fun!",
"Work on yourself! The rest will follow (don't quote me on this).",
"just pick one, work out the kinks when they happen",
"just b urself :)",
"Shoot your shot",
"You have time :) Take it easy.",
"Why you askin' me",
"Be yourself, you don't want to be spending all that time with someone while putting up a front.",
"Don’t rush yourself. Wait until you find someone you’re really attracted to and then ask them out. Also, be ready to be rejected. Anyone who hasn’t been rejected is someone who has gotten very lucky or has simply never made the first move.",
"Work on your looks (fitness, sleep/diet, grooming, plastic surgery if its bad). Improve your status (high ranking job, involvement in social activities, interesting hobbies). Work on your social skills (practice talking to random people, public speaking). Learn how to read others' body language. Work on your mental state (meditation, therapy, close friends). Acquire confidence after doing all this and go approach in social settings. Be honest, upfront, and vulnerable. Don't be overly needy (and if you are, go back to improving yourself). Avoid TheRedPill, incel forums, MGTOW. Profit!!",
"Be forthcoming and don't be afraid to ask :)",
"simping does not help you get girls",
"Just be yourself?",
"Take a risk and make the first move. Be yourself",
"Become a well rounded confident person",
"nope",
"Don't",
"Don't be afraid to explore, not everything needs to be serious.",
"Focus on yourself first! Then read a lot of attachment theory and put yourself out there and hope for the best. ",
"Don’t force it, but once you’re in it, be intentional ",
"Try to better yourself first, make sure you're the best version of yourself. Know your strengths and weaknesses and take every opportunity to talk to people. Figure out what type of people you vibe with and don't force anything, or you'll be in a world of hurt.",
"Don't lower your standards.",
"Don't look too hard",
"Dont be in one",
"Don't come to loo =). ",
"Relationships are a two way street, try all you might but if the other person puts in no effort, it won’t work",
"Go to clubs/events and talk to people with just making friends as your intention! This is the most natural way that relationships start.",
"Let it brew organically. My relationship started off as a friendship, where we spent a lot of our time talking and it made way for a relationship wherein we care deeply about each other and our interests.",
"Figure yourself out first",
"Don't listen to what I say",
"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",
"idfk",
"good luck :)",
"Enjoy your life. ",
"Surround yourself with the people you want to attract. Ie. If you're looking for something long term, don't hang out with the party crowd. Start by making some friends, who preferably have other friends, and you'll see your pool of possibilities grow. Most importantly, know what you're after, and if you don't know, figure it out, and be open minded to the people who you meet.",
"Just don't, better off on your own",
"Consider me, I'm alright",
"Be open minded and meet new people in clubs, residence and orientation",
"LDR is hard but possible. It depends on your priorities.",
"Be confident!",
"Date casually till you know what you want",
"It's a lot of work. Must be open-minded.",
];

725
data/lifestyle-and-interests.ts Normal file
View File

@ -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,
},
];

380
data/miscellaneous.ts Normal file
View File

@ -0,0 +1,380 @@
export const M1 = [
{
category: "Almost every day",
value: 8,
},
{
category: "A few times weekly",
value: 8,
},
{
category: "A few times monthly",
value: 25,
},
{
category: "Rarely",
value: 69,
},
];
export const M2 = [
{
category: "0",
value: 12,
},
{
category: "1",
value: 32,
},
{
category: "2",
value: 23,
},
{
category: "3",
value: 13,
},
{
category: "4",
value: 4,
},
{
category: "5",
value: 2,
},
{
category: "6",
value: 3,
},
{
category: "7",
value: 3,
},
{
category: "8",
value: 3,
},
{
category: "9",
value: 1,
},
{
category: "10",
value: 4,
},
];
export const M3 = [
{
category: "Computer Science!",
value: 84,
},
{
category: "Software Engineering",
value: 6,
},
{
category: "Psychology",
value: 2,
},
{
category: "FARM",
value: 1,
},
{
category: "BBA",
value: 1,
},
];
export const M4 = [
{
category: "Yes",
value: 27,
},
{
category: "No",
value: 73,
},
];
export const M5 = [
{
category: "Yes",
value: 16,
},
{
category: "No",
value: 84,
},
];
export const M6 = [
{
text: "Go to UofT",
value: 33,
},
{
text: "UBC",
value: 9,
},
{
text: "A different university...",
value: 15,
},
{
text: "UOttawa",
value: 1,
},
{
text: "Start a business",
value: 5,
},
{
text: "Take a gap year and try again",
value: 8,
},
{
text: "Learn a trade",
value: 3,
},
{
text: "UofWindsor",
value: 3,
},
{
text: "Start working",
value: 1,
},
{
text: "Travel",
value: 2,
},
{
text: "UAlberta",
value: 1,
},
{
text: "McGill",
value: 1,
},
{
text: "Stanford",
value: 1,
},
{
text: "UIUC",
value: 1,
},
{
text: "No idea",
value: 3,
},
{
text: "Die...",
value: 3,
},
{
text: "Teacher's College",
value: 2,
},
{
text: "Resting and Learing",
value: 1,
},
{
text: "Be a doctor",
value: 2,
},
{
text: "Study biology",
value: 2,
},
];
export const M7 = [
{
text: "Communication",
value: 4,
},
{
text: "Become more social",
value: 7,
},
{
text: "Cooking",
value: 12,
},
{
text: "Handling stress",
value: 3,
},
{
text: "Dance",
value: 4,
},
{
text: "Sing",
value: 3,
},
{
text: "Weight Lifting",
value: 2,
},
{
text: "Snowboard",
value: 2,
},
{
text: "Improved Relationship",
value: 5,
},
{
text: "Public Speaking",
value: 2,
},
{
text: "Self-confidence",
value: 6,
},
{
text: "Video games",
value: 5,
},
{
text: "Grown as a Person",
value: 2,
},
{
text: "Rock climbing",
value: 3,
},
{
text: "Guitar",
value: 2,
},
{
text: "Piano",
value: 2,
},
{
text: "Tennis",
value: 2,
},
{
text: "Fitness",
value: 2,
},
{
text: "Psychology",
value: 1,
},
{
text: "Responsibility",
value: 1,
},
{
text: "Swimming",
value: 1,
},
{
text: "Philosophy",
value: 2,
},
{
text: "Creative writing",
value: 2,
},
{
text: "Entrepreneurship & leadership",
value: 2,
},
{
text: "Biking",
value: 2,
},
{
text: "Debate",
value: 1,
},
{
text: "Life skills",
value: 2,
},
{
text: "Badminton",
value: 1,
},
{
text: "Ultimate frisbe",
value: 1,
},
{
text: "Volleyball",
value: 1,
},
{
text: "Body building",
value: 3,
},
{
text: "Mindfullness & Mature",
value: 4,
},
{
text: "Self regulation",
value: 1,
},
{
text: "Religion & Culture",
value: 2,
},
{
text: "Languages",
value: 3,
},
{
text: "Become a Youtuber",
value: 1,
},
{
text: "Draw gooderer",
value: 1,
},
{
text: "Photography",
value: 1,
},
{
text: "Teaching",
value: 1,
},
{
text: "Dating",
value: 2,
},
{
text: "Have Sex",
value: 1,
},
{
text: "Board games",
value: 2,
},
{
text: "Music",
value: 2,
},
{
text: "Improved fashion",
value: 1,
},
{
text: "Cheerleading",
value: 1,
},
{
text: "Figure skating",
value: 1,
},
];

2
data/mocks.ts
View File

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

231
data/post-grad.ts Normal file
View File

@ -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,
},
];

7056
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
pages/_app.css
View File

@ -2,6 +2,10 @@ html {
scroll-behavior: smooth;
}
html, body {
overflow-x: hidden;
}
body {
/* Theme colours */
--pink: #EF839D;
@ -68,6 +72,7 @@ body {
color: var(--primary-text);
font-family: "Inconsolata", monospace;
margin: 0;
position: relative;
/* Font styling for body */
font-size: calc(18rem / 16);

458
pages/academics.tsx Normal file
View File

@ -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>
);
}

311
pages/coop.tsx Normal file
View File

@ -0,0 +1,311 @@
import {
C1,
C2,
C3,
C4,
C5,
C6,
C7i,
C7ii,
C7iii,
C7iv,
C7v,
C7vKey,
C7vi,
C7viKey,
C7vii,
C7viii,
C7viiiKey,
} from "data/coop";
import { pageRoutes } from "data/routes";
import React from "react";
import { Color } from "utils/Color";
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 { ComponentWrapper } from "@/components/ComponentWrapper";
import { Header } from "@/components/Header";
import { LineGraph } from "@/components/LineGraph";
import { PieChart } from "@/components/PieChart";
import { SectionHeader } from "@/components/SectionHeader";
import {
StackedBarGraphHorizontal,
StackedBarGraphVertical,
} from "@/components/StackedBarGraph";
import { WordCloud } from "../components/WordCloud";
import styles from "./samplePage.module.css";
export default function CoopPage() {
const pageWidth = useWindowDimensions().width;
const isMobile = useIsMobile();
const colorRange = [
Color.primaryAccent,
Color.secondaryAccentLight,
Color.primaryAccentLight,
Color.secondaryAccent,
];
return (
<div className={styles.page}>
<Header />
<SectionHeader
title="Co-op"
subtitle="Explore careers, gain experience and earn money through UWaterloo's co-op program!"
/>
{/* C1 */}
<ComponentWrapper
heading="Are you in a co-op program?"
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)} />
</div>
</ComponentWrapper>
{/* C7ii */}
<ComponentWrapper
heading="Where were you located during work?"
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
>
<LineGraph
data={C7ii}
width={isMobile ? pageWidth / 1.5 : 600}
height={DefaultProp.graphHeight}
margin={{
top: 20,
bottom: 80,
left: 30,
right: 20,
}}
colorRange={colorRange}
/>
</ComponentWrapper>
{/* C2 */}
<ComponentWrapper
heading="What was your favourite co-op location?"
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
data={C2}
width={wordCloudWidth(isMobile, pageWidth)}
height={DefaultProp.graphHeight * 0.7}
wordPadding={15}
desktopMaxFontSize={75}
mobileMaxFontSize={48}
/>
</ComponentWrapper>
{/* C7i */}
<ComponentWrapper
heading="What company did you work for?"
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
>
<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="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}
width={wordCloudWidth(isMobile, pageWidth)}
height={DefaultProp.graphHeight}
wordPadding={14}
desktopMaxFontSize={75}
mobileMaxFontSize={48}
/>
</ComponentWrapper>
{/* 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. You’re not alone if you here and can’t find one! Finding your first co-op can be especially difficult."
align="right"
noBackground
>
<div className={styles.graphContainer}>
<PieChart data={C3} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
{/* c5 */}
<ComponentWrapper
heading="Were you ever banned from WaterlooWorks for renegotiating an offer/match?"
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}>
<PieChart data={C5} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
{/* 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’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}>
<PieChart data={C6} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
{/* C7iii */}
<ComponentWrapper
heading="What was your salary per hour in CAD (excluding other forms of compensation)?"
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
width={isMobile ? pageWidth / 1.5 : 500}
height={DefaultProp.graphHeight}
data={C7iii}
margin={{
top: 20,
left: 20,
}}
/>
</ComponentWrapper>
{/* C7iv */}
<ComponentWrapper
heading="How much did you receive in other forms of compensation in CAD? (i.e. bonuses, stock options, relocation, housing, etc.)"
bodyText="Additional compensation had increased as terms progressed and students got better jobs. It’s great to see students having accommodations to make their lives easier. We can also note that most participants didn't get any other form of compensation which explains why the first quartile and the minimum is at 0 for all terms."
noBackground
>
<BoxPlot
width={isMobile ? pageWidth / 1.5 : 600}
height={DefaultProp.graphHeight}
data={C7iv}
valueAxisLeftOffset={75}
margin={{
top: 20,
left: 20,
}}
/>
</ComponentWrapper>
{/* C7v */}
<ComponentWrapper
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 style={{ paddingRight: "150px" }}>
<StackedBarGraphHorizontal
width={isMobile ? pageWidth / 1.5 : 600}
height={DefaultProp.graphHeight}
keys={C7vKey}
colorRange={[
Color.primaryAccent,
Color.secondaryAccentLight,
Color.primaryAccentLighter,
Color.secondaryAccent,
]}
data={C7v}
margin={{
top: 20,
left: 20,
}}
/>
</div>
</ComponentWrapper>
{/* C7vi */}
<ComponentWrapper
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 style={{ paddingRight: "150px" }}>
<StackedBarGraphVertical
width={isMobile ? pageWidth / 1.5 : 600}
height={DefaultProp.graphHeight}
keys={C7viKey}
colorRange={[
Color.primaryAccent,
Color.secondaryAccentLight,
Color.primaryAccentLighter,
Color.secondaryAccent,
Color.primaryText,
]}
data={C7vi}
margin={{
top: 20,
left: 20,
}}
/>
</div>
</ComponentWrapper>
{/* C7vii */}
<ComponentWrapper
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" }}>
<LineGraph
data={C7vii}
colorRange={colorRange}
width={isMobile ? pageWidth / 1.5 : 600}
height={DefaultProp.graphHeight}
margin={{
top: 20,
bottom: 80,
left: 30,
right: 20,
}}
/>
</div>
</ComponentWrapper>
{/* C7viii */}
<ComponentWrapper
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 style={{ paddingRight: "150px" }}>
<StackedBarGraphVertical
width={isMobile ? pageWidth / 1.5 : 600}
height={DefaultProp.graphHeight}
keys={C7viiiKey}
colorRange={[Color.primaryAccent, Color.secondaryAccentLight]}
data={C7viii}
margin={{
top: 20,
left: 20,
}}
/>
</div>
</ComponentWrapper>
<BottomNav
leftPage={pageRoutes.academics}
rightPage={pageRoutes.lifestyleAndInterests}
></BottomNav>
</div>
);
}

172
pages/demographics.tsx Normal file
View File

@ -0,0 +1,172 @@
import {
D1,
D2,
D3,
D4,
D5,
D6,
D7,
D8,
D9,
D10,
D11,
} from "data/demographics";
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="Demographics"
subtitle="An insight into the demographics of UW’s CS programs"
/>
<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."
>
<div className={styles.graphContainer}>
<PieChart data={D1} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="Please select the gender identity option(s) with which you identify."
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
>
<div className={styles.graphContainer}>
<PieChart data={D2} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper heading="Please indicate the pronouns that you use.">
<div className={styles.graphContainer}>
<PieChart data={D3} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="Please select the racial category or categories with which you primarily identify."
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
>
<BarGraphVertical data={D4} {...barGraphProps(isMobile, pageWidth)} />
</ComponentWrapper>
<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! :)"
>
<BarGraphVertical
data={D5}
{...barGraphProps(isMobile, pageWidth)}
lowerLabelDy="0"
/>
</ComponentWrapper>
<ComponentWrapper
heading="Please select the sexual identity option(s) you identify with."
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
>
<BarGraphVertical
data={D6}
{...barGraphProps(isMobile, pageWidth)}
widthAlternatingLabel={700}
/>
</ComponentWrapper>
<ComponentWrapper
heading="Where did you live before coming to UW?"
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
data={D7}
width={wordCloudWidth(isMobile, pageWidth)}
height={DefaultProp.graphHeight}
wordPadding={7}
desktopMaxFontSize={75}
mobileMaxFontSize={48}
/>
</ComponentWrapper>
<ComponentWrapper
heading="What is the highest education level of your parents?"
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)} />
</ComponentWrapper>
<ComponentWrapper
heading="What was your family income before entering your current UW program?"
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
// TODO: change when histogram component is ready
data={D9}
{...barGraphProps(isMobile, pageWidth)}
/>
</ComponentWrapper>
<ComponentWrapper
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
>
<BarGraphVertical
data={D10}
{...barGraphProps(isMobile, pageWidth)}
lowerLabelDy="0"
/>
</ComponentWrapper>
<ComponentWrapper
heading="Please indicate your religion and/or spiritual affiliation."
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
data={D11}
width={barGraphWidth(isMobile, pageWidth)}
height={DefaultProp.graphHeight}
margin={{ ...barGraphMargin, ...{ left: 220 } }}
/>
</ComponentWrapper>
<BottomNav rightPage={pageRoutes.academics}></BottomNav>
</div>
);
}

235
pages/friends.tsx Normal file
View File

@ -0,0 +1,235 @@
import {
F1,
F2,
F3,
F4,
F5,
F6,
F7,
F8,
F9,
F10,
F11,
F12,
F13,
F14,
F15,
F16,
} from "data/friends";
import { pageRoutes } from "data/routes";
import React from "react";
import {
barGraphProps,
DefaultProp,
pieChartProps,
barGraphMargin,
barGraphWidth,
wordCloudWidth,
} from "utils/defaultProps";
import { useWindowDimensions } from "utils/getWindowDimensions";
import { useIsMobile } from "utils/isMobile";
import { BarGraphVertical, BarGraphHorizontal } from "@/components/BarGraph";
import { BottomNav } from "@/components/BottomNav";
import { ComponentWrapper } from "@/components/ComponentWrapper";
import { Header } from "@/components/Header";
import { PieChart } from "@/components/PieChart";
import { SectionHeader } from "@/components/SectionHeader";
import { WordCloud } from "@/components/WordCloud";
import styles from "./samplePage.module.css";
export default function Demographics() {
const pageWidth = useWindowDimensions().width;
const isMobile = useIsMobile();
return (
<div className={styles.page}>
<Header />
<SectionHeader
title="Friends"
subtitle="The friends you make in university are friends you’ll have for life."
/>
<ComponentWrapper
heading="Rate how social you are."
bodyText="Looks like most people consider themselves to be in the middle."
align="center"
>
<BarGraphVertical
data={F1}
{...barGraphProps(isMobile, pageWidth)}
lowerLabelDy="0"
/>
</ComponentWrapper>
<ComponentWrapper
heading="How would you describe yourself?"
bodyText="Ambiverts and introverts dominate CS at UWaterloo. Still, contrary to a popular Reddit opinion, it seems that introverted people do not necessarily comprise such a big majority of the CS student population. Extroverts and ambiverts are almost a half of the CS student population!"
align="right"
>
<div className={styles.graphContainer}>
<PieChart data={F2} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="How many close friends throughout university were also in your program?"
bodyText="Most people had friends in the same program as them. For a lot of people, the majority of their friends are in the same program. Perhaps the shared classes, career goals, and pain from shared assignments make scheduling and conversations easier."
noBackground
>
<BarGraphVertical data={F3} {...barGraphProps(isMobile, pageWidth)} />
</ComponentWrapper>
<ComponentWrapper
heading="How often do you keep in touch with high school friends?"
bodyText="Most people are still in touch with their friends in some form or another! Keeping in touch with high school friends can be especially difficult, given that high school friends often drift away from each other due to different career and/or academic paths."
align="right"
>
<div className={styles.graphContainer}>
<PieChart data={F4} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="How many friends are going to be in the same city as you post-grad?"
bodyText="It is nice to know that the majority of our respondents have a few friends that are going to be in their city post-grad."
noBackground
>
<BarGraphVertical data={F5} {...barGraphProps(isMobile, pageWidth)} />
</ComponentWrapper>
<ComponentWrapper
heading="How often do you stay in touch with friends that you made during co-op?"
bodyText="Many people do not really keep in touch with friends made during co-op. This makes sense as each co-op only lasts a short period of time. Interns are not necessarily given the opportunity to interact with each other during the co-op term either. A remote co-op experience can also affect friendships. To sum up, the ease of maintaining friends from co-ops varies on each co-op!"
align="right"
>
<div className={styles.graphContainer}>
<PieChart data={F6} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="How often do you stay in touch with friends that you made during school terms?"
bodyText="Now, more people keep in touch with friends made during school terms. This could be because they can hang out during multiple school terms while on campus."
noBackground
>
<div className={styles.graphContainer}>
<PieChart data={F7} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="Which term(s) did you meet most of your friends?"
bodyText="Establishing friendships is generally easier during the beginning of university as many core introductory courses are shared and all sequences have 1A and 1B at the same time. However, it is definitely still possible to make friends in later terms.😉"
align="right"
>
<BarGraphHorizontal
data={F8}
width={barGraphWidth(isMobile, pageWidth)}
height={DefaultProp.graphHeight}
margin={{ ...barGraphMargin, ...{ left: 100 } }}
/>
</ComponentWrapper>
<ComponentWrapper
heading="How many friend groups do you have?"
bodyText="According to our data, most people have 3-4 friend groups. These friend groups can come from classes, extracurriculars, high school friends, etc."
noBackground
>
<BarGraphVertical
data={F9}
{...barGraphProps(isMobile, pageWidth)}
lowerLabelDy="0"
/>
</ComponentWrapper>
<ComponentWrapper
heading="What is the average size of your friend groups?"
bodyText="UW's CS2022's friend groups typically consists of 3-4 people which is pretty normal. Groups of friends of this size allow people to do group activities while maintaining a sense of closeness between them."
align="right"
>
<BarGraphVertical
data={F10}
{...barGraphProps(isMobile, pageWidth)}
lowerLabelDy="0"
/>
</ComponentWrapper>
<ComponentWrapper
heading="How open are you to meeting new people?"
bodyText="Even though they are graduating, most of our respondents are still somewhat open to meeting new people. Meeting new people can make your life more exciting and make you discover new perspectives that change the way you approach life!"
noBackground
>
<BarGraphVertical
data={F11}
{...barGraphProps(isMobile, pageWidth)}
lowerLabelDy="0"
/>
</ComponentWrapper>
<ComponentWrapper
heading="How many of your friendships were made after starting university?"
bodyText="For a lot of people, most or at least some friendships are made during university. This goes to show how university is an important point in life where people form their most valuable relationships!"
align="right"
>
<BarGraphVertical
data={F12}
{...barGraphProps(isMobile, pageWidth)}
lowerLabelDy="0"
/>
</ComponentWrapper>
<ComponentWrapper
heading="How did you meet most of your friends after starting university?"
bodyText="There are countless ways to meet new friends in university. Some of the most common ways include classes, mutual friends, and extracurriculars."
noBackground
>
<BarGraphHorizontal
data={F13}
width={barGraphWidth(isMobile, pageWidth)}
height={DefaultProp.graphHeight}
margin={{ ...barGraphMargin, ...{ left: 150 } }}
/>
</ComponentWrapper>
<ComponentWrapper
heading="Where do you and your friends usually hang out on campus? "
bodyText="There are many buildings on campus for students to chill and hang out. Looking at our data, hanging out at someone’s residence seems to be the most popular option. It makes sense as having fun outside of school buildings enable people to take their mind off from schoolwork. MC and DC are also fairly popular spots since they are where most classes take place for CS students and DC is the library where most students study at due to its nice vibes while MC has all the club offices."
align="right"
>
<BarGraphVertical data={F14} {...barGraphProps(isMobile, pageWidth)} />
</ComponentWrapper>
<ComponentWrapper
heading="What is your go-to activity when hanging out with friends?"
bodyText="There is a variety of activities enjoyed by everyone! Most people enjoy eating food with their friends (Who doesn't love to eat or try out new restaurants?). Talking and going to the gym are the next social activities that are favoured the most by students. Hanging out with friends doesn't have to be complicated! 😉"
noBackground
>
<WordCloud
data={F15}
width={wordCloudWidth(isMobile, pageWidth)}
height={DefaultProp.graphHeight}
wordPadding={7}
desktopMaxFontSize={75}
mobileMaxFontSize={48}
/>
</ComponentWrapper>
<ComponentWrapper
heading="What proportion of friends will you keep in contact with post graduation?"
bodyText="Some or even most friendships will be kept by our students post-grad! As mentioned previously, university is an experience where people make most of their long-term friends! This pie chart demonstrates it!"
align="right"
>
<div className={styles.graphContainer}>
<PieChart data={F16} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<BottomNav
leftPage={pageRoutes.postGrad}
rightPage={pageRoutes.miscellaneous}
></BottomNav>
</div>
);
}

222
pages/intimacy-and-drugs.tsx Normal file
View File

@ -0,0 +1,222 @@
import {
I1,
I2,
I3,
I4,
I5,
I6,
I6i,
I7,
I8,
I8i,
I9,
I10,
} from "data/intimacy-and-drugs";
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 {
GroupedBarGraphVertical,
GroupedBarGraphHorizontal,
} from "@/components/GroupedBarGraph";
import { Header } from "@/components/Header";
import { PieChart } from "@/components/PieChart";
import { QuotationCarousel } from "@/components/QuotationCarousel";
import { SectionHeader } from "@/components/SectionHeader";
import { Color } from "../utils/Color";
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="Intimacy and Drugs"
subtitle="What have people tried/already done during university?👀"
/>
<ComponentWrapper
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.secondaryAccentLight]}
barHoverColorsMap={{
[Color.primaryAccentLight]: Color.primaryAccent,
[Color.secondaryAccentLight]: Color.secondaryAccent,
}}
width={barGraphWidth(isMobile, pageWidth)}
minWidth={700}
height={DefaultProp.graphHeight}
margin={{ ...barGraphMargin, ...{ left: 200, bottom: 60 } }}
/>
</ComponentWrapper>
<ComponentWrapper
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.secondaryAccentLight]}
barHoverColorsMap={{
[Color.primaryAccentLight]: Color.primaryAccent,
[Color.secondaryAccentLight]: Color.secondaryAccent,
}}
width={barGraphWidth(isMobile, pageWidth)}
height={700}
margin={{ ...barGraphMargin, ...{ bottom: 200 } }}
minWidth={800}
alternatingLabelSpace={40}
widthAlternatingLabel={1000}
lowerLabelDy="100px"
/>
</ComponentWrapper>
<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 relationship during their undergrad. On the other end, 5 is the most number of committed relationships indicated."
>
<BarGraphVertical
data={I3}
{...barGraphProps(isMobile, pageWidth)}
lowerLabelDy="0"
/>
</ComponentWrapper>
<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 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
>
<BarGraphVertical
data={I4}
{...barGraphProps(isMobile, pageWidth)}
lowerLabelDy="0"
/>
</ComponentWrapper>
<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."
>
<div className={styles.graphContainer}>
<PieChart data={I5} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="Did you ever date another CS / CS/BBA / CFM student?"
bodyText="27 people have dated another CS/CSBBA/CFM student. That’s about 1 in 4 students."
align="right"
noBackground
>
<div className={styles.graphContainer}>
<PieChart data={I6} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<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, 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}>
<PieChart data={I6i} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper
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
>
<BarGraphVertical
data={I7}
{...barGraphProps(isMobile, pageWidth)}
lowerLabelDy="0"
/>
</ComponentWrapper>
<ComponentWrapper
heading="Are you currently in a relationship?"
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
data={I8}
{...barGraphProps(isMobile, pageWidth)}
lowerLabelDy="0"
/>
</ComponentWrapper>
<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 are will either be in a long-distance relationship or are currently unsure."
align="right"
noBackground
>
<BarGraphHorizontal
data={I8i}
width={barGraphWidth(isMobile, pageWidth)}
height={DefaultProp.graphHeight}
margin={{ ...barGraphMargin, ...{ left: 100 } }}
/>
</ComponentWrapper>
<ComponentWrapper heading="How has your understanding of relationships changed in the past 5 years?">
<div className={styles.quotationCarouselContainer}>
<QuotationCarousel
data={I9}
circleDiameter={0}
width={barGraphWidth(isMobile, pageWidth)}
height={isMobile ? 600 : 500}
/>
</div>
</ComponentWrapper>
<ComponentWrapper
heading="Any advice for people looking for a relationship?"
noBackground
>
<div className={styles.quotationCarouselContainer}>
<QuotationCarousel
data={I10}
circleDiameter={0}
width={barGraphWidth(isMobile, pageWidth)}
height={600}
/>
</div>
</ComponentWrapper>
<BottomNav
leftPage={pageRoutes.lifestyleAndInterests}
rightPage={pageRoutes.postGrad}
></BottomNav>
</div>
);
}

259
pages/lifestyle-and-interests.tsx Normal file
View File

@ -0,0 +1,259 @@
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)}
lowerLabelDy="0"
/>
</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.coop}
rightPage={pageRoutes.intimacyAndDrugs}
></BottomNav>
</div>
);
}

127
pages/miscellaneous.tsx Normal file
View File

@ -0,0 +1,127 @@
import { M1, M2, M3, M4, M5, M6, M7 } from "data/miscellaneous";
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="Miscellaneous" subtitle="" />
<ComponentWrapper
heading="How often did you cry per school term?"
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
data={M1}
{...barGraphProps(isMobile, pageWidth)}
lowerLabelDy="0"
/>
</ComponentWrapper>
<ComponentWrapper
heading="How many hours per week do you spend on the UW subreddit?"
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
data={M2}
{...barGraphProps(isMobile, pageWidth)}
lowerLabelDy="0"
/>
</ComponentWrapper>
<ComponentWrapper
heading="If you had to restart university, what program would you enroll in?"
bodyText="Good to see that most CS postgrads don’t necessarily regret doing CS or a related degree!"
noBackground
>
<BarGraphHorizontal
data={M3}
width={barGraphWidth(isMobile, pageWidth)}
height={DefaultProp.graphHeight}
margin={{ ...barGraphMargin, ...{ left: 220 } }}
/>
</ComponentWrapper>
<ComponentWrapper
heading="Have you considered dropping/transferring out of your 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}>
<PieChart data={M4} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="Have you considered dropping out of university or transferring to another university?"
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}>
<PieChart data={M5} {...pieChartProps(isMobile, pageWidth)} />
</div>
</ComponentWrapper>
<ComponentWrapper
heading="If you couldn't go to UW, what would you have done instead?"
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
data={M6}
width={wordCloudWidth(isMobile, pageWidth)}
height={DefaultProp.graphHeight}
wordPadding={7}
desktopMaxFontSize={75}
mobileMaxFontSize={48}
/>
</ComponentWrapper>
<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! :)"
align="center"
>
<WordCloud
data={M7}
width={wordCloudWidth(isMobile, pageWidth)}
height={DefaultProp.graphHeight}
wordPadding={7}
desktopMaxFontSize={75}
mobileMaxFontSize={48}
/>
</ComponentWrapper>
<BottomNav
leftPage={pageRoutes.friends}
rightPage={pageRoutes.mentalHealth}
></BottomNav>
</div>
);
}

1
pages/playground.tsx
View File

@ -203,6 +203,7 @@ export default function Home() {
left: 30,
right: 20,
}}
colorRange={[Color.primaryAccent, Color.secondaryAccentLight]}
/>
<h2>

138
pages/post-grad.tsx Normal file
View File

@ -0,0 +1,138 @@
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"
noBackground
>
<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>
);
}

29
pages/samplePage.module.css
View File

@ -2,4 +2,33 @@
display: flex;
flex-direction: column;
justify-content: center;
}
.graphContainer {
padding: 0 calc(70rem / 16);
}
.quotationCarouselContainer {
display: flex;
flex-direction: column;
gap: calc(48rem / 16);
margin: calc(32rem / 16);
}
@media screen and (max-width: 1200px) {
.graphContainer {
padding: 0 calc(40rem / 16);
}
}
@media screen and (max-width: 1100px) {
.graphContainer {
padding: 0 calc(20rem / 16);
}
}
@media screen and (max-width: 900px) {
.graphContainer {
padding: 0;
}
}

86
pages/samplePage.tsx
View File

@ -1,13 +1,21 @@
import { mockCategoricalData, moreMockCategoricalData } from "data/mocks";
import {
mockBoxPlotData,
mockCategoricalData,
mockLineData,
moreMockCategoricalData,
} from "data/mocks";
import { pageRoutes } from "data/routes";
import React from "react";
import { Color } from "utils/Color";
import { useWindowDimensions } from "utils/getWindowDimensions";
import { useIsMobile } from "utils/isMobile";
import { BarGraphVertical, BarGraphHorizontal } from "@/components/BarGraph";
import { BottomNav } from "@/components/BottomNav";
import { BoxPlot } from "@/components/Boxplot";
import { ComponentWrapper } from "@/components/ComponentWrapper";
import { Header } from "@/components/Header";
import { LineGraph } from "@/components/LineGraph";
import { SectionHeader } from "@/components/SectionHeader";
import { WordCloud } from "@/components/WordCloud";
@ -22,7 +30,18 @@ export default function SamplePage() {
const defaultGraphHeight = 500;
// Make vars for common configs such as common margins
const defaultBarGraphMargin = { top: 20, bottom: 40, left: 150, right: 20 };
const defaultVerticalBarGraphMargin = {
top: 20,
bottom: 80,
left: 60,
right: 20,
};
const defaultHorizontalBarGraphMargin = {
top: 20,
bottom: 80,
left: 120,
right: 20,
};
return (
<div className={styles.page}>
@ -39,10 +58,9 @@ export default function SamplePage() {
data={mockCategoricalData}
width={defaultGraphWidth}
height={defaultGraphHeight}
margin={defaultBarGraphMargin}
margin={defaultVerticalBarGraphMargin}
/>
</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."
@ -58,21 +76,16 @@ export default function SamplePage() {
height={defaultGraphHeight}
/>
</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."
align="right"
>
<ComponentWrapper heading="What program are you in?" align="right">
<BarGraphHorizontal
className={styles.barGraphDemo}
data={mockCategoricalData}
width={defaultGraphWidth}
height={defaultGraphHeight}
margin={defaultBarGraphMargin}
// You can override specific margins if needed
margin={defaultHorizontalBarGraphMargin}
/>
</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."
@ -84,20 +97,18 @@ export default function SamplePage() {
data={mockCategoricalData}
width={defaultGraphWidth}
height={defaultGraphHeight}
margin={defaultBarGraphMargin}
margin={defaultHorizontalBarGraphMargin}
/>
</ComponentWrapper>
<ComponentWrapper heading="What program are you in?" align="left">
<BarGraphHorizontal
className={styles.barGraphDemo}
data={mockCategoricalData}
width={defaultGraphWidth}
height={defaultGraphHeight}
margin={defaultBarGraphMargin}
margin={defaultHorizontalBarGraphMargin}
/>
</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."
@ -113,7 +124,6 @@ export default function SamplePage() {
height={defaultGraphHeight}
/>
</ComponentWrapper>
<ComponentWrapper heading="What program are you in? " align="right">
<WordCloud
data={moreMockCategoricalData.map((word) => ({
@ -134,7 +144,6 @@ export default function SamplePage() {
height={defaultGraphHeight}
/>
</ComponentWrapper>
<ComponentWrapper heading="What program are you in?" align="left">
<WordCloud
data={moreMockCategoricalData.map((word) => ({
@ -145,7 +154,6 @@ export default function SamplePage() {
height={defaultGraphHeight}
/>
</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."
@ -157,10 +165,9 @@ export default function SamplePage() {
data={mockCategoricalData}
width={defaultGraphWidth}
height={defaultGraphHeight}
margin={defaultBarGraphMargin}
margin={defaultHorizontalBarGraphMargin}
/>
</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."
@ -171,21 +178,38 @@ export default function SamplePage() {
data={mockCategoricalData}
width={defaultGraphWidth}
height={defaultGraphHeight}
margin={defaultBarGraphMargin}
margin={defaultHorizontalBarGraphMargin}
/>
</ComponentWrapper>
<ComponentWrapper heading="What program are you in?" align="center">
<WordCloud
data={moreMockCategoricalData.map((word) => ({
text: word.key,
value: word.value,
}))}
width={defaultGraphWidth}
height={defaultGraphHeight}
<BoxPlot
width={600}
height={400}
data={mockBoxPlotData}
margin={{
top: 20,
left: 20,
}}
/>
</ComponentWrapper>
<ComponentWrapper
heading="What program are you in?"
align="right"
bodyText="Pariatur deserunt aute laborum ea adipisicing. Labore labore ipsum duis nisi ea incididunt ipsum occaecat. Ut occaecat et exercitation incididunt sit sit duis deserunt velit culpa nisi et dolore."
>
<LineGraph
data={mockLineData}
width={600}
height={400}
margin={{
top: 20,
bottom: 80,
left: 30,
right: 20,
}}
colorRange={[Color.primaryAccent, Color.secondaryAccentLight]}
/>
</ComponentWrapper>
<BottomNav
leftPage={pageRoutes.demographics}
rightPage={pageRoutes.contributors}

52
utils/defaultProps.ts Normal file
View File

@ -0,0 +1,52 @@
// Only static number props are included for this list
const propNames = ["graphHeight", "labelSize", "labelWidth"] as const;
// This type is needed for smart autocomplete
type PropName = typeof propNames[number];
const mobileBarGraphFactor = 1.25;
const desktopBarGraphFactor = 2;
export const barGraphWidth = (isMobile: boolean, pageWidth: number) =>
isMobile
? pageWidth / mobileBarGraphFactor
: pageWidth / desktopBarGraphFactor;
const mobilePieChartFactor = 1.25;
const desktopPieChartFactor = 3;
export const pieChartWidth = (isMobile: boolean, pageWidth: number) =>
isMobile
? pageWidth / mobilePieChartFactor
: pageWidth / desktopPieChartFactor;
const desktopWordCloudFactor = 1.5;
const mobileWordCloudWidth = 800;
export const wordCloudWidth = (isMobile: boolean, pageWidth: number) =>
isMobile ? pageWidth / desktopWordCloudFactor : mobileWordCloudWidth;
export const barGraphMargin = {
top: 20,
bottom: 80,
left: 60,
right: 20,
};
export const DefaultProp: { [key in PropName]: number } = {
graphHeight: 500,
labelSize: 24,
labelWidth: 100,
};
export const barGraphProps = (isMobile: boolean, pageWidth: number) => {
return {
width: barGraphWidth(isMobile, pageWidth),
height: DefaultProp.graphHeight,
margin: barGraphMargin,
};
};
export const pieChartProps = (isMobile: boolean, pageWidth: number) => {
return {
width: pieChartWidth(isMobile, pageWidth),
labelWidth: DefaultProp.labelWidth,
labelTextSize: DefaultProp.labelSize,
};
};

3
utils/inDevEnviroment.ts Normal file
View File

@ -0,0 +1,3 @@
const inDevEnvironment = process && process.env.NODE_ENV === "development";
export { inDevEnvironment };

2
utils/isMobile.ts
View File

@ -1,3 +1,3 @@
import { useWindowDimensions } from "./getWindowDimensions";
export const useIsMobile = () => useWindowDimensions().width <= 768;
export const useIsMobile = () => useWindowDimensions().width <= 900;