Auto-commit: Mon Oct 28 12:34:16 CDT 2024

UIUC-iSchool-DataViz · Oct 28, 2024 · 0fae3cc · 0fae3cc
1 parent 44ccea0
commit 0fae3cc
Showing 1 changed file with 104 additions and 1 deletion.
diff --git a/week10/inClass_week10.ipynb b/week10/inClass_week10.ipynb
@@ -159,9 +159,112 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 5,
    "id": "1caa2700",
    "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "\n",
+       "<style>\n",
+       "  #altair-viz-b337cba3f9914d4b9409a55b1d8569b5.vega-embed {\n",
+       "    width: 100%;\n",
+       "    display: flex;\n",
+       "  }\n",
+       "\n",
+       "  #altair-viz-b337cba3f9914d4b9409a55b1d8569b5.vega-embed details,\n",
+       "  #altair-viz-b337cba3f9914d4b9409a55b1d8569b5.vega-embed details summary {\n",
+       "    position: relative;\n",
+       "  }\n",
+       "</style>\n",
+       "<div id=\"altair-viz-b337cba3f9914d4b9409a55b1d8569b5\"></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-b337cba3f9914d4b9409a55b1d8569b5\") {\n",
+       "      outputDiv = document.getElementById(\"altair-viz-b337cba3f9914d4b9409a55b1d8569b5\");\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}}, \"data\": {\"url\": \"https://raw.githubusercontent.com/UIUC-iSchool-DataViz/is445_data/main/mobility.csv\"}, \"mark\": \"bar\", \"encoding\": {\"x\": {\"axis\": {\"title\": \"Mobility Score\"}, \"bin\": true, \"field\": \"Mobility\", \"type\": \"quantitative\"}, \"y\": {\"aggregate\": \"count\", \"axis\": {\"title\": \"Mobility Score Distribution\"}, \"type\": \"quantitative\"}}, \"transform\": [{\"filter\": {\"param\": \"param_1\"}}], \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.20.1.json\"}, {\"mode\": \"vega-lite\"});\n",
+       "</script>"
+      ],
+      "text/plain": [
+       "alt.Chart(...)"
+      ]
+     },
+     "execution_count": 5,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "chart2 = alt.Chart.from_dict({\n",
+    "    # Data\n",
+    "    \"data\":{\"url\":mobility_url},\n",
+    "    # mark\n",
+    "    \"mark\":\"bar\",\n",
+    "    # encoding\n",
+    "    \"encoding\":{\n",
+    "        \"x\":{\"field\":\"Mobility\", \"bin\":True, \"type\":\"quantitative\", \"axis\":{\"title\":\"Mobility Score\"}}, \n",
+    "        \"y\":{\"aggregate\":\"count\", \"type\":\"quantitative\", \"axis\":{\"title\":\"Mobility Score Distribution\"}}\n",
+    "    }\n",
+    "}\n",
+    ").transform_filter(\n",
+    "    brush\n",
+    ")\n",
+    "chart2"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "5a521237",
+   "metadata": {},
    "outputs": [],
    "source": []
   }