baseball_dv.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<font size=\"6\"> Introduction </font>  \n",
    "\n",
    "<font size=\"4\" style=\"color:blue;\">Baseball Batter Study </font>\n",
    "\n",
    "<font size=\"3\" style=\"color:white;\">Author - Blair Cheredaryk.  Published on October 24th, 2023 </font>\n",
    "\n",
    "Welcome to the season play-offs. Not only have we gotten to the final round of the assignments but we've also gotten to the final game of batting season!\n",
    "\n",
    "In this week's game assignment, our goal is to try to showcase just how useful widgets, and interactivity is to communicating our insights to our audience. Yes, there are other ways to answer some of the questions in this assignment, but we want to really focus on how convenient and time-saving certain features can be.\n",
    "The data we are exploring are from [Sean Lahman's Baseball dataset](http://www.seanlahman.com/baseball-archive/statistics/)  - a baseball resource that has the statistics on players across many different leagues and years. The license can be viewed [here](http://www.seanlahman.com/baseball-archive/statistics/). \n",
    "\n",
    "This data has several modifications have been made so that the visualization process is a home run. \n",
    "\n",
    "***NOTE: This is a larger dataset and because of that, the interactivity component is going to be a little slower but just be a little patient.***\n",
    "\n",
    "It's important to note that in the real world, the data playing field is often not as well maintained as what we provide. Often data is messy and needs a lot of wrangling before we can even begin the task at hand. Think of it as cross-country skiing with lots of bumps and holes that need addressing. In this course, we really want to focus on visualizing the data since the wangling and cleaning part you learned already in [Programming in Python for Data Science ](https://prog-learn.mds.ubc.ca/)\n",
    "\n",
    "For this assignment we will be looking at 2 tables, one with the players statistics such as their height, date of birth etc. and a second with their game stats over each season they played and their position. "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The description of the columns of both datasets can be found below and they are available at the links provided .\n",
    "\n",
    "### [`baseball_players.json`](https://raw.githubusercontent.com/UBC-MDS/exploratory-data-viz/main/data/baseball_players.json): \n",
    "\n",
    "\n",
    "| Column            | Description                                                                            |\n",
    "|-------------------|:---------------------------------------------------------------------------------------|\n",
    "| player_id         | A unique code assigned to each player.                                                 |\n",
    "| birth_year        | Year player was born                                                                   |\n",
    "| birth_month       | Month  player was born                                                                 |\n",
    "| birth_day         | Day player was born                                                                    |\n",
    "| birth_date        | year, month and day player was born                                                    |\n",
    "| birth_country     | Country where player was born                                                          |\n",
    "| birth_state       | State where player was born                                                            |\n",
    "| birth_city        | City where player was born                                                             |\n",
    "| death_year        | Year player died                                                                       |\n",
    "| death_country     | Country where player died                                                              |\n",
    "| death_state       | State where player died                                                                |\n",
    "| name_first        | Player’s first name                                                                    |\n",
    "| name_last         | Player’s last name                                                                     |\n",
    "| name_given        | Player’s given name (typically first and middle)                                       |\n",
    "| height            | Player's height in inches                                                              |\n",
    "| weight            | Player's weight in pounds                                                              |\n",
    "| bats              | Player’s batting hand (left (L), right (R), or both (B))                               |\n",
    "| throws            | Player’s throwing hand (left(L) or right(R))                                           |\n",
    "| debut             | Date that player made first major league appearance                                    |\n",
    "| final_game        | Date that player made first major league appearance (blank if still active)            |\n",
    "| id_country        | The [ISO 3166-1 numeric code](https://en.wikipedia.org/wiki/ISO_3166-1_numeric) of the country in `first_nationality`                                    |\n",
    "| region            | The continent of which the country from `first_nationality` belongs to                 |\n",
    "| id                | The state code to create a US map                                                      |\n",
    "\n",
    "\n",
    "### [`states_df.json`](https://raw.githubusercontent.com/UBC-MDS/exploratory-data-viz/main/data/states_df.json) \n",
    "\n",
    "| Column            | Description                                                                            |\n",
    "|-------------------|:---------------------------------------------------------------------------------------|\n",
    "| birth_state       | The unique shortform of each State in the U                                            |\n",
    "| id                | The id used to map each state                                                          |\n",
    "| player_num        | Number of players                                                                      |\n",
    "\n",
    "\n",
    "### [`baseball_pitchers.json`](https://raw.githubusercontent.com/UBC-MDS/exploratory-data-viz/main/data/baseball_pitchers.json) \n",
    "\n",
    "| Column            | Description                                                                            |\n",
    "|-------------------|:---------------------------------------------------------------------------------------|\n",
    "| player_id         | A unique code assigned to each player.                                                 |\n",
    "| teamID            | Team                                                                                   |\n",
    "| W                 | Wins                                                                                   |\n",
    "| L                 | Losses                                                                                 |\n",
    "| G                 | Games                                                                                  |\n",
    "| GS                | Games Started                                                                          |\n",
    "| CG                | Complete Games                                                                         |\n",
    "| SHO               | Shutouts                                                                               |\n",
    "| SV                | Saves                                                                                  |\n",
    "| IPouts            | Outs Pitched (innings pitched x 3)                                                     |\n",
    "| H                 | Hits                                                                                   |\n",
    "| ER                | Earned Runs                                                                            |\n",
    "| HR                | Homeruns                                                                               |\n",
    "| BB                | Walks                                                                                  |\n",
    "| SO                | Strikeouts                                                                             |\n",
    "| BAOpp             | Opponent’s Batting Average                                                             |\n",
    "| ERA               | Earned Run Average                                                                     |\n",
    "| IBB               | Intentional Walks                                                                      |\n",
    "| HBP               | Batters Hit By Pitch                                                                   |\n",
    "| WP                | Wild Pitches                                                                           |\n",
    "| BFP               | Batters faced by Pitcher                                                               |\n",
    "| GF                | Games Finished                                                                         |\n",
    "| R                 | Runs Allowed                                                                           |\n",
    "| SH                | Sacrifices by opposing batters                                                         |\n",
    "| SF                | Sacrifice flies by opposing batters                                                    |\n",
    "| GIDP              | Grounded into double plays by opposing batter                                          |\n",
    "| name_last         | Player’s first name                                                                    |\n",
    "| name_first        | Player’s last name                                                                     |\n",
    "| id                | The id of the state the player was born                                                |\n",
    "| SO_per_BF         | Strikeout per batter faced                                                             |\n",
    "\n",
    "\n",
    "\n",
    "### [`baseball_players_stats.json`](https://raw.githubusercontent.com/UBC-MDS/exploratory-data-viz/main/data/baseball_players_stats.json) \n",
    "\n",
    "       \n",
    "| Column            | Description                                                                            |\n",
    "|-------------------|:---------------------------------------------------------------------------------------|\n",
    "| player_id         | A unique code assigned to each player.                                                 |\n",
    "| teamID            | Team                                                                                   |\n",
    "| lgID              | League; levels AA AL FL NL PL UA                                                       |\n",
    "| G                 | number of games in which a player played                                               |\n",
    "| AB                | At bat                                                                                 |\n",
    "| R                 | Runs                                                                                   |\n",
    "| H                 | Hits - times reached base because of a batted, fair ball without error by the defense  |\n",
    "| 2B                | Doubles: hits on which the batter reached second base safely                           |\n",
    "| 3B                | Triples: hits on which the batter reached third base safely                            |\n",
    "| HR                | Homeruns                                                                               |\n",
    "| RBI               | Runs Batted In                                                                         |\n",
    "| SB                | Stolen Bases                                                                           |\n",
    "| CS                | Caught Stealing                                                                        |\n",
    "| BB                | Base on Balls                                                                          |\n",
    "| SO                | Strikeouts                                                                             |\n",
    "| IBB               | Intentional walks                                                                      |\n",
    "| HBP               | Hit by pitch                                                                           |\n",
    "| SH                | Sacrifice hits                                                                         |\n",
    "| SF                | Sacrifice flies                                                                        |\n",
    "| GIDP              | Grounded into double plays                                                             |\n",
    "| name_first        | Player’s first name                                                                    |\n",
    "| name_last         | Player’s last name                                                                     |\n",
    "| bats              | Player’s batting hand (left (L), right (R), or both (B))                               |\n",
    "| throws            | Player’s throwing hand (left(L) or right(R))                                           |\n",
    "| team_name         | Team’s full name                                                                       |\n",
    "| salary            | Salary (USD)                                                                           |\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "We expect basketball players to be taller than an average person's height to be able to shoot and dunk balls into the net but are similar statistics expected by baseball players? Of course there needs to be a lot of power to swing a ball and hit a home run but also agility is an asset when running to home base. These questions may lead us to questions such as How are baseball player's height and weight distributed in the data? Is there a relationship between the two measurements? It would be interesting to visualize our players and see if there are any patterns in the data."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 42,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "DataTransformerRegistry.enable('default')"
      ]
     },
     "execution_count": 42,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "import altair as alt\n",
    "import pandas as pd\n",
    "from vega_datasets import data\n",
    "alt.data_transformers.enable(\"default\", max_rows=None)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 43,
   "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>playerID</th>\n",
       "      <th>birth_year</th>\n",
       "      <th>birth_month</th>\n",
       "      <th>birth_day</th>\n",
       "      <th>birth_date</th>\n",
       "      <th>birth_country</th>\n",
       "      <th>birth_state</th>\n",
       "      <th>birth_city</th>\n",
       "      <th>death_year</th>\n",
       "      <th>death_country</th>\n",
       "      <th>...</th>\n",
       "      <th>name_given</th>\n",
       "      <th>weight</th>\n",
       "      <th>height</th>\n",
       "      <th>bats</th>\n",
       "      <th>throws</th>\n",
       "      <th>debut</th>\n",
       "      <th>final_game</th>\n",
       "      <th>id_country</th>\n",
       "      <th>region</th>\n",
       "      <th>id</th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <th>0</th>\n",
       "      <td>aardsda01</td>\n",
       "      <td>347155200000</td>\n",
       "      <td>12</td>\n",
       "      <td>27</td>\n",
       "      <td>1981-12-27</td>\n",
       "      <td>United States</td>\n",
       "      <td>CO</td>\n",
       "      <td>Denver</td>\n",
       "      <td>None</td>\n",
       "      <td>None</td>\n",
       "      <td>...</td>\n",
       "      <td>David Allan</td>\n",
       "      <td>215</td>\n",
       "      <td>75</td>\n",
       "      <td>R</td>\n",
       "      <td>R</td>\n",
       "      <td>2004-04-06</td>\n",
       "      <td>2015-08-23</td>\n",
       "      <td>840.0</td>\n",
       "      <td>Americas</td>\n",
       "      <td>8.0</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>1</th>\n",
       "      <td>aaronha01</td>\n",
       "      <td>-1136073600000</td>\n",
       "      <td>2</td>\n",
       "      <td>5</td>\n",
       "      <td>1934-02-05</td>\n",
       "      <td>United States</td>\n",
       "      <td>AL</td>\n",
       "      <td>Mobile</td>\n",
       "      <td>2021-01-01</td>\n",
       "      <td>USA</td>\n",
       "      <td>...</td>\n",
       "      <td>Henry Louis</td>\n",
       "      <td>180</td>\n",
       "      <td>72</td>\n",
       "      <td>R</td>\n",
       "      <td>R</td>\n",
       "      <td>1954-04-13</td>\n",
       "      <td>1976-10-03</td>\n",
       "      <td>840.0</td>\n",
       "      <td>Americas</td>\n",
       "      <td>1.0</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>2</th>\n",
       "      <td>aaronto01</td>\n",
       "      <td>-978307200000</td>\n",
       "      <td>8</td>\n",
       "      <td>5</td>\n",
       "      <td>1939-08-05</td>\n",
       "      <td>United States</td>\n",
       "      <td>AL</td>\n",
       "      <td>Mobile</td>\n",
       "      <td>1984-01-01</td>\n",
       "      <td>USA</td>\n",
       "      <td>...</td>\n",
       "      <td>Tommie Lee</td>\n",
       "      <td>190</td>\n",
       "      <td>75</td>\n",
       "      <td>R</td>\n",
       "      <td>R</td>\n",
       "      <td>1962-04-10</td>\n",
       "      <td>1971-09-26</td>\n",
       "      <td>840.0</td>\n",
       "      <td>Americas</td>\n",
       "      <td>1.0</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>3</th>\n",
       "      <td>aasedo01</td>\n",
       "      <td>-504921600000</td>\n",
       "      <td>9</td>\n",
       "      <td>8</td>\n",
       "      <td>1954-09-08</td>\n",
       "      <td>United States</td>\n",
       "      <td>CA</td>\n",
       "      <td>Orange</td>\n",
       "      <td>None</td>\n",
       "      <td>None</td>\n",
       "      <td>...</td>\n",
       "      <td>Donald William</td>\n",
       "      <td>190</td>\n",
       "      <td>75</td>\n",
       "      <td>R</td>\n",
       "      <td>R</td>\n",
       "      <td>1977-07-26</td>\n",
       "      <td>1990-10-03</td>\n",
       "      <td>840.0</td>\n",
       "      <td>Americas</td>\n",
       "      <td>6.0</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>4</th>\n",
       "      <td>abadan01</td>\n",
       "      <td>63072000000</td>\n",
       "      <td>8</td>\n",
       "      <td>25</td>\n",
       "      <td>1972-08-25</td>\n",
       "      <td>United States</td>\n",
       "      <td>FL</td>\n",
       "      <td>Palm Beach</td>\n",
       "      <td>None</td>\n",
       "      <td>None</td>\n",
       "      <td>...</td>\n",
       "      <td>Fausto Andres</td>\n",
       "      <td>184</td>\n",
       "      <td>73</td>\n",
       "      <td>L</td>\n",
       "      <td>L</td>\n",
       "      <td>2001-09-10</td>\n",
       "      <td>2006-04-13</td>\n",
       "      <td>840.0</td>\n",
       "      <td>Americas</td>\n",
       "      <td>12.0</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>...</th>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>19069</th>\n",
       "      <td>zupofr01</td>\n",
       "      <td>-978307200000</td>\n",
       "      <td>8</td>\n",
       "      <td>29</td>\n",
       "      <td>1939-08-29</td>\n",
       "      <td>United States</td>\n",
       "      <td>CA</td>\n",
       "      <td>San Francisco</td>\n",
       "      <td>2005-01-01</td>\n",
       "      <td>USA</td>\n",
       "      <td>...</td>\n",
       "      <td>Frank Joseph</td>\n",
       "      <td>182</td>\n",
       "      <td>71</td>\n",
       "      <td>L</td>\n",
       "      <td>R</td>\n",
       "      <td>1957-07-01</td>\n",
       "      <td>1961-05-09</td>\n",
       "      <td>840.0</td>\n",
       "      <td>Americas</td>\n",
       "      <td>6.0</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>19070</th>\n",
       "      <td>zuvelpa01</td>\n",
       "      <td>-378691200000</td>\n",
       "      <td>10</td>\n",
       "      <td>31</td>\n",
       "      <td>1958-10-31</td>\n",
       "      <td>United States</td>\n",
       "      <td>CA</td>\n",
       "      <td>San Mateo</td>\n",
       "      <td>None</td>\n",
       "      <td>None</td>\n",
       "      <td>...</td>\n",
       "      <td>Paul</td>\n",
       "      <td>173</td>\n",
       "      <td>72</td>\n",
       "      <td>R</td>\n",
       "      <td>R</td>\n",
       "      <td>1982-09-04</td>\n",
       "      <td>1991-05-02</td>\n",
       "      <td>840.0</td>\n",
       "      <td>Americas</td>\n",
       "      <td>6.0</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>19071</th>\n",
       "      <td>zuverge01</td>\n",
       "      <td>-1451692800000</td>\n",
       "      <td>8</td>\n",
       "      <td>20</td>\n",
       "      <td>1924-08-20</td>\n",
       "      <td>United States</td>\n",
       "      <td>MI</td>\n",
       "      <td>Holland</td>\n",
       "      <td>2014-01-01</td>\n",
       "      <td>USA</td>\n",
       "      <td>...</td>\n",
       "      <td>George</td>\n",
       "      <td>195</td>\n",
       "      <td>76</td>\n",
       "      <td>R</td>\n",
       "      <td>R</td>\n",
       "      <td>1951-04-21</td>\n",
       "      <td>1959-06-15</td>\n",
       "      <td>840.0</td>\n",
       "      <td>Americas</td>\n",
       "      <td>26.0</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>19072</th>\n",
       "      <td>zwilldu01</td>\n",
       "      <td>-2587680000000</td>\n",
       "      <td>11</td>\n",
       "      <td>2</td>\n",
       "      <td>3788-11-02</td>\n",
       "      <td>United States</td>\n",
       "      <td>MO</td>\n",
       "      <td>St. Louis</td>\n",
       "      <td>1978-01-01</td>\n",
       "      <td>USA</td>\n",
       "      <td>...</td>\n",
       "      <td>Edward Harrison</td>\n",
       "      <td>160</td>\n",
       "      <td>66</td>\n",
       "      <td>L</td>\n",
       "      <td>L</td>\n",
       "      <td>1910-08-14</td>\n",
       "      <td>1916-07-12</td>\n",
       "      <td>840.0</td>\n",
       "      <td>Americas</td>\n",
       "      <td>29.0</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>19073</th>\n",
       "      <td>zychto01</td>\n",
       "      <td>631152000000</td>\n",
       "      <td>8</td>\n",
       "      <td>7</td>\n",
       "      <td>1990-08-07</td>\n",
       "      <td>United States</td>\n",
       "      <td>IL</td>\n",
       "      <td>Monee</td>\n",
       "      <td>None</td>\n",
       "      <td>None</td>\n",
       "      <td>...</td>\n",
       "      <td>Anthony Aaron</td>\n",
       "      <td>190</td>\n",
       "      <td>75</td>\n",
       "      <td>R</td>\n",
       "      <td>R</td>\n",
       "      <td>2015-09-04</td>\n",
       "      <td>2017-08-19</td>\n",
       "      <td>840.0</td>\n",
       "      <td>Americas</td>\n",
       "      <td>17.0</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "<p>19074 rows × 23 columns</p>\n",
       "</div>"
      ],
      "text/plain": [
       "        playerID     birth_year  birth_month  birth_day  birth_date  \\\n",
       "0      aardsda01   347155200000           12         27  1981-12-27   \n",
       "1      aaronha01 -1136073600000            2          5  1934-02-05   \n",
       "2      aaronto01  -978307200000            8          5  1939-08-05   \n",
       "3       aasedo01  -504921600000            9          8  1954-09-08   \n",
       "4       abadan01    63072000000            8         25  1972-08-25   \n",
       "...          ...            ...          ...        ...         ...   \n",
       "19069   zupofr01  -978307200000            8         29  1939-08-29   \n",
       "19070  zuvelpa01  -378691200000           10         31  1958-10-31   \n",
       "19071  zuverge01 -1451692800000            8         20  1924-08-20   \n",
       "19072  zwilldu01 -2587680000000           11          2  3788-11-02   \n",
       "19073   zychto01   631152000000            8          7  1990-08-07   \n",
       "\n",
       "       birth_country birth_state     birth_city  death_year death_country  \\\n",
       "0      United States          CO         Denver        None          None   \n",
       "1      United States          AL         Mobile  2021-01-01           USA   \n",
       "2      United States          AL         Mobile  1984-01-01           USA   \n",
       "3      United States          CA         Orange        None          None   \n",
       "4      United States          FL     Palm Beach        None          None   \n",
       "...              ...         ...            ...         ...           ...   \n",
       "19069  United States          CA  San Francisco  2005-01-01           USA   \n",
       "19070  United States          CA      San Mateo        None          None   \n",
       "19071  United States          MI        Holland  2014-01-01           USA   \n",
       "19072  United States          MO      St. Louis  1978-01-01           USA   \n",
       "19073  United States          IL          Monee        None          None   \n",
       "\n",
       "       ...       name_given weight height bats  throws       debut  \\\n",
       "0      ...      David Allan    215     75    R       R  2004-04-06   \n",
       "1      ...      Henry Louis    180     72    R       R  1954-04-13   \n",
       "2      ...       Tommie Lee    190     75    R       R  1962-04-10   \n",
       "3      ...   Donald William    190     75    R       R  1977-07-26   \n",
       "4      ...    Fausto Andres    184     73    L       L  2001-09-10   \n",
       "...    ...              ...    ...    ...  ...     ...         ...   \n",
       "19069  ...     Frank Joseph    182     71    L       R  1957-07-01   \n",
       "19070  ...             Paul    173     72    R       R  1982-09-04   \n",
       "19071  ...           George    195     76    R       R  1951-04-21   \n",
       "19072  ...  Edward Harrison    160     66    L       L  1910-08-14   \n",
       "19073  ...    Anthony Aaron    190     75    R       R  2015-09-04   \n",
       "\n",
       "       final_game id_country    region    id  \n",
       "0      2015-08-23      840.0  Americas   8.0  \n",
       "1      1976-10-03      840.0  Americas   1.0  \n",
       "2      1971-09-26      840.0  Americas   1.0  \n",
       "3      1990-10-03      840.0  Americas   6.0  \n",
       "4      2006-04-13      840.0  Americas  12.0  \n",
       "...           ...        ...       ...   ...  \n",
       "19069  1961-05-09      840.0  Americas   6.0  \n",
       "19070  1991-05-02      840.0  Americas   6.0  \n",
       "19071  1959-06-15      840.0  Americas  26.0  \n",
       "19072  1916-07-12      840.0  Americas  29.0  \n",
       "19073  2017-08-19      840.0  Americas  17.0  \n",
       "\n",
       "[19074 rows x 23 columns]"
      ]
     },
     "execution_count": 43,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "players_url = 'https://raw.githubusercontent.com/UBC-MDS/exploratory-data-viz/main/data/baseball_players.json'\n",
    "players_df = pd.read_json(players_url)\n",
    "\n",
    "# your code here\n",
    "#raise NotImplementedError # No Answer - remove if you provide an answer\n",
    "\n",
    "players_df"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 44,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<style>\n",
       "  #altair-viz-bb4ef1aa7bb74fc1bad3fb4aa27dd669.vega-embed {\n",
       "    width: 100%;\n",
       "    display: flex;\n",
       "  }\n",
       "\n",
       "  #altair-viz-bb4ef1aa7bb74fc1bad3fb4aa27dd669.vega-embed details,\n",
       "  #altair-viz-bb4ef1aa7bb74fc1bad3fb4aa27dd669.vega-embed details summary {\n",
       "    position: relative;\n",
       "  }\n",
       "</style>\n",
       "<div id=\"altair-viz-bb4ef1aa7bb74fc1bad3fb4aa27dd669\"></div>\n",
       "<script type=\"text/javascript\">\n",
       "  var VEGA_DEBUG = (typeof VEGA_DEBUG == \"undefined\") ? {} : VEGA_DEBUG;\n",
       "  (function(spec, embedOpt){\n",
       "    let outputDiv = document.currentScript.previousElementSibling;\n",
       "    if (outputDiv.id !== \"altair-viz-bb4ef1aa7bb74fc1bad3fb4aa27dd669\") {\n",
       "      outputDiv = document.getElementById(\"altair-viz-bb4ef1aa7bb74fc1bad3fb4aa27dd669\");\n",
       "    }\n",
       "    const paths = {\n",
       "      \"vega\": \"https://cdn.jsdelivr.net/npm/vega@5?noext\",\n",
       "      \"vega-lib\": \"https://cdn.jsdelivr.net/npm/vega-lib?noext\",\n",
       "      \"vega-lite\": \"https://cdn.jsdelivr.net/npm/vega-lite@5.15.1?noext\",\n",
       "      \"vega-embed\": \"https://cdn.jsdelivr.net/npm/vega-embed@6?noext\",\n",
       "    };\n",
       "\n",
       "    function maybeLoadScript(lib, version) {\n",
       "      var key = `${lib.replace(\"-\", \"\")}_version`;\n",
       "      return (VEGA_DEBUG[key] == version) ?\n",
       "        Promise.resolve(paths[lib]) :\n",
       "        new Promise(function(resolve, reject) {\n",
       "          var s = document.createElement('script');\n",
       "          document.getElementsByTagName(\"head\")[0].appendChild(s);\n",
       "          s.async = true;\n",
       "          s.onload = () => {\n",
       "            VEGA_DEBUG[key] = version;\n",
       "            return resolve(paths[lib]);\n",
       "          };\n",
       "          s.onerror = () => reject(`Error loading script: ${paths[lib]}`);\n",
       "          s.src = paths[lib];\n",
       "        });\n",
       "    }\n",
       "\n",
       "    function showError(err) {\n",
       "      outputDiv.innerHTML = `<div class=\"error\" style=\"color:red;\">${err}</div>`;\n",
       "      throw err;\n",
       "    }\n",
       "\n",
       "    function displayChart(vegaEmbed) {\n",
       "      vegaEmbed(outputDiv, spec, embedOpt)\n",
       "        .catch(err => showError(`Javascript Error: ${err.message}<br>This usually means there's a typo in your chart specification. See the javascript console for the full traceback.`));\n",
       "    }\n",
       "\n",
       "    if(typeof define === \"function\" && define.amd) {\n",
       "      requirejs.config({paths});\n",
       "      require([\"vega-embed\"], displayChart, err => showError(`Error loading script: ${err.message}`));\n",
       "    } else {\n",
       "      maybeLoadScript(\"vega\", \"5\")\n",
       "        .then(() => maybeLoadScript(\"vega-lite\", \"5.15.1\"))\n",
       "        .then(() => maybeLoadScript(\"vega-embed\", \"6\"))\n",
       "        .catch(showError)\n",
       "        .then(() => displayChart(vegaEmbed));\n",
       "    }\n",
       "  })({\"config\": {\"view\": {\"continuousWidth\": 300, \"continuousHeight\": 300}}, \"data\": {\"url\": \"https://raw.githubusercontent.com/UBC-MDS/exploratory-data-viz/main/data/baseball_players.json\"}, \"mark\": {\"type\": \"circle\", \"size\": 20}, \"encoding\": {\"color\": {\"field\": \"region\", \"scale\": {\"scheme\": \"category10\"}, \"title\": \"Region\", \"type\": \"nominal\"}, \"x\": {\"field\": \"height\", \"scale\": {\"zero\": false}, \"title\": \"Player Height (inches)\", \"type\": \"quantitative\"}, \"y\": {\"field\": \"weight\", \"scale\": {\"zero\": false}, \"title\": \"Player Weight (lbs)\", \"type\": \"quantitative\"}}, \"height\": 500, \"title\": \"Player Height vs Weight by Region\", \"width\": 500, \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.15.1.json\"}, {\"mode\": \"vega-lite\"});\n",
       "</script>"
      ],
      "text/plain": [
       "alt.Chart(...)"
      ]
     },
     "execution_count": 44,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "players_hw_plot = alt.Chart(players_url).mark_circle(size=20).encode(\n",
    "    x=alt.X('height:Q', scale=alt.Scale(zero=False), title='Player Height (inches)'),\n",
    "    y=alt.Y('weight:Q', scale=alt.Scale(zero=False), title='Player Weight (lbs)'),\n",
    "    color=alt.Color('region:N', scale=alt.Scale(scheme='category10'), title='Region')\n",
    ").properties(\n",
    "    width=500,\n",
    "    height=500,\n",
    "    title='Player Height vs Weight by Region')\n",
    "\n",
    "# your code here\n",
    "#raise NotImplementedError # No Answer - remove if you provide an answer\n",
    "\n",
    "players_hw_plot"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 45,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<style>\n",
       "  #altair-viz-953ce4ce497a4d7ba0b7da4254065217.vega-embed {\n",
       "    width: 100%;\n",
       "    display: flex;\n",
       "  }\n",
       "\n",
       "  #altair-viz-953ce4ce497a4d7ba0b7da4254065217.vega-embed details,\n",
       "  #altair-viz-953ce4ce497a4d7ba0b7da4254065217.vega-embed details summary {\n",
       "    position: relative;\n",
       "  }\n",
       "</style>\n",
       "<div id=\"altair-viz-953ce4ce497a4d7ba0b7da4254065217\"></div>\n",
       "<script type=\"text/javascript\">\n",
       "  var VEGA_DEBUG = (typeof VEGA_DEBUG == \"undefined\") ? {} : VEGA_DEBUG;\n",
       "  (function(spec, embedOpt){\n",
       "    let outputDiv = document.currentScript.previousElementSibling;\n",
       "    if (outputDiv.id !== \"altair-viz-953ce4ce497a4d7ba0b7da4254065217\") {\n",
       "      outputDiv = document.getElementById(\"altair-viz-953ce4ce497a4d7ba0b7da4254065217\");\n",
       "    }\n",
       "    const paths = {\n",
       "      \"vega\": \"https://cdn.jsdelivr.net/npm/vega@5?noext\",\n",
       "      \"vega-lib\": \"https://cdn.jsdelivr.net/npm/vega-lib?noext\",\n",
       "      \"vega-lite\": \"https://cdn.jsdelivr.net/npm/vega-lite@5.15.1?noext\",\n",
       "      \"vega-embed\": \"https://cdn.jsdelivr.net/npm/vega-embed@6?noext\",\n",
       "    };\n",
       "\n",
       "    function maybeLoadScript(lib, version) {\n",
       "      var key = `${lib.replace(\"-\", \"\")}_version`;\n",
       "      return (VEGA_DEBUG[key] == version) ?\n",
       "        Promise.resolve(paths[lib]) :\n",
       "        new Promise(function(resolve, reject) {\n",
       "          var s = document.createElement('script');\n",
       "          document.getElementsByTagName(\"head\")[0].appendChild(s);\n",
       "          s.async = true;\n",
       "          s.onload = () => {\n",
       "            VEGA_DEBUG[key] = version;\n",
       "            return resolve(paths[lib]);\n",
       "          };\n",
       "          s.onerror = () => reject(`Error loading script: ${paths[lib]}`);\n",
       "          s.src = paths[lib];\n",
       "        });\n",
       "    }\n",
       "\n",
       "    function showError(err) {\n",
       "      outputDiv.innerHTML = `<div class=\"error\" style=\"color:red;\">${err}</div>`;\n",
       "      throw err;\n",
       "    }\n",
       "\n",
       "    function displayChart(vegaEmbed) {\n",
       "      vegaEmbed(outputDiv, spec, embedOpt)\n",
       "        .catch(err => showError(`Javascript Error: ${err.message}<br>This usually means there's a typo in your chart specification. See the javascript console for the full traceback.`));\n",
       "    }\n",
       "\n",
       "    if(typeof define === \"function\" && define.amd) {\n",
       "      requirejs.config({paths});\n",
       "      require([\"vega-embed\"], displayChart, err => showError(`Error loading script: ${err.message}`));\n",
       "    } else {\n",
       "      maybeLoadScript(\"vega\", \"5\")\n",
       "        .then(() => maybeLoadScript(\"vega-lite\", \"5.15.1\"))\n",
       "        .then(() => maybeLoadScript(\"vega-embed\", \"6\"))\n",
       "        .catch(showError)\n",
       "        .then(() => displayChart(vegaEmbed));\n",
       "    }\n",
       "  })({\"config\": {\"view\": {\"continuousWidth\": 300, \"continuousHeight\": 300}}, \"data\": {\"url\": \"https://raw.githubusercontent.com/UBC-MDS/exploratory-data-viz/main/data/baseball_players.json\"}, \"mark\": {\"type\": \"circle\", \"size\": 20}, \"encoding\": {\"color\": {\"field\": \"region\", \"legend\": {\"title\": \"Region\"}, \"scale\": {\"scheme\": \"category10\"}, \"type\": \"nominal\"}, \"tooltip\": [{\"field\": \"name_first\", \"type\": \"nominal\"}, {\"field\": \"name_last\", \"type\": \"nominal\"}, {\"field\": \"birth_country\", \"type\": \"nominal\"}], \"x\": {\"axis\": {\"title\": \"Height (inches)\"}, \"field\": \"height\", \"scale\": {\"zero\": false}, \"type\": \"quantitative\"}, \"y\": {\"axis\": {\"title\": \"Weight (lbs)\"}, \"field\": \"weight\", \"scale\": {\"zero\": false}, \"type\": \"quantitative\"}}, \"height\": 500, \"title\": \"Player Height vs Weight by Region\", \"width\": 500, \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.15.1.json\"}, {\"mode\": \"vega-lite\"});\n",
       "</script>"
      ],
      "text/plain": [
       "alt.Chart(...)"
      ]
     },
     "execution_count": 45,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "hw_tooltip_plot = alt.Chart(players_url).mark_circle(size=20).encode(\n",
    "    x=alt.X('height:Q', scale=alt.Scale(zero=False), axis=alt.Axis(title='Height (inches)')),\n",
    "    y=alt.Y('weight:Q', scale=alt.Scale(zero=False), axis=alt.Axis(title='Weight (lbs)')),\n",
    "    color=alt.Color('region:N', scale=alt.Scale(scheme='category10'), legend=alt.Legend(title='Region')),\n",
    "    tooltip=['name_first:N', 'name_last:N', 'birth_country:N']\n",
    ").properties(\n",
    "    width=500,\n",
    "    height=500,\n",
    "    title='Player Height vs Weight by Region')\n",
    "\n",
    "# your code here\n",
    "#raise NotImplementedError # No Answer - remove if you provide an answer\n",
    "\n",
    "hw_tooltip_plot"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 46,
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "/Users/blairjdaniel/anaconda3/lib/python3.11/site-packages/altair/utils/deprecation.py:65: AltairDeprecationWarning: 'selection_multi' is deprecated.  Use 'selection_point'\n",
      "  warnings.warn(message, AltairDeprecationWarning, stacklevel=1)\n",
      "/Users/blairjdaniel/anaconda3/lib/python3.11/site-packages/altair/utils/deprecation.py:65: AltairDeprecationWarning: 'add_selection' is deprecated. Use 'add_params' instead.\n",
      "  warnings.warn(message, AltairDeprecationWarning, stacklevel=1)\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<style>\n",
       "  #altair-viz-adf25dd1c1a24fcdafdff8863a46e49e.vega-embed {\n",
       "    width: 100%;\n",
       "    display: flex;\n",
       "  }\n",
       "\n",
       "  #altair-viz-adf25dd1c1a24fcdafdff8863a46e49e.vega-embed details,\n",
       "  #altair-viz-adf25dd1c1a24fcdafdff8863a46e49e.vega-embed details summary {\n",
       "    position: relative;\n",
       "  }\n",
       "</style>\n",
       "<div id=\"altair-viz-adf25dd1c1a24fcdafdff8863a46e49e\"></div>\n",
       "<script type=\"text/javascript\">\n",
       "  var VEGA_DEBUG = (typeof VEGA_DEBUG == \"undefined\") ? {} : VEGA_DEBUG;\n",
       "  (function(spec, embedOpt){\n",
       "    let outputDiv = document.currentScript.previousElementSibling;\n",
       "    if (outputDiv.id !== \"altair-viz-adf25dd1c1a24fcdafdff8863a46e49e\") {\n",
       "      outputDiv = document.getElementById(\"altair-viz-adf25dd1c1a24fcdafdff8863a46e49e\");\n",
       "    }\n",
       "    const paths = {\n",
       "      \"vega\": \"https://cdn.jsdelivr.net/npm/vega@5?noext\",\n",
       "      \"vega-lib\": \"https://cdn.jsdelivr.net/npm/vega-lib?noext\",\n",
       "      \"vega-lite\": \"https://cdn.jsdelivr.net/npm/vega-lite@5.15.1?noext\",\n",
       "      \"vega-embed\": \"https://cdn.jsdelivr.net/npm/vega-embed@6?noext\",\n",
       "    };\n",
       "\n",
       "    function maybeLoadScript(lib, version) {\n",
       "      var key = `${lib.replace(\"-\", \"\")}_version`;\n",
       "      return (VEGA_DEBUG[key] == version) ?\n",
       "        Promise.resolve(paths[lib]) :\n",
       "        new Promise(function(resolve, reject) {\n",
       "          var s = document.createElement('script');\n",
       "          document.getElementsByTagName(\"head\")[0].appendChild(s);\n",
       "          s.async = true;\n",
       "          s.onload = () => {\n",
       "            VEGA_DEBUG[key] = version;\n",
       "            return resolve(paths[lib]);\n",
       "          };\n",
       "          s.onerror = () => reject(`Error loading script: ${paths[lib]}`);\n",
       "          s.src = paths[lib];\n",
       "        });\n",
       "    }\n",
       "\n",
       "    function showError(err) {\n",
       "      outputDiv.innerHTML = `<div class=\"error\" style=\"color:red;\">${err}</div>`;\n",
       "      throw err;\n",
       "    }\n",
       "\n",
       "    function displayChart(vegaEmbed) {\n",
       "      vegaEmbed(outputDiv, spec, embedOpt)\n",
       "        .catch(err => showError(`Javascript Error: ${err.message}<br>This usually means there's a typo in your chart specification. See the javascript console for the full traceback.`));\n",
       "    }\n",
       "\n",
       "    if(typeof define === \"function\" && define.amd) {\n",
       "      requirejs.config({paths});\n",
       "      require([\"vega-embed\"], displayChart, err => showError(`Error loading script: ${err.message}`));\n",
       "    } else {\n",
       "      maybeLoadScript(\"vega\", \"5\")\n",
       "        .then(() => maybeLoadScript(\"vega-lite\", \"5.15.1\"))\n",
       "        .then(() => maybeLoadScript(\"vega-embed\", \"6\"))\n",
       "        .catch(showError)\n",
       "        .then(() => displayChart(vegaEmbed));\n",
       "    }\n",
       "  })({\"config\": {\"view\": {\"continuousWidth\": 300, \"continuousHeight\": 300}}, \"data\": {\"url\": \"https://raw.githubusercontent.com/UBC-MDS/exploratory-data-viz/main/data/baseball_players.json\"}, \"mark\": {\"type\": \"circle\", \"size\": 20}, \"encoding\": {\"color\": {\"field\": \"region\", \"legend\": {\"title\": \"Region\"}, \"scale\": {\"scheme\": \"category10\"}, \"type\": \"nominal\"}, \"opacity\": {\"condition\": {\"param\": \"param_18\", \"value\": 0.8}, \"value\": 0}, \"tooltip\": [{\"field\": \"name_first\", \"type\": \"nominal\"}, {\"field\": \"name_last\", \"type\": \"nominal\"}, {\"field\": \"birth_country\", \"type\": \"nominal\"}], \"x\": {\"axis\": {\"title\": \"Height (inches)\"}, \"field\": \"height\", \"scale\": {\"zero\": false}, \"type\": \"quantitative\"}, \"y\": {\"axis\": {\"title\": \"Weight (lbs)\"}, \"field\": \"weight\", \"scale\": {\"zero\": false}, \"type\": \"quantitative\"}}, \"height\": 500, \"params\": [{\"name\": \"param_18\", \"select\": {\"type\": \"point\", \"fields\": [\"region\"]}, \"bind\": \"legend\"}], \"title\": \"Player Height vs Weight by Region\", \"width\": 500, \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.15.1.json\"}, {\"mode\": \"vega-lite\"});\n",
       "</script>"
      ],
      "text/plain": [
       "alt.Chart(...)"
      ]
     },
     "execution_count": 46,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "#add click\n",
    "select_region = alt.selection_multi(fields=['region'], bind='legend')\n",
    "hw_legend_plot = alt.Chart(players_url).mark_circle(size=20).encode(\n",
    "    x=alt.X('height:Q', scale=alt.Scale(zero=False), axis=alt.Axis(title='Height (inches)')),\n",
    "    y=alt.Y('weight:Q', scale=alt.Scale(zero=False), axis=alt.Axis(title='Weight (lbs)')),\n",
    "    color=alt.Color('region:N', scale=alt.Scale(scheme='category10'), legend=alt.Legend(title='Region')),\n",
    "    opacity=alt.condition(select_region, alt.value(0.8), alt.value(0)),\n",
    "    tooltip=['name_first:N', 'name_last:N', 'birth_country:N']\n",
    "    \n",
    ").add_selection(select_region\n",
    ").properties(\n",
    "    width=500,\n",
    "    height=500,\n",
    "    title='Player Height vs Weight by Region')\n",
    "\n",
    "# your code here\n",
    "#raise NotImplementedError # No Answer - remove if you provide an answer\n",
    "hw_legend_plot"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Currently, the data we have contains all the possible players in the dataset. It would be nice to find a way to filter and select players based on when they were born. This might help us identify (loosely) if perhaps players general physics over time have changed. Are players body shapes changing due to the requirements of the game (more strength, agility?)  \n",
    "\n",
    "In the lecture, we explore how we can sync up multiple plots with a selection tool. Let's make a bar plot that counts up the players by the year they were born and use it as a tool to highlight the players in the scatter plot we made earlier."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 47,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<style>\n",
       "  #altair-viz-ada9c8d69b02413b958f798ebd9b99cb.vega-embed {\n",
       "    width: 100%;\n",
       "    display: flex;\n",
       "  }\n",
       "\n",
       "  #altair-viz-ada9c8d69b02413b958f798ebd9b99cb.vega-embed details,\n",
       "  #altair-viz-ada9c8d69b02413b958f798ebd9b99cb.vega-embed details summary {\n",
       "    position: relative;\n",
       "  }\n",
       "</style>\n",
       "<div id=\"altair-viz-ada9c8d69b02413b958f798ebd9b99cb\"></div>\n",
       "<script type=\"text/javascript\">\n",
       "  var VEGA_DEBUG = (typeof VEGA_DEBUG == \"undefined\") ? {} : VEGA_DEBUG;\n",
       "  (function(spec, embedOpt){\n",
       "    let outputDiv = document.currentScript.previousElementSibling;\n",
       "    if (outputDiv.id !== \"altair-viz-ada9c8d69b02413b958f798ebd9b99cb\") {\n",
       "      outputDiv = document.getElementById(\"altair-viz-ada9c8d69b02413b958f798ebd9b99cb\");\n",
       "    }\n",
       "    const paths = {\n",
       "      \"vega\": \"https://cdn.jsdelivr.net/npm/vega@5?noext\",\n",
       "      \"vega-lib\": \"https://cdn.jsdelivr.net/npm/vega-lib?noext\",\n",
       "      \"vega-lite\": \"https://cdn.jsdelivr.net/npm/vega-lite@5.15.1?noext\",\n",
       "      \"vega-embed\": \"https://cdn.jsdelivr.net/npm/vega-embed@6?noext\",\n",
       "    };\n",
       "\n",
       "    function maybeLoadScript(lib, version) {\n",
       "      var key = `${lib.replace(\"-\", \"\")}_version`;\n",
       "      return (VEGA_DEBUG[key] == version) ?\n",
       "        Promise.resolve(paths[lib]) :\n",
       "        new Promise(function(resolve, reject) {\n",
       "          var s = document.createElement('script');\n",
       "          document.getElementsByTagName(\"head\")[0].appendChild(s);\n",
       "          s.async = true;\n",
       "          s.onload = () => {\n",
       "            VEGA_DEBUG[key] = version;\n",
       "            return resolve(paths[lib]);\n",
       "          };\n",
       "          s.onerror = () => reject(`Error loading script: ${paths[lib]}`);\n",
       "          s.src = paths[lib];\n",
       "        });\n",
       "    }\n",
       "\n",
       "    function showError(err) {\n",
       "      outputDiv.innerHTML = `<div class=\"error\" style=\"color:red;\">${err}</div>`;\n",
       "      throw err;\n",
       "    }\n",
       "\n",
       "    function displayChart(vegaEmbed) {\n",
       "      vegaEmbed(outputDiv, spec, embedOpt)\n",
       "        .catch(err => showError(`Javascript Error: ${err.message}<br>This usually means there's a typo in your chart specification. See the javascript console for the full traceback.`));\n",
       "    }\n",
       "\n",
       "    if(typeof define === \"function\" && define.amd) {\n",
       "      requirejs.config({paths});\n",
       "      require([\"vega-embed\"], displayChart, err => showError(`Error loading script: ${err.message}`));\n",
       "    } else {\n",
       "      maybeLoadScript(\"vega\", \"5\")\n",
       "        .then(() => maybeLoadScript(\"vega-lite\", \"5.15.1\"))\n",
       "        .then(() => maybeLoadScript(\"vega-embed\", \"6\"))\n",
       "        .catch(showError)\n",
       "        .then(() => displayChart(vegaEmbed));\n",
       "    }\n",
       "  })({\"config\": {\"view\": {\"continuousWidth\": 300, \"continuousHeight\": 300}}, \"data\": {\"url\": \"https://raw.githubusercontent.com/UBC-MDS/exploratory-data-viz/main/data/baseball_players.json\"}, \"mark\": {\"type\": \"bar\", \"color\": \"pink\"}, \"encoding\": {\"x\": {\"field\": \"birth_year\", \"title\": \"Birth Year\", \"type\": \"temporal\"}, \"y\": {\"aggregate\": \"count\", \"title\": \"Count of Records\", \"type\": \"quantitative\"}}, \"height\": 500, \"width\": 500, \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.15.1.json\"}, {\"mode\": \"vega-lite\"});\n",
       "</script>"
      ],
      "text/plain": [
       "alt.Chart(...)"
      ]
     },
     "execution_count": 47,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "dob_plot = alt.Chart(players_url).mark_bar(color='pink').encode(\n",
    "    x=alt.X('birth_year:T', title='Birth Year'),\n",
    "    y=alt.Y('count()', title='Count of Records'),\n",
    "    #color=alt.Color('count()', scale=alt.Scale(scheme='category20'), legend=None)\n",
    ").properties(\n",
    "    width=500,\n",
    "    height=500\n",
    ")\n",
    "\n",
    "# your code here\n",
    "#raise NotImplementedError # No Answer - remove if you provide an answer\n",
    "\n",
    "dob_plot"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 48,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<style>\n",
       "  #altair-viz-1cbcb58337824c41bd6ffad13b49da3f.vega-embed {\n",
       "    width: 100%;\n",
       "    display: flex;\n",
       "  }\n",
       "\n",
       "  #altair-viz-1cbcb58337824c41bd6ffad13b49da3f.vega-embed details,\n",
       "  #altair-viz-1cbcb58337824c41bd6ffad13b49da3f.vega-embed details summary {\n",
       "    position: relative;\n",
       "  }\n",
       "</style>\n",
       "<div id=\"altair-viz-1cbcb58337824c41bd6ffad13b49da3f\"></div>\n",
       "<script type=\"text/javascript\">\n",
       "  var VEGA_DEBUG = (typeof VEGA_DEBUG == \"undefined\") ? {} : VEGA_DEBUG;\n",
       "  (function(spec, embedOpt){\n",
       "    let outputDiv = document.currentScript.previousElementSibling;\n",
       "    if (outputDiv.id !== \"altair-viz-1cbcb58337824c41bd6ffad13b49da3f\") {\n",
       "      outputDiv = document.getElementById(\"altair-viz-1cbcb58337824c41bd6ffad13b49da3f\");\n",
       "    }\n",
       "    const paths = {\n",
       "      \"vega\": \"https://cdn.jsdelivr.net/npm/vega@5?noext\",\n",
       "      \"vega-lib\": \"https://cdn.jsdelivr.net/npm/vega-lib?noext\",\n",
       "      \"vega-lite\": \"https://cdn.jsdelivr.net/npm/vega-lite@5.15.1?noext\",\n",
       "      \"vega-embed\": \"https://cdn.jsdelivr.net/npm/vega-embed@6?noext\",\n",
       "    };\n",
       "\n",
       "    function maybeLoadScript(lib, version) {\n",
       "      var key = `${lib.replace(\"-\", \"\")}_version`;\n",
       "      return (VEGA_DEBUG[key] == version) ?\n",
       "        Promise.resolve(paths[lib]) :\n",
       "        new Promise(function(resolve, reject) {\n",
       "          var s = document.createElement('script');\n",
       "          document.getElementsByTagName(\"head\")[0].appendChild(s);\n",
       "          s.async = true;\n",
       "          s.onload = () => {\n",
       "            VEGA_DEBUG[key] = version;\n",
       "            return resolve(paths[lib]);\n",
       "          };\n",
       "          s.onerror = () => reject(`Error loading script: ${paths[lib]}`);\n",
       "          s.src = paths[lib];\n",
       "        });\n",
       "    }\n",
       "\n",
       "    function showError(err) {\n",
       "      outputDiv.innerHTML = `<div class=\"error\" style=\"color:red;\">${err}</div>`;\n",
       "      throw err;\n",
       "    }\n",
       "\n",
       "    function displayChart(vegaEmbed) {\n",
       "      vegaEmbed(outputDiv, spec, embedOpt)\n",
       "        .catch(err => showError(`Javascript Error: ${err.message}<br>This usually means there's a typo in your chart specification. See the javascript console for the full traceback.`));\n",
       "    }\n",
       "\n",
       "    if(typeof define === \"function\" && define.amd) {\n",
       "      requirejs.config({paths});\n",
       "      require([\"vega-embed\"], displayChart, err => showError(`Error loading script: ${err.message}`));\n",
       "    } else {\n",
       "      maybeLoadScript(\"vega\", \"5\")\n",
       "        .then(() => maybeLoadScript(\"vega-lite\", \"5.15.1\"))\n",
       "        .then(() => maybeLoadScript(\"vega-embed\", \"6\"))\n",
       "        .catch(showError)\n",
       "        .then(() => displayChart(vegaEmbed));\n",
       "    }\n",
       "  })({\"config\": {\"view\": {\"continuousWidth\": 300, \"continuousHeight\": 300}}, \"vconcat\": [{\"mark\": {\"type\": \"bar\", \"color\": \"pink\"}, \"encoding\": {\"color\": {\"condition\": {\"param\": \"param_19\", \"value\": \"navy\"}, \"value\": \"lightgray\"}, \"opacity\": {\"condition\": {\"param\": \"param_19\", \"value\": 0.8}, \"value\": 0.01}, \"x\": {\"axis\": {\"title\": \"Birth Year\"}, \"field\": \"birth_year\", \"type\": \"temporal\"}, \"y\": {\"aggregate\": \"count\", \"axis\": {\"title\": \"Count\"}, \"type\": \"quantitative\"}}, \"height\": 100, \"name\": \"view_11\", \"width\": 600}, {\"mark\": {\"type\": \"circle\", \"size\": 20}, \"encoding\": {\"color\": {\"condition\": {\"param\": \"param_19\", \"field\": \"region\", \"type\": \"nominal\"}, \"value\": \"lightgray\"}, \"opacity\": {\"condition\": {\"param\": \"param_19\", \"value\": 0.8}, \"value\": 0.01}, \"tooltip\": [{\"field\": \"name_first\", \"type\": \"nominal\"}, {\"field\": \"name_last\", \"type\": \"nominal\"}, {\"field\": \"birth_country\", \"type\": \"nominal\"}], \"x\": {\"axis\": {\"title\": \"Height (inches)\"}, \"field\": \"height\", \"scale\": {\"zero\": false}, \"type\": \"quantitative\"}, \"y\": {\"axis\": {\"title\": \"Weight (lbs)\"}, \"field\": \"weight\", \"scale\": {\"zero\": false}, \"type\": \"quantitative\"}}, \"name\": \"view_12\", \"width\": 600}], \"data\": {\"url\": \"https://raw.githubusercontent.com/UBC-MDS/exploratory-data-viz/main/data/baseball_players.json\"}, \"params\": [{\"name\": \"param_19\", \"select\": {\"type\": \"interval\", \"encodings\": [\"x\"]}, \"views\": [\"view_11\", \"view_12\"]}], \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.15.1.json\"}, {\"mode\": \"vega-lite\"});\n",
       "</script>"
      ],
      "text/plain": [
       "alt.VConcatChart(...)"
      ]
     },
     "execution_count": 48,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "interval = alt.selection_interval(encodings=['x'])\n",
    "select_region = alt.selection_multi(fields=['region'], bind='legend')\n",
    "bar_slider = alt.Chart(players_url).mark_bar(color='pink').encode(\n",
    "    x=alt.X('birth_year:T', axis=alt.Axis(title='Birth Year')),\n",
    "    y=alt.Y('count()', axis=alt.Axis(title='Count')),\n",
    "    color=alt.condition(interval, alt.value('navy'), alt.value('lightgray'), type='nominal'),\n",
    "    opacity=alt.condition(interval, alt.value(0.8), alt.value(0.01)\n",
    ")).add_selection(interval\n",
    ").properties(\n",
    "    width=600,\n",
    "    height=100\n",
    ")\n",
    "bar_slider\n",
    "\n",
    "\n",
    "scatter_plot = alt.Chart(players_url).mark_circle(size=20).encode(\n",
    "    x=alt.X('height:Q', scale=alt.Scale(zero=False), axis=alt.Axis(title='Height (inches)')),\n",
    "    y=alt.Y('weight:Q', scale=alt.Scale(zero=False), axis=alt.Axis(title='Weight (lbs)')),\n",
    "    color=alt.condition(interval, 'region:N', alt.value('lightgray'), type='nominal'),\n",
    "    opacity=alt.condition(interval, alt.value(0.8), alt.value(0.01)),\n",
    "    tooltip=['name_first:N', 'name_last:N', 'birth_country:N']\n",
    ").add_selection(interval\n",
    ").properties(\n",
    "    width=600\n",
    ")\n",
    "scatter_plot\n",
    "\n",
    "dob_combo_plot = bar_slider & scatter_plot\n",
    "\n",
    "\n",
    "dob_combo_plot"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Baseball players originate from all around the world and we've seen this in the previous plots where we have been colouring by the continent but it would be interesting to go more granular? The majority of players are from the USA and it would be interesting to see if certain states are more prone to the sport over others. Do we expect more players to come from Texas or New York? What about colder States such as Alaska or Maine?\n",
    "\n",
    "We will also look at a new dataset and explore if better pitcher come from certain states in the US. \n",
    "\n",
    "Let's use the map as a tool to select points in our scatter plot we made earlier. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 49,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "UrlData({\n",
       "  format: TopoDataFormat({\n",
       "    feature: 'states',\n",
       "    type: 'topojson'\n",
       "  }),\n",
       "  url: 'https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/us-10m.json'\n",
       "})"
      ]
     },
     "execution_count": 49,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "us_map = alt.topo_feature(data.us_10m.url, 'states')\n",
    "\n",
    "# your code here\n",
    "#raise NotImplementedError # No Answer - remove if you provide an answer\n",
    "\n",
    "us_map"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 50,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<style>\n",
       "  #altair-viz-bb0de59426d841abaf21db712d008e7f.vega-embed {\n",
       "    width: 100%;\n",
       "    display: flex;\n",
       "  }\n",
       "\n",
       "  #altair-viz-bb0de59426d841abaf21db712d008e7f.vega-embed details,\n",
       "  #altair-viz-bb0de59426d841abaf21db712d008e7f.vega-embed details summary {\n",
       "    position: relative;\n",
       "  }\n",
       "</style>\n",
       "<div id=\"altair-viz-bb0de59426d841abaf21db712d008e7f\"></div>\n",
       "<script type=\"text/javascript\">\n",
       "  var VEGA_DEBUG = (typeof VEGA_DEBUG == \"undefined\") ? {} : VEGA_DEBUG;\n",
       "  (function(spec, embedOpt){\n",
       "    let outputDiv = document.currentScript.previousElementSibling;\n",
       "    if (outputDiv.id !== \"altair-viz-bb0de59426d841abaf21db712d008e7f\") {\n",
       "      outputDiv = document.getElementById(\"altair-viz-bb0de59426d841abaf21db712d008e7f\");\n",
       "    }\n",
       "    const paths = {\n",
       "      \"vega\": \"https://cdn.jsdelivr.net/npm/vega@5?noext\",\n",
       "      \"vega-lib\": \"https://cdn.jsdelivr.net/npm/vega-lib?noext\",\n",
       "      \"vega-lite\": \"https://cdn.jsdelivr.net/npm/vega-lite@5.15.1?noext\",\n",
       "      \"vega-embed\": \"https://cdn.jsdelivr.net/npm/vega-embed@6?noext\",\n",
       "    };\n",
       "\n",
       "    function maybeLoadScript(lib, version) {\n",
       "      var key = `${lib.replace(\"-\", \"\")}_version`;\n",
       "      return (VEGA_DEBUG[key] == version) ?\n",
       "        Promise.resolve(paths[lib]) :\n",
       "        new Promise(function(resolve, reject) {\n",
       "          var s = document.createElement('script');\n",
       "          document.getElementsByTagName(\"head\")[0].appendChild(s);\n",
       "          s.async = true;\n",
       "          s.onload = () => {\n",
       "            VEGA_DEBUG[key] = version;\n",
       "            return resolve(paths[lib]);\n",
       "          };\n",
       "          s.onerror = () => reject(`Error loading script: ${paths[lib]}`);\n",
       "          s.src = paths[lib];\n",
       "        });\n",
       "    }\n",
       "\n",
       "    function showError(err) {\n",
       "      outputDiv.innerHTML = `<div class=\"error\" style=\"color:red;\">${err}</div>`;\n",
       "      throw err;\n",
       "    }\n",
       "\n",
       "    function displayChart(vegaEmbed) {\n",
       "      vegaEmbed(outputDiv, spec, embedOpt)\n",
       "        .catch(err => showError(`Javascript Error: ${err.message}<br>This usually means there's a typo in your chart specification. See the javascript console for the full traceback.`));\n",
       "    }\n",
       "\n",
       "    if(typeof define === \"function\" && define.amd) {\n",
       "      requirejs.config({paths});\n",
       "      require([\"vega-embed\"], displayChart, err => showError(`Error loading script: ${err.message}`));\n",
       "    } else {\n",
       "      maybeLoadScript(\"vega\", \"5\")\n",
       "        .then(() => maybeLoadScript(\"vega-lite\", \"5.15.1\"))\n",
       "        .then(() => maybeLoadScript(\"vega-embed\", \"6\"))\n",
       "        .catch(showError)\n",
       "        .then(() => displayChart(vegaEmbed));\n",
       "    }\n",
       "  })({\"config\": {\"view\": {\"continuousWidth\": 300, \"continuousHeight\": 300}}, \"layer\": [{\"mark\": {\"type\": \"geoshape\", \"color\": \"white\", \"stroke\": \"grey\"}}, {\"mark\": {\"type\": \"geoshape\", \"stroke\": \"black\", \"strokeWidth\": 0.15}, \"encoding\": {\"color\": {\"field\": \"player_num\", \"scale\": {\"scheme\": \"paired\"}, \"title\": \"Player State (Us only)\", \"type\": \"quantitative\"}, \"tooltip\": [{\"field\": \"birth_state\", \"title\": \"State\", \"type\": \"nominal\"}, {\"field\": \"player_num\", \"title\": \"Number of players\", \"type\": \"quantitative\"}]}, \"transform\": [{\"lookup\": \"id\", \"from\": {\"data\": {\"url\": \"https://raw.githubusercontent.com/UBC-MDS/exploratory-data-viz/main/data/states_df.json\"}, \"key\": \"id\", \"fields\": [\"birth_state\", \"player_num\"]}}]}], \"data\": {\"url\": \"https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/us-10m.json\", \"format\": {\"feature\": \"states\", \"type\": \"topojson\"}}, \"height\": 250, \"projection\": {\"type\": \"albersUsa\"}, \"width\": 500, \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.15.1.json\"}, {\"mode\": \"vega-lite\"});\n",
       "</script>"
      ],
      "text/plain": [
       "alt.LayerChart(...)"
      ]
     },
     "execution_count": 50,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "state_url = 'https://raw.githubusercontent.com/UBC-MDS/exploratory-data-viz/main/data/states_df.json'\n",
    "background = alt.Chart(us_map).mark_geoshape(stroke='grey', color='white')\n",
    "states_plot = (\n",
    "    alt.Chart(us_map).mark_geoshape(stroke=\"black\", strokeWidth=0.15).encode(\n",
    "    color=alt.Color(\n",
    "        \"player_num:Q\", scale=alt.Scale(scheme='paired'), title = \"Player State (Us only)\"\n",
    "    ),tooltip=[\n",
    "        alt.Tooltip(\"birth_state:N\", title=\"State\"),\n",
    "        alt.Tooltip(\"player_num:Q\", title=\"Number of players\")\n",
    "    ]).transform_lookup(\n",
    "    lookup='id',\n",
    "    from_=alt.LookupData(state_url, 'id', [\"birth_state\", \"player_num\"])\n",
    "    ))\n",
    "players_map = (background + states_plot\n",
    "    ).properties(width=500, height=250\n",
    "    ).project(\"albersUsa\")\n",
    "\n",
    "# your code here\n",
    "#raise NotImplementedError # No Answer - remove if you provide an answer\n",
    "\n",
    "players_map"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Ok, so we have a map, what else can we do with it?\n",
    "\n",
    "What if we wanted to see compare pitching statistics and see if some states produces better pitchers?\n",
    "\n",
    "To do this we will be looking at the earned run average (ERA) of each pitcher and plot it vs the strikeout rate (Strikeouts/batter faced).\n",
    "\n",
    "In baseball ERA is a well known and accepted statistic to help measure the performance of a pitcher. source. Teams and leagues want are pitchers where the opposing team is earning less runs and so a pitcher's with a lower ERA is a more successful player.\n",
    "\n",
    "Pitchers also want to strikeout as many players as they can in a game to avoid the opposing team from earning runs. A strikeout is when a batter gets three strikes at bat, with a strike being defined as:\n",
    "\n",
    "a batter swinging at a pitch and misses,\n",
    "a batter not swinging at a pitched ball that passes through the strike zone\n",
    "a ball is hit foul.\n",
    "(you can read more about strikes here).\n",
    "\n",
    "We are using the statistic here of strikeouts per batter faced, meaning the number of players a pitcher strikeouts divided by all the batters they encounted.\n",
    "\n",
    "Pitchers want a higher strikeout/batter faced and a lower ERA.\n",
    "\n",
    "Baseball has a different level of popularity across the states in the US and so it would be interesting if there was a relationship between successful pitchers and the state they were born. Let's explore it."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 51,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<style>\n",
       "  #altair-viz-595b9a0e75454208ae830d96670f27de.vega-embed {\n",
       "    width: 100%;\n",
       "    display: flex;\n",
       "  }\n",
       "\n",
       "  #altair-viz-595b9a0e75454208ae830d96670f27de.vega-embed details,\n",
       "  #altair-viz-595b9a0e75454208ae830d96670f27de.vega-embed details summary {\n",
       "    position: relative;\n",
       "  }\n",
       "</style>\n",
       "<div id=\"altair-viz-595b9a0e75454208ae830d96670f27de\"></div>\n",
       "<script type=\"text/javascript\">\n",
       "  var VEGA_DEBUG = (typeof VEGA_DEBUG == \"undefined\") ? {} : VEGA_DEBUG;\n",
       "  (function(spec, embedOpt){\n",
       "    let outputDiv = document.currentScript.previousElementSibling;\n",
       "    if (outputDiv.id !== \"altair-viz-595b9a0e75454208ae830d96670f27de\") {\n",
       "      outputDiv = document.getElementById(\"altair-viz-595b9a0e75454208ae830d96670f27de\");\n",
       "    }\n",
       "    const paths = {\n",
       "      \"vega\": \"https://cdn.jsdelivr.net/npm/vega@5?noext\",\n",
       "      \"vega-lib\": \"https://cdn.jsdelivr.net/npm/vega-lib?noext\",\n",
       "      \"vega-lite\": \"https://cdn.jsdelivr.net/npm/vega-lite@5.15.1?noext\",\n",
       "      \"vega-embed\": \"https://cdn.jsdelivr.net/npm/vega-embed@6?noext\",\n",
       "    };\n",
       "\n",
       "    function maybeLoadScript(lib, version) {\n",
       "      var key = `${lib.replace(\"-\", \"\")}_version`;\n",
       "      return (VEGA_DEBUG[key] == version) ?\n",
       "        Promise.resolve(paths[lib]) :\n",
       "        new Promise(function(resolve, reject) {\n",
       "          var s = document.createElement('script');\n",
       "          document.getElementsByTagName(\"head\")[0].appendChild(s);\n",
       "          s.async = true;\n",
       "          s.onload = () => {\n",
       "            VEGA_DEBUG[key] = version;\n",
       "            return resolve(paths[lib]);\n",
       "          };\n",
       "          s.onerror = () => reject(`Error loading script: ${paths[lib]}`);\n",
       "          s.src = paths[lib];\n",
       "        });\n",
       "    }\n",
       "\n",
       "    function showError(err) {\n",
       "      outputDiv.innerHTML = `<div class=\"error\" style=\"color:red;\">${err}</div>`;\n",
       "      throw err;\n",
       "    }\n",
       "\n",
       "    function displayChart(vegaEmbed) {\n",
       "      vegaEmbed(outputDiv, spec, embedOpt)\n",
       "        .catch(err => showError(`Javascript Error: ${err.message}<br>This usually means there's a typo in your chart specification. See the javascript console for the full traceback.`));\n",
       "    }\n",
       "\n",
       "    if(typeof define === \"function\" && define.amd) {\n",
       "      requirejs.config({paths});\n",
       "      require([\"vega-embed\"], displayChart, err => showError(`Error loading script: ${err.message}`));\n",
       "    } else {\n",
       "      maybeLoadScript(\"vega\", \"5\")\n",
       "        .then(() => maybeLoadScript(\"vega-lite\", \"5.15.1\"))\n",
       "        .then(() => maybeLoadScript(\"vega-embed\", \"6\"))\n",
       "        .catch(showError)\n",
       "        .then(() => displayChart(vegaEmbed));\n",
       "    }\n",
       "  })({\"config\": {\"view\": {\"continuousWidth\": 300, \"continuousHeight\": 300}}, \"vconcat\": [{\"data\": {\"url\": \"https://raw.githubusercontent.com/UBC-MDS/exploratory-data-viz/main/data/baseball_pitchers.json\"}, \"mark\": {\"type\": \"circle\", \"size\": 20}, \"encoding\": {\"tooltip\": [{\"field\": \"name_first\", \"type\": \"nominal\"}, {\"field\": \"name_last\", \"type\": \"nominal\"}], \"x\": {\"field\": \"ERA\", \"scale\": {\"domain\": [0, 55]}, \"title\": \"ERA (earned run average)\", \"type\": \"quantitative\"}, \"y\": {\"field\": \"SO_per_BF\", \"scale\": {\"domain\": [0, 0.5]}, \"title\": \"Strikeouts per batter faced\", \"type\": \"quantitative\"}}, \"title\": \" There is a negative relationship between ERA and Strikout rates of pitchers\", \"transform\": [{\"filter\": {\"param\": \"param_21\"}}], \"width\": 500}, {\"layer\": [{\"mark\": {\"type\": \"geoshape\", \"color\": \"white\", \"stroke\": \"grey\"}, \"name\": \"view_13\"}, {\"mark\": {\"type\": \"geoshape\", \"stroke\": \"black\", \"strokeWidth\": 0.15}, \"encoding\": {\"color\": {\"field\": \"player_num\", \"scale\": {\"scheme\": \"paired\"}, \"title\": \"Player State (Us only)\", \"type\": \"quantitative\"}, \"tooltip\": [{\"field\": \"birth_state\", \"title\": \"State\", \"type\": \"nominal\"}, {\"field\": \"player_num\", \"title\": \"Number of players\", \"type\": \"quantitative\"}]}, \"transform\": [{\"lookup\": \"id\", \"from\": {\"data\": {\"url\": \"https://raw.githubusercontent.com/UBC-MDS/exploratory-data-viz/main/data/states_df.json\"}, \"key\": \"id\", \"fields\": [\"birth_state\", \"player_num\"]}}]}], \"data\": {\"url\": \"https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/us-10m.json\", \"format\": {\"feature\": \"states\", \"type\": \"topojson\"}}, \"encoding\": {\"opacity\": {\"condition\": {\"param\": \"param_21\", \"value\": 0.8}, \"value\": 0.2}, \"tooltip\": [{\"field\": \"birth_state\", \"title\": \"State Player was Born\", \"type\": \"nominal\"}, {\"field\": \"player_num\", \"title\": \"Number of players\", \"type\": \"quantitative\"}]}, \"height\": 250, \"projection\": {\"type\": \"albersUsa\"}, \"transform\": [{\"lookup\": \"id\", \"from\": {\"data\": {\"url\": \"https://raw.githubusercontent.com/UBC-MDS/exploratory-data-viz/main/data/states_df.json\"}, \"key\": \"id\", \"fields\": [\"birth_state\", \"player_num\"]}}], \"width\": 500}], \"params\": [{\"name\": \"param_21\", \"select\": {\"type\": \"point\", \"fields\": [\"id\"]}, \"views\": [\"view_13\"]}], \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.15.1.json\"}, {\"mode\": \"vega-lite\"});\n",
       "</script>"
      ],
      "text/plain": [
       "alt.VConcatChart(...)"
      ]
     },
     "execution_count": 51,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "pitcher_url = 'https://raw.githubusercontent.com/UBC-MDS/exploratory-data-viz/main/data/baseball_pitchers.json'\n",
    "state_select = alt.selection_multi(fields=['id'])\n",
    "\n",
    "states_select_map = players_map.encode(\n",
    "    \n",
    "    opacity=alt.condition(state_select, alt.value(0.8), alt.value(0.2)),\n",
    "    tooltip=[\n",
    "        alt.Tooltip(\"birth_state:N\", title=\"State Player was Born\"),\n",
    "        alt.Tooltip(\"player_num:Q\", title=\"Number of players\"),\n",
    "    ]).transform_lookup(\n",
    "    lookup=\"id\",\n",
    "    from_=alt.LookupData(state_url, \"id\", [\"birth_state\", \"player_num\"])\n",
    ").add_selection(state_select)\n",
    "\n",
    "pitching_scatter = alt.Chart(pitcher_url).mark_circle(size=20).encode(\n",
    "    alt.X(\"ERA:Q\", \n",
    "          title=\"ERA (earned run average)\",\n",
    "          scale=alt.Scale(domain=[0, 55])\n",
    "         ),\n",
    "    alt.Y(\"SO_per_BF:Q\", \n",
    "          title=\"Strikeouts per batter faced\", \n",
    "          scale=alt.Scale(domain=[0, 0.5])\n",
    "         ),\n",
    "    tooltip=[\"name_first:N\", \"name_last:N\"]\n",
    ").properties(width=500,\n",
    "             title=\" There is a negative relationship between ERA and Strikout rates of pitchers\"\n",
    "            ).transform_filter(state_select)\n",
    "\n",
    "map_panel =  pitching_scatter & states_select_map\n",
    "\n",
    "map_panel\n",
    "\n",
    "# your code here"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Using the plot above, where was the pitcher with the highest strikeout rate and lowest ERA born?\n",
    "\n",
    "A) California (CA)\n",
    "\n",
    "B) Texas (TX)\n",
    "\n",
    "C) Illinois (IL)\n",
    "\n",
    "D) New York (NY)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The answer is Illinois"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "One of the columns in the data shows the way the player bats. We also know that around 10% of the population is left-handed. It would be interesting to see if the same statistics apply to the baseball players in the data. It might also be interesting to see if the state they are from affects the ratio of left-handed to right-handed batter. Let's make a bar plot, that counts the total of each type of batter Left, Right or Both (L, R, B). It's important to note here that there is a lot of missing values for this column so we should plot the count of those as well. We've already adjusted this in the data so that instead of blank data, we've replace it with \"No record\". This allows it to be selected as an option.\n",
    "\n",
    "Also generally speaking a right-handed player will usually bat right and a left-handed player will generally bat left source. That being said there are plenty of players that do not follow this."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 52,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<style>\n",
       "  #altair-viz-220fe5559b774a2e90a7da99da158794.vega-embed {\n",
       "    width: 100%;\n",
       "    display: flex;\n",
       "  }\n",
       "\n",
       "  #altair-viz-220fe5559b774a2e90a7da99da158794.vega-embed details,\n",
       "  #altair-viz-220fe5559b774a2e90a7da99da158794.vega-embed details summary {\n",
       "    position: relative;\n",
       "  }\n",
       "</style>\n",
       "<div id=\"altair-viz-220fe5559b774a2e90a7da99da158794\"></div>\n",
       "<script type=\"text/javascript\">\n",
       "  var VEGA_DEBUG = (typeof VEGA_DEBUG == \"undefined\") ? {} : VEGA_DEBUG;\n",
       "  (function(spec, embedOpt){\n",
       "    let outputDiv = document.currentScript.previousElementSibling;\n",
       "    if (outputDiv.id !== \"altair-viz-220fe5559b774a2e90a7da99da158794\") {\n",
       "      outputDiv = document.getElementById(\"altair-viz-220fe5559b774a2e90a7da99da158794\");\n",
       "    }\n",
       "    const paths = {\n",
       "      \"vega\": \"https://cdn.jsdelivr.net/npm/vega@5?noext\",\n",
       "      \"vega-lib\": \"https://cdn.jsdelivr.net/npm/vega-lib?noext\",\n",
       "      \"vega-lite\": \"https://cdn.jsdelivr.net/npm/vega-lite@5.15.1?noext\",\n",
       "      \"vega-embed\": \"https://cdn.jsdelivr.net/npm/vega-embed@6?noext\",\n",
       "    };\n",
       "\n",
       "    function maybeLoadScript(lib, version) {\n",
       "      var key = `${lib.replace(\"-\", \"\")}_version`;\n",
       "      return (VEGA_DEBUG[key] == version) ?\n",
       "        Promise.resolve(paths[lib]) :\n",
       "        new Promise(function(resolve, reject) {\n",
       "          var s = document.createElement('script');\n",
       "          document.getElementsByTagName(\"head\")[0].appendChild(s);\n",
       "          s.async = true;\n",
       "          s.onload = () => {\n",
       "            VEGA_DEBUG[key] = version;\n",
       "            return resolve(paths[lib]);\n",
       "          };\n",
       "          s.onerror = () => reject(`Error loading script: ${paths[lib]}`);\n",
       "          s.src = paths[lib];\n",
       "        });\n",
       "    }\n",
       "\n",
       "    function showError(err) {\n",
       "      outputDiv.innerHTML = `<div class=\"error\" style=\"color:red;\">${err}</div>`;\n",
       "      throw err;\n",
       "    }\n",
       "\n",
       "    function displayChart(vegaEmbed) {\n",
       "      vegaEmbed(outputDiv, spec, embedOpt)\n",
       "        .catch(err => showError(`Javascript Error: ${err.message}<br>This usually means there's a typo in your chart specification. See the javascript console for the full traceback.`));\n",
       "    }\n",
       "\n",
       "    if(typeof define === \"function\" && define.amd) {\n",
       "      requirejs.config({paths});\n",
       "      require([\"vega-embed\"], displayChart, err => showError(`Error loading script: ${err.message}`));\n",
       "    } else {\n",
       "      maybeLoadScript(\"vega\", \"5\")\n",
       "        .then(() => maybeLoadScript(\"vega-lite\", \"5.15.1\"))\n",
       "        .then(() => maybeLoadScript(\"vega-embed\", \"6\"))\n",
       "        .catch(showError)\n",
       "        .then(() => displayChart(vegaEmbed));\n",
       "    }\n",
       "  })({\"config\": {\"view\": {\"continuousWidth\": 300, \"continuousHeight\": 300}}, \"data\": {\"url\": \"https://raw.githubusercontent.com/UBC-MDS/exploratory-data-viz/main/data/baseball_players.json\"}, \"mark\": {\"type\": \"bar\"}, \"encoding\": {\"color\": {\"value\": \"pink\"}, \"x\": {\"aggregate\": \"count\", \"title\": \"Count of Batters\", \"type\": \"quantitative\"}, \"y\": {\"field\": \"bats\", \"scale\": {\"domain\": [\"L\", \"R\", \"B\", \"No record\"]}, \"sort\": [\"L\", \"R\", \"B\", \"No record\"], \"title\": \"Batter Side\", \"type\": \"nominal\"}}, \"height\": 150, \"width\": 400, \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.15.1.json\"}, {\"mode\": \"vega-lite\"});\n",
       "</script>"
      ],
      "text/plain": [
       "alt.Chart(...)"
      ]
     },
     "execution_count": 52,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "order_of_batters = ['L', 'R', 'B', 'No record']\n",
    "bats_plot = alt.Chart(players_url).mark_bar().encode(\n",
    "    x = alt.X('count():Q', title='Count of Batters'),\n",
    "    y = alt.Y('bats:N', title='Batter Side', sort=order_of_batters, scale=alt.Scale(domain = [\"L\", \"R\", \"B\", \"No record\"])),\n",
    "    color = alt.value('pink')\n",
    ").properties(\n",
    "    width = 400, height = 150\n",
    ")\n",
    "\n",
    "# your code here\n",
    "#raise NotImplementedError # No Answer - remove if you provide an answer\n",
    "\n",
    "bats_plot"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Which of the following statements is correct?\n",
    "\n",
    "A) Similar to regular life, left-batting (left-handed) players are approximately 10% of the players in the data.\n",
    "\n",
    "B) Unlike in regular life, the reverse happens. Instead, right-batting (right-handed) players are approximately 10% of the players in the data.\n",
    "\n",
    "C) In the data, left-batting players are around a quarter of the players.\n",
    "\n",
    "D) In the data, right-batting players are around a quarter of the players.\n",
    "\n",
    "The answer is C"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 53,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<style>\n",
       "  #altair-viz-947bac59f7304429a73e137a0c1c79d9.vega-embed {\n",
       "    width: 100%;\n",
       "    display: flex;\n",
       "  }\n",
       "\n",
       "  #altair-viz-947bac59f7304429a73e137a0c1c79d9.vega-embed details,\n",
       "  #altair-viz-947bac59f7304429a73e137a0c1c79d9.vega-embed details summary {\n",
       "    position: relative;\n",
       "  }\n",
       "</style>\n",
       "<div id=\"altair-viz-947bac59f7304429a73e137a0c1c79d9\"></div>\n",
       "<script type=\"text/javascript\">\n",
       "  var VEGA_DEBUG = (typeof VEGA_DEBUG == \"undefined\") ? {} : VEGA_DEBUG;\n",
       "  (function(spec, embedOpt){\n",
       "    let outputDiv = document.currentScript.previousElementSibling;\n",
       "    if (outputDiv.id !== \"altair-viz-947bac59f7304429a73e137a0c1c79d9\") {\n",
       "      outputDiv = document.getElementById(\"altair-viz-947bac59f7304429a73e137a0c1c79d9\");\n",
       "    }\n",
       "    const paths = {\n",
       "      \"vega\": \"https://cdn.jsdelivr.net/npm/vega@5?noext\",\n",
       "      \"vega-lib\": \"https://cdn.jsdelivr.net/npm/vega-lib?noext\",\n",
       "      \"vega-lite\": \"https://cdn.jsdelivr.net/npm/vega-lite@5.15.1?noext\",\n",
       "      \"vega-embed\": \"https://cdn.jsdelivr.net/npm/vega-embed@6?noext\",\n",
       "    };\n",
       "\n",
       "    function maybeLoadScript(lib, version) {\n",
       "      var key = `${lib.replace(\"-\", \"\")}_version`;\n",
       "      return (VEGA_DEBUG[key] == version) ?\n",
       "        Promise.resolve(paths[lib]) :\n",
       "        new Promise(function(resolve, reject) {\n",
       "          var s = document.createElement('script');\n",
       "          document.getElementsByTagName(\"head\")[0].appendChild(s);\n",
       "          s.async = true;\n",
       "          s.onload = () => {\n",
       "            VEGA_DEBUG[key] = version;\n",
       "            return resolve(paths[lib]);\n",
       "          };\n",
       "          s.onerror = () => reject(`Error loading script: ${paths[lib]}`);\n",
       "          s.src = paths[lib];\n",
       "        });\n",
       "    }\n",
       "\n",
       "    function showError(err) {\n",
       "      outputDiv.innerHTML = `<div class=\"error\" style=\"color:red;\">${err}</div>`;\n",
       "      throw err;\n",
       "    }\n",
       "\n",
       "    function displayChart(vegaEmbed) {\n",
       "      vegaEmbed(outputDiv, spec, embedOpt)\n",
       "        .catch(err => showError(`Javascript Error: ${err.message}<br>This usually means there's a typo in your chart specification. See the javascript console for the full traceback.`));\n",
       "    }\n",
       "\n",
       "    if(typeof define === \"function\" && define.amd) {\n",
       "      requirejs.config({paths});\n",
       "      require([\"vega-embed\"], displayChart, err => showError(`Error loading script: ${err.message}`));\n",
       "    } else {\n",
       "      maybeLoadScript(\"vega\", \"5\")\n",
       "        .then(() => maybeLoadScript(\"vega-lite\", \"5.15.1\"))\n",
       "        .then(() => maybeLoadScript(\"vega-embed\", \"6\"))\n",
       "        .catch(showError)\n",
       "        .then(() => displayChart(vegaEmbed));\n",
       "    }\n",
       "  })({\"config\": {\"view\": {\"continuousWidth\": 300, \"continuousHeight\": 300}}, \"vconcat\": [{\"layer\": [{\"mark\": {\"type\": \"geoshape\", \"color\": \"white\", \"stroke\": \"grey\"}, \"name\": \"view_14\"}, {\"mark\": {\"type\": \"geoshape\", \"stroke\": \"black\", \"strokeWidth\": 0.15}, \"encoding\": {\"color\": {\"field\": \"player_num\", \"scale\": {\"scheme\": \"paired\"}, \"title\": \"Player State (Us only)\", \"type\": \"quantitative\"}, \"tooltip\": [{\"field\": \"birth_state\", \"title\": \"State\", \"type\": \"nominal\"}, {\"field\": \"player_num\", \"title\": \"Number of players\", \"type\": \"quantitative\"}]}, \"transform\": [{\"lookup\": \"id\", \"from\": {\"data\": {\"url\": \"https://raw.githubusercontent.com/UBC-MDS/exploratory-data-viz/main/data/states_df.json\"}, \"key\": \"id\", \"fields\": [\"birth_state\", \"player_num\"]}}]}], \"data\": {\"url\": \"https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/us-10m.json\", \"format\": {\"feature\": \"states\", \"type\": \"topojson\"}}, \"encoding\": {\"opacity\": {\"condition\": {\"param\": \"param_22\", \"value\": 0.8}, \"value\": 0.2}, \"tooltip\": [{\"field\": \"birth_state\", \"title\": \"State Player was Born\", \"type\": \"nominal\"}, {\"field\": \"player_num\", \"title\": \"Number of players\", \"type\": \"quantitative\"}]}, \"height\": 250, \"projection\": {\"type\": \"albersUsa\"}, \"transform\": [{\"lookup\": \"id\", \"from\": {\"data\": {\"url\": \"https://raw.githubusercontent.com/UBC-MDS/exploratory-data-viz/main/data/states_df.json\"}, \"key\": \"id\", \"fields\": [\"birth_state\", \"player_num\"]}}], \"width\": 500}, {\"data\": {\"url\": \"https://raw.githubusercontent.com/UBC-MDS/exploratory-data-viz/main/data/baseball_players.json\"}, \"mark\": {\"type\": \"bar\"}, \"encoding\": {\"color\": {\"value\": \"pink\"}, \"x\": {\"aggregate\": \"count\", \"title\": \"Count of Batters\", \"type\": \"quantitative\"}, \"y\": {\"field\": \"bats\", \"scale\": {\"domain\": [\"L\", \"R\", \"B\", \"No record\"]}, \"sort\": [\"L\", \"R\", \"B\", \"No record\"], \"title\": \"Batter Side\", \"type\": \"nominal\"}}, \"height\": 150, \"transform\": [{\"filter\": {\"param\": \"param_22\"}}], \"width\": 400}], \"params\": [{\"name\": \"param_22\", \"select\": {\"type\": \"point\", \"fields\": [\"id\"]}, \"views\": [\"view_14\"]}], \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.15.1.json\"}, {\"mode\": \"vega-lite\"});\n",
       "</script>"
      ],
      "text/plain": [
       "alt.VConcatChart(...)"
      ]
     },
     "execution_count": 53,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "order_of_batters = ['L', 'R', 'B', 'No record']\n",
    "state_select = alt.selection_multi(fields=['id'])\n",
    "filtered_bats_bars = alt.Chart(players_url).mark_bar().encode(\n",
    "    x = alt.X('count():Q', title='Count of Batters'),\n",
    "    y = alt.Y('bats:N', title='Batter Side', sort=order_of_batters, scale=alt.Scale(domain = [\"L\", \"R\", \"B\", \"No record\"])),\n",
    "    color = alt.value('pink')\n",
    ").properties(\n",
    "    width = 400, height = 150\n",
    ").transform_filter(state_select)\n",
    "\n",
    "states_select_map = players_map.encode(\n",
    "    \n",
    "    opacity=alt.condition(state_select, alt.value(0.8), alt.value(0.2)),\n",
    "    tooltip=[\n",
    "        alt.Tooltip(\"birth_state:N\", title=\"State Player was Born\"),\n",
    "        alt.Tooltip(\"player_num:Q\", title=\"Number of players\"),\n",
    "    ]).transform_lookup(\n",
    "    lookup=\"id\",\n",
    "    from_=alt.LookupData(state_url, \"id\", [\"birth_state\", \"player_num\"])\n",
    ").add_selection(state_select)\n",
    "\n",
    "map_bat_plot = states_select_map & filtered_bats_bars\n",
    "\n",
    "# your code here\n",
    "#raise NotImplementedError # No Answer - remove if you provide an answer\n",
    "\n",
    "map_bat_plot"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Of the players from Wyoming (WY), which side is the most dominant?\n",
    "\n",
    "(Wyoming is square shaped and in the West - to me, Midwest but the U.S. Census Bureau says West)\n",
    "\n",
    "A) Left (L)\n",
    "\n",
    "B) Right (R)\n",
    "\n",
    "C) Switch hitters (B)\n",
    "\n",
    "D) Left and Right have equal numbers of players\n",
    "\n",
    "The answer is D"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Of the players from New York, which side is the most dominant?\n",
    "\n",
    "A) Left\n",
    "\n",
    "B) Right\n",
    "\n",
    "C) Both\n",
    "\n",
    "D) Left and Right have equal numbers of players\n",
    "\n",
    "The answer is B"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Well, we've explored the players' statistics but we have yet to celebrate analyze their achievements. Let's bring in some new data that contains each player's home runs and salary for players in 2016.\n",
    "\n",
    "To analyze our data better we will be adding interactivity using dropdown menus and radio buttons."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 54,
   "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>playerID</th>\n",
       "      <th>teamID</th>\n",
       "      <th>lgID</th>\n",
       "      <th>G</th>\n",
       "      <th>AB</th>\n",
       "      <th>R</th>\n",
       "      <th>H</th>\n",
       "      <th>2B</th>\n",
       "      <th>3B</th>\n",
       "      <th>HR</th>\n",
       "      <th>...</th>\n",
       "      <th>HBP</th>\n",
       "      <th>SH</th>\n",
       "      <th>SF</th>\n",
       "      <th>GIDP</th>\n",
       "      <th>name_first</th>\n",
       "      <th>name_last</th>\n",
       "      <th>bats</th>\n",
       "      <th>throws</th>\n",
       "      <th>team_name</th>\n",
       "      <th>salary</th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <th>0</th>\n",
       "      <td>abadfe01</td>\n",
       "      <td>MIN</td>\n",
       "      <td>AL</td>\n",
       "      <td>39</td>\n",
       "      <td>1</td>\n",
       "      <td>0</td>\n",
       "      <td>0</td>\n",
       "      <td>0</td>\n",
       "      <td>0</td>\n",
       "      <td>0</td>\n",
       "      <td>...</td>\n",
       "      <td>0</td>\n",
       "      <td>0</td>\n",
       "      <td>0</td>\n",
       "      <td>0</td>\n",
       "      <td>Fernando</td>\n",
       "      <td>Abad</td>\n",
       "      <td>L</td>\n",
       "      <td>L</td>\n",
       "      <td>Minnesota Twins</td>\n",
       "      <td>1250000</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>1</th>\n",
       "      <td>arciaos01</td>\n",
       "      <td>MIN</td>\n",
       "      <td>AL</td>\n",
       "      <td>32</td>\n",
       "      <td>103</td>\n",
       "      <td>8</td>\n",
       "      <td>22</td>\n",
       "      <td>4</td>\n",
       "      <td>0</td>\n",
       "      <td>4</td>\n",
       "      <td>...</td>\n",
       "      <td>1</td>\n",
       "      <td>0</td>\n",
       "      <td>0</td>\n",
       "      <td>1</td>\n",
       "      <td>Oswaldo</td>\n",
       "      <td>Arcia</td>\n",
       "      <td>L</td>\n",
       "      <td>R</td>\n",
       "      <td>Minnesota Twins</td>\n",
       "      <td>535000</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>2</th>\n",
       "      <td>buxtoby01</td>\n",
       "      <td>MIN</td>\n",
       "      <td>AL</td>\n",
       "      <td>92</td>\n",
       "      <td>298</td>\n",
       "      <td>44</td>\n",
       "      <td>67</td>\n",
       "      <td>19</td>\n",
       "      <td>6</td>\n",
       "      <td>10</td>\n",
       "      <td>...</td>\n",
       "      <td>3</td>\n",
       "      <td>4</td>\n",
       "      <td>3</td>\n",
       "      <td>2</td>\n",
       "      <td>Byron</td>\n",
       "      <td>Buxton</td>\n",
       "      <td>R</td>\n",
       "      <td>R</td>\n",
       "      <td>Minnesota Twins</td>\n",
       "      <td>512500</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>3</th>\n",
       "      <td>doziebr01</td>\n",
       "      <td>MIN</td>\n",
       "      <td>AL</td>\n",
       "      <td>155</td>\n",
       "      <td>615</td>\n",
       "      <td>104</td>\n",
       "      <td>165</td>\n",
       "      <td>35</td>\n",
       "      <td>5</td>\n",
       "      <td>42</td>\n",
       "      <td>...</td>\n",
       "      <td>8</td>\n",
       "      <td>2</td>\n",
       "      <td>5</td>\n",
       "      <td>12</td>\n",
       "      <td>Brian</td>\n",
       "      <td>Dozier</td>\n",
       "      <td>R</td>\n",
       "      <td>R</td>\n",
       "      <td>Minnesota Twins</td>\n",
       "      <td>3000000</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>4</th>\n",
       "      <td>escobed01</td>\n",
       "      <td>MIN</td>\n",
       "      <td>AL</td>\n",
       "      <td>105</td>\n",
       "      <td>352</td>\n",
       "      <td>32</td>\n",
       "      <td>83</td>\n",
       "      <td>14</td>\n",
       "      <td>2</td>\n",
       "      <td>6</td>\n",
       "      <td>...</td>\n",
       "      <td>1</td>\n",
       "      <td>2</td>\n",
       "      <td>1</td>\n",
       "      <td>7</td>\n",
       "      <td>Eduardo</td>\n",
       "      <td>Escobar</td>\n",
       "      <td>B</td>\n",
       "      <td>R</td>\n",
       "      <td>Minnesota Twins</td>\n",
       "      <td>2150000</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>...</th>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>800</th>\n",
       "      <td>strasst01</td>\n",
       "      <td>WAS</td>\n",
       "      <td>NL</td>\n",
       "      <td>24</td>\n",
       "      <td>48</td>\n",
       "      <td>3</td>\n",
       "      <td>10</td>\n",
       "      <td>1</td>\n",
       "      <td>0</td>\n",
       "      <td>0</td>\n",
       "      <td>...</td>\n",
       "      <td>0</td>\n",
       "      <td>7</td>\n",
       "      <td>0</td>\n",
       "      <td>2</td>\n",
       "      <td>Stephen</td>\n",
       "      <td>Strasburg</td>\n",
       "      <td>R</td>\n",
       "      <td>R</td>\n",
       "      <td>Washington Nationals</td>\n",
       "      <td>10400000</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>801</th>\n",
       "      <td>taylomi02</td>\n",
       "      <td>WAS</td>\n",
       "      <td>NL</td>\n",
       "      <td>76</td>\n",
       "      <td>221</td>\n",
       "      <td>28</td>\n",
       "      <td>51</td>\n",
       "      <td>11</td>\n",
       "      <td>0</td>\n",
       "      <td>7</td>\n",
       "      <td>...</td>\n",
       "      <td>1</td>\n",
       "      <td>0</td>\n",
       "      <td>1</td>\n",
       "      <td>2</td>\n",
       "      <td>Michael</td>\n",
       "      <td>Taylor</td>\n",
       "      <td>R</td>\n",
       "      <td>R</td>\n",
       "      <td>Washington Nationals</td>\n",
       "      <td>524000</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>802</th>\n",
       "      <td>treinbl01</td>\n",
       "      <td>WAS</td>\n",
       "      <td>NL</td>\n",
       "      <td>73</td>\n",
       "      <td>0</td>\n",
       "      <td>0</td>\n",
       "      <td>0</td>\n",
       "      <td>0</td>\n",
       "      <td>0</td>\n",
       "      <td>0</td>\n",
       "      <td>...</td>\n",
       "      <td>0</td>\n",
       "      <td>0</td>\n",
       "      <td>0</td>\n",
       "      <td>0</td>\n",
       "      <td>Blake</td>\n",
       "      <td>Treinen</td>\n",
       "      <td>R</td>\n",
       "      <td>R</td>\n",
       "      <td>Washington Nationals</td>\n",
       "      <td>524900</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>803</th>\n",
       "      <td>werthja01</td>\n",
       "      <td>WAS</td>\n",
       "      <td>NL</td>\n",
       "      <td>143</td>\n",
       "      <td>525</td>\n",
       "      <td>84</td>\n",
       "      <td>128</td>\n",
       "      <td>28</td>\n",
       "      <td>0</td>\n",
       "      <td>21</td>\n",
       "      <td>...</td>\n",
       "      <td>4</td>\n",
       "      <td>0</td>\n",
       "      <td>6</td>\n",
       "      <td>17</td>\n",
       "      <td>Jayson</td>\n",
       "      <td>Werth</td>\n",
       "      <td>R</td>\n",
       "      <td>R</td>\n",
       "      <td>Washington Nationals</td>\n",
       "      <td>21733615</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>804</th>\n",
       "      <td>zimmery01</td>\n",
       "      <td>WAS</td>\n",
       "      <td>NL</td>\n",
       "      <td>115</td>\n",
       "      <td>427</td>\n",
       "      <td>60</td>\n",
       "      <td>93</td>\n",
       "      <td>18</td>\n",
       "      <td>1</td>\n",
       "      <td>15</td>\n",
       "      <td>...</td>\n",
       "      <td>5</td>\n",
       "      <td>0</td>\n",
       "      <td>6</td>\n",
       "      <td>12</td>\n",
       "      <td>Ryan</td>\n",
       "      <td>Zimmerman</td>\n",
       "      <td>R</td>\n",
       "      <td>R</td>\n",
       "      <td>Washington Nationals</td>\n",
       "      <td>14000000</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "<p>805 rows × 26 columns</p>\n",
       "</div>"
      ],
      "text/plain": [
       "      playerID teamID lgID    G   AB    R    H  2B  3B  HR  ...  HBP  SH  SF  \\\n",
       "0     abadfe01    MIN   AL   39    1    0    0   0   0   0  ...    0   0   0   \n",
       "1    arciaos01    MIN   AL   32  103    8   22   4   0   4  ...    1   0   0   \n",
       "2    buxtoby01    MIN   AL   92  298   44   67  19   6  10  ...    3   4   3   \n",
       "3    doziebr01    MIN   AL  155  615  104  165  35   5  42  ...    8   2   5   \n",
       "4    escobed01    MIN   AL  105  352   32   83  14   2   6  ...    1   2   1   \n",
       "..         ...    ...  ...  ...  ...  ...  ...  ..  ..  ..  ...  ...  ..  ..   \n",
       "800  strasst01    WAS   NL   24   48    3   10   1   0   0  ...    0   7   0   \n",
       "801  taylomi02    WAS   NL   76  221   28   51  11   0   7  ...    1   0   1   \n",
       "802  treinbl01    WAS   NL   73    0    0    0   0   0   0  ...    0   0   0   \n",
       "803  werthja01    WAS   NL  143  525   84  128  28   0  21  ...    4   0   6   \n",
       "804  zimmery01    WAS   NL  115  427   60   93  18   1  15  ...    5   0   6   \n",
       "\n",
       "     GIDP  name_first  name_last  bats  throws             team_name    salary  \n",
       "0       0    Fernando       Abad     L       L       Minnesota Twins   1250000  \n",
       "1       1     Oswaldo      Arcia     L       R       Minnesota Twins    535000  \n",
       "2       2       Byron     Buxton     R       R       Minnesota Twins    512500  \n",
       "3      12       Brian     Dozier     R       R       Minnesota Twins   3000000  \n",
       "4       7     Eduardo    Escobar     B       R       Minnesota Twins   2150000  \n",
       "..    ...         ...        ...   ...     ...                   ...       ...  \n",
       "800     2     Stephen  Strasburg     R       R  Washington Nationals  10400000  \n",
       "801     2     Michael     Taylor     R       R  Washington Nationals    524000  \n",
       "802     0       Blake    Treinen     R       R  Washington Nationals    524900  \n",
       "803    17      Jayson      Werth     R       R  Washington Nationals  21733615  \n",
       "804    12        Ryan  Zimmerman     R       R  Washington Nationals  14000000  \n",
       "\n",
       "[805 rows x 26 columns]"
      ]
     },
     "execution_count": 54,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "batting_url = 'https://raw.githubusercontent.com/UBC-MDS/exploratory-data-viz/main/data/baseball_players_stats.json'\n",
    "player_stats = pd.read_json(batting_url)\n",
    "\n",
    "# your code here\n",
    "#raise NotImplementedError # No Answer - remove if you provide an answer\n",
    "\n",
    "player_stats"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "This new dataset has been pre-filtered for the player in 2016 otherwise it would have been HUGE!\n",
    "\n",
    "let's analyze the players' successes and if they really pay off (pun intended) ! Are players with more home-runs also high paid players? Or are there likely other important factors involved in salary decisions? Is this the same for all teams? Let's take a look."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 55,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<style>\n",
       "  #altair-viz-9600d6c91d4740cda89db8f0adc83e47.vega-embed {\n",
       "    width: 100%;\n",
       "    display: flex;\n",
       "  }\n",
       "\n",
       "  #altair-viz-9600d6c91d4740cda89db8f0adc83e47.vega-embed details,\n",
       "  #altair-viz-9600d6c91d4740cda89db8f0adc83e47.vega-embed details summary {\n",
       "    position: relative;\n",
       "  }\n",
       "</style>\n",
       "<div id=\"altair-viz-9600d6c91d4740cda89db8f0adc83e47\"></div>\n",
       "<script type=\"text/javascript\">\n",
       "  var VEGA_DEBUG = (typeof VEGA_DEBUG == \"undefined\") ? {} : VEGA_DEBUG;\n",
       "  (function(spec, embedOpt){\n",
       "    let outputDiv = document.currentScript.previousElementSibling;\n",
       "    if (outputDiv.id !== \"altair-viz-9600d6c91d4740cda89db8f0adc83e47\") {\n",
       "      outputDiv = document.getElementById(\"altair-viz-9600d6c91d4740cda89db8f0adc83e47\");\n",
       "    }\n",
       "    const paths = {\n",
       "      \"vega\": \"https://cdn.jsdelivr.net/npm/vega@5?noext\",\n",
       "      \"vega-lib\": \"https://cdn.jsdelivr.net/npm/vega-lib?noext\",\n",
       "      \"vega-lite\": \"https://cdn.jsdelivr.net/npm/vega-lite@5.15.1?noext\",\n",
       "      \"vega-embed\": \"https://cdn.jsdelivr.net/npm/vega-embed@6?noext\",\n",
       "    };\n",
       "\n",
       "    function maybeLoadScript(lib, version) {\n",
       "      var key = `${lib.replace(\"-\", \"\")}_version`;\n",
       "      return (VEGA_DEBUG[key] == version) ?\n",
       "        Promise.resolve(paths[lib]) :\n",
       "        new Promise(function(resolve, reject) {\n",
       "          var s = document.createElement('script');\n",
       "          document.getElementsByTagName(\"head\")[0].appendChild(s);\n",
       "          s.async = true;\n",
       "          s.onload = () => {\n",
       "            VEGA_DEBUG[key] = version;\n",
       "            return resolve(paths[lib]);\n",
       "          };\n",
       "          s.onerror = () => reject(`Error loading script: ${paths[lib]}`);\n",
       "          s.src = paths[lib];\n",
       "        });\n",
       "    }\n",
       "\n",
       "    function showError(err) {\n",
       "      outputDiv.innerHTML = `<div class=\"error\" style=\"color:red;\">${err}</div>`;\n",
       "      throw err;\n",
       "    }\n",
       "\n",
       "    function displayChart(vegaEmbed) {\n",
       "      vegaEmbed(outputDiv, spec, embedOpt)\n",
       "        .catch(err => showError(`Javascript Error: ${err.message}<br>This usually means there's a typo in your chart specification. See the javascript console for the full traceback.`));\n",
       "    }\n",
       "\n",
       "    if(typeof define === \"function\" && define.amd) {\n",
       "      requirejs.config({paths});\n",
       "      require([\"vega-embed\"], displayChart, err => showError(`Error loading script: ${err.message}`));\n",
       "    } else {\n",
       "      maybeLoadScript(\"vega\", \"5\")\n",
       "        .then(() => maybeLoadScript(\"vega-lite\", \"5.15.1\"))\n",
       "        .then(() => maybeLoadScript(\"vega-embed\", \"6\"))\n",
       "        .catch(showError)\n",
       "        .then(() => displayChart(vegaEmbed));\n",
       "    }\n",
       "  })({\"config\": {\"view\": {\"continuousWidth\": 300, \"continuousHeight\": 300}}, \"data\": {\"url\": \"https://raw.githubusercontent.com/UBC-MDS/exploratory-data-viz/main/data/baseball_players_stats.json\"}, \"mark\": {\"type\": \"circle\"}, \"encoding\": {\"color\": {\"field\": \"team_name\", \"title\": \"Team Name\", \"type\": \"nominal\"}, \"tooltip\": [{\"field\": \"name_first\", \"type\": \"nominal\"}, {\"field\": \"name_last\", \"type\": \"nominal\"}, {\"field\": \"salary\", \"type\": \"quantitative\"}], \"x\": {\"field\": \"HR\", \"scale\": {\"domain\": [0, 50]}, \"title\": \"Home Runs\", \"type\": \"quantitative\"}, \"y\": {\"axis\": {\"format\": \"$s\"}, \"field\": \"salary\", \"scale\": {\"domain\": [500000, 50000000], \"nice\": false, \"type\": \"log\"}, \"title\": \"Salary (USD)\", \"type\": \"quantitative\"}}, \"height\": 400, \"title\": \"Home Runs vs Salary by Team (2016)\", \"width\": 600, \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.15.1.json\"}, {\"mode\": \"vega-lite\"});\n",
       "</script>"
      ],
      "text/plain": [
       "alt.Chart(...)"
      ]
     },
     "execution_count": 55,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "stats_plot = alt.Chart(batting_url).mark_circle().encode(\n",
    "    x=alt.X('HR:Q', type='quantitative', scale=alt.Scale(domain=[0, 50]), title='Home Runs'),\n",
    "    y=alt.Y('salary:Q', scale=alt.Scale(type='log', domain=[500000, 50000000], nice=False), title='Salary (USD)', axis=alt.Axis(format='$s')),\n",
    "    color=alt.Color('team_name:N', title='Team Name'),\n",
    "    tooltip=['name_first:N', 'name_last:N', 'salary:Q']\n",
    ").properties(\n",
    "    width=600,\n",
    "    height=400,\n",
    "    title='Home Runs vs Salary by Team (2016)'\n",
    ")\n",
    "\n",
    "\n",
    "stats_plot"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Woahh, that's a big legend! It would be better if we could look at the Teams individually since either faceting on team_name or using a legend with a colour channel are both far too much to handle at once. This is a great opportunity for a dropdown menu where we can highlight the Team based on the selection we choose.\n",
    "\n",
    "First off, find all the unique values in the team_name column and save them in a list or an array in an object named teams. Make sure they are sorted alphabetically.\n",
    "\n",
    "Create a dropdown menu using the teams as options within .binding_select() and saving this in an object named dropdown_team give this drop down an informative label like \"Team name\"."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 56,
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "/Users/blairjdaniel/anaconda3/lib/python3.11/site-packages/altair/utils/deprecation.py:65: AltairDeprecationWarning: 'selection_single' is deprecated.  Use 'selection_point'\n",
      "  warnings.warn(message, AltairDeprecationWarning, stacklevel=1)\n",
      "/Users/blairjdaniel/anaconda3/lib/python3.11/site-packages/altair/utils/deprecation.py:65: AltairDeprecationWarning: 'add_selection' is deprecated. Use 'add_params' instead.\n",
      "  warnings.warn(message, AltairDeprecationWarning, stacklevel=1)\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<style>\n",
       "  #altair-viz-c82a856615c74883927fbe78fd7cc373.vega-embed {\n",
       "    width: 100%;\n",
       "    display: flex;\n",
       "  }\n",
       "\n",
       "  #altair-viz-c82a856615c74883927fbe78fd7cc373.vega-embed details,\n",
       "  #altair-viz-c82a856615c74883927fbe78fd7cc373.vega-embed details summary {\n",
       "    position: relative;\n",
       "  }\n",
       "</style>\n",
       "<div id=\"altair-viz-c82a856615c74883927fbe78fd7cc373\"></div>\n",
       "<script type=\"text/javascript\">\n",
       "  var VEGA_DEBUG = (typeof VEGA_DEBUG == \"undefined\") ? {} : VEGA_DEBUG;\n",
       "  (function(spec, embedOpt){\n",
       "    let outputDiv = document.currentScript.previousElementSibling;\n",
       "    if (outputDiv.id !== \"altair-viz-c82a856615c74883927fbe78fd7cc373\") {\n",
       "      outputDiv = document.getElementById(\"altair-viz-c82a856615c74883927fbe78fd7cc373\");\n",
       "    }\n",
       "    const paths = {\n",
       "      \"vega\": \"https://cdn.jsdelivr.net/npm/vega@5?noext\",\n",
       "      \"vega-lib\": \"https://cdn.jsdelivr.net/npm/vega-lib?noext\",\n",
       "      \"vega-lite\": \"https://cdn.jsdelivr.net/npm/vega-lite@5.15.1?noext\",\n",
       "      \"vega-embed\": \"https://cdn.jsdelivr.net/npm/vega-embed@6?noext\",\n",
       "    };\n",
       "\n",
       "    function maybeLoadScript(lib, version) {\n",
       "      var key = `${lib.replace(\"-\", \"\")}_version`;\n",
       "      return (VEGA_DEBUG[key] == version) ?\n",
       "        Promise.resolve(paths[lib]) :\n",
       "        new Promise(function(resolve, reject) {\n",
       "          var s = document.createElement('script');\n",
       "          document.getElementsByTagName(\"head\")[0].appendChild(s);\n",
       "          s.async = true;\n",
       "          s.onload = () => {\n",
       "            VEGA_DEBUG[key] = version;\n",
       "            return resolve(paths[lib]);\n",
       "          };\n",
       "          s.onerror = () => reject(`Error loading script: ${paths[lib]}`);\n",
       "          s.src = paths[lib];\n",
       "        });\n",
       "    }\n",
       "\n",
       "    function showError(err) {\n",
       "      outputDiv.innerHTML = `<div class=\"error\" style=\"color:red;\">${err}</div>`;\n",
       "      throw err;\n",
       "    }\n",
       "\n",
       "    function displayChart(vegaEmbed) {\n",
       "      vegaEmbed(outputDiv, spec, embedOpt)\n",
       "        .catch(err => showError(`Javascript Error: ${err.message}<br>This usually means there's a typo in your chart specification. See the javascript console for the full traceback.`));\n",
       "    }\n",
       "\n",
       "    if(typeof define === \"function\" && define.amd) {\n",
       "      requirejs.config({paths});\n",
       "      require([\"vega-embed\"], displayChart, err => showError(`Error loading script: ${err.message}`));\n",
       "    } else {\n",
       "      maybeLoadScript(\"vega\", \"5\")\n",
       "        .then(() => maybeLoadScript(\"vega-lite\", \"5.15.1\"))\n",
       "        .then(() => maybeLoadScript(\"vega-embed\", \"6\"))\n",
       "        .catch(showError)\n",
       "        .then(() => displayChart(vegaEmbed));\n",
       "    }\n",
       "  })({\"config\": {\"view\": {\"continuousWidth\": 300, \"continuousHeight\": 300}}, \"data\": {\"url\": \"https://raw.githubusercontent.com/UBC-MDS/exploratory-data-viz/main/data/baseball_players_stats.json\"}, \"mark\": {\"type\": \"circle\"}, \"encoding\": {\"color\": {\"value\": \"navy\"}, \"opacity\": {\"condition\": {\"param\": \"param_23\", \"value\": 0.8}, \"value\": 0.08}, \"tooltip\": [{\"field\": \"name_first\", \"type\": \"nominal\"}, {\"field\": \"name_last\", \"type\": \"nominal\"}, {\"field\": \"salary\", \"type\": \"quantitative\"}], \"x\": {\"field\": \"HR\", \"scale\": {\"domain\": [0, 50]}, \"title\": \"Home Runs\", \"type\": \"quantitative\"}, \"y\": {\"axis\": {\"format\": \"$s\"}, \"field\": \"salary\", \"scale\": {\"domain\": [500000, 50000000], \"nice\": false, \"type\": \"log\"}, \"title\": \"Salary (USD)\", \"type\": \"quantitative\"}}, \"height\": 400, \"params\": [{\"name\": \"param_23\", \"select\": {\"type\": \"point\", \"fields\": [\"team_name\"]}, \"bind\": {\"input\": \"select\", \"options\": [\"Arizona Diamondbacks\", \"Atlanta Braves\", \"Baltimore Orioles\", \"Boston Red Sox\", \"Chicago Cubs\", \"Chicago White Sox\", \"Cincinnati Reds\", \"Cleveland Indians\", \"Colorado Rockies\", \"Detroit Tigers\", \"Houston Astros\", \"Kansas City Royals\", \"Los Angeles Angels of Anaheim\", \"Los Angeles Dodgers\", \"Miami Marlins\", \"Milwaukee Brewers\", \"Minnesota Twins\", \"New York Mets\", \"New York Yankees\", \"Oakland Athletics\", \"Philadelphia Phillies\", \"Pittsburgh Pirates\", \"San Diego Padres\", \"San Francisco Giants\", \"Seattle Mariners\", \"St. Louis Cardinals\", \"Tampa Bay Rays\", \"Texas Rangers\", \"Toronto Blue Jays\", \"Washington Nationals\"], \"name\": \"Teams\"}}], \"title\": \"Home Runs vs Salary by Team (2016)\", \"transform\": [{\"filter\": {\"param\": \"param_23\"}}], \"width\": 600, \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.15.1.json\"}, {\"mode\": \"vega-lite\"});\n",
       "</script>"
      ],
      "text/plain": [
       "alt.Chart(...)"
      ]
     },
     "execution_count": 56,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "teams = sorted(player_stats['team_name'].unique())\n",
    "dropdown_team = alt.binding_select(name='Teams', options=teams)\n",
    "select_team = alt.selection_single(fields=['team_name'], bind=dropdown_team)\n",
    "\n",
    "\n",
    "stats_drop_plot =  alt.Chart(batting_url).mark_circle().encode(\n",
    "    x=alt.X('HR:Q', type='quantitative', scale=alt.Scale(domain=[0, 50]), title='Home Runs'),\n",
    "    y=alt.Y('salary:Q', scale=alt.Scale(type='log', domain=[500000, 50000000], nice=False), title='Salary (USD)', axis=alt.Axis(format='$s')),\n",
    "    color=alt.value('navy'),\n",
    "    opacity=alt.condition(select_team, alt.value(0.8), alt.value(0.08)),\n",
    "    tooltip=['name_first:N', 'name_last:N', 'salary:Q']\n",
    ").add_selection(select_team\n",
    ").transform_filter(select_team\n",
    ").properties(\n",
    "    width=600,\n",
    "    height=400,\n",
    "    title='Home Runs vs Salary by Team (2016)'\n",
    ")\n",
    "\n",
    "# your code here\n",
    "#raise NotImplementedError # No Answer - remove if you provide an answer\n",
    "\n",
    "stats_drop_plot"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Of the following, which team tends to pay their high scoring home run players more than the others?\n",
    "\n",
    "A) Oakland Athletics\n",
    "\n",
    "B) Toronto Blue Jays\n",
    "\n",
    "C) Cincinnati Reds\n",
    "\n",
    "D) Chicago Cubs\n",
    "\n",
    "The answer is B"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "base",
   "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.11.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}