generated from DS4200-S23-Class/project
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
95 lines (77 loc) · 4.95 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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8/>
<title>NU Aero Budget Dash</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src='js/d3.v6.1.1/d3.min.js'></script>
<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
</head>
<body>
<h1> Northeastern Aerospace Budgeting Dashboard</h1>
<div class = "container2">
<h2> Motivation </h2>
<p>
We built a budgeting dashboard to help the Northeastern (NU) Aerospace Club record and understand their spending over multiple semesters.
The NU Aerospace Club is a Northeastern funded, student-run organization that gives students interested in engineering and aerospace the chance to design and build rockets and planes, and more.
It is up to the club's e-board to decide how the provided money will be distributed throughout the club, which can be a daunting task and has significant implications on the club's success and longevity.
</p>
<p> Our dashboard aims to provide a multi-level view of expenditures within the club to allow budget exploration for e-board members and students proposing budgets for their respective teams.
This will enable them to compare budgets over time, spending across different teams, as well as examine an overall view of their available budget.
As a student-run organization with limited funds, it is crucial for the club to be able to allocate those funds wisely and monitor their spendings.
This tool will ideally provide the club leaders with the means to make easier and more educated decisions when splitting money across the various subdivisions of their club.
</p>
</div>
<div class = "container2">
<h2> Data </h2>
<p>
Our <a href="data.xlsx"> data</a> is a manually compiled set of individual expenditure reports from each semester over the past year, as recorded by the NU Aerospace Club's e-board.
It contains information regarding both proposed semester budgets, as well as actual recorded costs per semester, detailing purchase costs, importance, and the team requesting the purchase.
In addition, it contains unexpected costs, such as data about rocket parts damaged during launches.
</p>
<p> One evident bias to note within the data is the "Importance" column.
This column is dictated by the individual who needs the particular item, so it is rare to see the level as importanced declared as "Not Necessary" recorded in the data. The person requesting the item would typically consider their own request of high importance even if it is actually less so compared to those in other areas of the club.
There were minor data qulaity issues present, like inconsistencies in spelling and capitalization.
These were standardized within the sheet during the data cleaning process.
Additionally, the club reported only its informal recorded purchases, which does not include every single purchase made within the semester.
It includes mostly purchases which students made on behalf of the club, which then needed to be reimbursed.
Thus, the data on actual purchases acts as a subset, which we are assuming to be generally representative of all purchases made.
</p>
<h2> Demo Video </h2>
<video controls="controls" style="width: 100%">
<source type="video/mp4" src="video/demo.mp4" >
<track src="video/captions.vtt" label="English" kind="captions" srclang="en-us" default>
</video>
<h2> Report </h2>
<p>
<a href="report.pdf"> Click here</a> to read the report.
</p>
</div>
<div>
<h2> NU Aerospace Budget Exploration </h2>
<div class="container">
<div class= "vis1">
</div>
<div class="subgroupVis"></div>
</div>
<div class="container">
<div class= "timeVis">
</div>
<div class= "launchVis" id="launchVis">
</div>
</div>
</div>
<div>
<h2> Acknowledgements </h2>
<div>
<ul>
<li> <a href=https://www.educative.io/answers/how-to-create-stacked-bar-chart-using-d3>How to Create a Stacked Barchart</a></li>
<li> <a href=https://stackoverflow.com/questions/58606047/how-to-use-on-addeventlistener-on-radio-button-in-plain-javascript>Event Listeners for Radio Buttons</a></li>
<li> <a href=https://www.d3indepth.com/zoom-and-pan>Zooming and Panning</a></li>
<li> <a href=https://stackoverflow.com/questions/20947488/d3-grouped-bar-chart-how-to-rotate-the-text-of-x-axis-ticks>Tick Rotation</a></li>
<li> <a href=https://d3-graph-gallery.com/graph/line_basic.html>Line Charts</a></li>
</ul>
</div>
<script src="js/main.js"></script>
</body>
</html>