Annotations_in_Vega_Altair.ipynb

{
  "nbformat": 4,
  "nbformat_minor": 0,
  "metadata": {
    "colab": {
      "provenance": [],
      "include_colab_link": true
    },
    "kernelspec": {
      "name": "python3",
      "display_name": "Python 3"
    },
    "language_info": {
      "name": "python"
    }
  },
  "cells": [
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "view-in-github",
        "colab_type": "text"
      },
      "source": [
        "<a href=\"https://colab.research.google.com/github/odu-cs625-datavis/public-fall24-mcw/blob/main/Annotations_in_Vega_Altair.ipynb\" target=\"_parent\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open In Colab\"/></a>"
      ]
    },
    {
      "cell_type": "markdown",
      "source": [
        "# **Vega-Altair Annotations Examples**"
      ],
      "metadata": {
        "id": "VZU1Na7MtKvC"
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "This notebook contains examples of customizing and adding annotations to Vega-Altair charts.\n",
        "\n",
        "The other notebooks (Seaborn, Vega-Lite) included examples from [Chapter 28, Graphics for Communication](https://byuidatascience.github.io/python4ds/graphics-for-communication.html) from [Python for Data Science](https://byuidatascience.github.io/python4ds/), which itself is a Python port of Grolemund and Wickham's [R for Data Science](https://r4ds.had.co.nz/index.html) book.  Since this book uses Vega-Altair for its examples, those won't be repeated here."
      ],
      "metadata": {
        "id": "1uP6mk0yxE88"
      }
    },
    {
      "cell_type": "code",
      "source": [
        "!pip install altair==5.4.1"
      ],
      "metadata": {
        "colab": {
          "base_uri": "https://localhost:8080/"
        },
        "id": "3cL-e4M7CVSP",
        "outputId": "91fc393d-2d83-494e-9fad-2d7c2a5ae14d"
      },
      "execution_count": 1,
      "outputs": [
        {
          "output_type": "stream",
          "name": "stdout",
          "text": [
            "Collecting altair==5.4.1\n",
            "  Downloading altair-5.4.1-py3-none-any.whl.metadata (9.4 kB)\n",
            "Requirement already satisfied: jinja2 in /usr/local/lib/python3.10/dist-packages (from altair==5.4.1) (3.1.4)\n",
            "Requirement already satisfied: jsonschema>=3.0 in /usr/local/lib/python3.10/dist-packages (from altair==5.4.1) (4.23.0)\n",
            "Collecting narwhals>=1.5.2 (from altair==5.4.1)\n",
            "  Downloading narwhals-1.13.3-py3-none-any.whl.metadata (7.4 kB)\n",
            "Requirement already satisfied: packaging in /usr/local/lib/python3.10/dist-packages (from altair==5.4.1) (24.1)\n",
            "Requirement already satisfied: typing-extensions>=4.10.0 in /usr/local/lib/python3.10/dist-packages (from altair==5.4.1) (4.12.2)\n",
            "Requirement already satisfied: attrs>=22.2.0 in /usr/local/lib/python3.10/dist-packages (from jsonschema>=3.0->altair==5.4.1) (24.2.0)\n",
            "Requirement already satisfied: jsonschema-specifications>=2023.03.6 in /usr/local/lib/python3.10/dist-packages (from jsonschema>=3.0->altair==5.4.1) (2024.10.1)\n",
            "Requirement already satisfied: referencing>=0.28.4 in /usr/local/lib/python3.10/dist-packages (from jsonschema>=3.0->altair==5.4.1) (0.35.1)\n",
            "Requirement already satisfied: rpds-py>=0.7.1 in /usr/local/lib/python3.10/dist-packages (from jsonschema>=3.0->altair==5.4.1) (0.20.0)\n",
            "Requirement already satisfied: MarkupSafe>=2.0 in /usr/local/lib/python3.10/dist-packages (from jinja2->altair==5.4.1) (3.0.2)\n",
            "Downloading altair-5.4.1-py3-none-any.whl (658 kB)\n",
            "\u001b[2K   \u001b[90m━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\u001b[0m \u001b[32m658.1/658.1 kB\u001b[0m \u001b[31m6.3 MB/s\u001b[0m eta \u001b[36m0:00:00\u001b[0m\n",
            "\u001b[?25hDownloading narwhals-1.13.3-py3-none-any.whl (201 kB)\n",
            "\u001b[2K   \u001b[90m━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\u001b[0m \u001b[32m201.1/201.1 kB\u001b[0m \u001b[31m7.4 MB/s\u001b[0m eta \u001b[36m0:00:00\u001b[0m\n",
            "\u001b[?25hInstalling collected packages: narwhals, altair\n",
            "  Attempting uninstall: altair\n",
            "    Found existing installation: altair 4.2.2\n",
            "    Uninstalling altair-4.2.2:\n",
            "      Successfully uninstalled altair-4.2.2\n",
            "Successfully installed altair-5.4.1 narwhals-1.13.3\n"
          ]
        }
      ]
    },
    {
      "cell_type": "code",
      "source": [
        "import altair as alt\n",
        "import pandas as pd"
      ],
      "metadata": {
        "id": "Rvy5dsDlYSyu"
      },
      "execution_count": 2,
      "outputs": []
    },
    {
      "cell_type": "code",
      "source": [
        "alt.__version__"
      ],
      "metadata": {
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 38
        },
        "id": "rEtr7YXKCaG4",
        "outputId": "fe719c88-7026-48c1-9f20-5fc9b584a365"
      },
      "execution_count": 3,
      "outputs": [
        {
          "output_type": "execute_result",
          "data": {
            "text/plain": [
              "'5.4.1'"
            ],
            "application/vnd.google.colaboratory.intrinsic+json": {
              "type": "string"
            }
          },
          "metadata": {},
          "execution_count": 3
        }
      ]
    },
    {
      "cell_type": "markdown",
      "source": [
        "# **Other Annotations**\n",
        "\n",
        "There are a few examples of adding annotations (bar chart with labels, bar chart with line overlay, histogram with mean overlay) in the [Vega-Altair vs. Vega-Lite JSON Examples](https://colab.research.google.com/drive/1DGIHEoohX9YRXb9ZDsmCnC4PWETdwssW?usp=drive_link) notebook."
      ],
      "metadata": {
        "id": "6TzJ-57gmcnk"
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "### **Layering text over heatmap**\n",
        "\n",
        "From https://vega.github.io/vega-lite/examples/layer_text_heatmap.html"
      ],
      "metadata": {
        "id": "HVQwxGn_mmRf"
      }
    },
    {
      "cell_type": "code",
      "source": [
        "cars = alt.UrlData(url = \"https://vega.github.io/vega-lite/examples/data/cars.json\", format=alt.JsonDataFormat(type=\"json\"))\n",
        "cars"
      ],
      "metadata": {
        "colab": {
          "base_uri": "https://localhost:8080/"
        },
        "id": "QGGVESgdFewp",
        "outputId": "b5d6ca04-2eda-4952-ef31-258c3049627c"
      },
      "execution_count": 4,
      "outputs": [
        {
          "output_type": "execute_result",
          "data": {
            "text/plain": [
              "UrlData({\n",
              "  format: JsonDataFormat({\n",
              "    type: 'json'\n",
              "  }),\n",
              "  url: 'https://vega.github.io/vega-lite/examples/data/cars.json'\n",
              "})"
            ]
          },
          "metadata": {},
          "execution_count": 4
        }
      ]
    },
    {
      "cell_type": "code",
      "source": [
        "base = alt.Chart(cars).transform_aggregate(\n",
        "    num_cars='count()',\n",
        "    groupby=[\"Origin\", \"Cylinders\"]\n",
        ")\n",
        "\n",
        "heatmap = base.mark_rect().encode(\n",
        "    x='Cylinders:O',\n",
        "    y='Origin:O',\n",
        "    color=alt.Color('num_cars:Q', title='Count of Records',\n",
        "                    legend=alt.Legend(direction='horizontal', gradientLength=120))\n",
        ")\n",
        "\n",
        "text = base.mark_text().encode(\n",
        "    x='Cylinders:O',\n",
        "    y='Origin:O',\n",
        "    text='num_cars:Q',\n",
        "    color=alt.condition(\n",
        "        alt.datum.num_cars < 40,\n",
        "        alt.value('black'),  # The True color\n",
        "        alt.value('white')   # The False color\n",
        "    )\n",
        ")\n",
        "\n",
        "chart = alt.layer(heatmap, text).configure_axis(\n",
        "    grid=True,\n",
        "    tickBand='extent'\n",
        ")\n",
        "\n",
        "chart.display()"
      ],
      "metadata": {
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 125
        },
        "id": "0LgEhRFFO2tT",
        "outputId": "fc5830f9-6eab-43c8-d4cc-8b4b8916c91c"
      },
      "execution_count": 5,
      "outputs": [
        {
          "output_type": "display_data",
          "data": {
            "text/html": [
              "\n",
              "<style>\n",
              "  #altair-viz-900bef6af94f43e5b67ec71b243252f4.vega-embed {\n",
              "    width: 100%;\n",
              "    display: flex;\n",
              "  }\n",
              "\n",
              "  #altair-viz-900bef6af94f43e5b67ec71b243252f4.vega-embed details,\n",
              "  #altair-viz-900bef6af94f43e5b67ec71b243252f4.vega-embed details summary {\n",
              "    position: relative;\n",
              "  }\n",
              "</style>\n",
              "<div id=\"altair-viz-900bef6af94f43e5b67ec71b243252f4\"></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-900bef6af94f43e5b67ec71b243252f4\") {\n",
              "      outputDiv = document.getElementById(\"altair-viz-900bef6af94f43e5b67ec71b243252f4\");\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.20.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.20.1\"))\n",
              "        .then(() => maybeLoadScript(\"vega-embed\", \"6\"))\n",
              "        .catch(showError)\n",
              "        .then(() => displayChart(vegaEmbed));\n",
              "    }\n",
              "  })({\"config\": {\"view\": {\"continuousWidth\": 300, \"continuousHeight\": 300}, \"axis\": {\"grid\": true, \"tickBand\": \"extent\"}}, \"layer\": [{\"mark\": {\"type\": \"rect\"}, \"encoding\": {\"color\": {\"field\": \"num_cars\", \"legend\": {\"direction\": \"horizontal\", \"gradientLength\": 120}, \"title\": \"Count of Records\", \"type\": \"quantitative\"}, \"x\": {\"field\": \"Cylinders\", \"type\": \"ordinal\"}, \"y\": {\"field\": \"Origin\", \"type\": \"ordinal\"}}, \"transform\": [{\"aggregate\": [{\"op\": \"count\", \"as\": \"num_cars\"}], \"groupby\": [\"Origin\", \"Cylinders\"]}]}, {\"mark\": {\"type\": \"text\"}, \"encoding\": {\"color\": {\"condition\": {\"test\": \"(datum.num_cars < 40)\", \"value\": \"black\"}, \"value\": \"white\"}, \"text\": {\"field\": \"num_cars\", \"type\": \"quantitative\"}, \"x\": {\"field\": \"Cylinders\", \"type\": \"ordinal\"}, \"y\": {\"field\": \"Origin\", \"type\": \"ordinal\"}}, \"transform\": [{\"aggregate\": [{\"op\": \"count\", \"as\": \"num_cars\"}], \"groupby\": [\"Origin\", \"Cylinders\"]}]}], \"data\": {\"url\": \"https://vega.github.io/vega-lite/examples/data/cars.json\", \"format\": {\"type\": \"json\"}}, \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.20.1.json\"}, {\"mode\": \"vega-lite\"});\n",
              "</script>"
            ],
            "text/plain": [
              "alt.LayerChart(...)"
            ]
          },
          "metadata": {}
        }
      ]
    },
    {
      "cell_type": "markdown",
      "source": [
        "## **Carbon Dioxide in the Atmosphere**\n",
        "\n",
        "From https://vega.github.io/vega-lite/examples/layer_line_co2_concentration.html"
      ],
      "metadata": {
        "id": "jHl89OAQQzzI"
      }
    },
    {
      "cell_type": "code",
      "source": [
        "co2_concentration = alt.UrlData(url = \"https://vega.github.io/vega-lite/examples/data/co2-concentration.csv\", format=alt.CsvDataFormat(type=\"csv\"))\n",
        "co2_concentration"
      ],
      "metadata": {
        "colab": {
          "base_uri": "https://localhost:8080/"
        },
        "id": "TBmaekdPR6Oh",
        "outputId": "2f815d31-5c2f-4659-fded-1e92b72bd822"
      },
      "execution_count": 6,
      "outputs": [
        {
          "output_type": "execute_result",
          "data": {
            "text/plain": [
              "UrlData({\n",
              "  format: CsvDataFormat({\n",
              "    type: 'csv'\n",
              "  }),\n",
              "  url: 'https://vega.github.io/vega-lite/examples/data/co2-concentration.csv'\n",
              "})"
            ]
          },
          "metadata": {},
          "execution_count": 6
        }
      ]
    },
    {
      "cell_type": "code",
      "source": [
        "base = alt.Chart(co2_concentration).transform_calculate(\n",
        "    year=\"year(datum.Date)\",\n",
        "    decade=\"floor(datum.year / 10)\",\n",
        "    scaled_date=\"(datum.year % 10) + (month(datum.Date) / 12)\",\n",
        "    end= \"datum.first_date === datum.scaled_date ? 'first' : datum.last_date === datum.scaled_date ? 'last' : null\"\n",
        ").encode(\n",
        "    x=alt.X(\"scaled_date:Q\", title=\"Year into Decade\", axis=alt.Axis(tickCount=11)),\n",
        "    y=alt.Y(\"CO2:Q\", title=\"CO2 concentration in ppm\", scale=alt.Scale(zero=False)),\n",
        "    color=alt.Color(\"decade:O\", legend=None, scale=alt.Scale(scheme=\"magma\"))\n",
        ")\n",
        "\n",
        "# Line mark for CO2 concentration\n",
        "line = base.mark_line()\n",
        "\n",
        "# Text mark for the left side\n",
        "left_text = base.mark_text(align='left', dx=3, dy=1, baseline=\"top\", aria=False).encode(\n",
        "    x=alt.X(\"scaled_date:Q\", aggregate=\"min\"),\n",
        "    y=alt.Y(\"CO2:Q\", aggregate={\"argmin\": \"scaled_date\"}),\n",
        "    text=alt.Text(\"year:N\", aggregate={\"argmin\": \"scaled_date\"})\n",
        ")\n",
        "\n",
        "# Text mark for the right side\n",
        "right_text = base.mark_text(align='left', dx=3, dy=1, aria=False).encode(\n",
        "    x=alt.X(\"scaled_date:Q\", aggregate=\"max\"),\n",
        "    y=alt.Y(\"CO2:Q\", aggregate={\"argmax\": \"scaled_date\"}),\n",
        "    text=alt.Text(\"year:N\", aggregate={\"argmax\": \"scaled_date\"})\n",
        ")\n",
        "\n",
        "# Layering the marks together\n",
        "chart = alt.layer(line, left_text, right_text).properties(\n",
        "    width=800,\n",
        "    height=500\n",
        ")\n",
        "\n",
        "chart.display()\n"
      ],
      "metadata": {
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 569
        },
        "id": "f4V4X3baQ4KZ",
        "outputId": "ae6aef65-a9df-45ca-c1c2-96e80b63883e"
      },
      "execution_count": 7,
      "outputs": [
        {
          "output_type": "display_data",
          "data": {
            "text/html": [
              "\n",
              "<style>\n",
              "  #altair-viz-545a4e411aa240aba05935997fa67d26.vega-embed {\n",
              "    width: 100%;\n",
              "    display: flex;\n",
              "  }\n",
              "\n",
              "  #altair-viz-545a4e411aa240aba05935997fa67d26.vega-embed details,\n",
              "  #altair-viz-545a4e411aa240aba05935997fa67d26.vega-embed details summary {\n",
              "    position: relative;\n",
              "  }\n",
              "</style>\n",
              "<div id=\"altair-viz-545a4e411aa240aba05935997fa67d26\"></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-545a4e411aa240aba05935997fa67d26\") {\n",
              "      outputDiv = document.getElementById(\"altair-viz-545a4e411aa240aba05935997fa67d26\");\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.20.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.20.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\": \"line\"}, \"encoding\": {\"color\": {\"field\": \"decade\", \"legend\": null, \"scale\": {\"scheme\": \"magma\"}, \"type\": \"ordinal\"}, \"x\": {\"axis\": {\"tickCount\": 11}, \"field\": \"scaled_date\", \"title\": \"Year into Decade\", \"type\": \"quantitative\"}, \"y\": {\"field\": \"CO2\", \"scale\": {\"zero\": false}, \"title\": \"CO2 concentration in ppm\", \"type\": \"quantitative\"}}, \"transform\": [{\"calculate\": \"year(datum.Date)\", \"as\": \"year\"}, {\"calculate\": \"floor(datum.year / 10)\", \"as\": \"decade\"}, {\"calculate\": \"(datum.year % 10) + (month(datum.Date) / 12)\", \"as\": \"scaled_date\"}, {\"calculate\": \"datum.first_date === datum.scaled_date ? 'first' : datum.last_date === datum.scaled_date ? 'last' : null\", \"as\": \"end\"}]}, {\"mark\": {\"type\": \"text\", \"align\": \"left\", \"aria\": false, \"baseline\": \"top\", \"dx\": 3, \"dy\": 1}, \"encoding\": {\"color\": {\"field\": \"decade\", \"legend\": null, \"scale\": {\"scheme\": \"magma\"}, \"type\": \"ordinal\"}, \"text\": {\"aggregate\": {\"argmin\": \"scaled_date\"}, \"field\": \"year\", \"type\": \"nominal\"}, \"x\": {\"aggregate\": \"min\", \"field\": \"scaled_date\", \"type\": \"quantitative\"}, \"y\": {\"aggregate\": {\"argmin\": \"scaled_date\"}, \"field\": \"CO2\", \"type\": \"quantitative\"}}, \"transform\": [{\"calculate\": \"year(datum.Date)\", \"as\": \"year\"}, {\"calculate\": \"floor(datum.year / 10)\", \"as\": \"decade\"}, {\"calculate\": \"(datum.year % 10) + (month(datum.Date) / 12)\", \"as\": \"scaled_date\"}, {\"calculate\": \"datum.first_date === datum.scaled_date ? 'first' : datum.last_date === datum.scaled_date ? 'last' : null\", \"as\": \"end\"}]}, {\"mark\": {\"type\": \"text\", \"align\": \"left\", \"aria\": false, \"dx\": 3, \"dy\": 1}, \"encoding\": {\"color\": {\"field\": \"decade\", \"legend\": null, \"scale\": {\"scheme\": \"magma\"}, \"type\": \"ordinal\"}, \"text\": {\"aggregate\": {\"argmax\": \"scaled_date\"}, \"field\": \"year\", \"type\": \"nominal\"}, \"x\": {\"aggregate\": \"max\", \"field\": \"scaled_date\", \"type\": \"quantitative\"}, \"y\": {\"aggregate\": {\"argmax\": \"scaled_date\"}, \"field\": \"CO2\", \"type\": \"quantitative\"}}, \"transform\": [{\"calculate\": \"year(datum.Date)\", \"as\": \"year\"}, {\"calculate\": \"floor(datum.year / 10)\", \"as\": \"decade\"}, {\"calculate\": \"(datum.year % 10) + (month(datum.Date) / 12)\", \"as\": \"scaled_date\"}, {\"calculate\": \"datum.first_date === datum.scaled_date ? 'first' : datum.last_date === datum.scaled_date ? 'last' : null\", \"as\": \"end\"}]}], \"data\": {\"url\": \"https://vega.github.io/vega-lite/examples/data/co2-concentration.csv\", \"format\": {\"type\": \"csv\"}}, \"height\": 500, \"width\": 800, \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.20.1.json\"}, {\"mode\": \"vega-lite\"});\n",
              "</script>"
            ],
            "text/plain": [
              "alt.LayerChart(...)"
            ]
          },
          "metadata": {}
        }
      ]
    },
    {
      "cell_type": "markdown",
      "source": [
        "x value is set by `scaled_date=\"(datum.year % 10) + (month(datum.Date) / 12)\"`\n",
        "\n",
        "Examples:\n",
        "* 1960-01 = 0 + 1/12 = 0.083\n",
        "* 1961-02 = 1 + 2/12 = 1.167\n",
        "* 1965-06 = 5 + 6/12 = 5.5\n",
        "* 1975-02 = 5 + 2/12 = 5.167\n",
        "\n",
        "[Aggregate](https://vega.github.io/vega-lite/docs/aggregate.html) lets us compute aggregate summary statistics, like max.  For the x value for ending year text, we're computing the max of the `scaled_date` field.\n",
        "\n",
        "[Argmin/Argmax](https://vega.github.io/vega-lite/docs/aggregate.html#argmax) lets us compute aggregate summary statistics of another field.  For the y value for the ending year text, we're computing max of the `scaled_date` field and then finding the CO2 value for that date."
      ],
      "metadata": {
        "id": "fUynewKQgJ8L"
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "## **Line Chart with Highlighted Rectangles**\n",
        "\n",
        "From https://vega.github.io/vega-lite/examples/layer_falkensee.html"
      ],
      "metadata": {
        "id": "B3DA1vuFW5WX"
      }
    },
    {
      "cell_type": "code",
      "source": [
        "# Define the population data\n",
        "population_data = pd.DataFrame([\n",
        "      {\"year\": \"1875\", \"population\": 1309},\n",
        "      {\"year\": \"1890\", \"population\": 1558},\n",
        "      {\"year\": \"1910\", \"population\": 4512},\n",
        "      {\"year\": \"1925\", \"population\": 8180},\n",
        "      {\"year\": \"1933\", \"population\": 15915},\n",
        "      {\"year\": \"1939\", \"population\": 24824},\n",
        "      {\"year\": \"1946\", \"population\": 28275},\n",
        "      {\"year\": \"1950\", \"population\": 29189},\n",
        "      {\"year\": \"1964\", \"population\": 29881},\n",
        "      {\"year\": \"1971\", \"population\": 26007},\n",
        "      {\"year\": \"1981\", \"population\": 24029},\n",
        "      {\"year\": \"1985\", \"population\": 23340},\n",
        "      {\"year\": \"1989\", \"population\": 22307},\n",
        "      {\"year\": \"1990\", \"population\": 22087},\n",
        "      {\"year\": \"1991\", \"population\": 22139},\n",
        "      {\"year\": \"1992\", \"population\": 22105},\n",
        "      {\"year\": \"1993\", \"population\": 22242},\n",
        "      {\"year\": \"1994\", \"population\": 22801},\n",
        "      {\"year\": \"1995\", \"population\": 24273},\n",
        "      {\"year\": \"1996\", \"population\": 25640},\n",
        "      {\"year\": \"1997\", \"population\": 27393},\n",
        "      {\"year\": \"1998\", \"population\": 29505},\n",
        "      {\"year\": \"1999\", \"population\": 32124},\n",
        "      {\"year\": \"2000\", \"population\": 33791},\n",
        "      {\"year\": \"2001\", \"population\": 35297},\n",
        "      {\"year\": \"2002\", \"population\": 36179},\n",
        "      {\"year\": \"2003\", \"population\": 36829},\n",
        "      {\"year\": \"2004\", \"population\": 37493},\n",
        "      {\"year\": \"2005\", \"population\": 38376},\n",
        "      {\"year\": \"2006\", \"population\": 39008},\n",
        "      {\"year\": \"2007\", \"population\": 39366},\n",
        "      {\"year\": \"2008\", \"population\": 39821},\n",
        "      {\"year\": \"2009\", \"population\": 40179},\n",
        "      {\"year\": \"2010\", \"population\": 40511},\n",
        "      {\"year\": \"2011\", \"population\": 40465},\n",
        "      {\"year\": \"2012\", \"population\": 40905},\n",
        "      {\"year\": \"2013\", \"population\": 41258},\n",
        "      {\"year\": \"2014\", \"population\": 41777}\n",
        "])\n",
        "population_data['year'] = pd.to_datetime(population_data['year'], format='%Y')\n",
        "\n",
        "# Define the event data\n",
        "event_data = pd.DataFrame([\n",
        "    {\"start\": \"1933\", \"end\": \"1945\", \"event\": \"Nazi Rule\"},\n",
        "    {\"start\": \"1948\", \"end\": \"1989\", \"event\": \"GDR (East Germany)\"}\n",
        "])\n",
        "event_data['start'] = pd.to_datetime(event_data['start'], format='%Y')\n",
        "event_data['end'] = pd.to_datetime(event_data['end'], format='%Y')\n",
        "\n",
        "# Rectangle mark for historical periods\n",
        "rect = alt.Chart(event_data).mark_rect().encode(\n",
        "    x=alt.X('start:T', axis=alt.Axis(title='Year')),\n",
        "    x2='end:T',\n",
        "    color=alt.Color('event:N', legend=alt.Legend(title=\"Historical Event\"))\n",
        ")\n",
        "\n",
        "# Line and point mark for population data\n",
        "line = alt.Chart(population_data).mark_line(color=\"#333\").encode(\n",
        "    x=alt.X('year:T', title='Year'),\n",
        "    y=alt.Y('population:Q', title='Population')\n",
        ")\n",
        "point = alt.Chart(population_data).mark_point(color=\"#333\").encode(\n",
        "    x=alt.X('year:T', title='Year'),\n",
        "    y=alt.Y('population:Q', title='Population')\n",
        ")\n",
        "\n",
        "# Combine the charts\n",
        "chart = alt.layer(rect, line, point).properties(width=500)\n",
        "\n",
        "chart.display()"
      ],
      "metadata": {
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 369
        },
        "id": "Twpu3i1mW43N",
        "outputId": "2b1ccfb7-f7a4-48e8-ba50-614e0b2e6f2f"
      },
      "execution_count": 8,
      "outputs": [
        {
          "output_type": "display_data",
          "data": {
            "text/html": [
              "\n",
              "<style>\n",
              "  #altair-viz-c146ff2c671249dbad82d8bd91c24fcb.vega-embed {\n",
              "    width: 100%;\n",
              "    display: flex;\n",
              "  }\n",
              "\n",
              "  #altair-viz-c146ff2c671249dbad82d8bd91c24fcb.vega-embed details,\n",
              "  #altair-viz-c146ff2c671249dbad82d8bd91c24fcb.vega-embed details summary {\n",
              "    position: relative;\n",
              "  }\n",
              "</style>\n",
              "<div id=\"altair-viz-c146ff2c671249dbad82d8bd91c24fcb\"></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-c146ff2c671249dbad82d8bd91c24fcb\") {\n",
              "      outputDiv = document.getElementById(\"altair-viz-c146ff2c671249dbad82d8bd91c24fcb\");\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.20.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.20.1\"))\n",
              "        .then(() => maybeLoadScript(\"vega-embed\", \"6\"))\n",
              "        .catch(showError)\n",
              "        .then(() => displayChart(vegaEmbed));\n",
              "    }\n",
              "  })({\"config\": {\"view\": {\"continuousWidth\": 300, \"continuousHeight\": 300}}, \"layer\": [{\"data\": {\"name\": \"data-ef83477de904169c653f9a053051b39d\"}, \"mark\": {\"type\": \"rect\"}, \"encoding\": {\"color\": {\"field\": \"event\", \"legend\": {\"title\": \"Historical Event\"}, \"type\": \"nominal\"}, \"x\": {\"axis\": {\"title\": \"Year\"}, \"field\": \"start\", \"type\": \"temporal\"}, \"x2\": {\"field\": \"end\"}}}, {\"data\": {\"name\": \"data-39c5e6061af3e7a7e1eeab59f69b98a4\"}, \"mark\": {\"type\": \"line\", \"color\": \"#333\"}, \"encoding\": {\"x\": {\"field\": \"year\", \"title\": \"Year\", \"type\": \"temporal\"}, \"y\": {\"field\": \"population\", \"title\": \"Population\", \"type\": \"quantitative\"}}}, {\"data\": {\"name\": \"data-39c5e6061af3e7a7e1eeab59f69b98a4\"}, \"mark\": {\"type\": \"point\", \"color\": \"#333\"}, \"encoding\": {\"x\": {\"field\": \"year\", \"title\": \"Year\", \"type\": \"temporal\"}, \"y\": {\"field\": \"population\", \"title\": \"Population\", \"type\": \"quantitative\"}}}], \"width\": 500, \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.20.1.json\", \"datasets\": {\"data-ef83477de904169c653f9a053051b39d\": [{\"start\": \"1933-01-01T00:00:00\", \"end\": \"1945-01-01T00:00:00\", \"event\": \"Nazi Rule\"}, {\"start\": \"1948-01-01T00:00:00\", \"end\": \"1989-01-01T00:00:00\", \"event\": \"GDR (East Germany)\"}], \"data-39c5e6061af3e7a7e1eeab59f69b98a4\": [{\"year\": \"1875-01-01T00:00:00\", \"population\": 1309}, {\"year\": \"1890-01-01T00:00:00\", \"population\": 1558}, {\"year\": \"1910-01-01T00:00:00\", \"population\": 4512}, {\"year\": \"1925-01-01T00:00:00\", \"population\": 8180}, {\"year\": \"1933-01-01T00:00:00\", \"population\": 15915}, {\"year\": \"1939-01-01T00:00:00\", \"population\": 24824}, {\"year\": \"1946-01-01T00:00:00\", \"population\": 28275}, {\"year\": \"1950-01-01T00:00:00\", \"population\": 29189}, {\"year\": \"1964-01-01T00:00:00\", \"population\": 29881}, {\"year\": \"1971-01-01T00:00:00\", \"population\": 26007}, {\"year\": \"1981-01-01T00:00:00\", \"population\": 24029}, {\"year\": \"1985-01-01T00:00:00\", \"population\": 23340}, {\"year\": \"1989-01-01T00:00:00\", \"population\": 22307}, {\"year\": \"1990-01-01T00:00:00\", \"population\": 22087}, {\"year\": \"1991-01-01T00:00:00\", \"population\": 22139}, {\"year\": \"1992-01-01T00:00:00\", \"population\": 22105}, {\"year\": \"1993-01-01T00:00:00\", \"population\": 22242}, {\"year\": \"1994-01-01T00:00:00\", \"population\": 22801}, {\"year\": \"1995-01-01T00:00:00\", \"population\": 24273}, {\"year\": \"1996-01-01T00:00:00\", \"population\": 25640}, {\"year\": \"1997-01-01T00:00:00\", \"population\": 27393}, {\"year\": \"1998-01-01T00:00:00\", \"population\": 29505}, {\"year\": \"1999-01-01T00:00:00\", \"population\": 32124}, {\"year\": \"2000-01-01T00:00:00\", \"population\": 33791}, {\"year\": \"2001-01-01T00:00:00\", \"population\": 35297}, {\"year\": \"2002-01-01T00:00:00\", \"population\": 36179}, {\"year\": \"2003-01-01T00:00:00\", \"population\": 36829}, {\"year\": \"2004-01-01T00:00:00\", \"population\": 37493}, {\"year\": \"2005-01-01T00:00:00\", \"population\": 38376}, {\"year\": \"2006-01-01T00:00:00\", \"population\": 39008}, {\"year\": \"2007-01-01T00:00:00\", \"population\": 39366}, {\"year\": \"2008-01-01T00:00:00\", \"population\": 39821}, {\"year\": \"2009-01-01T00:00:00\", \"population\": 40179}, {\"year\": \"2010-01-01T00:00:00\", \"population\": 40511}, {\"year\": \"2011-01-01T00:00:00\", \"population\": 40465}, {\"year\": \"2012-01-01T00:00:00\", \"population\": 40905}, {\"year\": \"2013-01-01T00:00:00\", \"population\": 41258}, {\"year\": \"2014-01-01T00:00:00\", \"population\": 41777}]}}, {\"mode\": \"vega-lite\"});\n",
              "</script>"
            ],
            "text/plain": [
              "alt.LayerChart(...)"
            ]
          },
          "metadata": {}
        }
      ]
    }
  ]
}