generated from DS4200-S23-Class/project
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
173 lines (147 loc) · 10.2 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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<!-- link to style sheet and d3 library -->
<link rel="stylesheet" href="style.css">
<script src="js/d3.v6.1.1/d3.min.js"></script>
<!-- HTML page title -->
<title>The College Lifecycle</title>
</head>
<body>
<!-- project title -->
<h1> A Holistic Look at the College Lifecycle </h1>
<div>
<!-- motivation section -->
<h2>Motivation</h2>
<!-- sub-section of motivation -->
<h3>Motivation</h3>
<div class="subtext">
<p>The purpose of this project is to support high school students in their decision-making process for choosing a college.</p>
<p>
Select domain tasks include:
<ul>
<li>"I want to identify which state has the cheapest out-of-state tuition."
<ul>
<li>This is an important domain task as the cost of tuition is a central factor in the university decision-making process. High school students typically create a list of their preferred institutions and this visualization tool will allow them to compare their top choices based on cost.</li>
</ul>
</li>
<li>"I want to explore the universities in my state to see which ones have the largest difference between in-state tuition and salary potential."
<ul>
<li>Given that students come from a diverse array of socioeconomic backgrounds, different students will prioritize different factors. For example, a student from a wealthy family might not be as concerned about tuition cost as they are about salary potential. For students who are equally concerned about the cost of tuition and salary potential, this visualization tool will allow them to identify colleges that address both criteria.</li>
</ul>
</li>
<li>"I want to see which states have the highest diversity rates within their universities."
<ul>
<li>Although diversity may not be prioritized over tuition cost or salary potential, research from <a href="http://www.collegematchpoint.com/college-matchpoint-blog/2018/4/making-the-right-choice-how-students-decide-which-college-to-attend">College MatchPoint</a> shows that diversity is an important factor for high school students when deciding on their university of choice. Once a student has selected a set of colleges that match their tuition and salary potential criteria, this visualization tool will allow them to explore colleges' diversity rate and select the one that meets their preference. For example, some students may be more comfortable in historically black colleges while others may prefer a more racially diverse institution. </li>
</ul>
</li>
</ul>
</p>
<p>Although these domain tasks do not encompass the entirety of the tasks our visualizations will support, they represent a broad mix of the most relevant tasks. We want students to be able to identify the right college for themselves based on tuition costs, diversity rates, and salary potential so that they can maximize their experience across all stages of their college career.</p>
</div>
<!-- use case sub-section of motivation -->
<h3>Use Case</h3>
<div class="subtext">
<p>
According to <a href="http://www.collegematchpoint.com/college-matchpoint-blog/2018/4/making-the-right-choice-how-students-decide-which-college-to-attend">(College MatchPoint)</a>, when students in the United States are deciding on which college to attend, there are three major factors, among others, to consider. These are cost of attendance, diversity of student body, and salary potential post-graduation. These factors can vary widely among schools, and can offer insight into the college decision making process, the student's experience during their attendance, and post-graduation opportunities. Our visualizations would aim to highlight the full experience of attendance and allow students to weigh their decision against the quality of life they could achieve after college. This use case holds relevance right now given the uncertainty of macroeconomic conditions. Based on data from <a href="https://www.msci.com/www/blog-posts/four-scenarios-for-2023/03628512199#:~:text=Themacroeconomiclandscapefor2023,energysupplyandgeopoliticaltensions.">(MSCI)</a>, we are likely approaching a recession, which would leads to tighter consumer discretionary spending. Therefore, it is important to be aware of expected costs before committing to a college. The costs, salary potential, and diversity varies drastically between colleges. Therefore, being aware of the full picture is important when deciding which college to attend.
</p>
</div>
</div>
<div>
<!-- background section -->
<h2>Background</h2>
<!-- data sub-section of background -->
<h3>Data</h3>
<div class="subtext">
<p> It was very important that the data set we chose covered several attributes of college attendance. We realized through our research that finding data sets for granular costs of attendance would not be possible. Therefore, we pivoted to looking for data sets that not only aggregated costs across several universities but also provided information about other factors that may influence a student’s decision to attend a specific university.</p>
<p> The raw data gathered for this project comes primarily from the US Department of Education but from other sources as well, such as Priceonomics.com, TuitionTracker.org, payscale.com, and the Chronicle of Higher Education. This raw data was initially collected and condensed by Jesse Mostipak, a Developer Advocate at Baseten, who then posted 5 different Excel files to Kaggle.</p>
<p> Some biases and shortcomings that we found within the data include the fact that only universities with 2-year and 4-year degree lengths were included, the diversity data is from 2014 (while tuition and fees data is from 2019) and does not specify what is meant by ”unknown” race nor breaks down the ”two or more races” category to capture specific biracial groups, and many colleges had to be removed since they were not listed on all three files that were used.</p>
<ul class="subtext">
<p>Raw Datasets
<li>
<a href="raw_data\diversity_school.csv">Raw Diversity Dataset</a>
</li>
<li>
<a href="raw_data\historical_tuition.csv">Raw Historical Tuition Dataset</a>
</li>
<li>
<a href="raw_data\salary_potential.csv">Raw Salary Potential Dataset</a>
</li>
<li>
<a href="raw_data\tuition_cost.csv">Raw Tuition Cost Dataset</a>
</li>
<li>
<a href="raw_data\tuition_income.csv">Raw Tuition Income Dataset</a>
</li>
</p>
<p>Final Datasets
<li>
<a href="data\DS4200 PM-02 Dataset Final.csv">Final Dataset</a>
</li>
<li>
<a href="data\test_pie.csv">Modified Data for Pie Charts</a>
</li>
<li>
<a href="data\cutbardata.csv">Modified Data for Bar Charts</a>
</li>
</p>
</ul>
</div>
<!-- demo video sub-section of background -->
<h3>Demo Video (How to Use the Visualization Tool Below)</h3>
<video width="960" height="720" controls src="demo_video.mp4" type="demo_video/mp4">
<track src="captions.vtt" label="English" kind="captions" srclang="en-us" default/>
</video>
<!-- report sub-section of background -->
<h3>Report</h3>
<ul class="subtext">
<li>
<a href="report\DS_4200_Project_Paper.pdf">Final Report</a>
</li>
</ul>
</div>
<div>
<!-- visualization section -->
<h2>Visualization</h2>
<div id="vis1">
<h5>United States Map</h5>
<p class="subtext">
Hover over any state to see its average tuition costs and salary prospects
</p>
</div>
<div class="container">
<!-- left-column of webpage -->
<div class="left-column">
<h4 id="header-left"> </h4>
<div id="vis2"></div>
<div id="vis4"></div>
</div>
<!-- right-column of webpage -->
<div class="right-column">
<h4 id="header-right"></h4>
<div id="vis3"></div>
<div id="vis5"> </div>
</div>
</div>
</div>
<div>
<!-- acknowledgments section -->
<h2>Acknowledgements</h2>
<!-- sources -->
<ul class="subtext">
<li> <a href="https://gramener.github.io/d3js-playbook/d3intro.html">Basics of D3</a></li>
<li> <a href="https://gramener.github.io/d3js-playbook/manipulation.html">Data Manipulation</a></li>
<li> <a href="https://groups.google.com/g/d3-js/c/hXZNxWbp7IY?pli=1"> Filtering by Column</a></li>
<li> <a href="https://medium.com/@andybarefoot/making-a-map-using-d3-js-8aa3637304ee">Making a Map in D3</a></li>
<li> <a href="https://d3-graph-gallery.com/graph/basic_datamanipulation.html">Common Data Manipulation Tasks</a></li>
<li> <a href="https://gramener.github.io/d3js-playbook/barchart.html">Bar Charts in D3</a></li>
<li> <a href="https://d3-graph-gallery.com/graph/interactivity_tooltip.html">Tooltips in D3</a></li>
<li> <a href="https://d3-graph-gallery.com/pie.html">Pie Charts in D3</a></li>
<li> <a href="https://www.kaggle.com/datasets/jessemostipak/college-tuition-diversity-and-pay">Kaggle Raw Dataset</a></li>
</ul>
</div>
<!--Link js file-->
<script src="js/main.js"></script>
</body>
</html>