Add main gallery [doc-build]

doc/conf.py

@@ -24,6 +24,13 @@
     'github_org': 'pyviz',
     'github_project': 'panel',
     'galleries': {
+        'gallery': {
+            'title': 'Gallery',
+            'sections': [
+                'links',
+                'external'
+            ]
+        },
         'reference': {
             'title': 'Reference Gallery',
             'sections': [
@@ -37,8 +44,10 @@
 
 _NAV =  (
     ('User Guide', 'user_guide/index'),
+    ('Gallery', 'gallery/index'),
     ('Reference Gallery', 'reference/index'),
     ('Developer Guide', 'developer_guide/index'),
+    ('FAQ', 'FAQ'),
     ('About', 'about')
 )
 

examples/gallery/external/deck.gl.ipynb

@@ -0,0 +1,112 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Demonstrates loading deck.gl as external JSS and CSS components and rendering it as part of an app and then linking it to panel widgets."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import panel as pn\n",
+    "\n",
+    "js_files = {'deck': 'https://unpkg.com/deck.gl@^6.0.0/deckgl.min.js',\n",
+    "            'mapboxgl': 'https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js'}\n",
+    "css_files = ['https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css']\n",
+    "\n",
+    "pn.extension(js_files=js_files, css_files=css_files)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "First we declare the a div to render the plot into, then we declare the deck.gl code to render a plot."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "html = \"\"\"\n",
+    "<div id=\"deckgl-container\" style=\"width: 800px; height: 500px;\"></div>\n",
+    "\n",
+    "<script type=\"text/javascript\">\n",
+    "// Data\n",
+    "var CITIES = [\n",
+    "  {\"city\":\"San Francisco\",\"state\":\"California\",\"latitude\":37.7751,\"longitude\":-122.4193},\n",
+    "  {\"city\":\"New York\",\"state\":\"New York\",\"latitude\":40.6643,\"longitude\":-73.9385},\n",
+    "  {\"city\":\"Los Angeles\",\"state\":\"California\",\"latitude\":34.051597,\"longitude\":-118.244263},\n",
+    "  {\"city\":\"London\",\"state\":\"United Kingdom\",\"latitude\":51.5074,\"longitude\":-0.1278},\n",
+    "  {\"city\":\"Hyderabad\",\"state\":\"India\",\"latitude\":17.3850,\"longitude\":78.4867}\n",
+    "];\n",
+    "\n",
+    "var deckgl = new deck.DeckGL({\n",
+    "  container: 'deckgl-container',\n",
+    "  mapboxApiAccessToken: 'pk.eyJ1IjoicGhpbGlwcGpmciIsImEiOiJjajM2bnE4MWcwMDNxMzNvMHMzcGV3NjlnIn0.976fZ1azCrTh50lEdZTpSg',\n",
+    "  longitude: CITIES[0].longitude,\n",
+    "  latitude: CITIES[0].latitude,\n",
+    "  zoom: 10,\n",
+    "  layers: [\n",
+    "    new deck.ScatterplotLayer({\n",
+    "      data: CITIES,\n",
+    "      getPosition: d => [d.longitude, d.latitude],\n",
+    "      radiusMinPixels: 10\n",
+    "    })\n",
+    "  ]\n",
+    "});\n",
+    "</script>\n",
+    "\"\"\"\n",
+    "deckgl = pn.pane.HTML(html, height=500, width=800)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Next we can declare a bokeh widget and define a ``jslink`` to update the deck.gl plot whenever the widget state changes. The example is adapted from http://deck.gl/showcases/gallery/viewport-transition but replaces d3 widgets with panel based widgets."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "widget = pn.widgets.RadioButtonGroup(options=['San Fransisco', 'New York', 'Los Angeles', 'London', 'Hyderabad'])\n",
+    "\n",
+    "update_city = \"\"\"\n",
+    "var d = CITIES[source.active];\n",
+    "deckgl.setProps({\n",
+    "  viewState: {\n",
+    "    longitude: d.longitude,\n",
+    "    latitude: d.latitude,\n",
+    "    zoom: 10,\n",
+    "    transitionInterpolator: new deck.FlyToInterpolator(),\n",
+    "    transitionDuration: 5000\n",
+    "  }\n",
+    "});\n",
+    "\"\"\"\n",
+    "\n",
+    "widget.jslink(deckgl, code={'active': update_city});\n",
+    "\n",
+    "pn.Column(widget, deckgl)"
+   ]
+  }
+ ],
+ "metadata": {
+  "language_info": {
+   "name": "python",
+   "pygments_lexer": "ipython3"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}

examples/gallery/links/bokeh_property_editor.ipynb

@@ -0,0 +1,129 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import numpy as np\n",
+    "import panel as pn\n",
+    "\n",
+    "pn.extension()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Bokeh's property system defines the valid properties for all the different bokeh models. Using ``jslink`` we can easily tie a wiget value to bokeh properties on another widget or plot. This example defines two functions which generate a property editor for the most common bokeh properties. First we define two functions which generate a set of widgets linked to a plot:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from bokeh.core.enums import LineDash, LineCap, MarkerType, NamedColor\n",
+    "from bokeh.models.plots import Model, _list_attr_splat\n",
+    "\n",
+    "def meta_widgets(model):\n",
+    "    tabs = pn.Tabs(width=500)\n",
+    "    widgets = get_widgets(model)\n",
+    "    if widgets:\n",
+    "        tabs.append((type(model).__name__, widgets))\n",
+    "    for p, v in model.properties_with_values().items():\n",
+    "        if isinstance(v, _list_attr_splat):\n",
+    "            v = v[0]\n",
+    "        if isinstance(v, Model):\n",
+    "            subtabs = meta_widgets(v)\n",
+    "            if subtabs is not None:\n",
+    "                tabs.append((p.title(), subtabs))\n",
+    "                \n",
+    "    if hasattr(model, 'renderers'):\n",
+    "        for r in model.renderers:\n",
+    "            tabs.append((type(r).__name__, meta_widgets(r)))\n",
+    "    if hasattr(model, 'axis'):\n",
+    "        for pre, axis in zip('XY', model.axis):\n",
+    "            tabs.append(('%s-Axis' % pre, meta_widgets(axis)))\n",
+    "    if hasattr(model, 'grid'):\n",
+    "        for pre, grid in zip('XY', model.grid):\n",
+    "            tabs.append(('%s-Grid' % pre, meta_widgets(grid)))\n",
+    "    if not widgets and not len(tabs) > 1:\n",
+    "        return None\n",
+    "    elif not len(tabs) > 1:\n",
+    "        return tabs[0]\n",
+    "    return tabs\n",
+    "        \n",
+    "def get_widgets(model, skip_none=True, **kwargs):\n",
+    "    widgets = []\n",
+    "    for p, v in model.properties_with_values().items():\n",
+    "        if isinstance(v, dict):\n",
+    "            if 'value' in v:\n",
+    "                v = v.get('value')\n",
+    "            else:\n",
+    "                continue\n",
+    "        if v is None and skip_none:\n",
+    "            continue\n",
+    "                \n",
+    "        ps = dict(name=p, value=v, **kwargs)\n",
+    "        if 'alpha' in p:\n",
+    "            w = pn.widgets.FloatSlider(start=0, end=1, **ps)\n",
+    "        elif 'color' in p:\n",
+    "            if v in list(NamedColor):\n",
+    "                w = pn.widgets.Select(options=list(NamedColor), **ps)\n",
+    "            else:\n",
+    "                w = pn.widgets.ColorPicker(**ps)\n",
+    "        elif p.endswith('width'):\n",
+    "            w = pn.widgets.FloatSlider(start=0, end=20, **ps)\n",
+    "        elif 'marker' in p:\n",
+    "            w = pn.widgets.Select(name=p, options=list(MarkerType), value=v)\n",
+    "        elif p.endswith('cap'):\n",
+    "            w = pn.widgets.Select(name=p, options=list(LineCap), value=v)\n",
+    "        elif p == 'size':\n",
+    "            w = pn.widgets.FloatSlider(start=0, end=20, **ps)\n",
+    "        elif p.endswith('text') or p.endswith('label'):\n",
+    "            w = pn.widgets.TextInput(**ps)\n",
+    "        elif p.endswith('dash'):\n",
+    "            patterns = list(LineDash)\n",
+    "            w = pn.widgets.Select(name=p, options=patterns, value=v or patterns[0])\n",
+    "        else:\n",
+    "            continue\n",
+    "        w.jslink(model, value=p)\n",
+    "        widgets.append(w)\n",
+    "    return pn.Column(*sorted(widgets, key=lambda w: w.name))"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Having defined these helper functions we can now declare a plot and use the ``meta_widgets`` function to generate the GUI:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from bokeh.plotting import figure\n",
+    "\n",
+    "p = figure(title='This is a title', x_axis_label='x-axis', y_axis_label='y-axis')\n",
+    "xs = np.linspace(0, 10)\n",
+    "r = p.scatter(xs, np.sin(xs))\n",
+    "\n",
+    "pn.Row(p, meta_widgets(p))"
+   ]
+  }
+ ],
+ "metadata": {
+  "language_info": {
+   "name": "python",
+   "pygments_lexer": "ipython3"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}

examples/gallery/links/holoviews_glyph_link.ipynb

@@ -0,0 +1,57 @@
+{
+ "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": "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
+}

examples/gallery/links/plotly_link.ipynb

@@ -0,0 +1,58 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import numpy as np\n",
+    "import panel as pn\n",
+    "\n",
+    "pn.extension('plotly')"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Since Plotly plots are represented as simple Javascript objects we can easily define a JS callback to modify the data and trigger an update in a plot:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import numpy as np\n",
+    "\n",
+    "xs, ys = np.mgrid[-3:3:0.2, -3:3:0.2]\n",
+    "contour = dict(ncontours=4, type='contour', z=np.sin(xs**2*ys**2))\n",
+    "layout = {'width': 600, 'height': 500, 'margin': {'l': 8, 'b': 8, 'r': 8, 't': 8}}\n",
+    "fig = dict(data=contour, layout=layout)\n",
+    "plotly_pane = pn.pane.Plotly(fig, width=600, height=500)\n",
+    "\n",
+    "buttons = pn.widgets.RadioButtonGroup(value='Medium', options=['Low', 'Medium', 'High'])\n",
+    "\n",
+    "range_callback = \"\"\"\n",
+    "ncontours = [2, 5, 10]\n",
+    "target.data[0].ncontours = ncontours[source.active]\n",
+    "target.properties.data.change.emit()\n",
+    "\"\"\"\n",
+    "\n",
+    "buttons.jslink(plotly_pane, code={'active': range_callback})\n",
+    "\n",
+    "pn.Column(buttons, plotly_pane)"
+   ]
+  }
+ ],
+ "metadata": {
+  "language_info": {
+   "name": "python",
+   "pygments_lexer": "ipython3"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}