visualizations/vega-altair/vega-altair-scatter-chart.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "76466a7d-2cb0-4007-80a0-379a92273c90",
   "metadata": {},
   "source": [
    "# Using only Vega-Altair"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "b21279ff-ddcf-41a3-9a50-a90b74973430",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<style>\n",
       "  #altair-viz-ff6fa06e95a943f592ce62e1dfc4795c.vega-embed {\n",
       "    width: 100%;\n",
       "    display: flex;\n",
       "  }\n",
       "\n",
       "  #altair-viz-ff6fa06e95a943f592ce62e1dfc4795c.vega-embed details,\n",
       "  #altair-viz-ff6fa06e95a943f592ce62e1dfc4795c.vega-embed details summary {\n",
       "    position: relative;\n",
       "  }\n",
       "</style>\n",
       "<div id=\"altair-viz-ff6fa06e95a943f592ce62e1dfc4795c\"></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-ff6fa06e95a943f592ce62e1dfc4795c\") {\n",
       "      outputDiv = document.getElementById(\"altair-viz-ff6fa06e95a943f592ce62e1dfc4795c\");\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.16.3?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.16.3\"))\n",
       "        .then(() => maybeLoadScript(\"vega-embed\", \"6\"))\n",
       "        .catch(showError)\n",
       "        .then(() => displayChart(vegaEmbed));\n",
       "    }\n",
       "  })({\"config\": {\"view\": {\"continuousWidth\": 300, \"continuousHeight\": 300}}, \"data\": {\"values\": [{\"x\": 1, \"y\": 8}, {\"x\": 9, \"y\": 1}, {\"x\": 4, \"y\": 9}, {\"x\": 3, \"y\": 6}, {\"x\": 6, \"y\": 2}, {\"x\": 5, \"y\": 7}, {\"x\": 7, \"y\": 4}, {\"x\": 2, \"y\": 8}, {\"x\": 8, \"y\": 3}]}, \"mark\": {\"type\": \"point\"}, \"encoding\": {\"x\": {\"field\": \"x\", \"type\": \"quantitative\"}, \"y\": {\"field\": \"y\", \"type\": \"quantitative\"}}, \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.16.3.json\"}, {\"mode\": \"vega-lite\"});\n",
       "</script>"
      ],
      "text/plain": [
       "alt.Chart(...)"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "# import packages \n",
    "import altair as alt \n",
    "\n",
    "# create data  \n",
    "data = alt.Data(values=[{'x': 1, 'y': 8},\n",
    "                        {'x': 9, 'y': 1},\n",
    "                        {'x': 4, 'y': 9},\n",
    "                        {'x': 3, 'y': 6},\n",
    "                        {'x': 6, 'y': 2},\n",
    "                        {'x': 5, 'y': 7},\n",
    "                        {'x': 7, 'y': 4},\n",
    "                        {'x': 2, 'y': 8},\n",
    "                        {'x': 8, 'y': 3}])\n",
    "\n",
    "# plot \n",
    "alt.Chart(data).mark_point().encode(\n",
    "    x='x:Q',\n",
    "    y='y:Q'\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "e290d0f3-6dcc-4256-8748-5263af2afe71",
   "metadata": {},
   "source": [
    "# Using Vega-Altair and Pandas"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "id": "e4624d99-bfe6-419c-abe3-46ca5f17c01c",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<style>\n",
       "  #altair-viz-df23098d05604b0e86fe67416a42d18e.vega-embed {\n",
       "    width: 100%;\n",
       "    display: flex;\n",
       "  }\n",
       "\n",
       "  #altair-viz-df23098d05604b0e86fe67416a42d18e.vega-embed details,\n",
       "  #altair-viz-df23098d05604b0e86fe67416a42d18e.vega-embed details summary {\n",
       "    position: relative;\n",
       "  }\n",
       "</style>\n",
       "<div id=\"altair-viz-df23098d05604b0e86fe67416a42d18e\"></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-df23098d05604b0e86fe67416a42d18e\") {\n",
       "      outputDiv = document.getElementById(\"altair-viz-df23098d05604b0e86fe67416a42d18e\");\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.16.3?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.16.3\"))\n",
       "        .then(() => maybeLoadScript(\"vega-embed\", \"6\"))\n",
       "        .catch(showError)\n",
       "        .then(() => displayChart(vegaEmbed));\n",
       "    }\n",
       "  })({\"config\": {\"view\": {\"continuousWidth\": 300, \"continuousHeight\": 300}}, \"data\": {\"name\": \"data-f076d50a21442af31f212622aa23ed3e\"}, \"mark\": {\"type\": \"point\"}, \"encoding\": {\"x\": {\"field\": \"x\", \"type\": \"quantitative\"}, \"y\": {\"field\": \"y\", \"type\": \"quantitative\"}}, \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.16.3.json\", \"datasets\": {\"data-f076d50a21442af31f212622aa23ed3e\": [{\"x\": 20, \"y\": 2}, {\"x\": 6, \"y\": 15}, {\"x\": 12, \"y\": 19}, {\"x\": 13, \"y\": 17}, {\"x\": 13, \"y\": 7}, {\"x\": 3, \"y\": 2}, {\"x\": 15, \"y\": 9}, {\"x\": 12, \"y\": 3}, {\"x\": 18, \"y\": 15}, {\"x\": 8, \"y\": 16}]}}, {\"mode\": \"vega-lite\"});\n",
       "</script>"
      ],
      "text/plain": [
       "alt.Chart(...)"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "# import packages \n",
    "import altair as alt \n",
    "import pandas as pd \n",
    "\n",
    "# create data \n",
    "df = pd.DataFrame({\n",
    "    'x': [20,6,12,13,13,3,15,12,18,8],\n",
    "    'y': [2,15,19,17,7,2,9,3,15,16]\n",
    "})\n",
    "\n",
    "# plot \n",
    "alt.Chart(df).mark_point().encode(\n",
    "    x='x',\n",
    "    y='y'\n",
    ")"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "venv",
   "language": "python",
   "name": "venv"
  },
  "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.10.12"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}