-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
372 lines (346 loc) · 14.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<!-- TAB TITLE -->
<title>CPSC547 2022WT1 | UBC CS Grad Explainer</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@observablehq/inspector@5/dist/inspector.css"
/>
<!-- FONTS -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet"
/>
</head>
<!-- -->
<body>
<div id="focus-space" class="container">
<h1>CPSC547 2022WT1: UBC CS Grads Cost of Living</h1>
<hr />
<div id="graphic" class="sections">
<section class="step">
<h2 class="title">Welcome!</h2>
<p>
In May 2022, a collective of UBC Computer Science (CS) graduate
students distributed surveys to the other students in the department
to determine how well students were being supported by their current
stipends. This explainer uses the survey data, and data from
government and university websites to demonstrate the current cost
of living situation in Vancouver (as of Dec 2022). See how students
are being supported, and compare your own budget to that of an
average CS graduate student by scrolling through the article for
more information!
</p>
<!-- This is a scrollable explainer that shows the struggle of current
UBC CS graduate students. -->
</section>
<section class="step">
<h2 class="title">
What monthly expenses does a UBC CS grad student have?
</h2>
<p>
Focusing on the basic expenses of a CS graduate student, this figure
shows the average proportion of a student' monthly expenses
separated into housing, food, social activities, health, utilities,
and commuting expenditures. As you can see, <b>housing</b> accounts
for more than half of the expenses!
</p>
</section>
<section class="step">
<h2 class="title">
How can we calculate inflation in Vancouver?
</h2>
<p>
To understand the cost of living situation in Vancouver we will show
inflation using the consumer price index (CPI).
</p>
<p>
The CPI is a common econonomic metric used to measure the inflation
rate in a certain economic market (such as Vancouver). It is a
proportional metric used to compare prices items between years. For
example, if a banana cost $2 in 2002 and $4 in 2022, the banana' CPI
will be 200.
<em>There are no units for this metric.</em>
</p>
</section>
<section class="step">
<h2 class="title">Inflation Rate in British Columbia</h2>
<p>
Here, we have the overall CPI for British Columbia since 2016. The
CPI is calculated by comparing the prices of that year to their
resepctive 2002 prices. The visualization here depicts the overall
upward trend of CPI indicating that inflation has been increasing
since 2002.
</p>
</section>
<section class="step">
<h2 class="title">The 12-month % change</h2>
<p>
An overall change of inflation over the course of 6 years is not
that surprising. So let's instead compare the CPI change from year
to year. In this visualization, we can see how CPI changes year to
year. If you look at 2022, this rate of change of CPI is strikingly
fast compared to previous years.
</p>
</section>
<section class="step">
<h2 class="title">Components</h2>
<p>
Let's look at the previous year a little most closely. In this graph
every line represents the change in CPI from October 2021 to
September 2022. We can calculate CPI for different components, such
as food and housing. Looks like in August of 2022, clothing was
overall less expensive than in August of 2021.
</p>
</section>
<section class="step">
<h2 class="title">Housing!</h2>
<p>
Housing has one of the highest 12-month CPI over the last year! A
CPI increase of 8.26% means that last year's rent at $1600 would
cost you
<strong>$1732</strong>
this year. This is particularly concerning for graduate students
since we saw that housing is the largest monthly expense that
students have.
</p>
</section>
<section class="step">
<h2 class="title">Food & Transport</h2>
<p>
The price of food and transport has also risen. This means that if
you bought a steak <span>🥩</span> for $10 last year, it would cost
you $11 this year!
</p>
<p>
Transportation 🚗 has the the overall highest 12-month CPI.
Transportation is a relatively smaller portion of the average CS
students' monthly budget. However, given these rapid increase
<strong>you cannot choose to live too far away</strong>.
</p>
</section>
<section class="step">
<h2 class="title">OK. Well, what about CS grad student funding?</h2>
<p>
Each shape you see here depicts one student who filled out the cost
of living survey. And each shape represents the grad student's
program: master's, Ph.D. or Ph.D.-track. In this visualization, we
are looking at how a students' basic income [their research
assistantship (RA-ship) + teaching assistantship (TA-ship) + awards]
compares to the total expenses they incur.
</p>
</section>
<section class="step">
<h2 class="title">Oh no!</h2>
<p>
From the survey, the funding of
<span style="color: #db0b0b; font-weight: bold;">47.5%</span>
graduate students in UBC CS department cannot offset their basic
expenses! Students highlighted in red have more expenses than
income.
</p>
</section>
<section class="step">
<h2 class="title">With additional support...</h2>
<div class="scatter-final-content">
<p>
Some students receive additional financial support via
internships. All students that
<strong style="color: #7e7dfe;"
>receive this extra support</strong
>
can afford all their basic expenses and perhaps even save a little
on the side.
</p>
<p>
However, there are students are who still
<strong style="color: #ffa38b;"
>cannot overcome their expenses</strong
>
with no extra support available.
</p>
<p>
There are also those with
<strong style="color: #8fbd88;">"just enough" funding</strong>,
but they likely are unable to save since they just meet their
basic needs.
</p>
<p>
Use the filter drop-down to see how this data is spread amongst
degree program.
</p>
</div>
</section>
<section class="step">
<h2 class="title">An unsafe feeling.</h2>
<p>
<strong>88.6%</strong> of the respondents to the cost of living
survey claims to feel uneasy with their current stipend amount.
</p>
<p>
Not a good sign!
</p>
</section>
<section class="step">
<h2 class="title">How about you?</h2>
<p>This is not someone else's business. It is related to you.</p>
<p>
How do your expenses compare to that of an average computer science
graduate student? Use the sliders to input your own expenses (in
CAD) for each category and see how you stack up.
</p>
</section>
<section class="step">
<h2 class="title">What about other universities?</h2>
<p>
It will be a good excuse for UBC to not take action if the problem
is universal. But is that the case?
</p>
<p>
Here, we depict how the funding for CS Ph.D students at different
universities compares to the cost of living in the city that the
university is located in. The
<strong style="color: rgb(255, 127, 14);">negative side</strong>
represents the different yearly costs for a student and the
<strong style="color: rgb(31, 119, 180);">positive side</strong>
represents the yearly funding a student receives.
<br />
<em>All currencies have been converted to CAD.</em>
</p>
</section>
<section class="step">
<h2 class="title">Does the funding offset the expenses?</h2>
<p>
Let's overlay the cost of living on top of the income that the Ph.D.
students receive. In some universities, like MIT, we see that
students actually earn more than they spend. But in universities,
like UBC and McGill, the expenses that students have is greater than
the income they receive. Boom! After adding the
<strong>cost of living</strong>, the problem arises!
</p>
</section>
<section class="step">
<h2 class="title">Ordering the comparison...</h2>
<p>
After ordering the comparison, we see that students at UBC have the
greatest deficit when it comes to their income versus their expenses
compared to other universities. Oh no 😱!
</p>
</section>
<section class="step">
<!-- Required to hide some elmenets -->
</section>
</div>
<!-- VISUALIZATIONS -->
<div id="vis">
<div id="observable-embed-lollipop">
<div class="lollipop-interactions">
<div id="observablehq-viewof-food_health-d77a1324"></div>
<div id="observablehq-viewof-utilities_commute-d77a1324"></div>
</div>
<div id="observablehq-lollipopdm-d77a1324"></div>
<!-- Inspector css & Long script old placement for reference -->
</div>
</div>
</div>
<div id="extra-space" class="container">
<div class="fight, flex">
<div class="left">
<h2>Fight for it!</h2>
<p>
Student workers at UBC are organizing to fight for this issue. And
we need your voice! Let's <b>click on the image</b> on the right to
sign the
<a target="_blank" href="https://organizeubc.cupe.ca/sign-a-card/"
>union card</a
>
-- Your voice matters!
</p>
</div>
<div class="right">
<a href="https://organizeubc.cupe.ca/sign-a-card/" target="_blank"
><img
src="https://organizeubc.cupe.ca/wp-content/uploads/sites/212/2022/10/UBC-Logo_Final.png"
alt=""
height="450px"
/></a>
</div>
</div>
<br /><br /><br />
<br /><br /><br />
<div>
<h2>Land Acknowledgement</h2>
<p>
As students of UBC, we would like to acknowledge that the land on
which we study is the traditional, ancestral, and unceded territory of
the xwməθkwəy̓əm (Musqueam) People. As a visualization project created
on this land, we are recalling the unjust, racist, and colonial
practices that have had a lasting legacy, and continue to create
prejudiced obstacles for Indigenous peoples across Canada.
</p>
</div>
<br /><br /><br />
<div>
<h2>Credits</h2>
<p>
This explainer article is brought to you by a group of UBC CS graduate
students:
<a target="_blank" href="https://github.com/NoirTree/">Carol</a>,
<a
href="https://dfp.ubc.ca/people/trainees/tommy-nguyen"
target="_blank"
>Tommy</a
>, and
<a
target="_blank"
href="https://www.linkedin.com/in/devyani-mclaren-5a11ab166/?originalSubdomain=ca"
>Devyani</a
>.
</p>
<p>
All code, data, and further attributions can be found in the Github
link
<a
target="_blank"
href="https://github.com/UBCCSGradCoLExplainer/cpsc547"
>here</a
>.
</p>
</div>
</div>
<!-- Java Script -->
<script src="lib/d3.js"></script>
<script src="js/scroller.js"></script>
<script src="js/sections.js"></script>
<script type="module">
import {
Runtime,
Inspector
} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@5/dist/runtime.js";
import define from "https://api.observablehq.com/d/99c0287acd01a0e6@846.js?v=3";
new Runtime().module(define, (name) => {
if (name === "viewof food_health")
return new Inspector(
document.querySelector("#observablehq-viewof-food_health-d77a1324")
);
if (name === "viewof utilities_commute")
return new Inspector(
document.querySelector(
"#observablehq-viewof-utilities_commute-d77a1324"
)
);
if (name === "lollipopdm")
return new Inspector(
document.querySelector("#observablehq-lollipopdm-d77a1324")
);
return ["data_avg", "xScale", "yScale", "xAxis"].includes(name);
});
</script>
</body>
</html>