-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
118 lines (99 loc) · 6.46 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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src = 'd3.js'></script>
<script src = 'https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.6/d3-legend.min.js'></script>
<meta property='og:title' content='Best College Majors'/>
<meta property='og:image' content='https://github.com/cuthchow/college-majors-visualisation/blob/master/preview.png'/>
<meta property='og:description' content='This interactive, scrollable data visualisation will take you on a journey through all of the different college majors in the United States, and compare how they stack up in terms of median graduate salary, gender ratios, employability, and other factors. '/>
<meta property='og:url' content='https://cuthchow.github.io/college-majors-visualisation/'/>
<title>Best College Majors</title>
</head>
<body>
<!-- <div id="info">
a
</div> -->
<img src="https://github.com/cuthchow/college-majors-visualisation/blob/master/preview.png" alt="">
<div id="tooltip"></div>
<div id="graphic">
<div id="sections">
<section class="step">
<div class="title"></div>
<br><br>
<h1>What was the Covid-19 Impact on Labor?</h1>
<p>By <a href = 'https://www.linkedin.com/in/maxim-podolski-95bbb0158/'>marco fucking polo</a></p>
<p>
Show Basic Unemployment Graph.
<br><br>
If you ever want to find out more about a bubble, just hover over it and a tooltip should appear.<br><br>
</p>
</section>
<section class="step">
<p>
Show Take up in the facilities.
<br>
</p>
<svg id = 'legend' width = '400px' height = '500px'></svg>
</section>
<section class = 'step'>
<svg id = 'legend2' width = '400px' height = '450px'></svg><br><br>
Bear in mind that some of these figures may suffer from small sample sizes. If you hover over a bubble, you can see additional information,
including the number of students enrolled in a given major. Salary figures from degrees with lower
enrolment may be less accurate due to the smaller pool of student respondents
</section>
<section class="step">
<br><br><br><br><br><br>
<p>
If we rearrange all the data points into a histogram format, the salary potential of engineering majors becomes
even more stark, as almost all the points on the right of the graph are colored yellow, for engineering. As for all the
other majors, they follow a fairly diverse yet tightly spaced distribution, with the modal class being
salaries between $34,000 and $36,000.
</p>
</section>
<section class="step">
<p>
<h2>Does Gender Influence Chosen Majors?</h2>
Now what if we took those same categories, but coloured them based on the proportion of the students which are male or female?
In this chart, blue represents majors with > 60% male, and red represents > 60% female, and the grey bubbles represent the more gender
balanced courses.
<br><br>(Hover over the labels if you've forgotten the category)<br><br>
What is striking about this graphic is that almost every category grouping of majors are either decidedly more female-weighted or male-weighted,
with the exception of perhaps the business and physical sciences majors.
</p>
</section>
<section class="step">
When we plot the % of students in a major being female against the median salary of students in the major, a fairly clear trend emerges.
It appears that majors with a higher proportion of male students also produce students with higher median wages. <br><br> In fact, a linear model
would predict that for every added percentage of female students in a given major, the median annual salary drops by $306 USD.
</section>
<section class="step">
So we've seen the most 'profitable' majors, as well as the ones with the most uneven gender distributions. But what are students
actually enrolling in the most frequently? What can enrolment numbers tell us about actual interest in each major? This chart has the bubbles
sized based on the number of students enrolled in each major, and coloured by category.
<svg id = 'legend3' width = '400px' height = '350px'></svg>
Psychology is the clear leader in this regard, with over 390,000 students enrolled. Business related topics such as general business, business management,
accounting and finance are all also heavily enrolled.
</section>
<section class="step">
<h1>The End</h1>
<p>
Hopefully, this has helped you in deciding what major you hope to study. If you want to take a deeper look into the data for yourself, you can download
all the csv files <a href = 'https://www.kaggle.com/fivethirtyeight/fivethirtyeight-college-majors-dataset'>here</a>.
<br><br>
Special thanks to Jim Vallandingham for his article on <a href = 'https://vallandingham.me/scroller.html'>creating scrolling visualisations using D3.js</a>. All
of the code associated with this project can be found on its <a href = 'https://github.com/cuthchow/college-majors-visualisation'>Github page</a>.
<br><br>
I've also produced a full write-up of how I made this <a href = 'https://towardsdatascience.com/how-i-created-an-interactive-scrolling-visualisation-with-d3-js-and-how-you-can-too-e116372e2c73'>over at my blog</a>.
</p>
<span></span><span></span><span></span>
</section>
</div>
<div id="vis">
</div>
</div>
<script src = 'scroller.js'></script>
<script src = 'sections.js'></script>
</body>
</html>