-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
403 lines (365 loc) · 17.8 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
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
<html>
<head>
<title>The Signal - Deconstructing Penn Pathways</title>
<meta charset="UTF-8">
<meta property="og:image" content="images/preview.png" />
<link rel="shortcut icon" href="/assets/thesignal.ico?v=d4f90dbc9c">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<script src="js/jquery.min.js"></script>
<script src="js/semantic.min.js"></script>
<script src="js/thesignal-anniversary.js"></script>
<link rel="stylesheet" type="text/css" href="css/semantic.min.css">
<link rel="stylesheet" type="text/css" href="css/thesignal-csdataproject.css">
<!-- Hotjar Tracking Code for thesign.al -->
<script>
(function (h, o, t, j, a, r) {
h.hj = h.hj || function () {
(h.hj.q = h.hj.q || []).push(arguments)
};
h._hjSettings = {hjid: 672639, hjsv: 6};
a = o.getElementsByTagName('head')[0];
r = o.createElement('script');
r.async = 1;
r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
a.appendChild(r);
})(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv=');
</script>
</head>
<body>
<div id="fb-root"></div>
<script>(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.12';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="header">
<a href="/">
<img id="logo" src="images/tower.svg">
</a>
<a id="lockup" href="/">The Signal </a>
<div id="title">- Deconstructing Penn Pathways</div>
<div id="title-mobile">Deconstructing Penn Pathways</div>
</div>
<!--<div id="social">-->
<!--<div class="fb-like" data-href="http://thesign.al/pages/anniversary/" data-layout="standard"-->
<!--data-action="like" data-size="large" data-show-faces="true" data-share="true">-->
<!--</div>-->
<!--</div>-->
<div class="note" style="display: none;">
<h1>NOTE</h1>
<h2>These visualizations work a lot better on bigger screens. Trust us: It will be worth it.</h2>
</div>
<div class="intro">
<h1>
Introduction
</h1>
<p>Deconstructing Penn Pathways is an interactive data project conducted by <a href="/">The Signal</a>, in partnership with Career
Services, that links what students did each summer to their pursuits post-grad. Our purpose is to alleviate
confusion around choosing a “perfect internship” and expose students to a diverse set of possible journeys to
take here at Penn.
The sample includes 2231 students in the Class of 2017 surveyed by Career Services, with 553 from the Wharton
School, 340 from the Engineering School, 129 from the Nursing School, and 1317 from the College of Arts and
Sciences.
</p>
</div>
<div class="ui">
<div class="ui text menu">
<div class="header item">Choose Your School</div>
<div class="right menu">
<a class="active item" data-school="college">
College
</a>
<a class="item" data-school="engineering">
Engineering
</a>
<a class="item" data-school="wharton">
Wharton
</a>
<a class="item" data-school="nursing">
Nursing
</a>
</div>
</div>
</div>
<div id="content">
<div id="college" class="school">
<div class="graph">
<iframe width="100%" height="500px" frameborder="0" scrolling="no"
src="//plot.ly/~oodwyer/11.embed?autosize=True"></iframe>
<div class = "graph-x-axis">
<div class = "graph-x-axis-flow">
<div class = "graph-x-axis-element">
Freshman Summer
</div>
<div class = "graph-x-axis-element">
Sophomore Summer
</div>
<div class = "graph-x-axis-element">
Junior Summer
</div>
</div>
<div class = "graph-x-axis-float">
Graduation
</div>
</div>
</div>
<div class="text">
<i>The statistics below apply only to the students who filled out this survey and may not accurately reflect
the
College of Arts and Sciences undergraduate class as a whole.</i>
<ul>
<li>With the diversity of interests and fields that the College provides, students commonly pursue a
variety
of
internship and job opportunities both while at Penn and post-graduation.
</li>
<li>21% of seniors sought to continue their education post graduation instead of pursuing an immediate
full-time job.
</li>
<li>10% of students sought to enter careers in financial services while another 10% entered consulting
full-time.
</li>
<li>The “Other” category includes people who did not fill out the survey for that year as well as
categories
that were
not among the top 7 most popular during that year (these excluded categories include legal services,
manufacturing,
traveling, transportation, design, insurance, energy/natural resources/utilities, accounting,
hospitality, classes,
independent research, real estate/construction, and study abroad).
</li>
</ul>
</div>
</div>
<div hidden id="engineering" class="school">
<div class="graph">
<iframe width="100%" height="500px" frameborder="0" scrolling="no"
src="//plot.ly/~oodwyer/9.embed?autosize=True"></iframe>
<div class = "graph-x-axis">
<div class = "graph-x-axis-flow">
<div class = "graph-x-axis-element">
Freshman Summer
</div>
<div class = "graph-x-axis-element">
Sophomore Summer
</div>
<div class = "graph-x-axis-element">
Junior Summer
</div>
</div>
<div class = "graph-x-axis-float">
Graduation
</div>
</div>
</div>
<div class="text">
<i>The statistics below apply only to the students who filled out this survey and may not accurately reflect
the
engineering class as a whole.</i>
<ul>
<li>About 33% of graduating seniors went into full time technology jobs, stemming from over five fields
from
the previous summer.
</li>
<li>68% of the students who worked in technology after their junior year went into technology as their
full
time job.
</li>
<li>76% of students who had a junior year technology internship did not work in technology after their
sophomore year.
</li>
<li>67% of the students who worked in financial services after their junior year went into financial
services as their full time job.
</li>
<li>84% of students who had a junior year financial services internship did not work in financial
services
after their sophomore year.
</li>
<li>The “Other” category includes people who did not fill it out for that year, as well as categories
with
less than 4 per year, including traveling, transportation, government, and design.
</li>
</ul>
</div>
</div>
<div hidden id="wharton" class="school">
<div class="graph">
<iframe width="100%" height="500px" frameborder="0" scrolling="no"
src="//plot.ly/~oodwyer/15.embed?autosize=True"></iframe>
<div class = "graph-x-axis">
<div class = "graph-x-axis-flow">
<div class = "graph-x-axis-element">
Freshman Summer
</div>
<div class = "graph-x-axis-element">
Sophomore Summer
</div>
<div class = "graph-x-axis-element">
Junior Summer
</div>
</div>
<div class = "graph-x-axis-float">
Graduation
</div>
</div>
</div>
<div class="text">
<i>The statistics below apply only to the students who filled out this survey and may not accurately reflect
the
Wharton undergraduate class as a whole.</i>
<ul>
<li>The top three industries that graduating seniors entered via their full-time jobs were financial
services, consulting, and technology: 47% found employment in the financial services sector, 18% in
consulting, and 14% in technology.
</li>
<li>80% of the students who worked in financial services after their junior year went into financial
services as their full time job.
</li>
<li>32% of graduating seniors who had a full-time job in consulting had a consulting internship in their
junior year.
</li>
<li>67% of the students who worked in technology after their junior year went into technology as their
full
time job.
</li>
<li>5% of students had a financial services internship each summer and found full-time employment in
finance
after graduating.
</li>
<li>The “Other” category includes people who did not fill it out for that year as well as categories
that
were among the top 8 most popular during that year (these excluded categories include traveling,
transportation, government, design, insurance, nonprofit, energy/natural resources/utilities,
accounting, healthcare, hospitality, classes, independent research, and study abroad).
</li>
</ul>
</div>
</div>
<div hidden id="nursing" class="school">
<div class="graph">
<iframe width="100%" height="500px" frameborder="0" scrolling="no"
src="//plot.ly/~oodwyer/19.embed?autosize=True"></iframe>
<div class = "graph-x-axis">
<div class = "graph-x-axis-flow">
<div class = "graph-x-axis-element">
Freshman Summer
</div>
<div class = "graph-x-axis-element">
Sophomore Summer
</div>
<div class = "graph-x-axis-element">
Junior Summer
</div>
</div>
<div class = "graph-x-axis-float">
Graduation
</div>
</div>
</div>
<div class="text">
<i>The statistics below apply only to the students who filled out this survey and may not accurately reflect
the
nursing undergraduate class as a whole.</i>
<ul>
<li>Top five categories that graduating seniors in the sample entered for full-time were: Hospital (79%
of sample), Grad School (12% of sample), Seeking Employment (8% of sample), Community/Public Health
Center (5% of sample), and Other (5% of sample).
</li>
<li>
The sample of students from the Nursing School had the highest percentage still seeking employment
post-graduation of all four undergraduate schools.
</li>
<li>
“Other” includes Education Work, Financial Services, Military Service, Nonprofit, and Not Seeking
Employment.
</li>
</ul>
</div>
</div>
</div>
<div class="intro" style="padding-top: 80px; margin-bottom: -20px;">
<h1>
Methodology
</h1>
<p>
Data was collected by Career Services in their annual survey and analyzed and visualized using R and Plot.ly.
Categories were defined by academic advisors from each school.
The Signal did not alter any category, except for detailing the type of “Healthcare” for the Nursing School as
opposed to keeping it general for other schools for better data visualization. In addition, we created an
“Other” category that includes people who did not complete the survey for that year and categories with an
insignificant number of students pursuing them. The statistics below apply only to students in this survey and
may not accurately reflect the Penn undergraduate class as a whole.
</p>
<h1>
How to Interpret Visualizations:
</h1>
<p>Each bar is a category and its height represents its popularity among students that year. By hovering over the
bar in this example, readers can determine that 64 students interned in Technology that year. Students came from
two different categories the year prior and went into three different categories the year after.
By hovering over the linked path, readers can see the number of students that pursued A (labeled as “Target”)
after pursuing B (labeled as “Source”) the previous year. </p>
</div>
<div id="subscribe">
<span class="subscribe-gap gap"></span>
<span id="subscribe-facebook">
<h3>
Like this article
</h3>
<div class="fb-like fb_iframe_widget" style="left: 0"
data-href="http://thesign.al/pages/deconstructing-penn-pathways/"
data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"
fb-xfbml-state="rendered"
fb-iframe-plugin-query="action=like&app_id=&container_width=0&href=http%3A%2F%2Fthesign.al%2Fpages%2Fanniversary%2F&layout=standard&locale=en_US&sdk=joey&share=true&show_faces=true&size=small">
<span style="vertical-align: bottom; width: 450px; height: 56px;"><iframe name="f1ba2f20f8b6ea" width="1000px"
height="1000px" frameborder="0"
allowtransparency="true"
allowfullscreen="true" scrolling="no"
allow="encrypted-media"
title="fb:like Facebook Social Plugin"
src="https://www.facebook.com/v2.12/plugins/like.php?action=like&app_id=&channel=http%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2FRQ7NiRXMcYA.js%3Fversion%3D42%23cb%3Dffd532ad4bba5%26domain%3Dthesign.al%26origin%3Dhttp%253A%252F%252Fthesign.al%252Ff2973a1e9c0ccc%26relation%3Dparent.parent&container_width=0&href=http%3A%2F%2Fthesign.al%2Fpages%2Fanniversary%2F&layout=standard&locale=en_US&sdk=joey&share=true&show_faces=true&size=small"
style="border: none; visibility: visible; width: 450px; height: 56px;"
class=""></iframe></span></div>
</span>
<span id="subscribe-newsletter">
<span class="organizer">
<h3>
Subscribe to our newsletter
</h3>
<form method="post" action="/subscribe/" class="">
<input class="confirm" type="hidden" name="confirm"><input class="location" type="hidden" name="location"
value="http://www.thesign.al/"><input
class="referrer" type="hidden" name="referrer" value="">
<div class="lineator">
<div class="form-group" style="float: left;">
<input class="subscribe-email" type="email" name="email" placeholder="Your email address">
</div>
<button class="" type="submit">SUBSCRIBE</button>
</div>
<script type="text/javascript">(function (g, h, o, s, t) {
h[o]('.location')[s] = h[o]('.location')[s] || g.location.href;
h[o]('.referrer')[s] = h[o]('.referrer')[s] || h.referrer;
})(window, document, 'querySelector', 'value');</script>
</form>
</span>
</span>
<span class="subscribe-gap gap"></span>
</div>
<div id="credits">
<h3>ⓒ 2018 The Signal Team.</h3>
<h1>Visualization</h1>
<h2>Laura Gao</h2>
<h2>Hoyt Gong</h2>
<h2>Olivia O'Dwyer</h2>
<h2>Sophia Ye</h2>
<br>
<h1>Design and Development</h1>
<h2>Laura Gao</h2>
<h2>Qi Linzhi</h2>
<h2>Halil Can Memoglu</h2>
</div>
<!--<script src="js/tilt.jquery.min.js"></script>-->
</body>
</html>