Adds vega altair style example for the gallery. (#3032)

* add vega altair style example * refactor to vega-lite to support responsive * remove .gif. specificy template in extension * Delete script.py * Update VegaAltairStyle.ipynb Co-authored-by: Marc Skov Madsen <masma@orsted.dk> Co-authored-by: Philipp Rudiger <prudiger@anaconda.com>
holoviz · Jan 24, 2022 · 9cecca3 · 9cecca3
1 parent c5615a4
commit 9cecca3
Show file tree

Hide file tree

Showing 2 changed files with 306 additions and 1 deletion.
diff --git a/examples/gallery/styles/VegaAltairStyle.ipynb b/examples/gallery/styles/VegaAltairStyle.ipynb
@@ -0,0 +1,305 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "856eae64",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import altair as alt\n",
+    "import panel as pn\n",
+    "\n",
+    "from vega_datasets import data\n",
+    "\n",
+    "\n",
+    "pn.extension(\"vega\", sizing_mode=\"stretch_width\", template=\"fast\")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "9e283c46",
+   "metadata": {},
+   "source": [
+    "## Styling Vega and Altair for Panel\n",
+    "\n",
+    "In this example we will show how to style Vega and Altair charts with Panel supporting the `default` and the `dark` theme.\n",
+    "\n",
+    "![VegaAltairStyle.gif](https://assets.holoviews.org/panel/thumbnails/gallery/styles/matplotlib-styles.gif)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "a8032f17",
+   "metadata": {},
+   "source": [
+    "## Get or set the theme\n",
+    "\n",
+    "When we use the Fast templates the theme will be available from the query args"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "2f14cf43",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "def get_theme():\n",
+    "    return pn.state.session_args.get(\"theme\", [b'default'])[0].decode()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "54e26918",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "theme=get_theme()\n",
+    "theme"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "65340ba0",
+   "metadata": {},
+   "source": [
+    "## Select a nice accent color\n",
+    "\n",
+    "Below we create some functionality to *cycle through* a list of nice accent colors."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "0bc58c18",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "nice_accent_colors = [\n",
+    "    (\"#00A170\", \"white\"), # Mint\n",
+    "    (\"#DAA520\", \"white\"), # Golden Rod\n",
+    "    (\"#F08080\", \"white\"), # Light Coral\n",
+    "    (\"#4099da\", \"white\"), # Summery Sky\n",
+    "    (\"#2F4F4F\", \"white\"), # Dark Slate Grey\n",
+    "    (\"#A01346\", \"white\"), # Fast\n",
+    "]"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "106a9df4",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "def get_nice_accent_color():\n",
+    "    \"\"\"Returns the 'next' nice accent color\"\"\"\n",
+    "    if not \"color_index\" in pn.state.cache:\n",
+    "        pn.state.cache[\"color_index\"]=0\n",
+    "    elif pn.state.cache[\"color_index\"]==len(nice_accent_colors)-1:\n",
+    "        pn.state.cache[\"color_index\"]=0\n",
+    "    else:\n",
+    "        pn.state.cache[\"color_index\"]+=1\n",
+    "    return nice_accent_colors[pn.state.cache[\"color_index\"]]"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "99cf2a70",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "accent_color, color = get_nice_accent_color()\n",
+    "pn.pane.Markdown(f\"# Color: {accent_color}\", background=accent_color, height=70, margin=0, style={\"color\": color, \"padding\": \"10px\"})"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "4381e595",
+   "metadata": {},
+   "source": [
+    "## Vega and Vega-lite\n",
+    "\n",
+    "You can configure the style of `vega` and `vega-lite` via the `config` key. Please note that only `vega-lite` supports responsive behaviour by setting `width` and `height` to `container`. `vega` requires the `width` and `height` to be integers.\n",
+    "\n",
+    "See [Vega Themes](https://github.com/vega/vega-themes/) and the [Vega Themes Explorer App](https://vega.github.io/vega-themes) for more examples."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "61b566ef",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "def get_vega_plot(theme=\"default\", accent_color=\"blue\"):\n",
+    "    vegalite = {\n",
+    "      \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.json\",\n",
+    "      \"description\": \"A simple bar chart with rounded corners at the end of the bar.\",\n",
+    "      \"width\": \"container\",\n",
+    "      \"height\": \"container\",\n",
+    "      \"data\": {\n",
+    "        \"values\": [\n",
+    "          {\"a\": \"A\", \"b\": 28},\n",
+    "          {\"a\": \"B\", \"b\": 55},\n",
+    "          {\"a\": \"C\", \"b\": 43},\n",
+    "          {\"a\": \"D\", \"b\": 91},\n",
+    "          {\"a\": \"E\", \"b\": 81},\n",
+    "          {\"a\": \"F\", \"b\": 53},\n",
+    "          {\"a\": \"G\", \"b\": 19},\n",
+    "          {\"a\": \"H\", \"b\": 87},\n",
+    "          {\"a\": \"I\", \"b\": 52}\n",
+    "        ]\n",
+    "      },\n",
+    "      \"mark\": {\"type\": \"bar\", \"cornerRadiusEnd\": 4, \"tooltip\": True},\n",
+    "      \"encoding\": {\n",
+    "        \"x\": {\"field\": \"a\", \"type\": \"ordinal\"},\n",
+    "        \"y\": {\"field\": \"b\", \"type\": \"quantitative\"},\n",
+    "        \"color\": {\"value\": accent_color},\n",
+    "      }\n",
+    "    }\n",
+    "\n",
+    "    if theme == \"dark\":\n",
+    "        vegalite[\"config\"] = {\n",
+    "            \"background\": \"#333\",\n",
+    "            \"title\": {\"color\": \"#fff\"},\n",
+    "            \"style\": {\"guide-label\": {\"fill\": \"#fff\"}, \"guide-title\": {\"fill\": \"#fff\"}},\n",
+    "            \"axis\": {\"domainColor\": \"#fff\", \"gridColor\": \"#888\", \"tickColor\": \"#fff\"},\n",
+    "        }\n",
+    "    return vegalite"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "bbb3e3bd",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "vega_plot = get_vega_plot(theme=theme, accent_color=accent_color)\n",
+    "vega_pane = pn.pane.Vega(vega_plot, height=500, sizing_mode=\"stretch_both\", name=\"VEGA\")\n",
+    "vega_pane"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "7e1a5bf7",
+   "metadata": {},
+   "source": [
+    "## Altair\n",
+    "\n",
+    "You can select the theme of Altair plots using [`altair.themes.enable`](https://altair-viz.github.io/user_guide/configuration.html#altair-themes) and the color using the `configure_mark` method.\n",
+    "\n",
+    "For more details see the \n",
+    "\n",
+    "- [Altair Customization Guide](https://altair-viz.github.io/user_guide/customization.html#customizing-visualizations)\n",
+    "- [Altair Themes Guide](https://altair-viz.github.io/user_guide/configuration.html#altair-themes)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "bcccf4cd",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "def get_altair_plot(theme=\"default\", accent_color=\"blue\"):\n",
+    "    if theme == \"dark\":\n",
+    "        alt.themes.enable(\"dark\")\n",
+    "    else:\n",
+    "        alt.themes.enable(\"default\")\n",
+    "    return (\n",
+    "        alt.Chart(data.cars())\n",
+    "        .mark_circle(size=200)\n",
+    "        .encode(\n",
+    "            x='Horsepower:Q',\n",
+    "            y='Miles_per_Gallon:Q',\n",
+    "            tooltip=[\"Name\", \"Origin\", \"Horsepower\", \"Miles_per_Gallon\"],\n",
+    "        )\n",
+    "        .configure_mark(\n",
+    "            color=accent_color\n",
+    "        )\n",
+    "        .properties(\n",
+    "            height=\"container\",\n",
+    "            width=\"container\",\n",
+    "        )\n",
+    "        .interactive()\n",
+    "    )"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "165f8a67",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "altair_plot = get_altair_plot(theme=theme, accent_color=accent_color)\n",
+    "altair_pane = pn.pane.Vega(altair_plot, height=500, sizing_mode=\"stretch_both\", name=\"ALTAIR\")\n",
+    "altair_pane"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "022a151f",
+   "metadata": {},
+   "source": [
+    "## Layout and style the data app\n",
+    "\n",
+    "Note how we mark this component `.servable()` so that it shows up in our data app."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "4c15639b-fe96-4d2d-af7d-ee5342b29cc6",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "pn.Tabs(vega_pane, altair_pane).servable(title=\"Panel - Vega/ Altair with custom styling\")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "2c7e4011-66e1-48d1-92cd-23c9a752649f",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "pn.state.template.param.update(accent_base_color=accent_color, header_background=accent_color)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "e006c1c1",
+   "metadata": {},
+   "source": [
+    "You can serve the app via `panel serve VegaAltairStyle.ipynb` and find it at http://localhost:5006/VegaAltairStyle. You should add the `--autoreload` flag while developing for *hot reloading*."
+   ]
+  }
+ ],
+ "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.7.10"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}
diff --git a/examples/homepage.ipynb b/examples/homepage.ipynb
@@ -137,7 +137,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.8.8"
+   "version": "3.7.10"
   },
   "toc-autonumbering": false,
   "toc-showcode": true,