-
Notifications
You must be signed in to change notification settings - Fork 4
Expand file tree
/
Copy pathindex.html
More file actions
207 lines (188 loc) · 10 KB
/
index.html
File metadata and controls
207 lines (188 loc) · 10 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>NFL Draft History</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Interactive Visualization of NFL Drafty History">
<meta name="author" content="Nanda Yadav">
<script src="js/d3.v3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script src="js/bootstrap-dropdown.js"></script>
<script src="js/bootstrap-button.js"></script>
<script src="js/colorbrewer.js"></script>
<script src="js/underscore-min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css" />
<link href="css/bootstrap-slider.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<![endif]-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-39481629-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div class="container-narrow">
<div class="masthead">
<ul class="nav nav-pills pull-right">
<li><a href="#about">About</a></li>
</ul>
<h3 class="muted">Visualizing NFL Draft History</h3>
</div>
<hr>
<div class="row">
<div class="btn-group span2" style="padding-top: 0px; width: 200px;">
<button class="btn btn-success" id="selected">Pick your team</button>
<button class="btn btn-success dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#" data-team="vikings">Minnesota Vikings</a></li>
<li><a href="#" data-team="packers">Greenbay Packers</a></li>
<li><a href="#" data-team="bears">Chicago Bears</a></li>
<li><a href="#" data-team="lions">Detroit Lions</a></li>
<li><a href="#" data-team="falcons">Atlanta Falcons</a></li>
<li><a href="#" data-team="panthers">Carolina Panthers</a></li>
<li><a href="#" data-team="cardinals">Arizona Cardinals</a></li>
<li><a href="#" data-team="ravens">Baltimore Ravens</a></li>
<li><a href="#" data-team="bills">Buffalo Bills</a></li>
<li><a href="#" data-team="bengals">Cincinatti Bengals</a></li>
<li><a href="#" data-team="browns">Cleveland Browns</a></li>
<li><a href="#" data-team="broncos">Denver Broncos</a></li>
<li><a href="#" data-team="texans">Houston Texans</a></li>
<li><a href="#" data-team="colts">Indianapolis Colts</a></li>
<li><a href="#" data-team="jaguars">Jacksonville Jaguars</a></li>
<li><a href="#" data-team="cowboys">Dallas Cowboys</a></li>
<li><a href="#" data-team="patriots">NewEngland Patriots</a></li>
<li><a href="#" data-team="redskins">Washington Redskins</a></li>
<li><a href="#" data-team="titans">Tennessee Titans</a></li>
<li><a href="#" data-team="bucs">Tampa bay Buccaneers</a></li>
<li><a href="#" data-team="rams">St Louis Rams</a></li>
<li><a href="#" data-team="seahawks">Seattle Seahawks</a></li>
<li><a href="#" data-team="49ers">San Francisco 49ers</a></li>
<li><a href="#" data-team="chargers">San Diego Charges</a></li>
<li><a href="#" data-team="steelers">Pittsburgh Steelers</a></li>
<li><a href="#" data-team="eagles">Philadelphia Eagles</a></li>
<li><a href="#" data-team="raiders">Oakland Raiders</a></li>
<li><a href="#" data-team="jets">New York Jets</a></li>
<li><a href="#" data-team="giants">New York Giants</a></li>
<li><a href="#" data-team="saints">New Orleans Saints</a></li>
<li><a href="#" data-team="dolphins">Miami Dolphins</a></li>
<li><a href="#" data-team="chiefs">Kansas City Chiefs</a></li>
</ul>
</div>
<div class="span1" id="logo" style="display: none;">
<img src="logos/vikings.gif" width="48" height="48">
</div>
<div class="span2" id="info">
<p></p>
</div>
<div class="span7 pull-right">
<span class="label label-info">Visualization Type </span>
<label class="radio inline">
<input type="radio" id="individual" name="VizMode" value="individual" checked="true">Individual
</label>
<label class="radio inline">
<input type="radio" id="heatmap" name="VizMode" value="heatmap">Heatmap
</label>
</div>
</row>
<row class="span12 well" id="decade-filter" style="display: none; padding: 4px; margin-top: 10px;">
<div class="span4" style="margin-top: 6px;">
<span class="label label-info">Filter by Decade</span><span> or manually slide year filter</span>
</div>
<div class="span7">
<ul class="nav nav-pills" id="decade-links">
</ul>
</div>
<div class="row" id="sliderContainer" style="display: none; padding-bottom: 10px;">
<div class="span1" id="start"><span class="badge badge-large badge-success"></span></div>
<div id="slider" class="span10"></div>
<div class="span1" id="end"><span class="badge badge-success"></span></div>
</div>
</row>
<row class="span12 well" id="round-filter" style="padding: 4px; margin-top: 10px;">
<div class="span3" style="margin-top: 6px;">
<span class="label label-info">Filter by</span>
<div class="btn-group" data-toggle="buttons-radio" style="margin: 0px 5px;">
<button class="btn btn-small active">Round</button>
<button class="btn btn-small">Position</button>
</div>
</div>
<div class="span9">
<ul class="nav nav-pills" id="round-links">
<li class="active"><a href="#all">All</a></li>
<li><a href="#1">1</a></li>
<li><a href="#2">2</a></li>
<li><a href="#3">3</a></li>
<li><a href="#4">4</a></li>
<li><a href="#5">5</a></li>
<li><a href="#6">6</a></li>
<li><a href="#7">7</a></li>
<li><a href="#8">8 and above</a></li>
</ul>
<ul class="nav nav-pills" id="position-links" style="display: none;">
<li class="active"><a href="#all">All</a></li>
<li><a href="#">QB</a></li>
<li><a href="#">RB</a></li>
<li><a href="#">WR</a></li>
<li><a href="#">TE</a></li>
<li><a href="#">G</a></li>
<li><a href="#">C</a></li>
<li><a href="#">T</a></li>
<li><a href="#">K</a></li>
<li><a href="#">P</a></li>
<li><a href="#">DB</a></li>
<li><a href="#">CB</a></li>
<li><a href="#">LB</a></li>
<li><a href="#">FS</a></li>
<li><a href="#">DT</a></li>
<li><a href="#">DE</a></li>
</ul>
</div>
</div>
<div id="chart"></div>
<script src="js/line.js"></script>
<br/>
<div id="about" class="well">
<h3>About</h3>
<p>This project attempts to visually show all the draft picks for a particular team from 1960 - 2012. </p>
<h4>Individual Graph</h4>
<p>The invidiual chart shows all the picks(players) grouped by year, color coded by round. This can be further filtered by a particular round or a particular position.</p>
<h4>Heatmap</h4>
<p>The heatmap chart shows how individual positions drafted for compare to each other, as displayed by intensity of the color, over a given range of years. This can be filtered by a particular decade or any starting and ending years using the year slider. </p>
<h4>Data Messaging/Conversion</h4>
Since NFL and specifically NFL positions have evolved over the years, positions of previous generations are mapped to ones in modern game to make the comparison consistent. Also drafts earlier than 1960 are ignored for the same reason. Following are those position conversions done for drafts 1960 onwards:
<ul>
<li>HB(Half Back) -> RB(Running Back)</li>
<li>B(Back) -> RB(Running Back)</li>
<li>DL(Defensive Lineman) -> DT(Defensive Tackle)</li>
<li>NT(Nose Tackle) -> DT(Defensive Tackle)</li>
<li>OL(Offensive Line) -> T(Tackle)</li>
<li>ILB(Inside Linebacker) -> LB(Linebacker)</li>
<li>OLB(Outside Linebacker) -> LB(Linebacker)</li>
<li>SS(Strong Safety) -> FS(Free Safety)</li>
<li>E -> WR(Wide Receiver)</li>
</ul>
<h4>Data Source & Credits:</h4>
<p>Data Source: <a href="http://www.pro-football-reference.com/" target="_blank">Pro-Football-reference.com</a><br/>
Built with: <a href="http://d3js.org/" target="_blank">D3.js</a><br/>
<a href="https://github.com/nandayadav/nfldrafts_visualization" target="_blank">Source Code</a>
</p>
<p>This project is for educational purposes, I do not own the NFL or its affiliated teams or logos. Teams and Logos are copyright of the NFL</p>
Author: <a href="https://twitter.com/nandayadav" target="_blank">Nanda Yadav</a><br/>
</div>
</div> <!-- /container -->
</body>
</html>