Skip to content

Commit

Permalink
Add main gallery [doc-build] (#332)
Browse files Browse the repository at this point in the history
  • Loading branch information
@philippjfr
philippjfr committed Mar 25, 2019
1 parent 210da8d commit df79e9c
Show file tree
Hide file tree
Showing 7 changed files with 466 additions and 5 deletions.
9 changes: 9 additions & 0 deletions doc/conf.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,13 @@
'github_org': 'pyviz',
'github_project': 'panel',
'galleries': {
'gallery': {
'title': 'Gallery',
'sections': [
'links',
'external'
]
},
'reference': {
'title': 'Reference Gallery',
'sections': [
Expand All @@ -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')
)

Expand Down
112 changes: 112 additions & 0 deletions examples/gallery/external/deck.gl.ipynb
View file
Original file line number Diff line number Diff line change
@@ -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
}
129 changes: 129 additions & 0 deletions examples/gallery/links/bokeh_property_editor.ipynb
View file
Original file line number Diff line number Diff line change
@@ -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
}
57 changes: 57 additions & 0 deletions examples/gallery/links/holoviews_glyph_link.ipynb
View file
Original file line number Diff line number Diff line change
@@ -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
}
58 changes: 58 additions & 0 deletions examples/gallery/links/plotly_link.ipynb
View file
Original file line number Diff line number Diff line change
@@ -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
}
Loading

0 comments on commit df79e9c

Please sign in to comment.