165 lines
7.2 KiB
TypeScript
165 lines
7.2 KiB
TypeScript
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)} />
|
||
</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)} />
|
||
</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>
|
||
);
|
||
}
|