{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "pn.extension('vega', sizing_mode=\"stretch_width\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "This example demonstrates how to link Panel widgets to a Vega pane by editing the Vega spec using callbacks and triggering updates in the plot."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "imdb = {\n",
    "  \"$schema\": \"https://vega.github.io/schema/vega-lite/v4.json\",\n",
    "  \"data\": {\"url\": \"https://raw.githubusercontent.com/vega/vega/master/docs/data/movies.json\"},\n",
    "  \"transform\": [{\n",
    "    \"filter\": {\"and\": [\n",
    "      {\"field\": \"IMDB Rating\", \"valid\": True},\n",
    "      {\"field\": \"Rotten Tomatoes Rating\", \"valid\": True}\n",
    "    ]}\n",
    "  }],\n",
    "  \"mark\": \"rect\",\n",
    "  \"width\": \"container\",\n",
    "  \"height\": 400,\n",
    "  \"encoding\": {\n",
    "    \"x\": {\n",
    "      \"bin\": {\"maxbins\":60},\n",
    "      \"field\": \"IMDB Rating\",\n",
    "      \"type\": \"quantitative\"\n",
    "    },\n",
    "    \"y\": {\n",
    "      \"bin\": {\"maxbins\": 40},\n",
    "      \"field\": \"Rotten Tomatoes Rating\",\n",
    "      \"type\": \"quantitative\"\n",
    "    },\n",
    "    \"color\": {\n",
    "      \"aggregate\": \"count\",\n",
    "      \"type\": \"quantitative\"\n",
    "    }\n",
    "  },\n",
    "  \"config\": {\n",
    "    \"view\": {\n",
    "      \"stroke\": \"transparent\"\n",
    "    }\n",
    "  }\n",
    "}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "vega = pn.pane.Vega(imdb, height=425)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Declare range slider to adjust the color limits\n",
    "color_lims = pn.widgets.RangeSlider(name='Color limits', start=0, end=125, value=(0, 40), step=1)\n",
    "color_lims.jslink(vega, code={'value': \"\"\"\n",
    "target.data.encoding.color.scale = {domain: source.value};\n",
    "target.properties.data.change.emit()\n",
    "\"\"\"});"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Declare slider to control the number of bins along the x-axis\n",
    "imdb_bins = pn.widgets.IntSlider(name='IMDB Ratings Bins', start=0, end=125, value=60, step=25)\n",
    "imdb_bins.jslink(vega, code={'value': \"\"\"\n",
    "target.data.encoding.x.bin.maxbins = source.value;\n",
    "target.properties.data.change.emit()\n",
    "\"\"\"});"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Declare slider to control the number of bins along the y-axis\n",
    "tomato_bins = pn.widgets.IntSlider(name='Rotten Tomato Ratings Bins', start=0, end=125, value=40, step=25)\n",
    "tomato_bins.jslink(vega, code={'value': \"\"\"\n",
    "target.data.encoding.y.bin.maxbins = source.value;\n",
    "target.properties.data.change.emit()\n",
    "\"\"\"});"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pn.Row(vega, pn.Column(color_lims, imdb_bins, tomato_bins, sizing_mode=\"fixed\", width=400))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## App\n",
    "\n",
    "Lets wrap it into nice template that can be served via `panel serve vega_heatmap_link.ipynb`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pn.template.FastListTemplate(\n",
    "    site=\"Panel\", title=\"Vega Heatmap w. JS Links\", \n",
    "    sidebar=[color_lims, imdb_bins, tomato_bins],\n",
    "    main=[\n",
    "        pn.pane.Markdown(\"This example demonstrates how to link Panel widgets to a **Vega pane** by editing the Vega spec using **js callbacks** and triggering updates in the plot.\"), \n",
    "        vega\n",
    "    ]\n",
    ").servable();"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}