-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
238 lines (218 loc) · 8.81 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Sukhinderpal Mann</title>
<!-- Bootstrap CSS CDN -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
/>
<!-- Our Custom CSS -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<!-- Sidebar Holder -->
<nav id="sidebar" class="active">
<div class="sidebar-header">
<h3>Topics</h3>
</div>
<ul class="list-unstyled components">
<li>
<a href="#intro" onclick="sideBar()">Introduction</a>
</li>
<li>
<a href="#quest1" onclick="sideBar()">The Top Tier</a>
</li>
<li>
<a href="#quest2" onclick="sideBar()">The Best Against The Rest</a>
</li>
<li>
<a href="#quest3" onclick="sideBar()">The Best Under Pressure</a>
</li>
<li>
<a href="#quest4" onclick="sideBar()">Who Dictated The Pace?</a>
</li>
<li>
<a href="#quest5" onclick="sideBar()">Big money</a>
</li>
</ul>
<ul class="list-unstyled CTAs">
<li>
<a href="https://github.com/S-Mann" class="download">Contact Me</a>
</li>
</ul>
</nav>
<!-- Page Content Holder -->
<div id="content">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button
type="button"
id="sidebarCollapse"
class="btn btn-info navbar-btn"
>
<i class="glyphicon glyphicon-align-left"></i>
</button>
</div>
<div class="text-center">
<h3>
The Improbable Story
</h3>
</div>
</div>
</nav>
<h2>Introduction</h2>
<div id="intro">
<p>
The most prestigious league for basketball is the National Basketball Association <b>NBA</b>, it's a league consisting of two conferences, <b>East</b> and <b>West</b>, 15 teams per conference. It has the best basketball players in the world. There is a regular season in which all 30 teams play their best and try to qualify for the playoffs but only <u>8 best teams from each conference are selected for the playoffs</u> based on their record. In the season of 2015-2016 two of the greatest records were broken by two very unique teams.
Golden State Warriors <b>GSW</b> set a regular season record of
<b><i>73-9</i></b> which means they
<u>just lost 9 times in the whole season.</u> Which is by far the
most impressive accomplishment in NBA. With a record so good
everyone had <b>GSW</b> as the NBA champion even before the playoffs
started. What happened next was one of the rarest event in
professional sports in all of North America. The Cleveland Cavaliers
<b>CLE</b> were down in the NBA finals <b><i>3-1</i></b> to
<b>GSW</b>,
<u><b>GSW</b> just had to win one match to close the series</u> and
become champions. But <b>GSW</b> went down with the biggest upset in
professional sports,
<u
><b>GSW</b> lost 3 straight games making <b>CLE</b> the
champions.</u
>
</p>
</div>
<div class="line"></div>
<h2>The Top Tier</h2>
<div class="row" id="quest1">
<div class="col-sm-3">
<p>
After the completion of the regular season, the top 4 teams with
the highest chances of winning the championship was Cleveland
Cavaliers <b>CLE</b>, Toronto Raptors <b>TOR</b>, Golden State
Warriors <b>GSW</b> and San Antonio Spurs <b>SAS</b>. As usual the
West is usually the stronger conference amongst East and West. We
have
<u
><b>GSW</b> and <b>SAS</b> which had the highest chances of
winning the championship and were from the West</u
>. Both the
<u
>teams from the East had a very low chance of winning the
championship.</u
>
</p>
</div>
<div class="col-sm-9">
<canvas id="myChart3" width="width" height="height"></canvas>
</div>
</div>
<div class="line"></div>
<h2>The Best Against The Rest</h2>
<div class="row" id="quest2">
<div class="col-sm-9">
<canvas id="myChart2" width="width" height="height"></canvas>
</div>
<div class="col-sm-3">
<p>
When all was said and done the finals was between the
<b>GSW</b> and <b>CLE</b>. In this bar graph
<u
>we can see how the teams compared to their opponents in the
regular season.</u
>
The graph shows a clear point difference of <b>+10</b> on average
for <b>GSW</b> and <b>+6</b> for <b>CLE</b>. Maintianing a
<b>+10</b> point difference in the west is really an achievement.
</p>
</div>
</div>
<div class="line"></div>
<h2>The Best Under Pressure</h2>
<div class="row" id="quest3">
<div class="col-sm-3">
<p>
When
<u
>we compare the performance of <b>GSW</b> and <b>CLE</b> in the
finals to their regular season</u
>, we see that
<u
><b>GSW</b> completely choked and went from 114 points on
average to 99 points per game,</u
>
<b>CLE</b> also had a drop off but it isn't as drastic as that of
<b>GSW</b>.
</p>
</div>
<div class="col-sm-9">
<canvas id="myChart" width="width" height="height"></canvas>
</div>
</div>
<div class="line"></div>
<h2>Who Dictated The Pace?</h2>
<div class="row" id="quest4">
<div class="col-sm-9">
<canvas id="myChart1" width="width" height="height"></canvas>
</div>
<div class="col-sm-3">
<p>
In this graph we can see that in reality <b>CLE</b> didn't play
better than their regular season. In reality <b>GSW</b> really
slowed down and their stats across the board dropped drastically.
<u
><b>CLE</b> pretty much played their game at their pace and
brought <b>GSW</b> to their level.</u
>
</p>
</div>
</div>
<div class="line"></div>
<h2>Big money</h2>
<div class="row" id="quest5">
<div class="col-sm-3">
<p>
Being the underdogs <b>CLE</b> had all odds against them. While
all the predictions said <b>GSW</b> would win the championship the
result differed and <b>CLE</b> won at last. Maybe a reference to
<u>The Chaos Theory.</u> To give you a better understanding when
<u
><b>GSW</b> was up <b>3-1</b> in the series the chances of them
winning was <b>94.1%</b> if you would have bet <b>10,000</b> on
<b>CLE</b> winning the series<b>(before game 5)</b>, you would
have made <b>120,000.</b></u
>
No team in the professional sport has ever comeback from down
<b>3-1</b>, only <b>CLE</b> has done it, in many ways thanks to
<u><b>LeBron James.</b></u>
</p>
</div>
<div class="col-sm-9">
<canvas id="myChart4" width="width" height="height"></canvas>
</div>
</div>
</div>
</div>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- Bootstrap Js CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#sidebarCollapse").on("click", sideBar);
});
function sideBar() {
$("#sidebar").toggleClass("active");
}
</script>
<script src="https://gmousse.github.io/dataframe-js/dist/dataframe.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<script src="chart_js_backend.js"></script>
</body>
</html>