-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
106 lines (97 loc) · 4.41 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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Major League Data Challenge</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<link href="css/style.css" rel="stylesheet"/>
</head>
<body>
<header>
<h1>Major League Data Challenge</h1>
<div class='description'>
This data visualization allows you to view, track, and compare the careers of baseball's (arguably) 10 best hitters and pitchers. Choose a statistic from the dropdown, whether you want to view that statistic for each individual year or as running career total, and whether you want that statistic to be shown in a historical context or from a career baseline. Hover over a player in the list to highlight his line in the chart. Click on a player in the list to focus the chart on his data. When a player is clicked, hover over the chart to reveal data values for each season. Click on another player to highlight his data in red for comparison. Click on focused player again to reset the chart to its intial behavior.
</div>
</header>
<div id='hitters' class='container cf'>
<h2>Best Bats</h2>
<div class='chartInfo cf'>
<div class='controls'>
<p>Pick a Statistic :</p>
<select class='clicker'>
<option value="WAR">WAR</option>
<option value='HR'>Homers</option>
<option value='hits'>Hits</option>
<option value='RBI'>Ribbys</option>
<option value='BA'>Batting Average</option>
<option value='slug'>Slugging</option>
<option value='runs'>Runs</option>
<option value='OPS'>OPS</option>
</select>
<div class='inputContain'>
<p>View Statistic :</p>
<input class='stats' type="radio" value="seasonal" id="r3"name="optradio2" checked>
<label for="r3">Year-by-Year</label>
<input class='stats' type="radio" value="cumulative" id="r4"name="optradio2">
<label for="r4">Cumulatively</label>
</div>
<div class='inputContain'>
<p>Time Span :</p>
<input class='time' type="radio" value="time" id="r1" name="optradio1" checked>
<label for="r1">Historical</label>
<input class='time' type="radio" value="career" id="r2" name="optradio1">
<label for="r2">Career Baseline</label>
</div>
</div>
<h2 class='dispName'></h2>
<h3 class='compName'></h3>
<h4 class='teamName'></h4>
</div>
<div class='playerList hitters'></div>
<div class='svgContain'></div>
</div>
<div id='pitchers' class='container cf'>
<h2>Best Arms</h2>
<div class='chartInfo cf'>
<div class='controls'>
<p>Pick a Statistic :</p>
<select class='clicker'>
<option value="WAR">WAR</option>
<option value='wins'>Wins</option>
<option value='losses'>Losses</option>
<option value='K'>Strikeouts</option>
<option value='ERA'>ERA</option>
<option value='ER'>Earned Runs</option>
<option value='WHIP'>WHIP</option>
</select>
<div class='inputContain'>
<p>View Statistic :</p>
<input class='stats' type="radio" value="seasonal" id="r7"name="optradio4" checked>
<label for="r7">Year-by-Year</label>
<input class='stats' type="radio" value="cumulative" id="r8"name="optradio4">
<label for="r8">Cumulatively</label>
</div>
<div class='inputContain'>
<p>Time Span :</p>
<input class='time' type="radio" value="time" id="r5" name="optradio3" checked>
<label for="r5">Historical</label>
<input class='time' type="radio" value="career" id="r6" name="optradio3">
<label for="r6">Career Baseline</label>
</div>
</div>
<h2 class='dispName'></h2>
<h3 class='compName'></h3>
<h4 class='teamName'></h4>
</div>
<div class='playerList pitchers'></div>
<div class='svgContain'></div>
</div>
<footer>
Submission by <a href="http://cpgruber.github.io" target="_blank">Chase Gruber</a>
</footer>
<script type='text/javascript' src='js/palette.js'></script>
<script type='text/javascript' src='js/app.js'></script>
</body>
</html>