generated from DS4200-S23-Class/project
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
242 lines (221 loc) · 16.4 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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8/>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" href="#">
<script src="canvasjs-3.7.5/canvasjs.min.js"></script>
<script src='js/d3.v6.1.1/d3.min.js'></script>
<title>STEM Occupations by Group</title>
</head>
<body>
<h1>STEM Employment Statistics by Sex, Race, and Disability Status</h1>
<div id = "nav_bar">
<a class = "nav" id = "motivation_nav" href="#motivation">Motivation</a>
<a class = "nav" id = "use_nav" href="#use_case">Use Case</a>
<a class = "nav" id = "background_nav" href="#background">Background</a>
<a class = "nav" id = "data_nav" href="#data">Data</a>
<a class = "nav" id = "vid_nav" href="#vid">Demo Video</a>
<a class = "nav" id = "vis_nav" href="#visualization">Visualization</a>
<a class = "nav" id = "ack_nav" href="#acknowledgements">Acknowledgements</a>
</div>
<div>
</div>
<div id = "motivation" class = "section">
<h2>MOTIVATION</h2>
<h4>Introduction</h4>
<p class="indented">
The under-representation of minorities in STEM-related field is a persistent issue that requires attention and innovative solutions. This
lack of diversity and inclusion hinders innovation, competitiveness,
and social equity. Our interactive visualization aims to address
this problem by providing a tool that empowers individuals from
different backgrounds to explore, identify, and ultimately address
the disproportionate representation of different demographics in STEM-related
fields.
</p>
<p class="indented">
Supporting numerous domain tasks such as demographic analysis is critical for promoting
diversity and inclusion in the STEM workforce. By empowering
minorities with the tools and information they need to succeed in
STEM, our visualization can help create a more inclusive, vibrant,
and sustainable STEM ecosystem. The primary domain tasks
supported by our visualization are skill mapping and demographic
analysis. The visualization can be personalized based on the user's
input to provide a comprehensive view of the metrics specific to
the user's demographic. The user can also then make educated decisions about entering their desired field
and know the level of diversity to expect.
</p>
<p class="indented">
Our visualization aims to create an unbiased and accurate image of the employment situation in the STEM
field for the user’s demographic group of interest, taking into account
their sex, race/ethnic identity, and disability status. Our method of visualizing employement data in STEM-related
fields enables users to gain a comprehensive understanding of the employment
situation in their demographic group of interest in the United States. This allows them to make informed decisions and advocate for
policies that address the under-representation
of minorities in STEM fields in the United States.
</p>
<div id = "use_case">
<h4>Use Case</h4>
<p>
An example use case for our visualization project is as follows:
<br>
<p class = 'shifted'>
A recruiter (she/her) for a tech company in California is looking to improve
diversity and inclusion efforts in the company and wants to gain
a better understanding of the employment situation for minority
groups in the STEM field in California. The recruiter accessing our
interactive visualization begins with the first chart.
This chart shows the male/female distribution of people in STEM-related fields within each race/ethnic group.
The recruiter is very interested to see that in all the race/ethnic groups, males are far more represented.
She is also interested to see that Native Hawaiian's have quite low employement
counts in the STEM-field comapred to the other race/ethnic groups.
She continues to explore, clicking on the "female" bar of the Native-Hawaiian group.
The recruiter is brought to another chart, showing employement metrics across different STEM jobs for only Native Hawaiian women.
She is excited to see that her field, Social Scientist, is listed as a bar, so she hovers over it,
and is disappointed to see that the representation of
non-disabled individuals is far higher than that of disabled individuals. Upon clicking the bars, she is able to view the proportions of
disabled individuals to non-disabled individuals in the form of a pie chart.
She does some comparison between her field and the other fields listed.
Based on the insights gained from the visualization, the recruiter can make informed decisions
and advocate for policies that address the under-representation of
minority groups, such as Native-Hawaiian disabled women in this example, in her field.
By using the visualization to identify areas where additional resources and support are
needed, the recruiter can create policies that will help create a more
diverse and inclusive workforce in the STEM field.
</p>
</p>
</div>
</div>
<div id = "background" class = "section">
<h2>BACKGROUND</h2>
<!-- TODO: Add link to report, demo video, link to data etc. here
(Add a subsection titled Data. In this section, discuss (at a high-level) what data your
tool visualizes, Add a link to the raw data.) -->
<div id = "data" class = 'data_info'>
<h3>Data</h3>
<h4>Source</h4>
<p class = "indented">
The data used in our visualization is sourced from the National
Center for Science and Engineering Statistics(NCSES) report titled
"Women, Minorities, and Persons with Disabilities in Science and
Engineering," which provides comprehensive and detailed data on
employment metrics in the STEM field. The report presents data
on various demographics, including race/ethnicity, age, gender, and
disability status. The employment metrics provided in the report
are organized by industry, occupation group, and job title and includes information on the educational requirements, job outlook,
and the median salary for each occupation. Another report we use
depicts the gender distribution of employed individuals within the
STEM field by each respective state of the United States.
</p>
<p class = "indented">
These data are based on a variety of sources, including the U.S. Census Bureau's American Community Survey and the Bureau of Labor
Statistics' Current Population Survey. Our visualization combines
various reports and enables users to interact with this data and explore the employment situation in the STEM field for their specific
demographic group of interest. Users can filter the data by demographic characteristics, such as race/ethnicity, age, gender, disability
status, and state. Overall, the data provided in these reports is a valuable resource for understanding the current employment situation
in the STEM field and identifying areas where additional support
and resources may be needed to address the under-representation of
minorities in STEM fields.
</p>
<p class="indented">
Since much of the data collected through these two studies were compiled
from United States Census data, as well as through surveys run by
the NCSES to collect information about college graduates, doctorate
candidates, and post-secondary education data for students in science
and engineering, there were certain biases and ethical considerations to
pay attention to. Census data has historically posed problems of
under-counting certain populations, which the studies seem to try and
mitigate by utilizing multiple sources of information. Additionally,
the NCSES studies were either called in, or web administered. Since
most respondents chose to self administer the survey, ad it was
and web-based, there may be a slight bias towards those with more
experience and access to technology. However, the surveys are given
to graduate students, so presumably, there would be less variability
in their access to these things than there would be in the general
population.target="_blank"
</p>
<p class = "indented">
The tables used were table 9-5 Employed scientists and engineers, by occupation, highest degree level, and sex: 2019, 9-6 Employed scientists and engineers, by highest degree level, occupation, ethnicity, and race: 2019,
and 9-8 Employed scientists and engineers, by occupation, highest degree level, and disability status: 2019.
</p>
The raw data can be found here: <a href = "https://ncses.nsf.gov/pubs/nsf21321/data-tables"> Data Tables</a>
<br>
<h4>Data Cleaning</h4>
<p class = "indented">
Since the raw data was also broken up by various demographics, we had to perform extensive data cleaning
to get it into a form that we could use for our visualization. We chose to narrow down the list
of occupations we would look at in order to make the visualization clearer, more readable, as well as more feasible to produce.
Most of the raw data were in tables, broken down into degree type and occupation by sex, race, and disability status.
We chose to look at the aggregates of all post-secondary degrees as well. The data was presented as hierarchal tables not suitable
for data processing. We decided on a structure of a data table that would include the counts of each demographical combination within a
occupation and used the data tables of our sources to populate our table. For example, a row in our final data table
had several columns representing Sex, Occupation, Race, and Disability status, and then based on the three tables shown above,
we performed calculations to get the approximate number of individuals in the study that had that combination of traits (ex:
Female, Asian, With Disability, Social Scientist would produce approximately 1747.117227 individuals).
We then converted the information from our Excel data table to a JSON structure to
to support our visualization.
</p>
<h4>High-Level Visualization Description</h4>
<p class="indented">
The initial phase of the visualization shows the breakdown of people in STEM related fields for each race/ethnic group by their sex, male or female.
Upon clicking the bar representing the sex-group for the race the user wants to view, the visualization will shift,
now showing the employment metrics for people of the chosen race and sex, broken down into their respective disibility status counts for each STEM-field occupation.
Thus, this final bar graph represents the counts of individuals in each occupation with the selected race and sex, comparing the number of those with disabilites,
and those without. The final bar graph gives way to a pie chart when the bars are clicked, providing an alternate view of the
proportion of disabled and non-disabled staus in the chosen occupation,race, and sex. To go back to the original chart at any stage, you can click the "BACK BUTTON."
</p>
<h3 id="vid">Demonstration Video </h3>
<p class="indented">
For a demonstration of our visualization tool, please watch the video below.
<br>
<div >
<video controls>
<source src="DS4200_Demonstration_Video.mp4" type="video/mp4">
<track src="captions_demo.vtt" kind="subtitles" srclang="eng" label="English" default>
</div>
</p>
<h3>Report</h3>
<p class="indented">
To read about our project in detail, take a look at our final report here!
<a href="DS4200_Project_Report_Final.pdf" target="_blank"> Final Report </a>
</p>
<br>
</div>
</div>
<div id = "visualization" class = "section">
<h2>VISUALIZATION</h2>
<h3> Visualization Tool</h3>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<br>
<div class="tooltip"> *Note
<span class="tooltiptext">Labels without values appear that way due to either data confidentiality reasons or data reliability reasons.
The user can assume there exists a very miniscule population within those demographics.</span>
</div>
<button id="backButton" style="display:none;">BACK BUTTON</button>
<h4>Usability Testing Surveys</h4>
<li><a href="https://forms.gle/QHwE9G74LECfnVL88">Please complete the following form prior to viewing our visualization. </a></li>
<li><a href="https://forms.gle/R2WAFQQNSsKnBAjFA">Please complete the following form after viewing our visualization.</a></li>
</div>
<div id = "acknowledgements" class = "section">
<h2>ACKNOWLEDGEMENTS</h2>
<li><a href="https://jsfiddle.net/canvasjs/1f3Lwr56/">Constructing Bar Graph in CanvasJS </a></li>
<li><a href="https://coder-coder.com/how-to-indent-paragraph-text-in-html-css/">Indentation Guide</a></li>
<li><a href="https://sparkbyexamples.com/pandas/pandas-groupby-multiple-columns/"> Group by Multiple Columns</a></li>
<li><a href = "https://stackoverflow.com/questions/17114826/d3-csv-return-rows"> Reading CSV to Console</a></li>
<li><a href = "https://www.tutorialsteacher.com/d3js/loading-data-from-file-in-d3js#:~:text=d3.-,csv(),csv()%20method."> Data Loading D3</a></li>
<li><a href="https://www.w3schools.com/jsref/jsref_foreach.asp">JavaScript Array</a></li>
<li><a href="https://canvasjs.com/docs/charts/basics-of-creating-html5-chart/zooming-panning/"> Zooming and Panning</a></li>
<li><a href="https://canvasjs.com/docs/charts/chart-options/tooltip/"> ToolTip JS</a></li>
<li><a href="https://canvasjs.com/html5-javascript-pie-chart/">Pie Chart JS</a></li>
<li><a href="http://6.anychart.com/products/anychart/docs/users-guide/JavaScriptDrillDown.html">Drilldown Handler JS</a></li>
<li><a href="https://www.chartjs.org/docs/latest/developers/api.html">Chart Render JS</a></li>
<li><a href="https://stackoverflow.com/questions/1026069/how-do-i-make-the-first-letter-of-a-string-uppercase-in-javascript">Labeling and Indexing in JS</a></li>
<li><a heref = "https://www.w3schools.com/css/css_tooltip.asp"> Tooltip CSS</a></li>
<li><a href="https://blog.webdevsimplified.com/2020-12/responsive-css-video/#:~:text=HTML%20Video%20Tags&text=All%20you%20need%20to%20do,and%20the%20height%20to%20auto.&text=This%20will%20create%20a%20video,no%20matter%20the%20screen%20size.">Video Sizing</a></li>
<li><a href="https://www.3playmedia.com/learn/how-to-guides/html5-video-captioning/">Embedding Video</a></li>
<li><a href="https://www.w3docs.com/snippets/html/how-to-embed-pdf-in-html.html">Embedding Report PDF</a></li>
<li><a href="https://stackoverflow.com/questions/16925481/opening-a-new-tab-to-read-a-pdf-file">Linked PDF in New Tab</a></li>
</div>
<script src="js/main.js"></script>
</body>
</html>