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

Add Demographics page (Closes #53) (#73)
continuous-integration/drone/push Build is passing Details 

Changes: (outside of Demographics page)
* colour of the text (might be changed later on) because pure white strains the eye (contrast is too high).
* font size + line height
* SectionHeader word break fix of the title
* `isMobile` breakpoint is changed to 900

https://demographics-page-csc-class-profile-staging-snedadah.k8s.csclub.cloud/demographics/
Co-authored-by: e26chiu <e26chiu@csc.uwaterloo.ca>
Reviewed-on: #73
Reviewed-by: Shahan Nedadahandeh <snedadah@csclub.uwaterloo.ca>
This commit is contained in:
Mark Chiu 2022-11-12 11:37:15 -05:00
parent 80530c1c1a
commit fb9c5243ab
6 changed files with 577 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/ComponentWrapper.module.css
View File

@ -65,4 +65,10 @@
.internalWrapper { .internalWrapper {
padding: calc(20rem / 16); padding: calc(20rem / 16);
}
.internalWrapper p {
font-size: calc(24rem / 16);
opacity: .85;
line-height: 1.25;
} }

1
components/SectionHeader.module.css
View File

@ -10,6 +10,7 @@
color: var(--primary-accent-light); color: var(--primary-accent-light);
font-size: calc(70rem / 16); font-size: calc(70rem / 16);
margin: calc(40rem / 16) auto; margin: calc(40rem / 16) auto;
word-break: break-all;
} }
.subTitle { .subTitle {

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

199
pages/demographics.tsx Normal file
View File

@ -0,0 +1,199 @@
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 { useWindowDimensions } from "utils/getWindowDimensions";
import { useIsMobile } from "utils/isMobile";
import { BarGraphHorizontal, BarGraphVertical } 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 { width } = useWindowDimensions();
const isMobile = useIsMobile();
const defaultGraphWidth = isMobile ? width / 1.25 : width / 2;
const defaultPieChartWidth = isMobile ? width / 1.25 : width / 3;
const defaultGraphHeight = 500;
const defaultBarGraphMargin = { top: 20, bottom: 80, left: 60, right: 20 };
const defaultLabelSize = 24;
const defaultLabelWidth = 100;
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}
width={defaultPieChartWidth}
labelWidth={defaultLabelWidth}
/>
</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}
width={defaultPieChartWidth}
labelWidth={defaultLabelWidth}
labelTextSize={defaultLabelSize}
/>
</div>
</ComponentWrapper>
<ComponentWrapper heading="Please indicate the pronouns that you use.">
<div className={styles.graphContainer}>
<PieChart
data={D3}
width={defaultPieChartWidth}
labelWidth={defaultLabelWidth}
labelTextSize={defaultLabelSize}
/>
</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}
width={defaultGraphWidth}
height={defaultGraphHeight}
margin={defaultBarGraphMargin}
/>
</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}
width={defaultGraphWidth}
height={defaultGraphHeight}
margin={defaultBarGraphMargin}
/>
</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}
width={defaultGraphWidth}
height={defaultGraphHeight}
margin={defaultBarGraphMargin}
/>
</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={isMobile ? width / 1.5 : 800}
height={defaultGraphHeight}
/>
</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}
width={defaultGraphWidth}
height={defaultGraphHeight}
margin={defaultBarGraphMargin}
/>
</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}
width={defaultGraphWidth}
height={defaultGraphHeight}
margin={defaultBarGraphMargin}
/>
</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}
width={defaultGraphWidth}
height={defaultGraphHeight}
margin={defaultBarGraphMargin}
/>
</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={defaultGraphWidth}
height={defaultGraphHeight}
margin={{ ...defaultBarGraphMargin, ...{ left: 200 } }}
/>
</ComponentWrapper>
<BottomNav rightPage={pageRoutes.academics}></BottomNav>
</div>
);
}

22
pages/samplePage.module.css
View File

@ -2,4 +2,26 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
}
.graphContainer {
padding: 0 calc(70rem / 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;
}
} }

2
utils/isMobile.ts
View File

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