2022-06-10-logan-release-points-plotly-dash-app.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "22c6fce5-b59d-4c16-b691-5d1bd9267c37",
   "metadata": {},
   "source": [
    "## Import Libraries. Upload Dataset."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 50,
   "id": "4a0d79cd-472e-4972-896d-09006400ddef",
   "metadata": {},
   "outputs": [],
   "source": [
    "import pandas as pd\n",
    "import dash\n",
    "from jupyter_dash import JupyterDash\n",
    "from dash import dcc\n",
    "from dash import html\n",
    "from dash.dependencies import Input, Output\n",
    "import plotly.graph_objects as go"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 39,
   "id": "f7dbf6d8-96d0-49cd-bb39-176edd9c6aad",
   "metadata": {},
   "outputs": [],
   "source": [
    "df = pd.read_csv(\"C:/Users/chris/Documents/Datasets/BaseballR/2021/2021merged.csv\", dtype={61:\"str\",151:\"str\",152:\"str\",153:\"str\",154:\"str\",155:\"str\",156:\"str\"})\n",
    "df = df[(df.pitcher == 669302)]"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "f85396c3-9362-499c-84eb-60837823fa2c",
   "metadata": {},
   "source": [
    "## Filter out columns not being referenced."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 158,
   "id": "ab3bdf39-ffef-4992-9d27-78381a9fdcda",
   "metadata": {},
   "outputs": [],
   "source": [
    "#df.columns.values"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 51,
   "id": "f3715910-55b7-4826-aed5-dc8b65bde90f",
   "metadata": {},
   "outputs": [],
   "source": [
    "logan = df[[\"game_date.x\", \"at_bat_number\", \"pitch_number\", \"pitch_name\", \"release_pos_x\", \"release_pos_y\", \"release_pos_z\"]]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 52,
   "id": "8950351f-f9d7-4f2c-96bd-c8f295bff70b",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div>\n",
       "<style scoped>\n",
       "    .dataframe tbody tr th:only-of-type {\n",
       "        vertical-align: middle;\n",
       "    }\n",
       "\n",
       "    .dataframe tbody tr th {\n",
       "        vertical-align: top;\n",
       "    }\n",
       "\n",
       "    .dataframe thead th {\n",
       "        text-align: right;\n",
       "    }\n",
       "</style>\n",
       "<table border=\"1\" class=\"dataframe\">\n",
       "  <thead>\n",
       "    <tr style=\"text-align: right;\">\n",
       "      <th></th>\n",
       "      <th>game_date.x</th>\n",
       "      <th>at_bat_number</th>\n",
       "      <th>pitch_number</th>\n",
       "      <th>pitch_name</th>\n",
       "      <th>release_pos_x</th>\n",
       "      <th>release_pos_y</th>\n",
       "      <th>release_pos_z</th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <th>32990</th>\n",
       "      <td>2021-09-30</td>\n",
       "      <td>1.0</td>\n",
       "      <td>1.0</td>\n",
       "      <td>4-Seam Fastball</td>\n",
       "      <td>-1.41</td>\n",
       "      <td>53.08</td>\n",
       "      <td>6.12</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>32991</th>\n",
       "      <td>2021-09-30</td>\n",
       "      <td>1.0</td>\n",
       "      <td>2.0</td>\n",
       "      <td>4-Seam Fastball</td>\n",
       "      <td>-1.20</td>\n",
       "      <td>53.03</td>\n",
       "      <td>6.22</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>32992</th>\n",
       "      <td>2021-09-30</td>\n",
       "      <td>1.0</td>\n",
       "      <td>3.0</td>\n",
       "      <td>4-Seam Fastball</td>\n",
       "      <td>-1.33</td>\n",
       "      <td>53.02</td>\n",
       "      <td>6.00</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>32993</th>\n",
       "      <td>2021-09-30</td>\n",
       "      <td>1.0</td>\n",
       "      <td>4.0</td>\n",
       "      <td>4-Seam Fastball</td>\n",
       "      <td>-1.10</td>\n",
       "      <td>53.03</td>\n",
       "      <td>6.12</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>32994</th>\n",
       "      <td>2021-09-30</td>\n",
       "      <td>1.0</td>\n",
       "      <td>5.0</td>\n",
       "      <td>4-Seam Fastball</td>\n",
       "      <td>-1.35</td>\n",
       "      <td>52.91</td>\n",
       "      <td>6.04</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "</div>"
      ],
      "text/plain": [
       "      game_date.x  at_bat_number  pitch_number       pitch_name  \\\n",
       "32990  2021-09-30            1.0           1.0  4-Seam Fastball   \n",
       "32991  2021-09-30            1.0           2.0  4-Seam Fastball   \n",
       "32992  2021-09-30            1.0           3.0  4-Seam Fastball   \n",
       "32993  2021-09-30            1.0           4.0  4-Seam Fastball   \n",
       "32994  2021-09-30            1.0           5.0  4-Seam Fastball   \n",
       "\n",
       "       release_pos_x  release_pos_y  release_pos_z  \n",
       "32990          -1.41          53.08           6.12  \n",
       "32991          -1.20          53.03           6.22  \n",
       "32992          -1.33          53.02           6.00  \n",
       "32993          -1.10          53.03           6.12  \n",
       "32994          -1.35          52.91           6.04  "
      ]
     },
     "execution_count": 52,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "logan.head()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "7704d08e-2526-42b0-89c6-88a21fc46733",
   "metadata": {},
   "source": [
    "## Build headers and dropdown menus for plotly dash app."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 54,
   "id": "21d2a726-6217-4db0-b5ef-31bdfb176fe4",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "array(['4-Seam Fastball', 'Slider', 'Changeup', 'Knuckle Curve'],\n",
       "      dtype=object)"
      ]
     },
     "execution_count": 54,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "logan.pitch_name.unique()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 214,
   "id": "a0e941fb-d110-479d-8a61-c7b690923a20",
   "metadata": {},
   "outputs": [],
   "source": [
    "app = JupyterDash(__name__)\n",
    "\n",
    "app.layout = html.Div([\n",
    "    html.H1(\"Logan Gilbert, 2021\", style={\"text-align\" : \"center\"}),\n",
    "    html.H2(\"Release Point Variation by Pitch, Game Date\", style={\"text-align\" : \"center\"}),\n",
    "    \n",
    "    html.Div(\n",
    "        children=[\n",
    "            dcc.Dropdown(id=\"sel_pitch\",\n",
    "                         options=[\n",
    "                             {\"label\": \"4-Seam Fastball\", \"value\": \"4-Seam Fastball\"},\n",
    "                             {\"label\": \"Slider\", \"value\": \"Slider\"},\n",
    "                             {\"label\": \"Changeup\", \"value\": \"Changeup\"},\n",
    "                             {\"label\": \"Knuckle Curve\", \"value\": \"Knuckle Curve\"}\n",
    "                         ],\n",
    "                         multi=False,\n",
    "                         value=\"4-Seam Fastball\",\n",
    "                         style={\"width\": 240}\n",
    "                        )],\n",
    "        style = {\"display\": \"flex\", \"align-items\": \"center\", \"justify-content\": \"center\"}\n",
    "    ),\n",
    "    html.Div(\n",
    "        children=[\n",
    "            dcc.Dropdown(id=\"sel_date\",\n",
    "                         options=[\n",
    "                             {\"label\": \"Before 8-21\", \"value\": \"Before\"},\n",
    "                             {\"label\": \"After 8-21\", \"value\": \"After\"},\n",
    "                             {\"label\": \"All Dates\", \"value\": \"All Dates\"}\n",
    "                         ],\n",
    "                         multi=False,\n",
    "                         value=\"All Dates\",\n",
    "                         style={\"width\": 240}\n",
    "                        )],\n",
    "        style = {\"display\": \"flex\", \"align-items\": \"center\", \"justify-content\": \"center\"}\n",
    "    ),\n",
    "    html.Div(\n",
    "        dcc.Graph(id=\"graph\", figure={}),\n",
    "        style = {\"display\": \"flex\", \"align-items\": \"center\", \"justify-content\": \"center\"}\n",
    "    )\n",
    "])"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "446f8bc0-ced2-4d58-832f-7cfe0990c0c3",
   "metadata": {},
   "source": [
    "## Build graph being referenced by our app."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 215,
   "id": "1d486ffa-5a07-4f05-b3f1-59595d051600",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "        <iframe\n",
       "            width=\"100%\"\n",
       "            height=\"650\"\n",
       "            src=\"http://127.0.0.1:8050/\"\n",
       "            frameborder=\"0\"\n",
       "            allowfullscreen\n",
       "            \n",
       "        ></iframe>\n",
       "        "
      ],
      "text/plain": [
       "<IPython.lib.display.IFrame at 0x14ae904dc60>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "4-Seam Fastball\n",
      "All Dates\n",
      "4-Seam Fastball\n",
      "All Dates\n",
      "4-Seam Fastball\n",
      "All Dates\n",
      "4-Seam Fastball\n",
      "All Dates\n",
      "4-Seam Fastball\n",
      "All Dates\n",
      "4-Seam Fastball\n",
      "Before\n",
      "4-Seam Fastball\n",
      "All Dates\n"
     ]
    }
   ],
   "source": [
    "@app.callback(\n",
    "    Output(component_id=\"graph\", component_property=\"figure\"),\n",
    "    [Input(component_id=\"sel_pitch\", component_property=\"value\"),\n",
    "     Input(component_id=\"sel_date\", component_property=\"value\")]\n",
    ")\n",
    "\n",
    "def update_graph(option_pitch, option_date):\n",
    "    print(option_pitch)\n",
    "    print(option_date)\n",
    "    \n",
    "    dff = df.copy()\n",
    "    dff = dff[(dff.pitch_name == option_pitch)]\n",
    "    \n",
    "    if option_date == \"Before\":\n",
    "        dff = dff[(dff[\"game_date.x\"] <= \"2021-08-21\")]\n",
    "    elif option_date == \"After\":\n",
    "        dff = dff[(dff[\"game_date.x\"] > \"2021-08-21\")]\n",
    "    \n",
    "    x = dff.release_pos_x\n",
    "    y = dff.release_pos_y\n",
    "    z = dff.release_pos_z\n",
    "    \n",
    "    fig = go.Figure(data=[go.Scatter3d(\n",
    "        x=x, \n",
    "        y=y, \n",
    "        z=z, \n",
    "        mode=\"markers\",\n",
    "        marker=dict(\n",
    "            size=6,\n",
    "            color=z,\n",
    "            colorscale=\"Viridis\",\n",
    "            opacity=0.8\n",
    "        )\n",
    "    )])\n",
    "    \n",
    "    camera = dict(\n",
    "        up=dict(x=0, y=0, z=1),\n",
    "        center=dict(x=0, y=0, z=0),\n",
    "        eye=dict(x=1, y=-1, z=.5)\n",
    "    )\n",
    "    \n",
    "    fig.update_layout(\n",
    "        autosize=False,\n",
    "        width=1200,\n",
    "        height=800,\n",
    "        scene = dict(xaxis_title=\"Horizontal Distance (ft)\",\n",
    "                     yaxis_title=\"Distance from Home (ft)\",\n",
    "                     zaxis_title=\"Height (ft)\",\n",
    "                     xaxis=dict(range=[-3,0]),\n",
    "                     yaxis=dict(range=[52,55]),\n",
    "                     zaxis=dict(range=[5.5, 6.6])\n",
    "                    ),\n",
    "        scene_camera = camera\n",
    "    )\n",
    "    return fig\n",
    "\n",
    "app.run_server(mode='inline')"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.10.2"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}