Auto-commit: Tue Oct 31 16:16:13 CDT 2023

UIUC-iSchool-DataViz · Oct 31, 2023 · f6ac5b1 · f6ac5b1
1 parent 081c194
commit f6ac5b1
Showing 1 changed file with 104 additions and 13 deletions.
diff --git a/week11/inClass_week11.ipynb b/week11/inClass_week11.ipynb
@@ -42,7 +42,7 @@
   {
    "cell_type": "code",
    "execution_count": 2,
-   "id": "10575dbb",
+   "id": "2ab28227",
    "metadata": {},
    "outputs": [],
    "source": [
@@ -52,7 +52,7 @@
   {
    "cell_type": "code",
    "execution_count": 3,
-   "id": "c917e9cb",
+   "id": "a6b962c5",
    "metadata": {},
    "outputs": [
     {
@@ -83,7 +83,7 @@
   {
    "cell_type": "code",
    "execution_count": 4,
-   "id": "b07ecc5a",
+   "id": "1c64d023",
    "metadata": {},
    "outputs": [],
    "source": [
@@ -102,7 +102,7 @@
   {
    "cell_type": "code",
    "execution_count": 5,
-   "id": "e68b6bef",
+   "id": "77e47548",
    "metadata": {},
    "outputs": [],
    "source": [
@@ -112,7 +112,7 @@
   {
    "cell_type": "code",
    "execution_count": 6,
-   "id": "669c33e3",
+   "id": "ecef627a",
    "metadata": {},
    "outputs": [
     {
@@ -201,7 +201,7 @@
   {
    "cell_type": "code",
    "execution_count": 7,
-   "id": "58b19f32",
+   "id": "52b1dda2",
    "metadata": {},
    "outputs": [],
    "source": [
@@ -213,7 +213,7 @@
   {
    "cell_type": "code",
    "execution_count": 8,
-   "id": "73b358ae",
+   "id": "24a25299",
    "metadata": {},
    "outputs": [],
    "source": [
@@ -222,7 +222,7 @@
   },
   {
    "cell_type": "markdown",
-   "id": "1faeb838",
+   "id": "6b36a95f",
    "metadata": {},
    "source": [
     "## Use Altair to make the chart"
@@ -231,7 +231,7 @@
   {
    "cell_type": "code",
    "execution_count": 9,
-   "id": "c273e8c7",
+   "id": "9cd85158",
    "metadata": {},
    "outputs": [],
    "source": [
@@ -240,13 +240,104 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
-   "id": "b4fb21bd",
+   "execution_count": 10,
+   "id": "39dd1b1b",
    "metadata": {},
-   "outputs": [],
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "\n",
+       "<style>\n",
+       "  #altair-viz-256fb012834543fd89957b2be3e439be.vega-embed {\n",
+       "    width: 100%;\n",
+       "    display: flex;\n",
+       "  }\n",
+       "\n",
+       "  #altair-viz-256fb012834543fd89957b2be3e439be.vega-embed details,\n",
+       "  #altair-viz-256fb012834543fd89957b2be3e439be.vega-embed details summary {\n",
+       "    position: relative;\n",
+       "  }\n",
+       "</style>\n",
+       "<div id=\"altair-viz-256fb012834543fd89957b2be3e439be\"></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-256fb012834543fd89957b2be3e439be\") {\n",
+       "      outputDiv = document.getElementById(\"altair-viz-256fb012834543fd89957b2be3e439be\");\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.8.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\", \"5.8.0\"))\n",
+       "        .then(() => maybeLoadScript(\"vega-embed\", \"6\"))\n",
+       "        .catch(showError)\n",
+       "        .then(() => displayChart(vegaEmbed));\n",
+       "    }\n",
+       "  })({\"config\": {\"view\": {\"continuousWidth\": 300, \"continuousHeight\": 300}}, \"data\": {\"url\": \"https://raw.githubusercontent.com/UIUC-iSchool-DataViz/is445_data/main/mobility.csv\"}, \"mark\": {\"type\": \"point\"}, \"encoding\": {\"x\": {\"field\": \"Mobility\", \"type\": \"quantitative\"}, \"y\": {\"field\": \"Population\", \"type\": \"quantitative\"}}, \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.8.0.json\"}, {\"mode\": \"vega-lite\"});\n",
+       "</script>"
+      ],
+      "text/plain": [
+       "alt.Chart(...)"
+      ]
+     },
+     "execution_count": 10,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
    "source": [
-    "scatter1 = alt.Chart(mobility_url)"
+    "scatter1 = alt.Chart(mobility_url).mark_point().encode(\n",
+    "    x='Mobility:Q', # Quantitative\n",
+    "    y='Population:Q'\n",
+    ")\n",
+    "scatter1"
    ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "9bbf99af",
+   "metadata": {},
+   "outputs": [],
+   "source": []
   }
  ],
  "metadata": {