{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "pn.extension('vega')"
   ]
  },
  {
   "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/v3.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\": 600,\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",
    "}\n",
    "\n",
    "vega = pn.pane.Vega(imdb, width=750, height=425)\n",
    "\n",
    "# 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",
    "\"\"\"})\n",
    "\n",
    "# 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",
    "\"\"\"})\n",
    "\n",
    "# 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",
    "\"\"\"})\n",
    "\n",
    "pn.Row(vega, pn.Column(color_lims, imdb_bins, tomato_bins))"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}
