3_Exercise_III.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import altair as alt"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Exercises 3"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 9. Medaillenverlauf der Schweiz\n",
    "\n",
    "Zeigen Sie auf, wie viele Medaillen die Schweiz über die Jahre gewonnen hat. Unterscheiden Sie dabei zwischen Winter- und Sommerolympiade. Nutzen Sie dafür einen \"Linechart\". Da die Anzahl der gewonnen Medaillen pro Jahr nicht als `field` in den Daten vorhanden ist, müssen Sie sie analog zum Histogram in Aufgabe 4 selbst berechnen.\n",
    "\n",
    "\n",
    "Sie sehen zum ersten Mal das `transform`-attribut. Es wird genutzt um die Daten zu filtern und nur die Medaillen der Schweiz anzuzeigen. Sie sehen hier wie eng Datentransformationen mit der Informationsvisualisierung verknüpft sind. Dokumentation: https://vega.github.io/vega-lite/docs/filter.html"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "alt.Chart.from_dict({\n",
    "    \"$schema\": \"https://vega.github.io/schema/vega-lite/v4.json\",\n",
    "    \"data\": {\n",
    "        \"url\": \"https://gist.githubusercontent.com/marcosoldati/37b652aff7476c6ab77f16f4f808b243/raw/6c2125013811db238170f5dc0d728e858e40989d/olympics.csv\"\n",
    "    },\n",
    "    \"mark\": \"\", # <= mark?\n",
    "    \"width\": 800,\n",
    "    \"height\": 200,\n",
    "    \"transform\": [\n",
    "        {\"filter\": {\"field\": \"Country\", \"equal\": \"Switzerland\"}}\n",
    "    ],\n",
    "    \"encoding\": {\n",
    "        # <= encodings?\n",
    "    }\n",
    "})"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 10. Medaillenverlauf mehrerer Länder\n",
    "\n",
    "Nutzen Sie \"juxtaposition\" um die Medaillenverläufe mehrerer Länder darzustellen. Definieren sie im `filter` `transform` einige Länder, die Sie interessieren. Vega-Lite definiert einen `row`-channel. Wie alle encoding-channels akzeptiert er ein `field` (am besten ein kategorisches/nominales). Für jede Kategorie im angegebenen `field` erzeugt Vega-Lite nun einen eigenen View und platziert alle Views aligniert untereinander. Perfekt also um die Medeillenverläufe der einzelnen Länder zu vergleichen. Fügen Sie zur Visualisierung \"Medaillenverlauf der Schweiz\" ein `row` `encoding`-Channel hinzu und definieren Sie `field` und `type`, so dass für jedes Land, das Sie im Filter definiert haben eine Visualisierung erstellt wird.\n",
    "\n",
    "Die Dokumentation finden Sie hier: https://vega.github.io/vega-lite/examples/trellis_bar_histogram.html"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "alt.Chart.from_dict({\n",
    "    \"$schema\": \"https://vega.github.io/schema/vega-lite/v4.json\",\n",
    "    \"data\": {\n",
    "        \"url\": \"https://gist.githubusercontent.com/marcosoldati/37b652aff7476c6ab77f16f4f808b243/raw/6c2125013811db238170f5dc0d728e858e40989d/olympics.csv\"\n",
    "    },\n",
    "    \"mark\": \"\", # <= mark?\n",
    "    \"width\": 800,\n",
    "    \"height\": 100,\n",
    "    \"transform\": [\n",
    "        {\"filter\": {\"field\": \"Country\", \"oneOf\": [\"Switzerland\", \"France\",]}} # <= weitere Länder\n",
    "    ],\n",
    "    \"encoding\": {\n",
    "        # <= encodings inklusive row encoding\n",
    "    }\n",
    "})"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 11. Medaillenverteilung nach Jahr\n",
    "\n",
    "Um ein besseres Gefühl für die Verteilung der Medaillen zu erhalten, erzeugen Sie nun einen Scatterplot der die Anzahl Medaillen nach Jahr aufzeigt. Dazu ist erneut eine Datentransformation nötig. Sie zählt die Anzahl Medaillen pro Land und Jahr. Vega-Lite erzeugt damit ein neues `field` mit dem Namen `Medals` gemäss der Definition in `as`. Erzeugen Sie damit den oben beschriebenen Scatterplot.\n",
    "\n",
    "Die Dokumentation zum `transform` finden Sie hier: https://vega.github.io/vega-lite/docs/aggregate.html#transform"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "alt.Chart.from_dict({\n",
    "    \"$schema\": \"https://vega.github.io/schema/vega-lite/v4.json\",\n",
    "    \"data\": {\n",
    "        \"url\": \"https://gist.githubusercontent.com/marcosoldati/37b652aff7476c6ab77f16f4f808b243/raw/6c2125013811db238170f5dc0d728e858e40989d/olympics.csv\"\n",
    "    },\n",
    "    \"mark\": \"\", # <= mark?\n",
    "    \"width\": 800,\n",
    "    \"height\": 300,\n",
    "    \"transform\": [\n",
    "    {\n",
    "      \"aggregate\": [{\"op\": \"count\", \"field\": \"Country\", \"as\": \"Medals\"}],\n",
    "      \"groupby\": [\"Year\", \"Country\"]\n",
    "    }\n",
    "    ],\n",
    "    \"encoding\": {\n",
    "        # <= encoding-channels?\n",
    "    }\n",
    "})"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 12. Mittlere Anzahl Medaillen nach Jahr\n",
    "\n",
    "Nebst der Verteilung der Medaillen ist interessant, wie viele es im Mittel davon gab. Die Definition des Linecharts, der diese Mittelwertlinie zeigt, ist sehr ähnlich wie die des obigen Scatterplots. Statt alle Punkte zu zeigen, aggregieren Sie sie jedoch auf der `y`-Achse. Die bereits bekannte `aggregate`-Transformation kann auch den Mittelwert oder den Durchschnitt berechnen. Welchen wählen Sie und warum?\n",
    "\n",
    "Hier finden Sie ein Beispiel dazu: https://vega.github.io/vega-lite/docs/aggregate.html#encoding\n",
    "\n",
    "Zusatzaufgabe: Färben Sie die Mittelwert-Linie in einer anderen Farbe als Blau. https://vega.github.io/vega-lite/docs/value.html"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "alt.Chart.from_dict({\n",
    "    \"$schema\": \"https://vega.github.io/schema/vega-lite/v4.json\",\n",
    "    \"data\": {\n",
    "        \"url\": \"https://gist.githubusercontent.com/marcosoldati/37b652aff7476c6ab77f16f4f808b243/raw/6c2125013811db238170f5dc0d728e858e40989d/olympics.csv\"\n",
    "    },\n",
    "    \"mark\": \"\", # <= mark?\n",
    "    \"width\": 800,\n",
    "    \"height\": 300,\n",
    "    \"transform\": [\n",
    "    {\n",
    "      \"aggregate\": [{\"op\": \"count\", \"field\": \"Country\", \"as\": \"Medals\"}],\n",
    "      \"groupby\": [\"Year\", \"Country\"]\n",
    "    }\n",
    "    ],\n",
    "    \"encoding\": {\n",
    "        # <= encoding-channels?\n",
    "    }\n",
    "})"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 13. Verteilung und Mittelwert\n",
    "\n",
    "Die beiden vorherigen Visualisierungen sollen nun übereinander gelegt, also \"superposed\", werden. Dazu dient in Vega-Lite das Attribut `layer`.\n",
    "\n",
    "Analog zu diesem Beispiel: https://vega.github.io/vega-lite/examples/layer_line_mean_point_raw.html"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "alt.Chart.from_dict({\n",
    "    \"$schema\": \"https://vega.github.io/schema/vega-lite/v4.json\",\n",
    "    \"data\": {\n",
    "        \"url\": \"https://gist.githubusercontent.com/marcosoldati/37b652aff7476c6ab77f16f4f808b243/raw/6c2125013811db238170f5dc0d728e858e40989d/olympics.csv\"\n",
    "    },\n",
    "    \"layer\": [\n",
    "        {\n",
    "       # <= erster Layer\n",
    "        },\n",
    "        {\n",
    "       # <= zweiter Layer\n",
    "        }\n",
    "    ]\n",
    "})"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 14. Overview und Zoom\n",
    "\n",
    "Die Visualisierung \"Medaillenverteilung nach Jahr\" leidet darunter, dass sich die Punkte vielerorts überlappen. Die visuelle Komplexität ist dadurch zu hoch. Eine Möglichkeit damit umzugehen, ist die Visualisierung zoombar zu machen. Interaktion wird in Vega-Lite immer über sogenannte `selection`s ermöglicht. Sie repräsentieren mehr oder weniger Resultate von Mausaktionen wie klicken, ziehen oder scrollen. Um einen zoom mit dem Scrollrad zu ermöglichen, `bind`en wir eine `selection` vom typ `interval` and beide Skalen der obigen Visualisierung. Füllen Sie die restlichen Definitionen aus um die Visualisierung zu erzeugen und probieren Sie den Zoom aus. Auch \"panning\" funktioniert direkt.\n",
    "\n",
    "\n",
    "Beispiel: https://vega.github.io/vega-lite/examples/selection_translate_scatterplot_drag.html"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "alt.Chart.from_dict({\n",
    "    \"$schema\": \"https://vega.github.io/schema/vega-lite/v4.json\",\n",
    "    \"data\": {\n",
    "        \"url\": \"https://gist.githubusercontent.com/marcosoldati/37b652aff7476c6ab77f16f4f808b243/raw/6c2125013811db238170f5dc0d728e858e40989d/olympics.csv\"\n",
    "    },\n",
    "    \"mark\": \"\", # <=mark\n",
    "    \"width\": 800,\n",
    "    \"height\": 300,\n",
    "    \"selection\": {\n",
    "        \"brush\": {\n",
    "            \"type\": \"interval\",\n",
    "            \"bind\": \"scales\"\n",
    "        }\n",
    "    },\n",
    "    \"transform\": [\n",
    "    {\n",
    "      \"aggregate\": [{\"op\": \"count\", \"field\": \"Country\", \"as\": \"Medals\"}],\n",
    "      \"groupby\": [\"Year\", \"Country\"]\n",
    "    }\n",
    "    ],\n",
    "    \"encoding\": {\n",
    "        # <= encoding-channels für den scatterplot\n",
    "    }\n",
    "})"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 15. Details-on-demand\n",
    "\n",
    "Ein Wunsch bleibt bei der zoombaren Grafik aber immer noch offen. Zu gerne würden wir wissen, welches Land hinter einem einzelnen Punkt steckt. Vega-Lite hat hierfür eine sehr elegante Lösung. Es bietet nämlich einen `tooltip`-Channel. Sie können ein beliebiges `field` auf den `tooltip`-Channel mappen und erhalten so beim Klick auf Objekte den entsprechenden Wert. Versuchen Sie ein damit Tooltips (kleine Popups die erscheinen wenn man mit der Maus über ein Objekt in der Visualisierung fährt) in der vorigen Visualisierung zu erstellen.\n",
    "\n",
    "Ein Beispiel dazu finden Sie hier: https://vega.github.io/vega-lite/examples/point_href.html\n",
    "\n",
    "Anmerkung: Der Tooltip-Channel ist eine praktische Abkürzung. Im Hintergrund erstellt Vega-Lite eine `selection` für die hover-Interaktion."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "alt.Chart.from_dict({\n",
    "    \"$schema\": \"https://vega.github.io/schema/vega-lite/v4.json\",\n",
    "    \"data\": {\n",
    "        \"url\": \"https://gist.githubusercontent.com/marcosoldati/37b652aff7476c6ab77f16f4f808b243/raw/151034e5f19a4f347346256b86629a298ec211bf/olympics.csv\"\n",
    "    },\n",
    "    \"mark\": \"\", # <= mark\n",
    "    \"selection\": {\n",
    "        \"grid\": {\n",
    "            \"type\": \"interval\", \n",
    "            \"bind\": \"scales\"\n",
    "        }\n",
    "    },\n",
    "    \"width\": 800,\n",
    "    \"height\": 800,\n",
    "    \"transform\": [\n",
    "        {\n",
    "            \"aggregate\": [{\"op\": \"count\", \"field\": \"Country\", \"as\": \"Medals\"}],\n",
    "            \"groupby\": [\"Year\", \"Season\", \"Country\"]\n",
    "        }\n",
    "    ],\n",
    "    \"encoding\": {\n",
    "           # <= encoding-channels inklusive tooltip\n",
    "    }\n",
    "})"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 16. Freestyle\n",
    "\n",
    "Visualisieren Sie, was sie interessiert :-)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "alt.Chart.from_dict({\n",
    "    \"$schema\": \"https://vega.github.io/schema/vega-lite/v4.json\"\n",
    "})"
   ]
  },
  {
   "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.8.12"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}