altair_demo/tutorial_Altair_charts.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Altair charts demo\n",
    "- examples of altair charts\n",
    "- vega and json specification underpinning altair\n",
    "- vega chart editor\n",
    "- exporting charts\n",
    "- brand-aligned charts (thanks to Rachel for tips!)\n",
    "- slightly more advanced charts"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Setup"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "from utils.altair_save_utils import AltairSaver\n",
    "from pathlib import Path\n",
    "import altair as alt\n",
    "from vega_datasets import data\n",
    "import pandas as pd"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Charts\n",
    "\n",
    "You can consult altair [gallery](https://altair-viz.github.io/gallery/) for various examples!\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<div id=\"altair-viz-d512696d31a546b1bf3bbe134ab61f8f\"></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-d512696d31a546b1bf3bbe134ab61f8f\") {\n",
       "      outputDiv = document.getElementById(\"altair-viz-d512696d31a546b1bf3bbe134ab61f8f\");\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@4.17.0?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\", \"4.17.0\"))\n",
       "        .then(() => maybeLoadScript(\"vega-embed\", \"6\"))\n",
       "        .catch(showError)\n",
       "        .then(() => displayChart(vegaEmbed));\n",
       "    }\n",
       "  })({\"config\": {\"view\": {\"continuousWidth\": 400, \"continuousHeight\": 300}}, \"data\": {\"name\": \"data-c2a3e89ba9d5d1687d5e8c28d630a033\"}, \"mark\": \"bar\", \"encoding\": {\"tooltip\": [{\"field\": \"a\", \"type\": \"nominal\"}, {\"field\": \"b\", \"type\": \"quantitative\"}], \"x\": {\"field\": \"a\", \"type\": \"nominal\"}, \"y\": {\"field\": \"b\", \"type\": \"quantitative\"}}, \"$schema\": \"https://vega.github.io/schema/vega-lite/v4.17.0.json\", \"datasets\": {\"data-c2a3e89ba9d5d1687d5e8c28d630a033\": [{\"a\": \"A\", \"b\": 28}, {\"a\": \"B\", \"b\": 55}, {\"a\": \"C\", \"b\": 43}, {\"a\": \"D\", \"b\": 91}, {\"a\": \"E\", \"b\": 81}, {\"a\": \"F\", \"b\": 53}, {\"a\": \"G\", \"b\": 19}, {\"a\": \"H\", \"b\": 87}, {\"a\": \"I\", \"b\": 52}]}}, {\"mode\": \"vega-lite\"});\n",
       "</script>"
      ],
      "text/plain": [
       "alt.Chart(...)"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "# Demo data\n",
    "data = pd.DataFrame({\n",
    "    'a': ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'],\n",
    "    'b': [28, 55, 43, 91, 81, 53, 19, 87, 52]\n",
    "})\n",
    "\n",
    "# Simple bar chart\n",
    "chart = (\n",
    "    alt.Chart(data)\n",
    "    .mark_bar()\n",
    "    .encode(\n",
    "        x='a',\n",
    "        y='b',\n",
    "        tooltip=['a', 'b'],\n",
    "    )\n",
    ")\n",
    "\n",
    "chart"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "{\n",
      "  \"$schema\": \"https://vega.github.io/schema/vega-lite/v4.17.0.json\",\n",
      "  \"config\": {\n",
      "    \"view\": {\n",
      "      \"continuousHeight\": 300,\n",
      "      \"continuousWidth\": 400\n",
      "    }\n",
      "  },\n",
      "  \"data\": {\n",
      "    \"name\": \"data-c2a3e89ba9d5d1687d5e8c28d630a033\"\n",
      "  },\n",
      "  \"datasets\": {\n",
      "    \"data-c2a3e89ba9d5d1687d5e8c28d630a033\": [\n",
      "      {\n",
      "        \"a\": \"A\",\n",
      "        \"b\": 28\n",
      "      },\n",
      "      {\n",
      "        \"a\": \"B\",\n",
      "        \"b\": 55\n",
      "      },\n",
      "      {\n",
      "        \"a\": \"C\",\n",
      "        \"b\": 43\n",
      "      },\n",
      "      {\n",
      "        \"a\": \"D\",\n",
      "        \"b\": 91\n",
      "      },\n",
      "      {\n",
      "        \"a\": \"E\",\n",
      "        \"b\": 81\n",
      "      },\n",
      "      {\n",
      "        \"a\": \"F\",\n",
      "        \"b\": 53\n",
      "      },\n",
      "      {\n",
      "        \"a\": \"G\",\n",
      "        \"b\": 19\n",
      "      },\n",
      "      {\n",
      "        \"a\": \"H\",\n",
      "        \"b\": 87\n",
      "      },\n",
      "      {\n",
      "        \"a\": \"I\",\n",
      "        \"b\": 52\n",
      "      }\n",
      "    ]\n",
      "  },\n",
      "  \"encoding\": {\n",
      "    \"tooltip\": [\n",
      "      {\n",
      "        \"field\": \"a\",\n",
      "        \"type\": \"nominal\"\n",
      "      },\n",
      "      {\n",
      "        \"field\": \"b\",\n",
      "        \"type\": \"quantitative\"\n",
      "      }\n",
      "    ],\n",
      "    \"x\": {\n",
      "      \"field\": \"a\",\n",
      "      \"type\": \"nominal\"\n",
      "    },\n",
      "    \"y\": {\n",
      "      \"field\": \"b\",\n",
      "      \"type\": \"quantitative\"\n",
      "    }\n",
      "  },\n",
      "  \"mark\": \"bar\"\n",
      "}\n"
     ]
    }
   ],
   "source": [
    "print(chart.to_json())"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Export the cart as an html\n",
    "chart.save('demo_chart.html')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Exporting charts"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "[WDM] - Downloading: 100%|█████████████████████| 8.04M/8.04M [00:00<00:00, 53.8MB/s]\n"
     ]
    }
   ],
   "source": [
    "# Initialise an instance of altair saver\n",
    "altairSaver = AltairSaver(path = Path('outputs/'))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "WARNING:tornado.access:404 GET /favicon.ico (::1) 0.32ms\n"
     ]
    }
   ],
   "source": [
    "altairSaver.save(chart, \"test_chart\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Slighty more polished charts\n",
    "\n",
    "Before proceeding, add the custom fonts (shared in Slack)\n",
    "\n",
    "*Thanks to Rachel for tips on aligning charts with our brand!"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Importing plotting_utils will automatically set up brand-aligned chart fonts\n",
    "from utils import plotting_utils as pu"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [],
   "source": [
    "import importlib\n",
    "importlib.reload(pu);"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 18,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<div id=\"altair-viz-5d01e9e8f57e4e3d8ab6d92a0afad378\"></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-5d01e9e8f57e4e3d8ab6d92a0afad378\") {\n",
       "      outputDiv = document.getElementById(\"altair-viz-5d01e9e8f57e4e3d8ab6d92a0afad378\");\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@4.17.0?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\", \"4.17.0\"))\n",
       "        .then(() => maybeLoadScript(\"vega-embed\", \"6\"))\n",
       "        .catch(showError)\n",
       "        .then(() => displayChart(vegaEmbed));\n",
       "    }\n",
       "  })({\"config\": {\"title\": {\"font\": \"Averta\", \"anchor\": \"start\"}, \"axis\": {\"labelFont\": \"Averta\", \"titleFont\": \"Averta\", \"gridColor\": \"grey\", \"gridDash\": [1, 7], \"labelFontSize\": 13, \"titleFontSize\": 13}, \"header\": {\"labelFont\": \"Averta\", \"titleFont\": \"Averta\"}, \"legend\": {\"labelFont\": \"Averta\", \"titleFont\": \"Averta\", \"labelFontSize\": 13, \"titleFontSize\": 13}, \"range\": {\"category\": [\"#0000FF\", \"#FDB633\", \"#18A48C\", \"#9A1BBE\", \"#EB003B\", \"#FF6E47\", \"#646363\", \"#0F294A\", \"#97D9E3\", \"#A59BEE\", \"#F6A4B7\", \"#D2C9C0\", \"#FFFFFF\", \"#000000\"], \"ordinal\": {\"scheme\": [\"#0000FF\", \"#FDB633\", \"#18A48C\", \"#9A1BBE\", \"#EB003B\", \"#FF6E47\", \"#646363\", \"#0F294A\", \"#97D9E3\", \"#A59BEE\", \"#F6A4B7\", \"#D2C9C0\", \"#FFFFFF\", \"#000000\"]}}, \"view\": {\"strokeWidth\": 0}}, \"data\": {\"name\": \"data-c2a3e89ba9d5d1687d5e8c28d630a033\"}, \"mark\": {\"type\": \"bar\", \"color\": \"#18A48C\"}, \"encoding\": {\"tooltip\": [{\"field\": \"a\", \"type\": \"nominal\"}, {\"field\": \"b\", \"type\": \"quantitative\"}], \"x\": {\"axis\": {\"labelAngle\": -45}, \"field\": \"a\", \"title\": \"Horizontal label\", \"type\": \"nominal\"}, \"y\": {\"field\": \"b\", \"title\": \"Vertical label\", \"type\": \"quantitative\"}}, \"title\": {\"anchor\": \"start\", \"text\": \"Demo chart title\", \"fontSize\": 16, \"subtitle\": [\"This is the first line of the subtitle.\", \"This another line of the subtitle.\"], \"subtitleFont\": \"Averta\", \"subtitleFontSize\": 13}, \"$schema\": \"https://vega.github.io/schema/vega-lite/v4.17.0.json\", \"datasets\": {\"data-c2a3e89ba9d5d1687d5e8c28d630a033\": [{\"a\": \"A\", \"b\": 28}, {\"a\": \"B\", \"b\": 55}, {\"a\": \"C\", \"b\": 43}, {\"a\": \"D\", \"b\": 91}, {\"a\": \"E\", \"b\": 81}, {\"a\": \"F\", \"b\": 53}, {\"a\": \"G\", \"b\": 19}, {\"a\": \"H\", \"b\": 87}, {\"a\": \"I\", \"b\": 52}]}}, {\"mode\": \"vega-lite\"});\n",
       "</script>"
      ],
      "text/plain": [
       "alt.Chart(...)"
      ]
     },
     "execution_count": 18,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "chart_title = 'Demo chart title'\n",
    "chart_subtitle = [\n",
    "    'This is the first line of the subtitle.',\n",
    "    'This another line of the subtitle.',\n",
    "]\n",
    "\n",
    "chart = (\n",
    "    alt.Chart(data)\n",
    "    .mark_bar(color=pu.NESTA_COLOURS[2])\n",
    "    .encode(\n",
    "        x=alt.X('a', title='Horizontal label', axis=alt.Axis(labelAngle=-45)),\n",
    "        y=alt.Y('b', title='Vertical label'),\n",
    "        tooltip=['a', 'b'],\n",
    "    )\n",
    ")\n",
    "\n",
    "chart = pu.configure_plots(chart, chart_title, chart_subtitle)\n",
    "\n",
    "chart"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 19,
   "metadata": {},
   "outputs": [],
   "source": [
    "altairSaver.save(chart, \"brand_chart\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "jp-MarkdownHeadingCollapsed": true,
    "tags": []
   },
   "source": [
    "You can check out our responsive altair charts for the Mapping parenting technology project's articles\n",
    "- Article on [toddler apps](https://www.nesta.org.uk/project/mapping-parenting-technology/could-toddler-tech-help-to-get-more-children-school-ready/)\n",
    "- Article on [parenting apps](https://www.nesta.org.uk/project/mapping-parenting-technology/could-parenting-apps-help-improve-outcomes-for-children/)\n",
    "\n",
    "You can also find altair charts in the wild on the [Economics Observatory](https://www.economicsobservatory.com/why-are-uk-energy-prices-rising) website\n",
    "\n",
    "### [Advanced] Making charts responsive \n",
    "To make the charts responsive and work within the html website, we needed to do a couple more tricks/hacks by editing the html code of the figure, and adding a bit of css. You can always reach out to me or Discovery Hub's Siobhan to learn more about this!\n",
    "\n",
    "Briefly, to make the charts work, you'd need to do the following:\n",
    "- If you have more than one figure on the page, you'll need to change in the html of each figure the `div` ids to a unique identifier eg 'viz#' (eg, 'viz1', 'viz2' etc) and then change the other instances of the `div` id in the html code to match your new unique id\n",
    "- Add this style code after the `div` id (change max width if necessary)\n",
    "`<div id=\"viz2\" style=\"width:100%;height:100%;max-width:550px\">`\n",
    "- After `var spec = {` add `\"autosize\": {\"type\": \"fit\", \"contains\": \"container\"}`\n",
    "- Change `width` in the json figure spec to `“container”`\n",
    "- If you'd like your figure to be extending over the width of your webpage and allowing reader to scroll it horizontally left-and-right, then you can add the following css code to your page:\n",
    "```\n",
    ".blocks__chart{margin-bottom:20px;width:100%}.blocks__chart-svg{width:100%}.blocks__chart svg{width:100%;height:auto}.blocks__chart .vega-embed.has-actions{padding-right:0!important}.blocks__chart .vega-embed .chart-wrapper{overflow:auto;width:auto!important;height:auto!important}.blocks__html{margin-bottom:20px;width:100%;overflow:scroll}\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Have a go!\n",
    "\n",
    "You can use this random dataset listing most popular songs on TikTok in 2022, with some extra data from Spotify's API about the songs' features (credit to kaggle user Sveta151)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {},
   "outputs": [],
   "source": [
    "data_url = 'https://raw.githubusercontent.com/beingkk/altair_demo/main/data/TikTok_songs_2022_preprocessed.csv'"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "<class 'pandas.core.frame.DataFrame'>\n",
      "RangeIndex: 263 entries, 0 to 262\n",
      "Data columns (total 19 columns):\n",
      " #   Column            Non-Null Count  Dtype  \n",
      "---  ------            --------------  -----  \n",
      " 0   track_name        263 non-null    object \n",
      " 1   artist_name       263 non-null    object \n",
      " 2   artist_pop        263 non-null    int64  \n",
      " 3   album             263 non-null    object \n",
      " 4   track_pop         263 non-null    int64  \n",
      " 5   danceability      263 non-null    float64\n",
      " 6   energy            263 non-null    float64\n",
      " 7   loudness          263 non-null    float64\n",
      " 8   mode              263 non-null    int64  \n",
      " 9   key               263 non-null    int64  \n",
      " 10  speechiness       263 non-null    float64\n",
      " 11  acousticness      263 non-null    float64\n",
      " 12  instrumentalness  263 non-null    float64\n",
      " 13  liveness          263 non-null    float64\n",
      " 14  valence           263 non-null    float64\n",
      " 15  tempo             263 non-null    float64\n",
      " 16  time_signature    263 non-null    int64  \n",
      " 17  duration_ms       263 non-null    int64  \n",
      " 18  track             263 non-null    object \n",
      "dtypes: float64(9), int64(6), object(4)\n",
      "memory usage: 39.2+ KB\n"
     ]
    }
   ],
   "source": [
    "df = pd.read_csv(data_url)\n",
    "df.info()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<div id=\"altair-viz-41f17fcc195146faa4009911f9abb8b4\"></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-41f17fcc195146faa4009911f9abb8b4\") {\n",
       "      outputDiv = document.getElementById(\"altair-viz-41f17fcc195146faa4009911f9abb8b4\");\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@4.17.0?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\", \"4.17.0\"))\n",
       "        .then(() => maybeLoadScript(\"vega-embed\", \"6\"))\n",
       "        .catch(showError)\n",
       "        .then(() => displayChart(vegaEmbed));\n",
       "    }\n",
       "  })({\"config\": {\"title\": {\"font\": \"Averta\", \"anchor\": \"start\"}, \"axis\": {\"labelFont\": \"Averta\", \"titleFont\": \"Averta\"}, \"header\": {\"labelFont\": \"Averta\", \"titleFont\": \"Averta\"}, \"legend\": {\"labelFont\": \"Averta\", \"titleFont\": \"Averta\"}, \"range\": {\"category\": [\"#0000FF\", \"#FDB633\", \"#18A48C\", \"#9A1BBE\", \"#EB003B\", \"#FF6E47\", \"#646363\", \"#0F294A\", \"#97D9E3\", \"#A59BEE\", \"#F6A4B7\", \"#D2C9C0\", \"#FFFFFF\", \"#000000\"], \"ordinal\": {\"scheme\": [\"#0000FF\", \"#FDB633\", \"#18A48C\", \"#9A1BBE\", \"#EB003B\", \"#FF6E47\", \"#646363\", \"#0F294A\", \"#97D9E3\", \"#A59BEE\", \"#F6A4B7\", \"#D2C9C0\", \"#FFFFFF\", \"#000000\"]}}}, \"data\": {\"url\": \"https://raw.githubusercontent.com/beingkk/altair_demo/main/data/TikTok_songs_2022_preprocessed.csv\"}, \"mark\": \"bar\", \"encoding\": {\"tooltip\": [{\"field\": \"track_name\", \"type\": \"nominal\"}, {\"field\": \"artist_name\", \"type\": \"nominal\"}, {\"field\": \"track_pop\", \"type\": \"quantitative\"}], \"x\": {\"field\": \"track_pop\", \"type\": \"quantitative\"}, \"y\": {\"field\": \"track\", \"sort\": \"-x\", \"type\": \"nominal\"}}, \"transform\": [{\"window\": [{\"op\": \"rank\", \"field\": \"track_pop\", \"as\": \"rank\"}], \"sort\": [{\"field\": \"track_pop\", \"order\": \"descending\"}]}, {\"filter\": \"(datum.rank < 10)\"}], \"$schema\": \"https://vega.github.io/schema/vega-lite/v4.17.0.json\"}, {\"mode\": \"vega-lite\"});\n",
       "</script>"
      ],
      "text/plain": [
       "alt.Chart(...)"
      ]
     },
     "execution_count": 12,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "y_values = 'track'\n",
    "x_values = 'track_pop'\n",
    "\n",
    "chart = (\n",
    "    alt\n",
    "    .Chart(data_url)\n",
    "    .mark_bar()\n",
    "    .encode(\n",
    "        x=alt.X(f'{x_values}:Q'),\n",
    "        y=alt.Y(f'{y_values}:N', sort='-x'),\n",
    "        tooltip=['track_name:N', 'artist_name:N', f'{x_values}:Q'],\n",
    "    )\n",
    "    # Select only the top 10 most popular songs\n",
    "    .transform_window(\n",
    "        rank=f'rank({x_values})',\n",
    "        sort=[alt.SortField(x_values, order='descending')]\n",
    "    )\n",
    "    .transform_filter(\n",
    "        (alt.datum.rank < 10)\n",
    "    )\n",
    ")\n",
    "\n",
    "chart"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.9.13"
  },
  "toc-autonumbering": false,
  "vscode": {
   "interpreter": {
    "hash": "fe2b047dd073afd8718e0f467ce004570d3a1491baa4910790e0afa8bf0c1dc1"
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}