{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import numpy as np\n",
    "import panel as pn\n",
    "\n",
    "import holoviews as hv\n",
    "import holoviews.plotting.bokeh\n",
    "\n",
    "pn.extension()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "HoloViews-generated Bokeh plots can be statically linked to widgets that control their properties, allowing you to export static HTML files that allow end-user customization of appearance."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from bokeh.core.enums import MarkerType\n",
    "\n",
    "colors = [\"black\", \"red\", \"blue\", \"green\", \"gray\"]\n",
    "markers = list(MarkerType)\n",
    "\n",
    "# Define widget for properties we want to change\n",
    "alpha_widget = pn.widgets.FloatSlider(value=0.5, start=0, end=1, name='Alpha')\n",
    "size_widget = pn.widgets.FloatSlider(value=12, start=3, end=20, name='Size')\n",
    "color_widget = pn.widgets.ColorPicker(value='#f80000', name='Color')\n",
    "marker_widget = pn.widgets.Select(options=markers, value='circle', name='Marker')\n",
    "\n",
    "# Declare a Points object and apply some options\n",
    "points = hv.Points(np.random.randn(200, 2)).options(\n",
    "    padding=0.1, width=500, height=500, line_color='black')\n",
    "\n",
    "# Link the widget value parameter to the property on the glyph\n",
    "alpha_widget.jslink(points, value='glyph.fill_alpha')\n",
    "size_widget.jslink(points, value='glyph.size')\n",
    "color_widget.jslink(points, value='glyph.fill_color')\n",
    "marker_widget.jslink(points, value='glyph.marker')\n",
    "\n",
    "pn.Row(points, pn.Column(alpha_widget, color_widget, marker_widget, size_widget))"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}
