part1/completed/Completed - Part 1 - Data Types, Graphical Marks, and Visual Encoding Channels.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "2CtO7uNHe4ZE"
   },
   "source": [
    "# Part 1 - Data Types, Graphical Marks, and Visual Encoding Channels\n",
    "\n",
    "- **Objective**: Learn the basic syntax of Vega-Altair, understand how to encode data into visual properties, and customize chart appearances.\n",
    "- **Key Topics**:\n",
    "  - Basic Altair syntax\n",
    "  - Encoding data dimensions\n",
    "  - Customizing chart appearance\n",
    "\n",
    "## Imports"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "colab": {
     "base_uri": "https://localhost:8080/"
    },
    "editable": true,
    "executionInfo": {
     "elapsed": 9276,
     "status": "ok",
     "timestamp": 1716611627107,
     "user": {
      "displayName": "Christopher Davis",
      "userId": "04915168234482370708"
     },
     "user_tz": 420
    },
    "id": "F1QcNjRcxgUj",
    "outputId": "c0701301-f609-46a7-c718-1b821879f46b",
    "slideshow": {
     "slide_type": ""
    },
    "tags": []
   },
   "outputs": [],
   "source": [
    "import altair as alt\n",
    "import pandas as pd\n",
    "from vega_datasets import data\n",
    "\n",
    "print(\"The installed Vega-Altair version is \" + alt.__version__)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "z8EqTPEtwuWT"
   },
   "source": [
    "## Preview: Encoding the same data in different charts\n",
    "\n",
    "To produce visualizations using Vega-Altair (or Seaborn, or Plotly Express, or ggplot2 in R...) we provide:\n",
    "\n",
    "* Data\n",
    "* A choice of mark type (lines or bars or ...)\n",
    "* A choice of how to *encode* values from the data into visual properties of the chart.\n",
    "\n",
    "Consider the following five Altair charts, which all start with the same little 4-row by 2-column pandas DataFrame.  Can you recognize how these charts might be built from this data?"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "id": "zR3p14A05EmM"
   },
   "outputs": [],
   "source": [
    "source = pd.DataFrame({\"category\": [1, 2, 3, 4], \"value\": [2, 2, 10, 4]})"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "colab": {
     "base_uri": "https://localhost:8080/",
     "height": 175
    },
    "executionInfo": {
     "elapsed": 5,
     "status": "ok",
     "timestamp": 1716611676632,
     "user": {
      "displayName": "Christopher Davis",
      "userId": "04915168234482370708"
     },
     "user_tz": 420
    },
    "id": "ccan3jUS5FxG",
    "outputId": "9db34b26-08d2-4995-848c-dcfb5458080e"
   },
   "outputs": [],
   "source": [
    "source"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### A line chart\n",
    "<details>\n",
    "  <summary>Show code</summary>\n",
    "\n",
    "  ```python\n",
    "alt.Chart(source).mark_line(stroke='black').encode(\n",
    "    alt.Y(\"value\").axis(None),\n",
    "    alt.X(\"category\").axis(None)\n",
    ")\n",
    "  ```\n",
    "</details>\n",
    "\n",
    "![Line Chart](../../resources/images/part1/c_line.png)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### A bar chart\n",
    "<details>\n",
    "  <summary>Show code</summary>\n",
    "\n",
    "  ```python\n",
    "alt.Chart(source).mark_bar().encode(\n",
    "    alt.X(\"value\").axis(None),\n",
    "    alt.Y(\"category:O\").axis(None)\n",
    ")\n",
    "  ```\n",
    "</details>\n",
    "\n",
    "![Bar Chart](../../resources/images/part1/c_bar.png)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Another bar chart\n",
    "<details>\n",
    "  <summary>Show code</summary>\n",
    "\n",
    "  ```python\n",
    "alt.Chart(source).mark_bar().encode(\n",
    "    alt.X(\"value\").axis(None),\n",
    "    alt.Color(\"category\").legend(None),\n",
    ")\n",
    "  ```\n",
    "</details>\n",
    "\n",
    "![Another Bar Chart](../../resources/images/part1/c_bar2.png)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### A pie/arc chart\n",
    "<details>\n",
    "  <summary>Show code</summary>\n",
    "\n",
    "  ```python\n",
    "alt.Chart(source).mark_arc().encode(\n",
    "    alt.Theta(\"value\"),\n",
    "    alt.Color(\"category:N\").legend(None)\n",
    ")\n",
    "  ```\n",
    "</details>\n",
    "\n",
    "![A Pie Chart](../../resources/images/part1/c_arc.png)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### A rect chart\n",
    "<details>\n",
    "  <summary>Show code</summary>\n",
    "\n",
    "  ```python\n",
    "alt.Chart(source).mark_rect().encode(\n",
    "    alt.X(\"category:O\").axis(None),\n",
    "    alt.Y(\"value:O\").axis(None)\n",
    ")\n",
    "  ```\n",
    "</details>\n",
    "\n",
    "![A Rect Chart](../../resources/images/part1/c_rect.png)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "ZetMnG9iDC1H"
   },
   "source": [
    "Keep the above examples in mind as we build up to these sorts of charts more systematically below."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "4WgspBitDMYE"
   },
   "source": [
    "## Creating a Chart with Vega-Altair"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "GdV3C0Zvt9oW"
   },
   "source": [
    "Here is a minimal example of an Altair `Chart`.\n",
    "\n",
    "**Comment**.  As with many examples in this tutorial, the following will not work with certain earlier versions of Vega-Altair (earlier versions required explicit data to be provided, even if it was not being used in the specification).  We are using Altair version 5.3.0. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "colab": {
     "base_uri": "https://localhost:8080/",
     "height": 51
    },
    "executionInfo": {
     "elapsed": 201,
     "status": "ok",
     "timestamp": 1716056043891,
     "user": {
      "displayName": "Christopher Davis",
      "userId": "04915168234482370708"
     },
     "user_tz": 420
    },
    "id": "cq7wvtQkm55E",
    "outputId": "45986343-4b19-4f59-cf8b-0045075edc9d"
   },
   "outputs": [],
   "source": [
    "alt.Chart().mark_circle()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "0NlQEdyyr0Ul"
   },
   "source": [
    "To create meaningful visualizations, we need to provide data to Altair and to tell Altair how to encode different features from that data into visual properties of the chart.  We will take our data from the Python `vega_datasets` package.  These datasets come in the form expected by Altair: each row in the dataset corresponds to an observation (or data point) and each column corresponds to a feature (variable, dimension, field)."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "For the rest of this section, we will use data from the Python vega_datasets package. These datasets come in the form expected by Vega-Altair: Each row in the dataset corresponds to an observation (or data point) and each column corresponds to a feature (variable, dimension, field).\n",
    "\n",
    "We'll start with the cars dataset."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "id": "atZWdtv0g59S"
   },
   "outputs": [],
   "source": [
    "df = data.cars()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "First let's take a look at the data types of the columns in the pandas DataFrame."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "colab": {
     "base_uri": "https://localhost:8080/"
    },
    "executionInfo": {
     "elapsed": 223,
     "status": "ok",
     "timestamp": 1716605323344,
     "user": {
      "displayName": "Christopher Davis",
      "userId": "04915168234482370708"
     },
     "user_tz": 420
    },
    "id": "0ObJ9jhux61Q",
    "outputId": "043e9981-31c4-4933-cd56-ee8d9fe6172a"
   },
   "outputs": [],
   "source": [
    "df.dtypes"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "_x4JW2m7mMbN"
   },
   "source": [
    "Let's create a chart using the `circle` mark type, and one encoding channel.  Here we will encode the `\"Weight_in_lbs\"` feature in the visual channel `X`, which specifies the position along the x-axis direction.\n",
    "\n",
    "**Comment**: In online examples, you will typically see the syntax `x=\"Weight_in_lbs\"` instead of `alt.X(\"Weight_in_lbs\")` for this kind of basic usage, but the latter is necessary for customizing the encoding, so we start with it directly."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "colab": {
     "base_uri": "https://localhost:8080/",
     "height": 83
    },
    "executionInfo": {
     "elapsed": 157,
     "status": "ok",
     "timestamp": 1716056103771,
     "user": {
      "displayName": "Christopher Davis",
      "userId": "04915168234482370708"
     },
     "user_tz": 420
    },
    "id": "jIQXDF7QrxMV",
    "outputId": "af9fd320-c9eb-43ee-f6a9-65b7a4c7332f"
   },
   "outputs": [],
   "source": [
    "alt.Chart(df).mark_circle().encode(alt.X(\"Weight_in_lbs\"))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "OiseonjTmOTB"
   },
   "source": [
    "Now, we add a second encoding channel, with the `\"Miles_per_Gallon\"` feature getting encoded in the y-coordinate."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "colab": {
     "base_uri": "https://localhost:8080/",
     "height": 368
    },
    "executionInfo": {
     "elapsed": 215,
     "status": "ok",
     "timestamp": 1716056104727,
     "user": {
      "displayName": "Christopher Davis",
      "userId": "04915168234482370708"
     },
     "user_tz": 420
    },
    "id": "hu9RDvNHsgnQ",
    "outputId": "b04587b4-af66-454a-f50e-03e71fb7b606"
   },
   "outputs": [],
   "source": [
    "alt.Chart(df).mark_circle().encode(alt.X(\"Weight_in_lbs\"), alt.Y(\"Miles_per_Gallon\"))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "a8U01i7pmSiE"
   },
   "source": [
    "Vega-Altair cannot make three-dimensional charts, so you might think we're done, but there are many more encoding channels that can be used.  One of the most frequently and effectively used is the color channel.  Here we use the `\"Origin\"` feature for the color encoding."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "colab": {
     "base_uri": "https://localhost:8080/",
     "height": 368
    },
    "executionInfo": {
     "elapsed": 208,
     "status": "ok",
     "timestamp": 1716056105879,
     "user": {
      "displayName": "Christopher Davis",
      "userId": "04915168234482370708"
     },
     "user_tz": 420
    },
    "id": "VsmFVARgss-q",
    "outputId": "be079503-3bd2-40c0-d76d-51ec85007170"
   },
   "outputs": [],
   "source": [
    "alt.Chart(df).mark_circle().encode(\n",
    "    alt.X(\"Weight_in_lbs\"), alt.Y(\"Miles_per_Gallon\"), alt.Color(\"Origin\")\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "KAeVi1jImkjv"
   },
   "source": [
    "The `tooltip` channel is a little different, but it is one of the most frequently used channels. Displayed points typically correspond to a row in the DataFrame. Using the `tooltip` channel, we can access any fields we want from that row.  \n",
    "\n",
    "For example, by supplying the list of column names `[\"Name\", \"Weight_in_lbs\", \"Miles_per_Gallon\"]` to the `tooltip` channel, we can learn the name, weight, and miles-per-gallon of the given car."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "colab": {
     "base_uri": "https://localhost:8080/",
     "height": 368
    },
    "executionInfo": {
     "elapsed": 8,
     "status": "ok",
     "timestamp": 1716605863565,
     "user": {
      "displayName": "Christopher Davis",
      "userId": "04915168234482370708"
     },
     "user_tz": 420
    },
    "id": "5Y9-0UcN6Z0F",
    "outputId": "b2e425b4-cd1e-4c50-b60e-a2f8f77bb064"
   },
   "outputs": [],
   "source": [
    "alt.Chart(df).mark_circle().encode(\n",
    "    alt.X(\"Weight_in_lbs\"),\n",
    "    alt.Y(\"Miles_per_Gallon\"),\n",
    "    alt.Color(\"Origin\"),\n",
    "    alt.Tooltip([\"Name\", \"Weight_in_lbs\", \"Miles_per_Gallon\"]),\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "WgH3fgZ0vWyL"
   },
   "source": [
    "Less is more. Even if we encode 'five dimensions' of the data, for example supplying `\"Horsepower\"` for the size and `\"Year\"` for the opacity, the resulting chart does not readily convey much additional information."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "colab": {
     "base_uri": "https://localhost:8080/",
     "height": 368
    },
    "executionInfo": {
     "elapsed": 533,
     "status": "ok",
     "timestamp": 1716605887673,
     "user": {
      "displayName": "Christopher Davis",
      "userId": "04915168234482370708"
     },
     "user_tz": 420
    },
    "id": "zUT1eHvhvVm3",
    "outputId": "c847b8ee-dbfe-49aa-e495-d58e3773d068"
   },
   "outputs": [],
   "source": [
    "alt.Chart(df).mark_circle().encode(\n",
    "    alt.X(\"Weight_in_lbs\"),\n",
    "    alt.Y(\"Miles_per_Gallon\"),\n",
    "    alt.Color(\"Origin\"),\n",
    "    alt.Size(\"Horsepower\"),\n",
    "    alt.Opacity(\"Year\"),\n",
    "    alt.Tooltip([\"Name\", \"Weight_in_lbs\", \"Miles_per_Gallon\"]),\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "LANFcvWRoJH7"
   },
   "source": [
    "Let's go back to our tiny chart that did not encode the `x` or `y` channels, but this time we will pass the cars DataFrame.  It looks the same as when we did not pass any data, but this time, let's add a tooltip."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "colab": {
     "base_uri": "https://localhost:8080/",
     "height": 81
    },
    "executionInfo": {
     "elapsed": 7,
     "status": "ok",
     "timestamp": 1716605455369,
     "user": {
      "displayName": "Christopher Davis",
      "userId": "04915168234482370708"
     },
     "user_tz": 420
    },
    "id": "tFIlqIdLoHdY",
    "outputId": "1be2adb6-d6a1-44dd-df30-fc36f330da61"
   },
   "outputs": [],
   "source": [
    "alt.Chart(df).mark_circle().encode(alt.Tooltip(\"Name\")).properties(height=50)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "S0gbOgCYqaLK"
   },
   "source": [
    "Compare the tooltip value to the final rows of our DataFrame. What do you notice?"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "colab": {
     "base_uri": "https://localhost:8080/",
     "height": 206
    },
    "executionInfo": {
     "elapsed": 162,
     "status": "ok",
     "timestamp": 1716605505501,
     "user": {
      "displayName": "Christopher Davis",
      "userId": "04915168234482370708"
     },
     "user_tz": 420
    },
    "id": "EDOy7I-eqKlx",
    "outputId": "78bb3726-e0c0-491a-96f4-841d586457eb"
   },
   "outputs": [],
   "source": [
    "df.tail()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "szDetKmKqjdb"
   },
   "source": [
    "As another example of the same phenomenon, of marks being displayed \"on top of each other\", consider a bar chart (so we switch from circle marks to the bar marks) using `\"Miles_per_Gallon\"` for the x-axis encoding.  Here Altair tries to resolve the above issue for us, by stacking the bars."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "colab": {
     "base_uri": "https://localhost:8080/",
     "height": 83
    },
    "executionInfo": {
     "elapsed": 240,
     "status": "ok",
     "timestamp": 1716605644167,
     "user": {
      "displayName": "Christopher Davis",
      "userId": "04915168234482370708"
     },
     "user_tz": 420
    },
    "id": "5Fu_ja29qi5O",
    "outputId": "0a55fcac-646b-4162-cd73-1f3b2fd22831"
   },
   "outputs": [],
   "source": [
    "alt.Chart(df).mark_bar().encode(alt.X(\"Miles_per_Gallon\"))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "But here's what it looks like if we manually disable stacking.  We also add a tooltip showing \"Name\" and \"Miles_per_Gallon\" to help us see what's going on."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "colab": {
     "base_uri": "https://localhost:8080/",
     "height": 113
    },
    "executionInfo": {
     "elapsed": 6,
     "status": "ok",
     "timestamp": 1716605694539,
     "user": {
      "displayName": "Christopher Davis",
      "userId": "04915168234482370708"
     },
     "user_tz": 420
    },
    "id": "YXzMrKXFq2sw",
    "outputId": "a0ce710f-ec6e-45cd-dc16-73f4d6346106"
   },
   "outputs": [],
   "source": [
    "alt.Chart(df).mark_bar().encode(\n",
    "    alt.X(\"Miles_per_Gallon\").stack(False), alt.Tooltip([\"Name\", \"Miles_per_Gallon\"])\n",
    ").properties(height=50)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Try hovering right around the extreme ends of the bar (all the way to left and to the right). Compare the vehicle with the maximum fuel efficiency."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "colab": {
     "base_uri": "https://localhost:8080/"
    },
    "executionInfo": {
     "elapsed": 155,
     "status": "ok",
     "timestamp": 1716605758676,
     "user": {
      "displayName": "Christopher Davis",
      "userId": "04915168234482370708"
     },
     "user_tz": 420
    },
    "id": "0dZHdhHMrNFO",
    "outputId": "48efc6f0-81e7-40d5-a979-54165851d49a"
   },
   "outputs": [],
   "source": [
    "df.loc[df[\"Miles_per_Gallon\"].idxmax()]"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Why are things different on the left end of the bar?"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "df.loc[df[\"Miles_per_Gallon\"].idxmin()]"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "YJNqgD8LzdWx"
   },
   "source": [
    "## The effect of data types\n",
    "\n",
    "Let's go back to our earlier chart, which included a color encoding and a tooltip."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "colab": {
     "base_uri": "https://localhost:8080/",
     "height": 368
    },
    "executionInfo": {
     "elapsed": 263,
     "status": "ok",
     "timestamp": 1716605796612,
     "user": {
      "displayName": "Christopher Davis",
      "userId": "04915168234482370708"
     },
     "user_tz": 420
    },
    "id": "q-MlVbGyzwA-",
    "outputId": "ef26b023-e4a8-43a6-efb5-45238e9a4366"
   },
   "outputs": [],
   "source": [
    "alt.Chart(df).mark_circle().encode(\n",
    "    alt.X(\"Weight_in_lbs\"),\n",
    "    alt.Y(\"Miles_per_Gallon\"),\n",
    "    alt.Color(\"Origin\"),\n",
    "    alt.Tooltip([\"Name\", \"Weight_in_lbs\", \"Miles_per_Gallon\"]),\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "IdR3r_rrzz7W"
   },
   "source": [
    "Notice the drastic change by switching to the `\"Cylinders\"` field  for the color encoding."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "colab": {
     "base_uri": "https://localhost:8080/",
     "height": 368
    },
    "executionInfo": {
     "elapsed": 299,
     "status": "ok",
     "timestamp": 1716056534060,
     "user": {
      "displayName": "Christopher Davis",
      "userId": "04915168234482370708"
     },
     "user_tz": 420
    },
    "id": "v0gcLubzzxwB",
    "outputId": "da91d885-adc3-4fcc-e5dc-8a87399c2ec1"
   },
   "outputs": [],
   "source": [
    "alt.Chart(df).mark_circle().encode(\n",
    "    alt.X(\"Weight_in_lbs\"),\n",
    "    alt.Y(\"Miles_per_Gallon\"),\n",
    "    alt.Color(\"Cylinders\"),\n",
    "    tooltip=[\"Name\", \"Weight_in_lbs\", \"Miles_per_Gallon\"],\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "igyj5nBF0HuA"
   },
   "source": [
    "Why is there such a significant difference?  By default, Altair tries to predict how you want the visualization to appear.  Let's return to the earlier chart and consider all the small decisions that are being made."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "colab": {
     "base_uri": "https://localhost:8080/",
     "height": 368
    },
    "executionInfo": {
     "elapsed": 290,
     "status": "ok",
     "timestamp": 1714860344058,
     "user": {
      "displayName": "Christopher Davis",
      "userId": "04915168234482370708"
     },
     "user_tz": 420
    },
    "id": "-IBErGZk0smo",
    "outputId": "cd571415-8727-42ab-c2b9-121d3c95346b"
   },
   "outputs": [],
   "source": [
    "alt.Chart(df).mark_circle().encode(\n",
    "    alt.X(\"Weight_in_lbs\"), alt.Y(\"Miles_per_Gallon\"), alt.Color(\"Origin\")\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "cKEI1HhX1hWN"
   },
   "source": [
    "Usually, we don't have to consciously think about these decisions, but just to get some appreciation for everything that's going on \"under the hood\", here is the Vega code corresponding to the above chart.  (I got this by clicking on the three dots to the right of the chart, and going to the Vega Editor, and scrolling down to the \"Compiled Vega\" section.  I've deleted most of the data, which is written out explicitly in the corresponding Vega specification.)\n",
    "\n",
    "We will never have to explicitly engage with this Vega code, but it gives a sense for the vast amount of customization that is possible (and that must be somehow \"defaulted\" by Altair when not explicitly specified by us).\n",
    "```\n",
    "{\n",
    "  \"$schema\": \"https://vega.github.io/schema/vega/v5.json\",\n",
    "  \"background\": \"white\",\n",
    "  \"padding\": 5,\n",
    "  \"width\": 300,\n",
    "  \"height\": 300,\n",
    "  \"style\": \"cell\",\n",
    "  \"data\": [\n",
    "    {\n",
    "      \"name\": \"data-583e73726c1545c56c203344161a975c\",\n",
    "      \"values\": [\n",
    "        {\n",
    "          \"Name\": \"chevrolet chevelle malibu\",\n",
    "          \"Miles_per_Gallon\": 18,\n",
    "          \"Cylinders\": 8,\n",
    "          \"Displacement\": 307,\n",
    "          \"Horsepower\": 130,\n",
    "          \"Weight_in_lbs\": 3504,\n",
    "          \"Acceleration\": 12,\n",
    "          \"Year\": \"1970-01-01T00:00:00\",\n",
    "          \"Origin\": \"USA\"\n",
    "        },\n",
    "        {\n",
    "          \"Name\": \"buick skylark 320\",\n",
    "          \"Miles_per_Gallon\": 15,\n",
    "          \"Cylinders\": 8,\n",
    "          \"Displacement\": 350,\n",
    "          \"Horsepower\": 165,\n",
    "          \"Weight_in_lbs\": 3693,\n",
    "          \"Acceleration\": 11.5,\n",
    "          \"Year\": \"1970-01-01T00:00:00\",\n",
    "          \"Origin\": \"USA\"\n",
    "        },\n",
    "        ...\n",
    "      ]\n",
    "    },\n",
    "    {\n",
    "      \"name\": \"data_0\",\n",
    "      \"source\": \"data-583e73726c1545c56c203344161a975c\",\n",
    "      \"transform\": [\n",
    "        {\n",
    "          \"type\": \"filter\",\n",
    "          \"expr\": \"isValid(datum[\\\"Weight_in_lbs\\\"]) && isFinite(+datum[\\\"Weight_in_lbs\\\"]) && isValid(datum[\\\"Miles_per_Gallon\\\"]) && isFinite(+datum[\\\"Miles_per_Gallon\\\"])\"\n",
    "        }\n",
    "      ]\n",
    "    }\n",
    "  ],\n",
    "  \"marks\": [\n",
    "    {\n",
    "      \"name\": \"marks\",\n",
    "      \"type\": \"symbol\",\n",
    "      \"style\": [\"circle\"],\n",
    "      \"from\": {\"data\": \"data_0\"},\n",
    "      \"encode\": {\n",
    "        \"update\": {\n",
    "          \"opacity\": {\"value\": 0.7},\n",
    "          \"fill\": {\"scale\": \"color\", \"field\": \"Origin\"},\n",
    "          \"ariaRoleDescription\": {\"value\": \"circle\"},\n",
    "          \"description\": {\n",
    "            \"signal\": \"\\\"Weight_in_lbs: \\\" + (format(datum[\\\"Weight_in_lbs\\\"], \\\"\\\")) + \\\"; Miles_per_Gallon: \\\" + (format(datum[\\\"Miles_per_Gallon\\\"], \\\"\\\")) + \\\"; Origin: \\\" + (isValid(datum[\\\"Origin\\\"]) ? datum[\\\"Origin\\\"] : \\\"\\\"+datum[\\\"Origin\\\"])\"\n",
    "          },\n",
    "          \"x\": {\"scale\": \"x\", \"field\": \"Weight_in_lbs\"},\n",
    "          \"y\": {\"scale\": \"y\", \"field\": \"Miles_per_Gallon\"},\n",
    "          \"shape\": {\"value\": \"circle\"}\n",
    "        }\n",
    "      }\n",
    "    }\n",
    "  ],\n",
    "  \"scales\": [\n",
    "    {\n",
    "      \"name\": \"x\",\n",
    "      \"type\": \"linear\",\n",
    "      \"domain\": {\"data\": \"data_0\", \"field\": \"Weight_in_lbs\"},\n",
    "      \"range\": [0, {\"signal\": \"width\"}],\n",
    "      \"nice\": true,\n",
    "      \"zero\": true\n",
    "    },\n",
    "    {\n",
    "      \"name\": \"y\",\n",
    "      \"type\": \"linear\",\n",
    "      \"domain\": {\"data\": \"data_0\", \"field\": \"Miles_per_Gallon\"},\n",
    "      \"range\": [{\"signal\": \"height\"}, 0],\n",
    "      \"nice\": true,\n",
    "      \"zero\": true\n",
    "    },\n",
    "    {\n",
    "      \"name\": \"color\",\n",
    "      \"type\": \"ordinal\",\n",
    "      \"domain\": {\"data\": \"data_0\", \"field\": \"Origin\", \"sort\": true},\n",
    "      \"range\": \"category\"\n",
    "    }\n",
    "  ],\n",
    "  \"axes\": [\n",
    "    {\n",
    "      \"scale\": \"x\",\n",
    "      \"orient\": \"bottom\",\n",
    "      \"gridScale\": \"y\",\n",
    "      \"grid\": true,\n",
    "      \"tickCount\": {\"signal\": \"ceil(width/40)\"},\n",
    "      \"domain\": false,\n",
    "      \"labels\": false,\n",
    "      \"aria\": false,\n",
    "      \"maxExtent\": 0,\n",
    "      \"minExtent\": 0,\n",
    "      \"ticks\": false,\n",
    "      \"zindex\": 0\n",
    "    },\n",
    "    {\n",
    "      \"scale\": \"y\",\n",
    "      \"orient\": \"left\",\n",
    "      \"gridScale\": \"x\",\n",
    "      \"grid\": true,\n",
    "      \"tickCount\": {\"signal\": \"ceil(height/40)\"},\n",
    "      \"domain\": false,\n",
    "      \"labels\": false,\n",
    "      \"aria\": false,\n",
    "      \"maxExtent\": 0,\n",
    "      \"minExtent\": 0,\n",
    "      \"ticks\": false,\n",
    "      \"zindex\": 0\n",
    "    },\n",
    "    {\n",
    "      \"scale\": \"x\",\n",
    "      \"orient\": \"bottom\",\n",
    "      \"grid\": false,\n",
    "      \"title\": \"Weight_in_lbs\",\n",
    "      \"labelFlush\": true,\n",
    "      \"labelOverlap\": true,\n",
    "      \"tickCount\": {\"signal\": \"ceil(width/40)\"},\n",
    "      \"zindex\": 0\n",
    "    },\n",
    "    {\n",
    "      \"scale\": \"y\",\n",
    "      \"orient\": \"left\",\n",
    "      \"grid\": false,\n",
    "      \"title\": \"Miles_per_Gallon\",\n",
    "      \"labelOverlap\": true,\n",
    "      \"tickCount\": {\"signal\": \"ceil(height/40)\"},\n",
    "      \"zindex\": 0\n",
    "    }\n",
    "  ],\n",
    "  \"legends\": [\n",
    "    {\n",
    "      \"fill\": \"color\",\n",
    "      \"symbolType\": \"circle\",\n",
    "      \"title\": \"Origin\",\n",
    "      \"encode\": {\"symbols\": {\"update\": {\"opacity\": {\"value\": 0.7}}}}\n",
    "    }\n",
    "  ]\n",
    "}\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "XCslztDN3St3"
   },
   "source": [
    "Back to our original question of why the colors looked so different. The reason is that when Altair is presented with strings (as in the \"Origin\" column), it defaults to a *Nominal* encoding data type. That Nominal encoding data type is what is responsible for the colors we saw above.\n",
    "\n",
    "In contrast, when Altair is presented with numeric values, it defaults to a *Quantitative* data type.  In our case, there are only five possible values for the number of cylinders (and three of those values are by far the most prevalent), but the quantitative color encoding chosen by Altair adapts well to any number of values."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "colab": {
     "base_uri": "https://localhost:8080/",
     "height": 368
    },
    "executionInfo": {
     "elapsed": 525,
     "status": "ok",
     "timestamp": 1716606009304,
     "user": {
      "displayName": "Christopher Davis",
      "userId": "04915168234482370708"
     },
     "user_tz": 420
    },
    "id": "rtzGCgtv4QqY",
    "outputId": "2e25799b-7b24-4272-ed55-8d9c61e23a67"
   },
   "outputs": [],
   "source": [
    "alt.Chart(df).mark_circle().encode(\n",
    "    alt.X(\"Weight_in_lbs\"), alt.Y(\"Miles_per_Gallon\"), alt.Color(\"Cylinders\")\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "QMgqg89f4URp"
   },
   "source": [
    "Altair provides a convenient shorthand `:N` for specifying a Nominal encoding data type.\n",
    "\n",
    "**Warning**.  If Altair cannot access the data directly (for example, because it is provided with a URL instead of a DataFrame), then these encoding shorthands must be provided, as Altair cannot infer a data type directly. \n",
    "\n",
    "[Reference](https://altair-viz.github.io/user_guide/encodings/index.html#encoding-data-types) for the five available encoding types."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "colab": {
     "base_uri": "https://localhost:8080/",
     "height": 368
    },
    "executionInfo": {
     "elapsed": 191,
     "status": "ok",
     "timestamp": 1716606020020,
     "user": {
      "displayName": "Christopher Davis",
      "userId": "04915168234482370708"
     },
     "user_tz": 420
    },
    "id": "x-jfQTG40R5f",
    "outputId": "07c7aa2e-8b1b-4a49-db3c-b0b0434decad"
   },
   "outputs": [],
   "source": [
    "alt.Chart(df).mark_circle().encode(\n",
    "    alt.X(\"Weight_in_lbs\"), alt.Y(\"Miles_per_Gallon\"), alt.Color(\"Cylinders:N\")\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "U8uMmS1J4idc"
   },
   "source": [
    "There is a third reasonable choice of encoding type for these \"Cylinders\" values, which is *Ordinal*. The distinction between Nominal (:N) and Ordinal (:O) is that the order is important in the 'Ordinal' case, and by default, Altair chooses a color scheme that reflects this ordering. The resulting colors look quite similar to the colors used in the default Quantitative (:Q) encoding, but notice the difference in legends."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "colab": {
     "base_uri": "https://localhost:8080/",
     "height": 368
    },
    "executionInfo": {
     "elapsed": 338,
     "status": "ok",
     "timestamp": 1714797425563,
     "user": {
      "displayName": "Christopher Davis",
      "userId": "04915168234482370708"
     },
     "user_tz": 420
    },
    "id": "vrDkferB5COO",
    "outputId": "26409ad1-0d73-47ef-bf15-154fd26528e4"
   },
   "outputs": [],
   "source": [
    "alt.Chart(df).mark_circle().encode(\n",
    "    x=\"Weight_in_lbs\", y=\"Miles_per_Gallon\", color=\"Cylinders:O\"\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "PSitlbv18-z9"
   },
   "source": [
    "Here is an example of changing the color scheme to the \"plasma\" color scheme.  See the Vega documentation for the [possible choices of color scheme](https://vega.github.io/vega/docs/schemes/)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "colab": {
     "base_uri": "https://localhost:8080/",
     "height": 368
    },
    "executionInfo": {
     "elapsed": 148,
     "status": "ok",
     "timestamp": 1716056850492,
     "user": {
      "displayName": "Christopher Davis",
      "userId": "04915168234482370708"
     },
     "user_tz": 420
    },
    "id": "ERg9f71i9MZi",
    "outputId": "cee047be-c59a-4886-e6f5-20261b2b7d91"
   },
   "outputs": [],
   "source": [
    "alt.Chart(df).mark_circle().encode(\n",
    "    alt.X(\"Weight_in_lbs\"),\n",
    "    alt.Y(\"Miles_per_Gallon\"),\n",
    "    alt.Color(\"Cylinders\").scale(scheme=\"plasma\"),\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "5B8G-21GCJHR"
   },
   "source": [
    "## Faceting vs Concatenating\n",
    "\n",
    "Here we will consider two fundamentally different scenarios in which we will display multiple charts using the same data side-by-side. Both scenarios will reinforce the concepts considered above."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "PiypI31DvOIc"
   },
   "source": [
    "### Scenario 1: Using different fields in the encoding\n",
    "We first define a helper function `make_chart` that takes a string y as input, and as output returns an Altair Chart for the cars data, using \"Weight_in_lbs\" for the x-axis encoding, \"Cylinders\" for the color encoding, and `y` for the y-axis encoding.  We also use the \"plasma\" color scheme."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "id": "aaUDvMMpCiGt"
   },
   "outputs": [],
   "source": [
    "def make_chart(y):\n",
    "    return (\n",
    "        alt.Chart(df)\n",
    "        .mark_circle()\n",
    "        .encode(\n",
    "            alt.X(\"Weight_in_lbs\"),\n",
    "            alt.Y(y),\n",
    "            alt.Color(\"Cylinders\").scale(scheme=\"plasma\"),\n",
    "        )\n",
    "    )"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "Bq-ZE8gKwXhY"
   },
   "source": [
    "What if we want to display `make_chart(\"Miles_per_Gallon\")`, `make_chart(\"Acceleration\")`, and `make_chart(\"Displacement\")` side-by-side?  To accomplish this, we use Altair's `hconcat` function."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "id": "dzfAjXAgCs0t"
   },
   "outputs": [],
   "source": [
    "chart_list = [\n",
    "    make_chart(y) for y in [\"Miles_per_Gallon\", \"Acceleration\", \"Displacement\"]\n",
    "]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "colab": {
     "base_uri": "https://localhost:8080/",
     "height": 370
    },
    "executionInfo": {
     "elapsed": 201,
     "status": "ok",
     "timestamp": 1716058295795,
     "user": {
      "displayName": "Christopher Davis",
      "userId": "04915168234482370708"
     },
     "user_tz": 420
    },
    "id": "Uy8bgQFsC3QY",
    "outputId": "9f5746c7-5e22-4e33-cbfb-ea6b62b59f6e"
   },
   "outputs": [],
   "source": [
    "alt.hconcat(*chart_list)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Comment**.  Version 5 of Vega-Altair was released in May 2023.  As mentioned above, much of the code used in this tutorial, including the `scale` method just used, does not work with Altair versions 4 and earlier.  In versions 4 and earlier, the so-called *attribute syntax* would have been necessary, which in this case takes the form,\n",
    "\n",
    "`alt.Color(\"Cylinders\", scale=alt.Scale(scheme=\"plasma\"))`"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "editable": true,
    "id": "5as7MnBWxCFQ",
    "slideshow": {
     "slide_type": ""
    },
    "tags": []
   },
   "source": [
    "### Scenario 2: Using different subsets of the data\n",
    "\n",
    "Notice that each car in the dataset occurs in all three charts above.  In the following scenario we again have three charts displayed side-by-side, but each car appears in exactly one of the three.  Here we *facet* the data into three distinct subsets, and display the corresponding subsets side-by-side.\n",
    "\n",
    "To accomplish this, we actually use a new encoding channel, the *column* encoding channel.  In the following, the \"Origin\" value of the DataFrame gets encoded in the column visual property of the chart.  (Which column the point is displayed in depends on the \"Origin\" value of the corresponding car.)  Here we use the `\"Miles_per_Gallon\"` field for the y-axis encoding in all three charts.  Unlike the above example, in the following, the same fields are used in all three charts."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "colab": {
     "base_uri": "https://localhost:8080/",
     "height": 416
    },
    "executionInfo": {
     "elapsed": 6,
     "status": "ok",
     "timestamp": 1716058134701,
     "user": {
      "displayName": "Christopher Davis",
      "userId": "04915168234482370708"
     },
     "user_tz": 420
    },
    "id": "8Ouf8fXNCHCs",
    "outputId": "25b77b0e-8d51-40b9-d18a-f9a6b4203b19"
   },
   "outputs": [],
   "source": [
    "alt.Chart(df).mark_circle().encode(\n",
    "    alt.X(\"Weight_in_lbs\"),\n",
    "    alt.Y(\"Miles_per_Gallon\"),\n",
    "    alt.Color(\"Cylinders\").scale(scheme=\"plasma\"),\n",
    "    alt.Column(\"Origin\"),\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "aYy8MUthAZYi"
   },
   "source": [
    "## Scale vs Axis\n",
    "\n",
    "Quoting the [Vega-Lite documentation](https://vega.github.io/vega-lite/docs/scale.html):\n",
    "\n",
    "> Scales are functions that transform a domain of data values (numbers, dates, strings, etc.) to a range of visual values (pixels, colors, sizes).\n",
    "\n",
    "Again quoting the [Vega-Lite documentation](https://vega.github.io/vega-lite/docs/axis.html):\n",
    "\n",
    "> Axes provide axis lines, ticks, and labels to convey how a positional range represents a data range. Simply put, axes visualize scales.\n",
    "\n",
    "Let's see some examples of this in Altair.  For this, we will work with a small four-row DataFrame containing only those rows from the cars dataset corresponding to \"amc hornet\".  We extract this 4-row DataFrame using pandas.  (See Part 2 for a method to accomplish something similar within Altair.)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "colab": {
     "base_uri": "https://localhost:8080/",
     "height": 175
    },
    "executionInfo": {
     "elapsed": 151,
     "status": "ok",
     "timestamp": 1716063810672,
     "user": {
      "displayName": "Christopher Davis",
      "userId": "04915168234482370708"
     },
     "user_tz": 420
    },
    "id": "UgFZpF9tAYhC",
    "outputId": "1e16b47d-5b73-4c61-b723-c933a67996f3"
   },
   "outputs": [],
   "source": [
    "df_toyota = df[df[\"Name\"] == \"amc hornet\"]\n",
    "df_toyota"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "AKqNnkCJ2VkF"
   },
   "source": [
    "As an example of the types of options that relate to an \"axis\", in the following we adjust the `labelAngle` and the `title` of the axis.\n",
    "\n",
    "> **Aside**.  Why the non-Pythonic capitalization of `labelAngle`?  Most of these options are defined in Vega or Vega-Lite, which are written in JavaScript and TypeScript respectively, so many options are named using the JavaScript camel case capitalization style."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "colab": {
     "base_uri": "https://localhost:8080/",
     "height": 381
    },
    "executionInfo": {
     "elapsed": 187,
     "status": "ok",
     "timestamp": 1716063814940,
     "user": {
      "displayName": "Christopher Davis",
      "userId": "04915168234482370708"
     },
     "user_tz": 420
    },
    "id": "_rjS110QAmXa",
    "outputId": "ffbdf2f6-2b56-44ef-fa86-2cd283671645"
   },
   "outputs": [],
   "source": [
    "alt.Chart(df_toyota).mark_bar().encode(\n",
    "    alt.X(\"year(Year):O\").axis(labelAngle=-90, title=\"Year\"), alt.Y(\"Miles_per_Gallon\")\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "2MvFgEcC24EW"
   },
   "source": [
    "As an example of what is meant by transforming data values to visual values (as in the above description of `scale` from the Vega-Lite documentation), we explicitly specify the `domain` (four explicit years) and the `range` (three explicit colors, after which it will start cycling)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "colab": {
     "base_uri": "https://localhost:8080/",
     "height": 381
    },
    "executionInfo": {
     "elapsed": 162,
     "status": "ok",
     "timestamp": 1716064492908,
     "user": {
      "displayName": "Christopher Davis",
      "userId": "04915168234482370708"
     },
     "user_tz": 420
    },
    "id": "YcKryZ1UaLI_",
    "outputId": "5c5d8ff8-9d13-4677-b6d8-61f7ee6ef86a"
   },
   "outputs": [],
   "source": [
    "alt.Chart(df_toyota).mark_bar().encode(\n",
    "    alt.X(\"year(Year):O\").axis(labelAngle=-90, title=\"Year\"),\n",
    "    alt.Y(\"Miles_per_Gallon\"),\n",
    "    alt.Color(\"year(Year):O\")\n",
    "    .scale(domain=[1970, 1973, 1974, 1976], range=[\"black\", \"blue\", \"orange\"])\n",
    "    .legend(title=\"Year\"),\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "CZWcapNA6r_-"
   },
   "source": [
    "For another example of customizing scale, we will switch to a different dataset from vega_datasets, this time the gapminder dataset, and we will restrict to the year 2005."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "id": "1Qdussg4lXLy"
   },
   "outputs": [],
   "source": [
    "# Restrict to year 2005\n",
    "df = data.gapminder()\n",
    "df = df[df[\"year\"] == 2005].copy()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "KqwIy6ejmQtX"
   },
   "source": [
    "Let's first try to plot the data using columns from the DataFrame `df`:\n",
    "* \"country\" for the x-encoding\n",
    "* \"pop\" for the y-encoding\n",
    "* \"pop\" also for the color\n",
    "\n",
    "What could we do to improve the resulting chart?"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "colab": {
     "base_uri": "https://localhost:8080/",
     "height": 467
    },
    "executionInfo": {
     "elapsed": 185,
     "status": "ok",
     "timestamp": 1716068047691,
     "user": {
      "displayName": "Christopher Davis",
      "userId": "04915168234482370708"
     },
     "user_tz": 420
    },
    "id": "wqQUi50wlZMZ",
    "outputId": "5c1fe8ac-763a-4952-fe1c-2daaf0cd901e"
   },
   "outputs": [],
   "source": [
    "alt.Chart(df).mark_bar().encode(alt.X(\"country\"), alt.Y(\"pop\"), alt.Color(\"pop\"))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "7f5zxVBS7gZB"
   },
   "source": [
    "Here we will make three changes.\n",
    "* Sort the bars by decreasing population value.\n",
    "* Use a log scale for the y-encoding.  (Notice how now we can differentiate between the populations of Barbados and Jamaica, for example.)\n",
    "* In fact, we will also use a log scale for the color-encoding and switch to the 'viridis' theme."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "colab": {
     "base_uri": "https://localhost:8080/",
     "height": 467
    },
    "executionInfo": {
     "elapsed": 151,
     "status": "ok",
     "timestamp": 1716068050126,
     "user": {
      "displayName": "Christopher Davis",
      "userId": "04915168234482370708"
     },
     "user_tz": 420
    },
    "id": "Ic_NzNi5loew",
    "outputId": "7de08778-3490-4611-a78f-8219a1c25843"
   },
   "outputs": [],
   "source": [
    "alt.Chart(df).mark_bar().encode(\n",
    "    alt.X(\"country\").sort(\"-y\"),\n",
    "    alt.Y(\"pop\").scale(type=\"log\"),\n",
    "    alt.Color(\"pop\").scale(type=\"log\", scheme=\"viridis\"),\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "K9uY18TH93JI"
   },
   "source": [
    "## Needing data in long form / tidy form\n",
    "\n",
    "In the following example, we again use the gapminder data, but this time with all years, not just 2005."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "id": "v-n9rOSQoTEB"
   },
   "outputs": [],
   "source": [
    "# include years\n",
    "df = data.gapminder()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "zbR2MOugoasz"
   },
   "source": [
    "Note that the following correlation data is not in *tidy* form ([reference](https://www.jstatsoft.org/article/view/v059i10)).  When data is in tidy form, \"each variable is a column, each observation is a row\".  Here, on the other hand, every column corresponds to the same variable (correlation in this case)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "colab": {
     "base_uri": "https://localhost:8080/",
     "height": 206
    },
    "executionInfo": {
     "elapsed": 176,
     "status": "ok",
     "timestamp": 1716068241422,
     "user": {
      "displayName": "Christopher Davis",
      "userId": "04915168234482370708"
     },
     "user_tz": 420
    },
    "id": "xdESJCLMmX3O",
    "outputId": "d6d9f5a4-583c-4ccf-850a-e274e0e1e924"
   },
   "outputs": [],
   "source": [
    "df_temp = df.corr(numeric_only=True)\n",
    "df_temp"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "T3lKtvBjo3lL"
   },
   "source": [
    "As an intermediate step, we convert the following into a pandas Series with two levels of index, using the `stack` method (See pandas [stack documentation](https://pandas.pydata.org/docs/reference/api/pandas.DataFrame.stack.html))."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "colab": {
     "base_uri": "https://localhost:8080/"
    },
    "executionInfo": {
     "elapsed": 132,
     "status": "ok",
     "timestamp": 1716068245769,
     "user": {
      "displayName": "Christopher Davis",
      "userId": "04915168234482370708"
     },
     "user_tz": 420
    },
    "id": "do11d51NlVsS",
    "outputId": "b7f7d22d-f507-44ea-c240-6afd04106356"
   },
   "outputs": [],
   "source": [
    "df_temp.stack()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "4c2hD46wo-rF"
   },
   "source": [
    "Next we convert back into a pandas DataFrame.  (Often when I use `reset_index`, I use it with `reset_index(drop=True)`, but in this instance we absolutely *do not* want to drop the index labels, since without them, we have no way of knowing to what the correlation values correspond.)\n",
    "\n",
    "You probably agree the following DataFrame is harder to read than the original, but the advantage is that it is now in a *tidy* format and can be easily used by Altair to construct a chart.  This sort of presentation of the data is also said to be in \"long form\"; note that it is now 25 rows instead of 5 rows."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "colab": {
     "base_uri": "https://localhost:8080/",
     "height": 833
    },
    "executionInfo": {
     "elapsed": 182,
     "status": "ok",
     "timestamp": 1716068473792,
     "user": {
      "displayName": "Christopher Davis",
      "userId": "04915168234482370708"
     },
     "user_tz": 420
    },
    "id": "6AvGJHr4o9nn",
    "outputId": "fbf8a154-a162-4b3f-8e36-15fa4f869a30"
   },
   "outputs": [],
   "source": [
    "dfc = df_temp.stack().reset_index()\n",
    "dfc.columns = [\"Predictor 1\", \"Predictor 2\", \"Correlation\"]\n",
    "\n",
    "dfc"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "9MrAVU0RAOgQ"
   },
   "source": [
    "Here we make a chart using `mark_rect` instead of `mark_circle`.  The resulting rectangle chart is a visualization of the pandas correlation DataFrame we started with."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "colab": {
     "base_uri": "https://localhost:8080/",
     "height": 301
    },
    "executionInfo": {
     "elapsed": 166,
     "status": "ok",
     "timestamp": 1716068557618,
     "user": {
      "displayName": "Christopher Davis",
      "userId": "04915168234482370708"
     },
     "user_tz": 420
    },
    "id": "zAbwI3TvptpL",
    "outputId": "15b73f53-4a91-4271-981b-022ee45d475c"
   },
   "outputs": [],
   "source": [
    "alt.Chart(dfc).mark_rect().encode(\n",
    "    alt.X(\"Predictor 1\"), alt.Y(\"Predictor 2\"), alt.Color(\"Correlation\")\n",
    ").properties(width=200, height=200)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "qInVLkFCqM9U"
   },
   "source": [
    "A diverging color scheme is more appropriate here as it makes it easy to identify positive and negative correlations. Adding `domainMid=0` to the scale ensures that the middle of the color scale is located at 0.0."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "colab": {
     "base_uri": "https://localhost:8080/",
     "height": 301
    },
    "executionInfo": {
     "elapsed": 143,
     "status": "ok",
     "timestamp": 1716068626907,
     "user": {
      "displayName": "Christopher Davis",
      "userId": "04915168234482370708"
     },
     "user_tz": 420
    },
    "id": "cfrXpml1qMP4",
    "outputId": "69c30dcc-01e7-4cd0-8e31-dfce64989ffe"
   },
   "outputs": [],
   "source": [
    "alt.Chart(dfc).mark_rect().encode(\n",
    "    alt.X(\"Predictor 1\"),\n",
    "    alt.Y(\"Predictor 2\"),\n",
    "    alt.Color(\"Correlation\").scale(scheme=\"purpleorange\", domainMid=0.0),\n",
    ").properties(width=200, height=200)"
   ]
  }
 ],
 "metadata": {
  "colab": {
   "provenance": []
  },
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.12.1"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}