{ "cells": [ { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "import panel as pn\n", "\n", "pn.extension('deckgl', 'echarts', 'plotly', 'vega')" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "This example demonstrates how to use the `Tabs` panel to render a number of complex components without rendering them all at once by enabling the `dynamic` parameter." ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Altair" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "import altair as alt\n", "from vega_datasets import data\n", "\n", "cars = data.cars()\n", "\n", "chart = alt.Chart(cars).mark_circle(size=60).encode(\n", " x='Horsepower',\n", " y='Miles_per_Gallon',\n", " color='Origin',\n", " tooltip=['Name', 'Origin', 'Horsepower', 'Miles_per_Gallon']\n", ").properties(width='container', height='container').interactive()\n", "\n", "altair_pane = pn.panel(chart)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Bokeh" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "from math import pi\n", "import pandas as pd\n", "\n", "from bokeh.palettes import Category20c, Category20\n", "from bokeh.plotting import figure\n", "from bokeh.transform import cumsum\n", "\n", "x = {\n", " 'United States': 157,\n", " 'United Kingdom': 93,\n", " 'Japan': 89,\n", " 'China': 63,\n", " 'Germany': 44,\n", " 'India': 42,\n", " 'Italy': 40,\n", " 'Australia': 35,\n", " 'Brazil': 32,\n", " 'France': 31,\n", " 'Taiwan': 31,\n", " 'Spain': 29\n", "}\n", "\n", "data = pd.Series(x).reset_index(name='value').rename(columns={'index':'country'})\n", "data['angle'] = data['value']/data['value'].sum() * 2*pi\n", "data['color'] = Category20c[len(x)]\n", "\n", "p = figure(sizing_mode='stretch_both', title=\"Pie Chart\", toolbar_location=None,\n", " tools=\"hover\", tooltips=\"@country: @value\", x_range=(-0.5, 1.0), min_height=800)\n", "\n", "r = p.wedge(x=0, y=1, radius=0.4,\n", " start_angle=cumsum('angle', include_zero=True), end_angle=cumsum('angle'),\n", " line_color=\"white\", fill_color='color', legend_field='country', source=data)\n", "\n", "p.axis.axis_label=None\n", "p.axis.visible=False\n", "p.grid.grid_line_color = None\n", "\n", "bokeh_pane = pn.pane.Bokeh(p, sizing_mode=\"stretch_both\", max_width=1300)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## DeckGL" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "MAPBOX_KEY = (\n", " \"pk.eyJ1IjoibWFyY3Nrb3ZtYWRzZW4iLCJhIjoiY2s1anMzcG5rMDYzazNvcm10NTFybTE4cSJ9.\"\n", " \"TV1XBgaMfR-iTLvAXM_Iew\"\n", ")\n", "\n", "json_spec = {\n", " \"initialViewState\": {\n", " \"bearing\": -27.36,\n", " \"latitude\": 52.2323,\n", " \"longitude\": -1.415,\n", " \"maxZoom\": 15,\n", " \"minZoom\": 5,\n", " \"pitch\": 40.5,\n", " \"zoom\": 6\n", " },\n", " \"layers\": [{\n", " \"@@type\": \"HexagonLayer\",\n", " \"autoHighlight\": True,\n", " \"coverage\": 1,\n", " \"data\": \"https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/3d-heatmap/heatmap-data.csv\",\n", " \"elevationRange\": [0, 3000],\n", " \"elevationScale\": 50,\n", " \"extruded\": True,\n", " \"getPosition\": \"@@=[lng, lat]\",\n", " \"id\": \"8a553b25-ef3a-489c-bbe2-e102d18a3211\", \"pickable\": True\n", " }],\n", " \"mapStyle\": \"mapbox://styles/mapbox/dark-v9\",\n", " \"views\": [{\"@@type\": \"MapView\", \"controller\": True}]\n", "}\n", "\n", "deck_gl = pn.pane.DeckGL(json_spec, mapbox_api_key=MAPBOX_KEY, sizing_mode='stretch_width', height=800)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Echarts" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "echart = {\n", " 'title': {\n", " 'text': 'ECharts entry example'\n", " },\n", " 'tooltip': {},\n", " 'legend': {\n", " 'data':['Sales']\n", " },\n", " 'xAxis': {\n", " 'data': [\"shirt\",\"cardign\",\"chiffon shirt\",\"pants\",\"heels\",\"socks\"]\n", " },\n", " 'yAxis': {},\n", " 'series': [{\n", " 'name': 'Sales',\n", " 'type': 'bar',\n", " 'data': [5, 20, 36, 10, 10, 20]\n", " }],\n", " }\n", " \n", "echarts_pane = pn.pane.ECharts(echart, height=800, width=800)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## HoloViews" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "import pandas as pd\n", "import holoviews as hv\n", "import hvplot.pandas\n", "import holoviews.plotting.bokeh\n", "\n", "def sine(frequency=1.0, amplitude=1.0, function='sin'):\n", " xs = np.arange(200)/200*20.0\n", " ys = amplitude*getattr(np, function)(frequency*xs)\n", " return pd.DataFrame(dict(y=ys), index=xs).hvplot(responsive=True)\n", "\n", "dmap = hv.DynamicMap(sine, kdims=['frequency', 'amplitude', 'function']).redim.range(\n", " frequency=(0.1, 10), amplitude=(1, 10)).redim.values(function=['sin', 'cos', 'tan']).opts(height=800, line_width=4)\n", "\n", "hv_panel = pn.pane.HoloViews(dmap, widgets={\n", " 'amplitude': pn.widgets.LiteralInput(value=1., type=(float, int)),\n", " 'function': pn.widgets.RadioButtonGroup,\n", " 'frequency': {'value': 5}, \n", "}, center=True, sizing_mode='stretch_both').layout" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "\n", "## Matplotlib" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "import numpy as np\n", "import matplotlib\n", "\n", "matplotlib.use('agg')\n", "\n", "import matplotlib.pyplot as plt\n", "\n", "Y, X = np.mgrid[-3:3:100j, -3:3:100j]\n", "U = -1 - X**2 + Y\n", "V = 1 + X - Y**2\n", "speed = np.sqrt(U*U + V*V)\n", "\n", "fig0, ax0 = plt.subplots()\n", "strm = ax0.streamplot(X, Y, U, V, color=U, linewidth=2, cmap=plt.cm.autumn)\n", "fig0.colorbar(strm.lines)\n", "\n", "mpl_pane = pn.pane.Matplotlib(fig0, dpi=144, height=800)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Plotly" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "import numpy as np\n", "import plotly.graph_objs as go\n", "\n", "xx = np.linspace(-3.5, 3.5, 100)\n", "yy = np.linspace(-3.5, 3.5, 100)\n", "x, y = np.meshgrid(xx, yy)\n", "z = np.exp(-(x-1)**2-y**2)-(x**3+y**4-x/5)*np.exp(-(x**2+y**2))\n", "\n", "surface = go.Surface(z=z)\n", "layout = go.Layout(\n", " title='Plotly 3D Plot',\n", " autosize=True,\n", " margin=dict(t=50, b=50, r=50, l=50)\n", ")\n", "fig = dict(data=[surface], layout=layout)\n", "\n", "plotly_pane = pn.pane.Plotly(fig)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Dynamic Tabs" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "tabs = pn.Tabs(\n", " ('Altair', altair_pane),\n", " ('Bokeh', bokeh_pane),\n", " ('deck.GL', deck_gl),\n", " ('Echarts', echarts_pane),\n", " ('HoloViews', hv_panel),\n", " ('Matplotlib', mpl_pane),\n", " ('Plotly', plotly_pane),\n", " dynamic=True\n", ")\n", "tabs" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## App\n", "\n", "Lets wrap it into nice template that can be served via `panel serve dynamic_tabs.ipynb`" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "pn.template.FastListTemplate(site=\"Panel\", title=\"Dynamic Tabs\", main=[\"This example demonstrates **how to efficiently render a number of complex components in ``Tabs``** by using the `dynamic` parameter.\", tabs]).servable();" ] } ], "metadata": { "language_info": { "name": "python", "pygments_lexer": "ipython3" } }, "nbformat": 4, "nbformat_minor": 4 }