generated from NEU-DS-4200-F20-Staff/Project
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
269 lines (216 loc) · 11.1 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
<!DOCTYPE html>
<html lang='en'>
<!-- Metadata -->
<head>
<meta charset='utf-8'>
<!-- Title -->
<title>Project Team 05: Topic, DS 4200 F20</title>
<!-- CSS Styling -->
<link rel='stylesheet' href='style.css'>
<!-- Favicons -->
<link rel='apple-touch-icon' sizes='180x180' href='favicons/apple-touch-icon.png'>
<link rel='icon' type='image/png' sizes='32x32' href='favicons/favicon-32x32.png'>
<link rel='icon' type='image/png' sizes='16x16' href='favicons/favicon-16x16.png'>
<link rel='manifest' href='favicons/site.webmanifest'>
<link rel='shortcut icon' href='favicons/favicon.ico'>
<meta name='msapplication-TileColor' content='#da532c'>
<meta name='msapplication-config' content='favicons/browserconfig.xml'>
<meta name='theme-color' content='#ffffff'>
</head>
<!-- Main page content -->
<body>
<!-- Update this with your GitHub repo URL -->
<span id='forkongithub'><a href='https://github.com/NEU-DS-4200-F20/project-group-05-cherubs-montessori-school'>Fork
me on GitHub</a></span>
<!-- Writeup -->
<div class='content-column'>
<h1>Project Team 05: Topic, DS4200 F20</h1>
<p><strong>Srinath Gaddipati</strong>, <strong>Ethan Lam</strong>, <strong>Eric Park</strong></p>
<p>Service-Learning Course Project as part of
<a href='https://canvas.instructure.com/courses/1781732'>DS 4200 F20: Information Visualization</a>,
taught by <a href='https://cody.khoury.northeastern.edu/'>Prof. Cody Dunne</a>,
<a href='https://visualization.khoury.northeastern.edu/'>Data Visualization @ Khoury</a>,
<a href='https://www.khoury.northeastern.edu/'>Northeastern University</a>.</p>
<h1>Abstract</h1>
<p>We are aiming to provide insightful visualizations for a Montessori school based on their vast student and
teacher data along with their operational expenses over the past 5 years. By using this data, we will identify any
trends that may be affecting the rate at which students join, the type of students they attract, and what sort of
expenses reap the most rewards and what expenses they can cut on. We also hope to provide them with a better
understanding of their student demographic which can help with making informed executive
decisions. <br>
<br>
Github Repo link: <a href='https://github.com/NEU-DS-4200-F20/project-group-05-cherubs-montessori-school'> Web
Page</a>.</p>
<h1>Visualization</h1>
<p>Below are static visualization combining different datasets.
<br><br>
The student population graph has different filters one can choose from.
<br><br>
The income and expense chart are linked to the profit chart with the selected portion from the income or expense
chart highlighted on the profit chart.
</p>
</div>
<div class='content-column'>
<select name="filter" id="filter">
<option id="studentGrade" value="Grade">Grade</option>
<option id="studentLocation" value="Location">Location</option>
<option id="studentYears" value="Years">Years</option>
</select>
</div>
<!-- Visualization goes here -->
<div class='vis-holder'>
<!-- Change viewbox to whatever you want, e.g., '0 0 1000 6000' This determines your aspect ratio and coordinate system -->
<!-- Delete all the sample SVG code below after the viewbox to before the closing tag. Populate this part of the SVG with D3. -->
<div class='tooltip2'>
</div>
<div class='tooltip2'>
</div>
<div class='tooltip2'></div>
<svg id='vis-svg-1' preserveAspectRatio='xMidYMid meet' class='vis-svg' viewBox='0 0 1500 500' version='1.1'
xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
<!-- <text x='30%' y='35%' text-anchor='middle'>A</text>
<text x='70%' y='35%' text-anchor='middle'>B</text>
<rect x='20%' y='40%' width='20%' height='20%' fill='yellow'></rect>
<circle cx='70%' cy='50%' r='10%' fill='blue'></circle> -->
<!-- Don't delete the closing tag! -->
</svg>
</div>
<br>
<br>
<div class='vis-holder2'>
<svg id='vis-svg-2' preserveAspectRatio='xMidYMid meet' class='vis-svg' viewBox='0 0 1500 500' version='1.1'
xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
</svg>
</div>
<div class= 'vis_holder45' style="width: 100%; overflow: hidden;">
<div class='content-column'>
<select multiple id="Efilter" class="form-control">
</select>
</div>
<div class='vis-holder4' style="width: 50%; float: left;">
<svg id='vis-svg-4' preserveAspectRatio='xMidYMid meet' class='vis-svg' viewBox='-100 0 1000 500' version='1.1'
xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
</svg>
</div>
<select multiple id="Ifilter" class="form-control">
</select>
<div class='vis-holder5' style="margin-left: 50%;">
<svg id='vis-svg-5' preserveAspectRatio='xMidYMid meet' class='vis-svg' viewBox='50 0 1000 500' version='1.1'
xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
</svg>
</div>
</div>
<br>
<br>
<!-- <div class='vis-holder4'>
<svg id='vis-svg-4' preserveAspectRatio='xMidYMid meet' class='vis-svg' viewBox='0 0 1500 500' version='1.1'
xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
</svg>
</div>
<div class='vis-holder5'>
<svg id='vis-svg-5' preserveAspectRatio='xMidYMid meet' class='vis-svg' viewBox='0 0 1500 500' version='1.1'
xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
</svg>
</div> -->
<div class='vis-holder3'>
<svg id='vis-svg-3' preserveAspectRatio='xMidYMid meet' class='vis-svg' viewBox='0 0 1500 500' version='1.1'
xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
</svg>
</div>
<!-- Further writeup -->
<div class='content-column'>
<h1>Demo Video</h1>
<iframe src="https://drive.google.com/file/d/1NypjHSHRvMQcvdmpg4t5Kq9vG4HdhSCb/preview" width="640" height="480"></iframe>
<!-- <video controls width='100%'>
<source src='http://www.ccs.neu.edu/home/cody/courses/shared/d3-flexible-transitions.mp4' type='video/mp4'>
<p>Your browser doesn't support HTML5 video. Here is
a <a href='http://www.ccs.neu.edu/home/cody/courses/shared/d3-flexible-transitions.mp4'>link to the video</a>
instead.</p>
</video> -->
<h1>Visualization explanation</h1>
<p>We have added tool tips for all visualizations in order to give
more detailed information about the data for each stacked bar chart
and area chart. Some data points or categories may be hard to read,
and tool tips assist the reader by giving details on demand.</p>
<ul>
<li>
"Student population breakdown by [filter]":
This visualization shows student demographic information.
It allows the user to filter the data and visualization based on
Grade (grade of the students), Location, and Years (number of
years that each student spent at the school). This allows the
user more flexibility in the information that they can gather about the
student population. We chose to use a stack bar chart to show the
subdivision within the student population.
</li>
<li> "Income and Expense per year showing profit": This chart is being used to show
the profit for the school. The Income and Expense are shown using an area
chart because we thought that this was the best medium to demonstrate the
amount of profits and expenses that changed over the 5 years, and the
resulting profit. This area chart is linked to the "Expenditure per
year by Category" and the "Income per year by Category" graphs.
When the user clicks on a particular category from either of the
two mentioned graphs, the category will appear on this profit graph.
This allows the user to visualize how each category contributes to
the school's profit margin.
</li>
<li>
"Expenditure per year by Category": This graph shows the amount of expenditure broken
down by category for the Montessori School. We chose to use an area chart to show how
the different categories contributed to the expenditure as a whole. We believe using an
area chart is the best way to convey the changes and how each category contributes to
the whole over the 5 years. This is linked to the "Income and Expense per year showing
profit" and will highlight in that graph the selected category in this graph.
</li>
<li>
"Income per year by Category": This graph shows the amount of income broken down by category
for the Montessori School. We chose to use an area chart to show how the different categories
contributed to the income as a whole. We believe using an area chart is the best way to convey
the changes and how each category contributes to the whole over the 5 years. This is linked to
the "Income and Expense per year showing profit" and will highlight in that graph the selected
category in this graph. </li>
<li>
"Grade Breakdown by Revenue": This visualization shows the revenue from academic fees,
broken down by grade over the 5 years. We chose to use a stack bar chart to clearly
show the subdivision of revenue from academic fees within the different grades.
This was the clearest way to show the information to the user.
</li>
</ul>
<p>
<a href='https://docs.google.com/presentation/d/1UIUu6wGCZb3mWh0SkaKdZWKPc7_ejujvekrUYe6x7Jc/edit?usp=sharing'>
Link to Slides</a></p>
<h1>Acknowledgments</h1>
<p>
List here where any code, packages/libraries, text, images, designs, etc. that you leverage come from.
</p>
<ul>
<li><a href='https://d3js.org/'>
D3: Data-Driven Documents</a>
by Mike Bostock is used for manipulating the DOM to create visualizations.
</li>
<li><a href='https://codepo8.github.io/css-fork-on-github-ribbon/#'>
Pure CSS responsive 'Fork me on GitHub' ribbon</a>
by Chris Heilmann is used to create the banner that links back to the source code repository.
</li>
<li>
<a href='https://www.d3-graph-gallery.com/graph/barplot_stacked_basicWide.html'>
Basic stacked barplot</a>
describes how to build a basic stacked barplot.
</li>
<li>
<a href='https://bl.ocks.org/interwebjill/8122dd08da9facf8c6ef6676be7da03f'>
Multiple Area chart with D3</a>
describes how to build a multiple area chart using d3.
</li>
</ul>
</div>
<!-- Scripts at the end avoid need for dealing with async, defer, or onload event handlers -->
<script src='lib/d3.v6.1.1/d3.min.js'></script>
<script src='js/visualization.js'></script>
<script src='js/studentPopulation.js'></script>
<script src='js/gradeBreakdown.js'></script>
<script src='js/profitChart.js'></script>
<script src='js/expenseChart.js'></script>
<script src='js/incomeChart.js'></script>
</body>
</html>