generated from DS4200-S23-Class/project
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
162 lines (131 loc) · 9.71 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
<!-- Creates the HTML page -->
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8/>
<link rel="stylesheet" type="text/css" href="style.css">
<script src='js/d3.v6.1.1/d3.min.js'></script>
<!-- Creates the title of page -->
<title>NBA Player Stats</title>
</head>
<body>
<!-- Creates the header for te website -->
<h1>2021-2022 NBA Player Statistics</h1>
<div>
<!-- Lists the motivation for the project -->
<h2>Motivation</h2>
<p>As 4 highly passionate NBA fans and previous high school basketball athletes, it was no surprise to look to our favorite interest when it came time to select a project topic. The domain tasks that our project will support are vital in analyzing player performance in sports. The data that we will be visualizing includes various statistics related to player performance from the 2021-2022 season, such as points, rebounds, assists, and field goal percentages collected from a website called basketball reference.</p>
<p>The first domain task we want to add will allow users to compare player performance across positions, with specific filters for each position and statistic, as the effectiveness of some positions is determined by different statistics. This specific domain task is important as it allows users to compare players on the statistics that matter for a certain play style a user is looking to find.</p>
<p>The second domain task we are looking to implement will allow users to see the entire stat line for a player of interest. Our target end-users include coaches, scouts, and general managers who require quick and easy access to player performance data that will allow them to consider new players to trade for or sign in free agency. This is important for our end users, as it allows them to get a sense of what each player succeeds in and struggles in, so they can get a holistic sense of what their play style is all about, and make a judgment call on whether to pursue them or not.</p>
<p>A particular use case is when general managers are looking to build their team or make some roster changes. For example, if they have identified their need of scoring more points, this tool can help them pinpoint which players have high points per games in comparison to other players in the league as well as their scoring efficiency. On the other hand, if they want to drop a player to increase their cap space, they can look at which players have the lowest FG% to determine which players are taking more shots and scoring less points. Other decisions regarding roster changes can be aided to using our visualization.</p>
</div>
<div>
<h2>Background</h2>
<ul>
<!-- Lists information on the data collected for the project -->
<h3>Data</h3>
<p>The data collected represents the NBA 2021-2022 season data and comes from Basketball Reference, which is a third party organization that allows any individual to easily access the raw data for any given player or season. The data, shown in the first soucre in the Acknowledgements section, is provided by SportRadar which is the NBA's official statistics recorder and provider. This organization is responsible to collect statistics for every game for every player and team, recording it, and then double checking for any mistakes that were refined after the game had finished.</p>
<p>Although Basketball Reference is not inherently bias or unethical, the data it presents may be subject to certain bias or unethical considerations. One potential bias is in the way these statistics are recorded. For example, certain statistics such as assists and rebounds could be subject to the referee and scorekeeper of the game and how they view a particular play. Additionally, certain top players are favored, consciously or subconsciously, based on factors such as popularity or media attention. An ethical consideration that applies to this data is that personal information about every player is publicly available. Although these players provide consent of their performance being tracked and published in their contract, the widespread access can influence how they are valued in the market as players. Nonetheless, the overall gathering and recording of this data is clean in a manner that does not significantly impact the usage of the data.</p>
<p>The data cleaning we performed started with removing the teams of these players because players can be traded which would complicate the data. It was not relevant as we are strictly interested in the performance of the player rather than their affiliation to a particular team. As a result, for players that played on multiple teams we removed the multiple rows but replaced them with an accumulation column. The data itself was relatively clean. There are instances of missing values but these are always percentage calculations that occur when players have not attempted a particular shot.</p>
<!-- Adds The Demo Video -->
<h3>Demo Video</h3>
<div>
<video class="center" width='1000' height='800' src="DS4200 Project Demo.mov" controls>
Your browser does not support the video tag.
</video>
</div>
<!-- Adds link to final report PDF -->
<h3>Report</h3>
<div>
<a href="Final Report.pdf" target="_blank">Click Here To Open The Final Report Write Up</a>
</div>
</ul>
</div>
<!-- The part of the document for the visualization -->
<h2>Visualization</h2>
<!-- Creates a flexbox -->
<div class="flexbox">
<!-- Left Column -->
<div id="column">
<div id="left-vis">
<h3 class="center">Player Efficiency vs Filtered Stat</h3>
<form>
<div>
<!--These are all the options for the x-axis-->
<p1>Choose the x-axis statistic for your visual:</p1>
<select id="xAxisStat">
<option>G</option>
<option>GS</option>
<option>MP</option>
<option>FG</option>
<option>FG%</option>
<option>3P</option>
<option>3P%</option>
<option>2P</option>
<option>2P%</option>
<option>eFG%</option>
<option>FT</option>
<option>FT%</option>
<option>ORB</option>
<option>DRB</option>
<option>TRB</option>
<option>TRBPG</option>
<option>AST</option>
<option>ASTPG</option>
<option>STL</option>
<option>STLPG</option>
<option>BLK</option>
<option>BLKPG</option>
<option>TOV</option>
<option>TOVPG</option>
<option>PF</option>
<option>PFPG</option>
<option>PTS</option>
<option>PPG</option>
</select>
<!--This adds the button to add the points for each player-->
<button type='button' id='selectStat'>Update Visual</button>
</div>
</form>
<!-- Adds link to X Axis Stats PDF -->
<div>
<a href="X-Axis Stats.pdf" target="_blank">Click Here to view a break down on each x-axis statistic</a>
</div>
<!-- Add checkbox filter for position -->
<div class="position-filter">
<h4>Filter By Position</h4>
<input class="position-button" id="PG" value="PG" type="checkbox" checked="checked">PG</input>
<input class="position-button" id="SG" value="SG" type="checkbox" checked="checked">SG</input>
<input class="position-button" id="SF" value="SF" type="checkbox" checked="checked">SF</input>
<input class="position-button" id="PF" value="PF" type="checkbox" checked="checked">PF</input>
<input class="position-button" id="C" value="C" type="checkbox" checked="checked">C</input>
</div>
</div>
</div>
<!-- Right Column -->
<div id="column">
<div id="right-vis">
<h3 class="center">Player Stat vs. Average Position & NBA Stat</h3>
<h4 class="center">Click a point from the scatter plot for a bar chart to be shown</h4>
</div>
</div>
</div>
<div>
<!-- The acknowledgements page -->
<h2>Acknowledgements</h2>
<div>
<ul>
<li><a href="https://www.basketball-reference.com/leagues/NBA_2022_totals.html">Basketball Reference Data</a></li>
<li><a href="https://d3-graph-gallery.com/graph/line_filter.html">D3 Filtering</a></li>
<li><a href="https://stackoverflow.com/questions/16919280/how-to-update-axis-using-d3-js">D3 Axis Updating</a></li>
<li><a href="https://d3-graph-gallery.com/graph/custom_legend.html">D3 Legends</a></li>
<li><a href="https://leanpub.com/D3-Tips-and-Tricks/read">D3 Tips and Tricks</a></li>
<li><a href="https://www.tutorialsteacher.com/d3js/create-bar-chart-using-d3js">D3 Bar Charts</a></li>
<li><a href=" https://sabahatiqbal.medium.com/building-a-scatter-plot-with-d3-js-66178fde56ac">D3 Scatter Plot</a></li>
</ul>
</div>
</div>
<!-- Links the javascript file -->
<script src='main.js'></script>
</body>
</html>