{ "cells": [ { "cell_type": "markdown", "metadata": {}, "source": [ "# Altair-Beispiel\n", "\n", "In Altair wird direkt die `pattern`-Funktionalität der SVG benutzt. Hier wird über die ID ein _Pattern_ aus den SVG-`defs` ausgewählt." ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## 1. Importe\n", "\n", "Wir benötigen die Funktion `display_html` von IPython, um die [SVGs inline](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_In_HTML_Introduction) in HTML integrieren zu können, damit sie später als Pattern in Altair verwendet werden können." ] }, { "cell_type": "code", "execution_count": 1, "metadata": { "execution": { "iopub.execute_input": "2026-03-08T22:02:38.894004Z", "iopub.status.busy": "2026-03-08T22:02:38.893827Z", "iopub.status.idle": "2026-03-08T22:02:38.898056Z", "shell.execute_reply": "2026-03-08T22:02:38.896838Z", "shell.execute_reply.started": "2026-03-08T22:02:38.893985Z" } }, "outputs": [], "source": [ "from IPython.display import display_html" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## 2. Einlesen und Dekodieren der SVG-Muster\n", "\n", "Anschließend rufen wir die Funktion für unsere SVG auf und integrieren die Pattern in das HTML." ] }, { "cell_type": "code", "execution_count": 2, "metadata": { "execution": { "iopub.execute_input": "2026-03-08T22:02:38.898831Z", "iopub.status.busy": "2026-03-08T22:02:38.898678Z", "iopub.status.idle": "2026-03-08T22:02:38.903540Z", "shell.execute_reply": "2026-03-08T22:02:38.902661Z", "shell.execute_reply.started": "2026-03-08T22:02:38.898813Z" } }, "outputs": [ { "data": { "text/html": [ "\n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", "\n" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "def read_svg(svg_path):\n", " with open(svg_path, \"rb\") as svg_file:\n", " svg = svg_file.read().decode(\"utf-8\")\n", " return svg\n", "\n", "display_html(\n", " read_svg(\"../../../_static/pattern/cusypattern.svg\"), \n", " raw=True\n", ")" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## 3. pandas DataFrame für die Bereitstellung der Daten" ] }, { "cell_type": "code", "execution_count": 3, "metadata": { "execution": { "iopub.execute_input": "2026-03-08T22:02:38.904009Z", "iopub.status.busy": "2026-03-08T22:02:38.903922Z", "iopub.status.idle": "2026-03-08T22:02:39.795296Z", "shell.execute_reply": "2026-03-08T22:02:39.794693Z", "shell.execute_reply.started": "2026-03-08T22:02:38.904001Z" } }, "outputs": [], "source": [ "import altair as alt\n", "import pandas as pd\n", "\n", "data = pd.DataFrame({\n", " \"category\": [\"Purple\", \"Teal\", \"Orange\", \"Blue\", \"Red\", \"Cyan\", \"Magenta\", \"Green\"],\n", " \"value\": [90, 80, 50, 55, 50, 60, 40, 80],\n", " \"pattern\": [\n", " \"pattern_0\",\n", " \"pattern_1\",\n", " \"pattern_2\",\n", " \"pattern_3\",\n", " \"pattern_4\",\n", " \"pattern_5\",\n", " \"pattern_6\",\n", " \"pattern_7\"\n", " ]\n", "})" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## 4. x- und y-Achsen definieren\n", "\n", "Die x-Achse soll aus den Kategorien bestehen, die y-Achse aus den zugehörigen Werten.\n", "\n", "Für `altair.Fill` wird die ID des jeweiligen SVG-Muster verwendet, um die Füllung festzulegen." ] }, { "cell_type": "code", "execution_count": 4, "metadata": { "execution": { "iopub.execute_input": "2026-03-08T22:02:39.795773Z", "iopub.status.busy": "2026-03-08T22:02:39.795646Z", "iopub.status.idle": "2026-03-08T22:02:39.799597Z", "shell.execute_reply": "2026-03-08T22:02:39.799017Z", "shell.execute_reply.started": "2026-03-08T22:02:39.795765Z" } }, "outputs": [], "source": [ "chart = alt.Chart(data, title=\"cusy Pattern Example\", width=600, height=400).mark_bar(stroke=None).encode(\n", " x=alt.X(\"category:N\",\n", " sort=[\"Purple\", \"Teal\", \"Orange\", \"Blue\", \"Red\", \"Cyan\", \"Magenta\", \"Green\"],\n", " axis=alt.Axis(title=None, labelAngle=0)),\n", " y=alt.Y(\"value:Q\", axis=alt.Axis(title=None)),\n", " fill=alt.Fill(\"pattern:N\",\n", " scale=alt.Scale(\n", " range=[\n", " \"url(#dotspattern)\",\n", " \"url(#caretpattern)\",\n", " \"url(#trianglepattern)\",\n", " \"url(#spiralpattern)\",\n", " \"url(#crosspattern)\",\n", " \"url(#diamondpattern)\",\n", " \"url(#squarepattern)\",\n", " \"url(#tristarpattern)\",\n", " ]\n", " ),\n", " legend=None)\n", ")" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## 5. `svg`-Backend auswählen" ] }, { "cell_type": "code", "execution_count": 5, "metadata": { "execution": { "iopub.execute_input": "2026-03-08T22:02:39.799996Z", "iopub.status.busy": "2026-03-08T22:02:39.799900Z", "iopub.status.idle": "2026-03-08T22:02:39.849893Z", "shell.execute_reply": "2026-03-08T22:02:39.849280Z", "shell.execute_reply.started": "2026-03-08T22:02:39.799987Z" } }, "outputs": [ { "data": { "text/html": [ "\n", "\n", "
\n", "" ], "text/plain": [ "alt.Chart(...)" ] }, "execution_count": 5, "metadata": {}, "output_type": "execute_result" } ], "source": [ "alt.renderers.set_embed_options(renderer='svg')\n", "\n", "chart" ] } ], "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.13.0" }, "widgets": { "application/vnd.jupyter.widget-state+json": { "state": {}, "version_major": 2, "version_minor": 0 } } }, "nbformat": 4, "nbformat_minor": 4 }