-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
135 lines (120 loc) · 7.68 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
<!DOCTYPE html>
<html lang='en'>
<!-- Metadata -->
<head>
<meta charset='utf-8'>
<!-- Title -->
<title>Baja Budget</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>
<span id='forkongithub'><a href='https://github.com/h0rban/nu-baja-budget-visualization'>Fork me on GitHub</a></span>
<!-- Writeup -->
<div class='content-column'>
<h1>Baja Budget</h1>
<p><strong>Yevhen Horban</strong>, <strong>Brandon Archbald</strong>, <strong>Shaun Khundker</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>For this project, we used financial data from the Northeastern Motorsports Club to visualize a breakdown of their
yearly budget by funding sources, and also show where they are spending the most money by budget category. We
used three different bar chart variations to display a budget summary for the NU Motorsports Club. For
technology, we mainly used D3 to create our visualizations.</p>
<p>Links: <a href="https://github.com/h0rban/nu-baja-budget-visualization">repository</a>,
<a href="https://www.academia.edu/44721855/Visualization_of_NEU_Baja_Budget">report</a>.</p>
<h1>Interaction Instructions</h1>
<p>The first and third visualizations are linked to the second visualization.
Please interact with the second bar chart in order to affect the other 2.
To select multiple funding sources at a time please "shift + click" the bars.
A shortcut to reload the selection is clicking anywhere on the vis except the bars or click on the total
bar.</p>
<h1>Visualization</h1>
</div>
<!-- Visualization goes here -->
<div class='vis-holder'>
<div class='horizontal-bar-holder' id='total-bar-chart'></div>
<div class='horizontal-bar-holder' id='source-bar-chart'></div>
<div class='horizontal-bar-holder' id='budget-cat-chart'></div>
</div>
<!-- Further writeup -->
<div class='content-column'>
<h1>Demo Video</h1>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Ff910Skuu-o" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
<h1>Visualization explanation</h1>
<p>Our visualization is compiled of 3 different major components. The first visualization is a ‘fuel gauge’ bar
(horizontal stacked bar chart) representing the total budget. The second visualization is several smaller fuel
gauges (proportional bar charts) representing each of the budget’s funding sources. The third visualization is a
couple of bar charts (proportional bar charts) representing what budget categories the money from the selected
funding sources was spent on.</p>
<p>We have included multiple features to make the charts more interactive. Firstly, hovering over any of the bars
reveals a tooltip that provides additional information for the specific bar users are hovering over. We thought
that offering details on demand would be a quick way to give readers the details on specific areas of the
visualizations. Secondly, clicking on the bars in the “Funding Sources” chart selects the data that was clicked
on.
Shift+ clicking on the bars allows users to select multiple funding sources simultaneously for collective
comparison if needed. When a funding source is selected, the associated bar remains blue while non-selected
sources change to a grey color. We did this so users could identify which sources are selected and which aren’t.
The second visualization is linked to the first visualization as well as the third. The selection of bars in the
second visualization updates the first visualization to show how much of the current budget is being used by the
selected funding sources. This is visually apparent because the money in the budget contributed by the selected
funding sources is highlighted in blue. Simultaneously, the rest of the bar turns grey to make it visually
apparent to users. Selecting bars in the second visualization updates the third visualization and displays the
proportion of the money spent in each budget category. If more than one funding source is selected, the
resulting
visualization will show the budget category breakdown for multiple funding sources together.</p>
<p>When creating the visualizations, we needed to make specific choices about what to include in the
visualizations. We changed our mind about using a pie chart to represent the budget categories and used a
percentage bar chart for the last chart because we needed to indicate when no purchases were made in a
particular budget category. One of the most important ones we made was that we did not use multicolored bars in
order to avoid the complexity of the visualization. Since we are mainly focused on bars, we were wary that
having them be multicolored may confuse users and make them think there is a correlation between color and the
bars that would not have been there. We also added small animations so that, when data is selected, users can
see the visualizations move up and down like fuel gauges. </p>
<h1>Acknowledgments</h1>
<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_percent.html'>Percent stacked barplot in
d3.js</a> by Yan Holtz.
</li>
<li><a href='https://www.d3-graph-gallery.com/graph/barplot_stacked_basicWide.html'>Most basic stacked barplot
in d3.js</a> by Yan Holtz.
</li>
<li><a href='https://bl.ocks.org/eesur/287b5700b5881e8899cc7301a5fefb94'>d3js | single stacked bar</a> by Sundar
Singh's.
</li>
<li><a href='https://www.d3-graph-gallery.com/graph/interactivity_tooltip.html'>Building tooltips with d3.js</a>
by Yan Holtz.
</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/budgetCatBarChart.js'></script>
<script src='js/sourceBarChart.js'></script>
<script src='js/totalBarChart.js'></script>
<script src='js/visualization.js'></script>
</body>
</html>