generated from DS4200-S23-Class/project
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
110 lines (94 loc) · 5.6 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>DS4200 Pitch Sequencing Project</title>
<script src="js/d3.v6.1.1/d3.min.js"></script>
</head>
<body>
<h1>MLB Pitch Sequencing Analysis</h1>
<div class="centered">
<h2>Motivation</h2>
<p>
Baseball analytics encapsulates hundreds of 'random' yet useful statistics that represent distinct combinations of attributes, and most of them are quite simple to understand and apply. Given baseball's long history of sign stealing, and the Houston Astros controversy from a few years ago for cheating via illegally sign stealing using technology, we wanted to focus on predicting a given pitch's pitch type or location.
</p>
<p>
With baseball's recent steep rise in popularity due to the aforementioned cheating scandal and due to various content creators' marketing, and with the transition to PitchCom for communicating pitch sequences, we believe now is an amazing opportunity to attempt to predict a pitcher's pitch sequence of pitch types and pitch locations.
</p>
<p>
The end user for this project would be a playoff caliber team such as the Astros, Dodgers or Yankees, and the average fan. The use case of the project would be to help the user to predict the pitcher’s next pitch type and pitch location in an at-bat given the previous pitches thrown, the count and scoreline, among other factors. To obtain this, the user would input data: a pitcher, scoreline, count, etc. This would produce visualizations showing the likelihood of a specific pitch type to be thrown, or the likely location for the next pitch.
</p>
</div>
<div class="centered">
<h2>Background</h2>
<div id="data">
<h3>Data</h3>
<p>
Our data tool will visualize the likelihood of pitch types and locations for a specific scenario in a Major League Baseball game. To do so, we are using 2021 Statcast data which uses high-resolution cameras and radar technology to precisely measure
the movements of players and the ball in game. The data has been provided by Baseball Savant, a site dedicated to baseball analytics and statistics research. The objective statistical nature of the data protects itself from any apparent biases
between player performances. As for the ethics considering the collection of this data, the contracts of MLB players allows for Major League Baseball to disclose any performance metrics that can be observed on the field. Since players are put on display for fans,
their statistics are generally public and the MLB reserves the rights to publish them.
</p>
<p>
Through this tool, our end user can specify a pitcher, count, inning, batter, and previous pitch type to personalize the situation. This exposes teams, especially their hitters to more useful analytics to predict what pitch this particular pitcher in this particular situation might throw. Baseball, being such a matchup based sport, lends itself heavily to analyses covering many different scenarios compared to other sports.
</p>
<a href="https://www.kaggle.com/datasets/s903124/mlb-statcast-data">Datasource</a>
</div>
<div id="demovid">
<h3>Demo Video</h3>
<a href="https://www.youtube.com/watch?v=TqH4rQOT-98">Demo Video</a>
</div>
<div id="report">
<h3>Final Report</h3>
<a href="https://1drv.ms/w/s!ArZAQFJPSJZa9TxnluSyTDbfXTcl?e=gEUDxS">Final Report</a>
</div>
</div>
<h2 class="centered">Visualization</h2>
<div id="columns">
<div id="left">
<div id="location_vis"> </div>
</div>
<div id="right">
<div id="type_vis"></div>
<p>Click on a slice to only show pitches of that type in location graph.</p>
<br><br><br>
<div>
<form id="Scenario">
<label for="inning">Inning: </label>
<input type="number" id="inning" name="inning" min="1" max="9" required><br>
<label for="strikes">Strikes: </label>
<input type="number" id="strikes" name="strikes" min="0" max="2" required><br>
<label for="balls">Balls: </label>
<input type="number" id="balls" name="balls" min="0" max="3" required><br>
<label for="phandedness">Pitcher Handedness:</label>
<select name="phandedness" id="phandedness">
<option value="L">Left</option>
<option value="R">Right</option>
</select><br>
<button id="submit-btn" type="button">Filter Data</button>
</form>
<p>*All fields are required when filtering</p>
</div>
</div>
</div>
<div>
<h2>Acknowledgements</h2>
<ul>
<li>
<a href="https://baseballsavant.mlb.com/about">What is Statcast?</a>
</li>
<li>
<a href="https://stackoverflow.com/questions/48702320/how-to-correctly-add-labels-to-the-d3-pie-chart">Pie Chart labels</a>
</li>
<li>
<a href="https://observablehq.com/@d3/pie-chart">Pie Charts d3</a>
</li>
<li>
The TAs and Professor Mosca!
</li>
</ul>
</div>
<script src="main.js"></script>
</body>
</html>