generated from DS4200-Sec2-F22/project
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
232 lines (221 loc) · 14.8 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
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="#" />
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="js/d3.v6.1.1/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.6/d3-legend.min.js"></script>
<title>OnTheBall</title>
</head>
<body>
<div class=header>
<div class=flex-container id="topbar">
<div>
<img src="media/Basketball-PNG-File.png" alt="basketball logo" id="logo">
</div>
<div class=flex-container id="headerText">
<h1>OnTheBall</h1>
<h4>an analytics visualization tool for the basketball analyst</h4>
</div>
</div>
</div>
<div id="textDiv">
<div>
<div>
<h2>Motivation</h2>
<p>Data-Driven analysis for the game of Basketball has surged in popularity in recent years. While large amounts of data are collected
about the game, effective analysis and visualization tools are still
in their infancy. To aid in the analysis of the large amounts of data
collected, we have created a visualization tool to perform domain-specific tasks in the field of Basketball analytics. Our approach
towards tackling this issue provides a robust tool for visualization of
data for use by Basketball analysts, coaches, and general managers.</p>
<p>Domain problems that need to be tackled are the ability to directly compare the visualized statistics of individual players and
teams to discover where some excel and where some falter. These insights provide novel approaches and strategies to the game of
Basketball. Another specific domain problem is needing to identify what specific statistics are conducive to winning the game.
while the game is decided by the number of points scored by each team, certain statistics may be heavily correlated with
favorable game outcomes. </p>
<p>The NBA has recently surpassed 10-billion-dollars in revenue, marking a significant growth in interest for the sport of basketball. Due to
the immense financial incentives, NBA teams are constantly looking
for ways to improve their play and get an edge over their competitors.</p>
<p>This tool will compile data regarding various team statistics (such as
field goal percentage, opponent field goal percentage, shot selection
distributions, rebound differential, etc.) and demonstrate how they
contribute to winning. Specifically, the tool will allow users to
analyze the interactions between multiple attributes, and see the
statistical profiles of the most winning (and least winning) teams</p>
<p>This tool will be usable by NBA coaches and general managers
to determine areas of improvement for their teams, as specific teams'
statistics will be available upon a query for comparison purposes.
For example, a coach can see how their team's opponent's FG and
rebound rate compare to winning teams, as well as which is more
important to improve if they want a better record next year. This can
inform roster moves, coaching emphases, and playbook changes,
among other possible actions. Furthermore, if a team's win rate
does not match the typical win rates of teams with similar statistics,
it suggests there is another, more pressing change that needs to be
emphasized. </p>
</div>
</div>
<div class="flex-container" id="data-background">
<img src="media/court-background.jpeg" id="court">
<div>
<h2>Background</h2>
<div>
<H3>Data</H3>
<p>The data being used for the visualization is from a Kaggle dataset
by Nathan Lauga, who scraped the data from the official NBA
website. This data is collected on a per-game basis by professional
scorekeepers and uploaded to the website postgame. The dataset
contains data on every individual game, including each player's
statistical contributions as well as important team statistics. From
this, we have derived averages of each player's per-game statistics
(such as points per game, assists per game, turnovers per game) and
compiled into statistical totals (games played, minutes played, total field
goals made). The data presented in this visualization is from the 2021-22 NBA season.</p>
<p>There exists little inherent bias as presented in the raw dataset.
As basic statistics are collected in their totality with no missing
values, there is little room for inherent bias; furthermore, there are
no ethical considerations to the sourcing of data. However, one must
consider the various imperfections and tradeoffs associated with
more advanced metrics. For example, player efficiency rating (PER)
disproportionately values shotmaking over every other metric, which
overvalues catch-and-shoot players while undervaluing shot creation
and non-scoring related aspects of the game. These advanced metrics
will be presented to users, however, as they are commonly used;
explanations of these stats will be available to explain potential
limitations and biases.</p>
<p class="no-justify">The datasets can be found at the following link: <a href="https://www.kaggle.com/datasets/nathanlauga/nba-games">https://www.kaggle.com/datasets/nathanlauga/nba-games</a></p>
</div>
</div>
</div>
<div>
<h3>Demo Video</h3>
<video width="800" height="450" controls>
<source type="video/mp4" src="media/demo.mp4">
<track src="media/captions.vtt" label="English" kind="captions" srclang="en-us" default>
Download the <a href="media/demo.mp4">MP4</a>
video, and
<a href="media/captions.vtt">subtitles</a>.
</video>
</div>
<div>
<h3>Report</h3>
<p>The report can be found at the following link: <a href="https://drive.google.com/file/d/1bn581Nb1at4_-Rqf1YJS8uNLAkk8KqG0/view?usp=share_link">Report Article</a></p>
</div>
</div>
<div id="visDiv">
<h2>Visualization</h2>
<div id="visColumns" class="flex-container">
<div id="column1" class="flex-container">
<h2></h2>
<div id="row1" class="flex-container">
<div id="Yhistogram"></div>
<div id="scattervis"></div>
</div>
<div id="row2" class="flex-container">
<div id="instructions" class="flex-container">
<h4>Instructions</h4>
<div id="visTutorial">
The scatterplot shows the distributions of all players in the NBA over the 2021-22 season (min. 10 games played) based on two selected statistics.
<br><b>Mouse over</b> a point to get more information on its respective player (as well as how the player's selected stats compare to the league as a whole).
<br><b>Click</b> on a point for a full player profile.
<br><br>The histograms on each axis represent the distribution of players with respect to the chosen statistic (i.e. the larger the bar, the more players have averages/totals within a given range).
<br><b>Click and drag</b> on either histogram to zoom into a certain range of values. <br>
<br>Depending on the data, the legend in the top-right corner may hide some players. <b>Click and drag</b> the legend to move it out of the way. <br><br>
</div>
</div>
<div id="Xhistogram"></div>
</div>
</div>
<div id="column2" class="flex-container">
<div id="dropdowns">
<label for="x-axis">Select the stat to be displayed on the x-axis.</label><br>
<select name="x-axis" id="x-axis">
<optgroup label="Total Stats">
<option value="FG3A">3-Pointers Attempted</option>
<option value="FG3M">3-Pointers Made</option>
<option value="FGA">Field Goals Attempted</option>
<option value="FGM">Field Goals Made</option>
<option value="FTM">Free Throws Made</option>
<option value="FTA">Free Throws Attempted</option>
<option value="GP">Games Played</option>
<!--<option value="PLUS_MINUS">Plus-Minus</option>-->
</optgroup>
<optgroup label="Averaged Stats">
<option value="PTS">Points Per Game</option>
<option value="FG3_PCT">3-Point Percentage</option>
<option value="FG_PCT">Field Goal Percentage</option>
<option value="FT_PCT">Free Throw Percentage</option>
<option value="EFG">Effective Field Goal Percentage</option>
<option value="OREB">Offensive Rebounds Per Game</option>
<option value="DREB">Defensive Rebounds Per Game</option>
<option value="REB">Rebounds Per Game</option>
<option value="AST">Assists Per Game</option>
<option value="STL">Steals Per Game</option>
<option value="BLK">Blocks Per Game</option>
<option value="TO">Turnovers Per Game</option>
<option value="PF">Fouls Per Game</option>
</optgroup>
</select><br><br>
<label for="y-axis">Select the stat to be displayed on the y-axis.</label><br>
<select name="y-axis" id="y-axis">
<optgroup label="Total Stats">
<option value="FG3M">3-Pointers Made</option>
<option value="FG3A">3-Pointers Attempted</option>
<option value="FGA">Field Goals Attempted</option>
<option value="FGM">Field Goals Made</option>
<option value="FTM">Free Throws Made</option>
<option value="FTA">Free Throws Attempted</option>
<option value="GP">Games Played</option>
<!--<option value="PLUS_MINUS">Plus-Minus</option>-->
</optgroup>
<optgroup label="Averaged Stats">
<option value="PTS">Points Per Game</option>
<option value="FG3_PCT">3-Point Percentage</option>
<option value="FG_PCT">Field Goal Percentage</option>
<option value="FT_PCT">Free Throw Percentage</option>
<option value="EFG">Effective Field Goal Percentage</option>
<option value="OREB">Offensive Rebounds Per Game</option>
<option value="DREB">Defensive Rebounds Per Game</option>
<option value="REB">Rebounds Per Game</option>
<option value="AST">Assists Per Game</option>
<option value="STL">Steals Per Game</option>
<option value="BLK">Blocks Per Game</option>
<option value="TO">Turnovers Per Game</option>
<option value="PF">Fouls Per Game</option>
</optgroup>
</select><br><br>
<input type="checkbox" id="showColors" name="color1" value="Color" checked>
<label for="color1"> Separate positions by color</label><br><br>
<button type = "button" id = "graphButton">Generate Charts</button><br><br>
</div>
<div id="playerframe">
<h3>Click a player!</h3><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</div>
</div>
<div>
<h2>Acknowledgements</h2>
<div id="webdev-credits">
<ul>
<li><a href="https://www.kaggle.com/datasets/nathanlauga/nba-games">https://www.kaggle.com/datasets/nathanlauga/nba-games</a></li>
<li><a href="https://d3js.org/">https://d3js.org/</a></li>
<li><a href="https://www.w3schools.com/css/default.asp">https://www.w3schools.com/css/default.asp</a></li>
<li><a href="https://www.w3schools.com/html/default.asp">https://www.w3schools.com/html/default.asp</a></li>
<li><a href="https://leanpub.com/D3-Tips-and-Tricks/read">https://leanpub.com/D3-Tips-and-Tricks/read</a></li>
</ul>
</div>
All stats courtesy of NBA.com and Nathan Lauga.<br><br>
<div id="image-credits">
Image credits:
<ul>
<li>Logo Image: <a href="https://www.vecteezy.com/">Vecteezy</a></li>
<li>Topbar: <a href="https://www.freepik.com/">Freepik</a></li>
<li>Basketball court: <a href="https://www.pexels.com/">Pexels</a></li>
</ul>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>