-
Notifications
You must be signed in to change notification settings - Fork 2
/
dash.html
294 lines (278 loc) · 18.3 KB
/
dash.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-1LBDBEHQKD"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-1LBDBEHQKD');
</script>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Dashboard on Student Exam Performance</title>
<!-- CSS Libraries-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.4.0/spacelab/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.8/dc.min.css" type="text/css" />
<!--Font Awesome-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<!--Favicon-->
<link rel="shortcut icon" type="image/png" href="static/images/DashBPic.png">
<!--Personal CSS-->
<link rel="stylesheet" href="static/css/style.css" type="text/css" />
</head>
<body>
<!-- Headline Bar -->
<nav class="container-fluid navbar">
<a href="index.html" class="mytitle">Student Exam Results Dashboard</a>
<button id="reset-filters" class="btn btn-sm reset-filters-top"><strong>Reset Filters</strong></button>
</nav>
<section id="dash-background">
<div class="container-fluid outer-container">
<!-- Introduction & Student Gender Sumamry -->
<div class="container-fluid">
<div class="row">
<!--Introduction-->
<div class="col-sm-6 intro-container eq-column-height">
<div class="content-wrapper">
<div><i class="fa fa-angle-up hide-content-btn"></i></div>
<h5 class="section-heading">Introduction</h5>
<div class="hide-content-toggle">
<hr>
<p>This dashboard contains data sourced from <a href="https://www.kaggle.com/spscientist/students-performance-in-exams#StudentsPerformance.csv" target="_blank" class="inline-link" title="Student Exam Results Database">SERD</a> covering
1,000 students.</p>
<p>The graphical visualizations are created to provide an executive summary of student exam performance, together with detailed data analysis through clicking on the individual charts. </p>
<p>Individual student exam peformance in Maths, Reading and Writing can be viewed through clicking on 'Filter by student' dropdown box. </p>
<p class="intro-base">Alternatively, combinations of data can be configured through the use of options contained in dropdown boxes. </p>
<hr>
<div class="dropdown-box">
<div><b>Filter by student:</b></div>
<div id="student-selector"></div>
</div>
</div>
</div>
</div>
<!--Gender Summary-->
<div class="col-sm-6 gender-container eq-column-height">
<div class="content-wrapper">
<div><i class="fa fa-angle-up hide-content-btn"></i></div>
<h5 class="section-heading">Gender</h5>
<div class="gender-chart hide-content-toggle">
<hr>
<div class="col-xs-6">
<i class="fas fa-female fa-gender color-pink" aria-hidden="true"></i> <span class="gender-box" id="female-student-percentage"></span>
</div>
<div class="col-xs-6">
<i class="fas fa-male fa-gender color-blue" aria-hidden="true"></i> <span class="gender-box" id="male-student-percentage"></span>
</div>
<p>The data sample shows there is almost a 50/50 split of female vs male students. </p>
<p>A sample size of 1,000 is significant and the detailed analysis below is designed to understand the examination success of all students.
</p>
<p class="gender-base">This takes into account factors that may have influenced the students respective learning journeys.</p>
<hr>
<div class="dropdown-box">
<div><b>Filter by gender:</b></div>
<div id="gender-selector"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Line Graph Analysis-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 eq-column-height">
<div class="content-wrapper">
<div><i class="fa fa-angle-up hide-content-btn"></i></div>
<h5 class="section-heading">Line Graph Analysis</h5>
<div class="line-chart hide-content-toggle">
<hr>
<div id="composite-chart-exam-score"></div>
<p class="col-xs-12 col-sm-3"><b>Overall</b>, there appears to be a normal distribution (bell curve) at 70 marks out of 100 for all subjects. This points towards both a clean data set and a significant sample size.</p>
<p class="col-xs-12 col-sm-3"><b>Mode Range</b> - Math scores peaked between 59-65 marks, reading scores peaked between 64-74 marks & writing scores peaked between 68-74 marks.</p>
<p class="col-xs-12 col-sm-3"><b>Mode Frequency</b> - Maths (female students score 65 (28 students/5%) vs Male 62 (19 students/4%). Reading (male students score 74 (19 students/4%) vs female 72 (23 students/4%). Writing (female students score 70 (24 students/4%)
vs Male 68 (18 students/4%). </p>
<p class="col-xs-12 col-sm-3"><b>Summary</b> - Female students exam results appear to be marginally better than male students. The reminder of the detailed analysis may uncover further reasons on female student exam results supremacy. </p>
</div>
</div>
</div>
</div>
</div>
<!--Scatter Plot Analysis-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 eq-column-height">
<div class="content-wrapper">
<div><i class="fa fa-angle-up hide-content-btn"></i></div>
<h5 class="section-heading">Math vs Reading Regression Analysis</h5>
<div class="hide-content-toggle">
<hr>
<div id="math-vs-reading-regression"></div>
<p>Female students appear to have stronger results in reading, whereas male students appear to be stonger in maths</p>
</div>
</div>
</div>
<div class="col-sm-4 eq-column-height">
<div class="content-wrapper">
<div><i class="fa fa-angle-up hide-content-btn"></i></div>
<h5 class="section-heading">Reading vs Writing Regression Analysis</h5>
<div class="hide-content-toggle">
<hr>
<div id="reading-vs-writing-regression"></div>
<p>Both female and male students are equally consistent when comparing reading & writing exam results.</p>
</div>
</div>
</div>
<div class="col-sm-4 eq-column-height">
<div class="content-wrapper">
<div><i class="fa fa-angle-up hide-content-btn"></i></div>
<h5 class="section-heading">Math vs Writing Regression Analysis</h5>
<div class="hide-content-toggle">
<hr>
<div id="math-vs-writing-regression"></div>
<p>Female students appear to have stronger results in writing, whereas male students appear to be stronger in maths</p>
</div>
</div>
</div>
</div>
</div>
<!--Bar Chart & Pie Chart Analysis-->
<div class="container-fluid">
<div class="row">
<div class="col-12 col-sm-6 eq-column-height">
<div class="content-wrapper">
<div><i class="fa fa-angle-up hide-content-btn"></i></div>
<h5 class="section-heading">Bar Chart1 - Ethnicity Overview </h5>
<div class="hide-content-toggle">
<hr>
<div id="ethnicity-distribution"></div>
<p>Total student population comprises of 5 ethnic groups</p>
<p>35% of female & 29% of male students come from ethnic group C</p>
<p>28% of male & 25% of female students come from ethnic group D </p>
<p class="bar-chart-1">Group A is least populated overall, but is mostly dominated by male students at nearly 60%, with their best performance in maths, whereas female students in this group fair much better in reading and writing.</p>
<hr>
</div>
</div>
</div>
<div class="col-12 col-sm-6 eq-column-height">
<div class="content-wrapper">
<div><i class="fa fa-angle-up hide-content-btn"></i></div>
<h5 class="section-heading">Bar Chart2 - Parents Education </h5>
<div class="hide-content-toggle">
<hr>
<div id="parents-education-distribution"></div>
<p>Irrespective of gender, 60% of the student parents experienced their education at high school & some college </p>
<p>Upon closer inspection, the 'clever genes' appear to reside in both ethnic groups' C & D. Ethnic groups' C & D account for 58% of total sample size and was responsible for good upper quartile results in Maths, Reading & Writing.
</p>
<p class="bar-chart-2">In addition, 41% of parents for these students have a degree level education. </p>
<hr>
</div>
</div>
</div>
<div class="col-12 col-sm-6 eq-column-height">
<div class="content-wrapper">
<div><i class="fa fa-angle-up hide-content-btn"></i></div>
<h5 class="section-heading">Pie Chart1 - Lunch Analysis </h5>
<div class="hide-content-toggle">
<hr>
<div id="nutrition-analysis"></div>
<br>
<p>There is roughly a 2/3 to 1/3 split on students access to a standard lunch. There appears to be an improvement in all exam subject areas where students can claim a standard lunch. </p>
<p>Both female & male students follow the same overall ratio (1:3), although ethnic group A sees an increase in free/redeuced lunches at 40%. </p>
<p class="pie-chart-1">In summary, there may be a case that an impecunious student may struggle with achieving better exam results. </p>
<hr>
</div>
</div>
</div>
<div class="col-12 col-sm-6 eq-column-height">
<div class="content-wrapper">
<div><i class="fa fa-angle-up hide-content-btn"></i></div>
<h5 class="section-heading">Pie Chart2 - Exam Preparation </h5>
<div class="hide-content-toggle">
<hr>
<div id="test-preparation-analysis"></div>
<br>
<p>36% of all students completed prepartions for their exams and the same ratio split applies to both female and male student groups too. </p>
<p>Ethnic group C featured strongly in their exam results through students completing their exam preparations.</p>
<p class="pie-chart-2">In summary, there appears to be a trend of better exam results where students have committed their time to complete prepartions for their exams. </p>
<hr>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Button to help user navigate back to home page -->
<div class="container">
<div class="row pl-2 pb-4 main-menu-btn">
<input type=button class="btn btn-back" value="← Back" onClick="history.go(-1)">
</div>
</div>
</section>
<!-- Footer including links to trading, social media & helpful site links too -->
<footer id="footer" class="container-fluid">
<div class="row">
<div class="col-12">
<div class="container mx-auto text-white">
<div class="row">
<!-- Social media links to LinkedIn, GitHub & Facebook -->
<div class="col-12 text-center">
<h4 class="pt-3 text-uppercase footer-heading">Social Media</h4>
<ul class="list-group list-group-horizontal social-links text-left">
<li class="px-1 py-1 "><a href="https://www.linkedin.com/in/paul-friel-mbcs-a0821b43/ " target="_blank " aria-label="Find us on LinkedIn " rel="noopener ">
<i class="fab fa-linkedin "></i>
</a></li>
<li class="px-1 py-1 "><a href="https://github.com/Spagettileg" target="_blank " aria-label="Find us on GitHub " rel="noopener ">
<i class="fab fa-github "></i>
</a></li>
<li class="px-1 py-1"><a href="https://www.facebook.com/profile.php?id=100007081364691 " target="_blank " aria-label="Find us on Facebook " rel="noopener ">
<i class="fab fa-facebook "></i>
</a></li>
</ul>
</div>
</div>
<hr class="block-divider-short ">
<div class="pt-1 pb-2 col-12 text-center lower-footer">
<small>© Student-Dash | <span id="developer-years"></span><br> Website design | Paul Friel | Full Stack Developer</small>
</div>
</div>
</div>
</div>
</footer>
<!-- Scroll to top of page button -->
<a href="#move-up" class="btn btn-up move-top" title="Move to top"><i
class="fas fa-angle-double-up"></i></a>
<!--JS Libraries-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.8/dc.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
<script src="static/js/graph.js"></script>
<script src="static/js/helper.js"></script>
<script>
var button = document.getElementById("reset-filters");
const debounce = (func, delay) => {
let debounceTimer;
return function() {
const context = this;
const args = arguments;
clearTimeout(debounceTimer);
debounceTimer
= setTimeout(() => func.apply(context, args), delay);
};
};
button.addEventListener('click', debounce(function() {
alert("Hello,\nNo matter how many times you " +
"click the reset filter button, I get " +
"executed once every 2 seconds!!");
}, 2000));
</script>
</body>
</html>