Optional - Interactive Visual Exploration with Altair.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "![image](docs/img/cern-csc-vis-header.png)\n",
    "\n",
    "# Interactive Visual Exploration with Altair\n",
    "\n",
    "Static visualizations are good, but they definitely have their limitations. It's definitely cumbersome to figure out what the outlier is in a static visualization.\n",
    "\n",
    "There have been a number of interesting developments in recent years, in particular Bokeh, plot.ly, and most recently Altair.\n",
    "\n",
    "Altair is more declarative, by that I mean that the mapping from data to visual is more natural. There is a specific grammar for the composition of charts, and with this you can go far quickly. Note, Altair is a Python library that is in essence a builder for Vega/Vega-Lite JSON specifications.\n",
    "\n",
    "Visualizations are composed of marks, mapping data to lines, shapes, size, and opacity.\n",
    "\n",
    "\n",
    "Note, exercises are marked in terms of difficulty by basic, advanced, or optional. These have been colour coded as follows:\n",
    "\n",
    "<p style=\"background: #81ecec; padding: 10px; color: #2d3436\"><strong>Basic</strong>: Basic will achievable by all in the class. This usually involves running the code you've seen before with your own parameters, or at most, checking the Matplotlib or Seaborn documentation on how to use some API.</p>\n",
    "\n",
    "<p style=\"background: #fab1a0; padding: 10px; color: #2d3436\"><strong>Advanced</strong>: This will be more appropriate for those who already have familiarity with the tools at hand, but which wil (hopefully) introduce some topics you have not seen before.</p>\n",
    "\n",
    "<p style=\"background: #ffeaa7; padding: 10px; color: #2d3436\"><strong>Optional</strong>: Optional allows you to express your inner data scientist and to show everyone how awesome you are in the use of Pandas, Matplotlib, and Seaborn :)</p>\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# You may need to do this. If so, you may need to restart the kernel\n",
    "!pip install altair==5.0.1"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import altair as alt\n",
    "import pandas as pd"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# When working with Altair, you'll soon encounter issues with scale. By default, altair only supports \n",
    "# 5000 data items, which is fine for most cases, but for large data sets, you'll need to export to JSON or CSV as an intermediary store as opposed to \n",
    "# having everything in memory\n",
    "\n",
    "\n",
    "# alt.renderers.enable('default')\n",
    "# alt.data_transformers.enable('json')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "fifa = pd.read_csv('data/fifa_player_data.csv')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "mapping = {'RCB': 'DEF', 'LCB': 'DEF', 'CB': 'DEF',\n",
    "           'LB': 'DEF', 'RB': 'DEF', \n",
    "           'LWB': 'DEF', 'RWB': 'DEF',\n",
    "           'CDM': 'MID', 'RM': 'MID',\n",
    "           'LCM': 'MID', 'RCM': 'MID', 'LM': 'MID', 'CAM': 'MID',\n",
    "           'LDM': 'MID', 'RDM': 'MID',\n",
    "           'LAM': 'MID', 'RAM': 'MID',\n",
    "           'CM': 'MID', 'LW': 'MID', 'RW': 'MID',\n",
    "           'LS': 'ST', 'RS': 'ST', 'RF': 'ST', 'LF': 'ST', 'CF': 'ST'\n",
    "          }\n",
    "fifa['GeneralPosition'] = fifa.Position.apply(lambda x: mapping[x] if x in mapping else x )"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "At present, our wages, release clause, and player valuation are strings. But of course, it would be great if we could use them."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import re\n",
    "fifa['ValueNorm'] = fifa.Value.apply(lambda x: float(re.sub('M|K', '', x[1:])) * (1000000 if x.endswith('M') else 1000))\n",
    "\n",
    "fifa['ReleaseClauseNorm'] = fifa['Release Clause'].fillna('€0M').apply(lambda x: float(re.sub('M|K', '', str(x)[1:])) * (1000000 if x.endswith('M') else 1000))\n",
    "\n",
    "fifa['WageNorm'] = fifa['Wage'].apply(lambda x: float(re.sub('M|K', '', str(x)[1:])) * (1000000 if x.endswith('M') else 1000))\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Now we remove the players with no position.\n",
    "fifa = fifa[~fifa.GeneralPosition.isna()]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Altair works rather differently from the Matplotlib etc. since it is acting as a proxy for a JSON file that will be rendered via Vega. We need to keep this JSON file relatively light so as not to crash Jupyter.\n",
    "sample = fifa.sample(3000)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Basics of Altair"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Creating a chart in Altair is pretty simple.\n",
    "\n",
    "Let's take this task:\n",
    "\n",
    "> **We want to view the distribution of player Accelerations, but each mark needs to represent a player**\n",
    "\n",
    "Since it's just one line, and on that line we want to plot each player's acceleration, using some visual mark (e.g. circle, line)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "alt.Chart(sample).mark_point().encode(\n",
    "    x='Acceleration',\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### A segway on performance"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Since we're saving this file to JSON, check the size of that JSON file as it stands now. You'll see that this one file to create one simple visualization is over 4MB for our sample!\n",
    "\n",
    "Let's fix this, so things load quicker. We only need the fields we're visualizing, not everything."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "alt.Chart(sample[['Acceleration']]).mark_point().encode(\n",
    "    x='Acceleration',\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Now our file is around 66kb."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "We can improve this by changing the opacity of the points so we can get a better idea of the distribution."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "alt.Chart(sample[['Acceleration']]).mark_point(opacity=0.05).encode(\n",
    "    x='Acceleration',\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The point can be changed to a tick (line). "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "alt.Chart(sample[['Acceleration']]).mark_tick(\n",
    "    opacity=0.03, \n",
    "    thickness=5).encode(\n",
    "    x='Acceleration',\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Or a filled circle very easily."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "alt.Chart(sample[['Acceleration']]).mark_circle(opacity=0.03).encode(\n",
    "    x='Acceleration',\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Our users have now come back with the following task. \n",
    "\n",
    "> **We want to view the distribution of player Accelerations for each position**\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "alt.Chart(sample[['Acceleration', 'Position']]).mark_tick(opacity=0.1, thickness=5).encode(\n",
    "    x='Acceleration',\n",
    "    y='Position'\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Adding Interactivity\n",
    "\n",
    "### Zooming"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "alt.Chart(sample[['Acceleration', 'Position']]).mark_tick(opacity=0.1, thickness=5).encode(\n",
    "    x='Acceleration',\n",
    "    y='Position'\n",
    ").interactive()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Tooltips"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "alt.Chart(sample[['Acceleration', 'Position', 'Name', 'Nationality']]).mark_tick(opacity=0.1, thickness=5).encode(\n",
    "    x='Acceleration',\n",
    "    y='Position',\n",
    "    tooltip=['Name', 'Nationality']\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Customising Plots\n",
    "\n",
    "Similar to what we did in Part 2, we can change how the chart looks in terms or colours, usage of axes, grids, etc."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Removing Grid Lines"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "alt.Chart(sample[['Acceleration', 'Position', 'Name', 'Nationality']]).mark_tick(opacity=0.1, thickness=5).encode(\n",
    "    x='Acceleration',\n",
    "    y='Position',\n",
    "    tooltip=['Name', 'Nationality']\n",
    ").configure_axis(\n",
    "    grid=False,\n",
    "    domain=False,\n",
    ").configure_view(\n",
    "    strokeWidth=0\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "In this example, the removal of the lines etc. makes the plot much cleaner, bringing attention to the data rather than that which surrounds it."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Theming\n",
    "\n",
    "We often need to change the style to reflect requirements from experiments, or for the publication venue, conference theme etc. With Altair this is pretty easy!\n",
    "\n",
    "E.g., let's take the Financial Times style of graphic like the one shown here from this [tweet](https://twitter.com/mihirssharma/status/536728204111654912).\n",
    "\n",
    "![image](https://pbs.twimg.com/media/B3LTKfEIEAEkrUr.png)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "In Altair every displayed item can be configured, a nice tutorial is available. We are not of course able to cover everything here, but a good tutorial can be found [here](https://towardsdatascience.com/consistently-beautiful-visualizations-with-altair-themes-c7f9f889602).\n",
    "\n",
    "We'll create a basic replication of the style here with a minimal amount of code :)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "alt.Chart(sample[['Acceleration', 'Position', 'Name', 'Nationality']]).mark_tick(opacity=0.1, thickness=5, color='#EAA8A7').encode(\n",
    "    x='Acceleration',\n",
    "    y='Position',\n",
    "    tooltip=['Name', 'Nationality']\n",
    ").configure_axis(\n",
    "    grid=False,\n",
    "    domain=False,\n",
    "    labelFont='Lato',\n",
    "    labelColor='#555555'\n",
    ").configure_view(\n",
    "    strokeWidth=0\n",
    ").configure_title(\n",
    "    anchor='start',\n",
    "    fontSize=22,\n",
    "    font='Lato',\n",
    "    fontWeight='normal',\n",
    "    color='#555555'\n",
    ").properties(\n",
    "    title='Acceleration by Position',\n",
    "    background='#FFF1E0',\n",
    "    padding= 20\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "There is also the possibility to make this a theme that can be configured externally then used in all subsequent plots. Doing so is explained in this [post](https://towardsdatascience.com/consistently-beautiful-visualizations-with-altair-themes-c7f9f889602)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "def financial_times_theme():\n",
    "    # Typography\n",
    "    font = \"Lato\"\n",
    "    labelFont = \"Lato\" \n",
    "    sourceFont = \"Lato\"\n",
    "    # Axes\n",
    "    axisColor = \"#555555\"\n",
    "    gridColor = \"#DEDDDD\"\n",
    "    \n",
    "    markColor = '#990F3D'\n",
    "    # Colors\n",
    "    main_palette = [\"#990F3D\", \n",
    "                    \"#0F5499\",\n",
    "                    \"#0D7680\", \n",
    "                    \"#593380\", \n",
    "                    \"#FF8833\", \n",
    "                    \"#FFEC1A\", \n",
    "                    \"#000000\", \n",
    "                   ]\n",
    "    \n",
    "    sequential_palette = [\"#cfe8f3\", \n",
    "                          \"#e0adb3\", \n",
    "                          \"#cc8091\", \n",
    "                          \"#b8536f\", \n",
    "                          \"#a3264e\", \n",
    "                          \"#990f3d\", \n",
    "                         ]\n",
    "    \n",
    "    return  {\n",
    "        \"width\": 600, # from the guide\n",
    "        \"height\": 400, # not in the guide\n",
    "        \"background\": \"#FFF1E0\",\n",
    "        \"color\": \"#555555\",\n",
    "        \"grid\": False,\n",
    "        \"config\": {\n",
    "            \"title\": {\n",
    "                \"fontSize\": 18,\n",
    "                \"font\": font,\n",
    "                \"anchor\": \"start\", # equivalent of left-aligned.\n",
    "                \"color\": \"#555555\"\n",
    "            },\n",
    "            \"axisX\": {\n",
    "                \"domain\": False,\n",
    "                \"grid\": False,\n",
    "                \"labelFont\": labelFont,\n",
    "                \"labelFontSize\": 12,\n",
    "                \"labelAngle\": 0, \n",
    "                \"labelColor\": \"#555555\",\n",
    "                \"tickColor\": axisColor,\n",
    "                \"tickSize\": 5, # default, including it just to show you can change it\n",
    "                \"titleFont\": font,\n",
    "                \"titleFontSize\": 12,\n",
    "                \"titlePadding\": 10, # guessing, not specified in styleguide\n",
    "                \"title\": \"X Axis Title (units)\", \n",
    "            },\n",
    "            \"axisY\": {\n",
    "                \"domain\": False,\n",
    "                \"grid\": False,\n",
    "                \"labelFont\": labelFont,\n",
    "                \"labelFontSize\": 12,\n",
    "                \"labelColor\": \"#555555\",\n",
    "                \"labelAngle\": 0, \n",
    "                \"ticks\": False, # even if you don't have a \"domain\" you need to turn these off.\n",
    "                \"titleFont\": font,\n",
    "                \"titleFontSize\": 12,\n",
    "                \"titlePadding\": 10, # guessing, not specified in styleguide\n",
    "                \"title\": \"Y Axis Title (units)\", \n",
    "                # titles are by default vertical left of axis so we need to hack this \n",
    "                \"titleAngle\": 0, # horizontal\n",
    "                \"titleY\": -10, # move it up\n",
    "                \"titleX\": 18, # move it to the right so it aligns with the labels \n",
    "            },\n",
    "            \n",
    "            \"range\": {\n",
    "                \"category\": main_palette,\n",
    "                \"diverging\": sequential_palette,\n",
    "            },\n",
    "            \n",
    "            \"view\": {\n",
    "                \"stroke\": \"transparent\"\n",
    "            },\n",
    "            \n",
    "            \"tick\":{\n",
    "                \"color\": markColor\n",
    "            },\n",
    "            \n",
    "            \"point\":{\n",
    "                \"color\": markColor\n",
    "            },\n",
    "            \n",
    "            \"bar\":{\n",
    "                \"color\": markColor\n",
    "            },\n",
    "            \n",
    "            \"line\":{\n",
    "                \"stroke\": markColor\n",
    "            }\n",
    "    }\n",
    "    }"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "alt.themes.register(\"financial_times_theme\", financial_times_theme)\n",
    "alt.themes.enable(\"financial_times_theme\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "alt.Chart(sample[['Acceleration']]).mark_tick(\n",
    "    opacity=0.03, \n",
    "    thickness=5).encode(\n",
    "    x=alt.X('Acceleration', title='Acceleration'),\n",
    ").properties(height=40, title='Distribution of Player Acceleration')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "alt.themes.enable(\"default\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Visualizing Distributions"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Histograms\n",
    "\n",
    "### One Group"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "alt.Chart(sample[['Acceleration', 'Nationality']]).mark_bar().encode(\n",
    "    x='Nationality',\n",
    "    y='average(Acceleration)'\n",
    ").properties(width=1500)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<p style=\"background: #81ecec; padding: 10px; color: #2d3436\"><strong>BASIC EXERCISE</strong> | Which country has the highest average acceleration?</p>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Guinea Bissau and Antigua & Barbuda"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Sorting Values"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The previous exercise was difficult, because the choices we've made (or haven't thought about) have made it harder for users to compare values. But, as shown in our lectures, if you can sort, it'll make comparison easier. How does it look if we sort by the Average Acceleration? And how does it speed up the exercise you had before?"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "alt.Chart(sample[['Acceleration', 'Nationality']]).mark_bar().encode(\n",
    "    x=alt.X('Nationality', sort=alt.EncodingSortField(field='Acceleration', op='average', order='descending')),\n",
    "    y='average(Acceleration)'\n",
    ").properties(width=1200)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Comparing Distributions"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Superimposed"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "alt.Chart(sample[['GeneralPosition', 'Reactions']]).mark_area(\n",
    "    opacity=0.5,\n",
    "    interpolate='step',\n",
    ").encode(\n",
    "    alt.X('Reactions', bin=alt.Bin(maxbins=20)),\n",
    "    alt.Y('count()', stack=None, axis=alt.Axis(title='Number of Players')),\n",
    "    color='GeneralPosition',\n",
    "    tooltip=['GeneralPosition']\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Juxtaposed"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "alt.Chart(sample[['GeneralPosition', 'ShortPassing']]).mark_area(\n",
    "    interpolate='step'\n",
    ").encode(\n",
    "    alt.X('ShortPassing', bin=alt.Bin(maxbins=25)),\n",
    "    alt.Y('count()', stack=None, axis=alt.Axis(title='Number of Players')),\n",
    "    alt.Color(\n",
    "        'GeneralPosition',\n",
    "    ),\n",
    "    tooltip=['GeneralPosition']\n",
    ").properties(height=200, width=150).facet(facet='GeneralPosition', columns=2)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "chart1 = alt.Chart().mark_circle(opacity=0.3).encode(\n",
    "    x='GeneralPosition',\n",
    "    y='ShortPassing',\n",
    "    color='GeneralPosition',\n",
    "    tooltip=['Name', 'Position', 'Nationality']\n",
    ").properties(width=200, title='Short Passing by Position')\n",
    "\n",
    "chart2 = alt.Chart().mark_circle(opacity=0.3).encode(\n",
    "    x='GeneralPosition',\n",
    "    y='Finishing',\n",
    "    color='GeneralPosition',\n",
    "    tooltip=['Name', 'Position', 'Nationality']\n",
    ").properties(width=200, title='Finishing by Position')\n",
    "\n",
    "alt.hconcat(chart1, chart2, data=sample[['GeneralPosition', 'ShortPassing', 'Finishing', 'Name', 'Position', 'Nationality']]).interactive()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Our users have now come back with the following task. \n",
    "\n",
    "> **We want to view the distribution of player Accelerations for each position broken down by Nationality showing high level statistical properties, e.g. median, spread, and outliers**\n",
    "\n",
    "So this is how we'd do it in Altair in a few lines of code."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "scrolled": true
   },
   "outputs": [],
   "source": [
    "alt.Chart(sample[['Acceleration', 'Nationality']]).mark_boxplot().encode(\n",
    "    x='Acceleration',\n",
    "    y='Nationality',\n",
    ").properties(height=2000)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "alt.Chart(sample[['Acceleration', 'Nationality', 'GeneralPosition', 'Name']]).mark_circle().encode(\n",
    "    x='Acceleration',\n",
    "    y=alt.Y('Nationality', sort=alt.EncodingSortField(field='Acceleration', op='max', order='descending')),\n",
    "    color='GeneralPosition',\n",
    "    tooltip=['Name']\n",
    ").properties(height=1200).configure_axis(domain=False, grid=False).configure_axisX(grid=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Visualizing Correlations\n",
    "\n",
    "## Scatter Charts"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "alt.Chart(sample[['Acceleration', 'SprintSpeed', 'GeneralPosition', 'Name', 'Nationality', 'Position']]).mark_circle().encode(\n",
    "    x='Acceleration',\n",
    "    y='SprintSpeed',\n",
    "    color='GeneralPosition',\n",
    "    tooltip=['Name', 'Position', 'Nationality', 'Acceleration', 'SprintSpeed']\n",
    ").interactive()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Heatmaps"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "alt.Chart(fifa.corr().reset_index().melt(id_vars='index')).mark_rect().encode(\n",
    "    x='index',\n",
    "    y='variable',\n",
    "    color=alt.Color('value', scale=alt.Scale(scheme='blueorange', zero=True)),\n",
    "    tooltip=['index', 'variable', 'value']\n",
    ").properties(width=600, height=600)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Repeating Charts"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import altair as alt\n",
    "\n",
    "brush = alt.selection_interval()\n",
    "\n",
    "alt.Chart(fifa.query('Nationality==\"Romania\"')).mark_circle().encode(\n",
    "    alt.X(alt.repeat(\"column\"), type='quantitative'),\n",
    "    alt.Y(alt.repeat(\"row\"), type='quantitative'),\n",
    "     color=alt.condition(brush, 'GeneralPosition:N', alt.value('lightgray')),\n",
    "        tooltip=['Name', 'GeneralPosition']\n",
    ").properties(\n",
    "    width=200,\n",
    "    height=200\n",
    ").add_selection(\n",
    "    brush\n",
    ").repeat(\n",
    "    row=['Acceleration', 'SprintSpeed'],\n",
    "    column=['Finishing', 'Strength']\n",
    ").configure_axisX(labelAngle=0).properties(title=\"Romanian Players\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Facets"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Sometimes we also want to create many small juxtaposed plots to show distributions of values split by some feature, such as Nationality.\n",
    "\n",
    "Again, in Altair, this is really straightforward."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "scrolled": true
   },
   "outputs": [],
   "source": [
    "alt.Chart(sample[['Acceleration', 'GeneralPosition', 'Nationality']]).mark_boxplot().encode(\n",
    "    x='Acceleration',\n",
    "    y='GeneralPosition',\n",
    "    color='GeneralPosition'\n",
    ").properties(width=100).facet(facet='Nationality', columns=7).properties(title='Acceleration for Positions by Nationality')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "alt.Chart(sample[['Acceleration', 'GeneralPosition', 'Nationality', 'Name']]).mark_tick(opacity=0.4, thickness=2).encode(\n",
    "    x='Acceleration',\n",
    "    y='GeneralPosition',\n",
    "    color='GeneralPosition',\n",
    "    tooltip=['Name']\n",
    ").properties(width=100).facet(facet='Nationality', columns=7).properties(title='Acceleration for Positions by Nationality')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Layering Charts\n",
    "\n",
    "When we want have an item encoded by multiple marks in one chart for example."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "c1_circle_mark = alt.Chart(sample[['Acceleration', 'GeneralPosition']]).mark_circle().encode(\n",
    "    x='average(Acceleration)',\n",
    "    y='GeneralPosition',\n",
    "    color='GeneralPosition'\n",
    ").properties(\n",
    "    width=500\n",
    ")\n",
    "\n",
    "c2_rule_mark = alt.Chart(sample[['Acceleration', 'GeneralPosition']]).mark_rule().encode(\n",
    "    x='average(Acceleration)',\n",
    "    y='GeneralPosition',\n",
    "    color='GeneralPosition'\n",
    ").properties(\n",
    "    width=500\n",
    ")\n",
    "\n",
    "c1_circle_mark + c2_rule_mark"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Annotations\n",
    "\n",
    "In Matplotlib and other low level libraries, it is possible to add annotations one by one to a chart. With Altair, due to the compositional nature of the library, this can only be done through use of layers."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "circles = alt.Chart().mark_circle().encode(\n",
    "    x='Acceleration',\n",
    "    y='Finishing',\n",
    "    color='GeneralPosition'\n",
    ").properties(\n",
    "    width=500\n",
    ")\n",
    "\n",
    "annotation = alt.Chart().mark_text().encode(\n",
    "    x='Acceleration',\n",
    "    y='Finishing',\n",
    "    text='Name'\n",
    ").properties(\n",
    "    width=500\n",
    ").transform_filter(\n",
    "    alt.datum.Acceleration > 90 & alt.datum.Finishing > 90\n",
    ")\n",
    "\n",
    "\n",
    "alt.layer(circles,annotation, data=sample[['Acceleration', 'GeneralPosition', 'Finishing', 'Name']]).interactive()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Building Dashboard Like Visual Analytics Tools\n",
    "\n",
    "It's often more interesting to be able to interrogate your date interactively, seeing how distributions change based on some selection for example.\n",
    "\n",
    "Luckily, we can do this directly in our notebook without having to go to a different tool base, and it's rather easy.\n",
    "\n",
    "Key here are selections and transform filters.\n",
    "\n",
    "We add selections to a plot, and that selection can be applied to some other plot with a transform_filter."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## A Simple Example"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Here, we define our selectors. We'll have two types.\n",
    "# This one will allow us to brush over a scatter plot to select values\n",
    "brush = alt.selection_interval()\n",
    "\n",
    "#This one will allow us to select one value from a bar plot.\n",
    "club_select = alt.selection_point(fields=['GeneralPosition'])\n",
    "\n",
    "# We define a colour scale to make sure that we have the same colours across 2 plots.\n",
    "fixed_colour_scale = alt.Scale(domain=['GK', 'DEF', 'MID', 'ST'], range=['#34495e', '#1abc9c', '#d35400', '#8e44ad'])\n",
    "color = alt.Color('GeneralPosition:N', scale=fixed_colour_scale)\n",
    "\n",
    "\n",
    "points = alt.Chart().mark_circle().encode(\n",
    "    x='Acceleration',\n",
    "    y='SprintSpeed',\n",
    "    # This says, that when the item is part of the brushed area, keep the color \n",
    "    # it had set already, otherwise, set the colour to lightgray\n",
    "    color=alt.condition(brush, color, alt.value('lightgray')),\n",
    "    tooltip=['GeneralPosition', 'Name', 'Nationality']\n",
    ").add_params(\n",
    "    brush\n",
    ").transform_filter(\n",
    "    club_select\n",
    ").properties(\n",
    "    width=500,\n",
    "    height=500)\n",
    "\n",
    "bars_club_position = alt.Chart().mark_bar().encode(\n",
    "#     color='GeneralPosition',\n",
    "    x='count(GeneralPosition)',\n",
    "    y=alt.Y('GeneralPosition',\n",
    "        sort=alt.EncodingSortField(field='count', order='descending', op='max')\n",
    "    ),\n",
    "    color=alt.condition(club_select, color, alt.value('lightgray')),\n",
    ").add_params(\n",
    "    club_select\n",
    ").properties(\n",
    "    width=500,\n",
    "    height=100,\n",
    ").transform_filter(\n",
    "    brush\n",
    ")\n",
    "\n",
    "# points\n",
    "alt.vconcat(points, bars_club_position, data=sample[['Acceleration', 'GeneralPosition', 'Name', 'Nationality', 'SprintSpeed']])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## A More Complex Dashboard"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "brush_acceleration = alt.selection_interval()\n",
    "nation_select = alt.selection_point(fields=['Nationality'])\n",
    "\n",
    "color = alt.Color('GeneralPosition:N', scale=fixed_colour_scale)\n",
    "\n",
    "name = alt.Chart().mark_circle().encode(\n",
    "    y=alt.Y('Name', sort=alt.EncodingSortField(field='Acceleration', order='descending')),\n",
    "    x=alt.X('Acceleration', scale=alt.Scale(domain=[0,100])),\n",
    "    tooltip=['Name', 'Position', 'Acceleration', 'Nationality'],\n",
    "    color=color\n",
    ").transform_filter(\n",
    "    brush_acceleration\n",
    ").transform_filter(\n",
    "    nation_select\n",
    ").transform_window(\n",
    "    rank='rank(Acceleration)',\n",
    "    sort=[alt.SortField('Acceleration', order='descending')]\n",
    ").transform_filter(\n",
    "    (alt.datum.rank < 50)\n",
    ").properties(\n",
    "    width=90,\n",
    "    height=800,\n",
    "    title='Top 50 Players'\n",
    ")\n",
    "\n",
    "nationality_count = alt.Chart().mark_bar().encode(\n",
    "    y='count(Nationality)',\n",
    "    x=alt.X('Nationality',\n",
    "        sort=alt.EncodingSortField(field='count(Nationality)', order='descending')\n",
    "    ),\n",
    "    color=alt.condition(nation_select, alt.value('#636e72'), alt.value('#dfe6e9')),\n",
    ").transform_filter(\n",
    "    brush_acceleration\n",
    ").add_params(\n",
    "    nation_select\n",
    ").properties(\n",
    "    width=1000,\n",
    "    height=350,\n",
    "    title='Players by Nationality'\n",
    ")\n",
    "\n",
    "acceleration_hist = alt.Chart().mark_bar().encode(\n",
    "    y='count(Acceleration)',\n",
    "    x='Acceleration',\n",
    "    color=alt.condition(brush_acceleration, alt.value('#636e72'), alt.value('#dfe6e9')),\n",
    ").add_params(\n",
    "    brush_acceleration\n",
    ").transform_filter(\n",
    "    nation_select\n",
    ").properties(\n",
    "    width=1000,\n",
    "    height=300,\n",
    "    title='Acceleration Distribution'\n",
    ")\n",
    "\n",
    "\n",
    "alt.hconcat(name, alt.vconcat(nationality_count, acceleration_hist), data=sample[['Name', 'Position', 'Acceleration', 'Nationality', 'GeneralPosition']])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Exercises"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<p style=\"background: #ffeaa7; padding: 10px; color: #2d3436\"><strong>OPTIONAL EXERCISE</strong> | Our users want to be able to view the relationship between overall rating and their Wage (WageNorm).</p>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Answer 1"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<p style=\"background: #ffeaa7; padding: 10px; color: #2d3436\"><strong>OPTIONAL EXERCISE</strong> | Now they want to enable brushing of the plot you've created, to show the distributions of Composure, Acceleration, Finishing, and Dribbling for the selected points, coloured by GeneralPosition.</p>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Answer 2"
   ]
  }
 ],
 "metadata": {
  "hide_input": false,
  "kernelspec": {
   "display_name": ".venv",
   "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"
  },
  "toc": {
   "base_numbering": 1,
   "nav_menu": {},
   "number_sections": true,
   "sideBar": true,
   "skip_h1_title": false,
   "title_cell": "Table of Contents",
   "title_sidebar": "Contents",
   "toc_cell": false,
   "toc_position": {
    "height": "1271px",
    "left": "23px",
    "top": "110px",
    "width": "384px"
   },
   "toc_section_display": true,
   "toc_window_display": true
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}