Panel - Getting Started Notebook Example

panel_getting_started.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "xSDoNd9-k06z"
   },
   "source": [
    "# Panel - Getting Started Example\n",
    "\n",
    "This example shows how to develop a Panel data app like the below end to end in a Notebook.\n",
    "\n",
    "![Panel Example App](https://user-images.githubusercontent.com/42288570/148636772-c2cc4888-0bf0-4356-8cc5-a962519e4506.gif)."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "vJTx73WGl9CE"
   },
   "source": [
    "## Data Import"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "id": "5DdvrKv33lXS"
   },
   "outputs": [],
   "source": [
    "import pandas as pd"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "id": "_SIb3HVDl7P3"
   },
   "outputs": [],
   "source": [
    "data_url = \"https://cdn.jsdelivr.net/gh/holoviz/panel@master/examples/assets/occupancy.csv\"\n",
    "data = pd.read_csv(data_url, parse_dates=[\"date\"]).set_index(\"date\")\n",
    "data.head()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "CvI7iKvmklmj"
   },
   "source": [
    "# Data Visualization\n",
    "\n",
    "For simplicity we will be using Matplotlib. But you can use any of your favorite plotting libraries."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "id": "3USESUAMikg6"
   },
   "outputs": [],
   "source": [
    "import numpy as np\n",
    "from matplotlib.figure import Figure"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "id": "CkInyLQZjGaI"
   },
   "outputs": [],
   "source": [
    "primary_color = \"#0072B5\"\n",
    "secondary_color = \"#94EA84\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "id": "EvQJRtcNjJAI"
   },
   "outputs": [],
   "source": [
    "def mpl_plot(avg, highlight):\n",
    "    fig = Figure(figsize=(10,5))\n",
    "    ax = fig.add_subplot()\n",
    "    avg.plot(ax=ax, c=primary_color)\n",
    "    if len(highlight):\n",
    "        highlight.plot(style=\"o\", ax=ax, c=secondary_color)\n",
    "    return fig"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "id": "bIYH47UFjPXD"
   },
   "outputs": [],
   "source": [
    "def find_outliers(variable=\"Temperature\", window=20, sigma=10, view_fn=mpl_plot):\n",
    "    avg = data[variable].rolling(window=window).mean()\n",
    "    residual = data[variable] - avg\n",
    "    std = residual.rolling(window=window).std()\n",
    "    outliers = np.abs(residual) > std * sigma\n",
    "    return view_fn(avg, avg[outliers])\n",
    "\n",
    "find_outliers()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "AuGzJDN5mbb3"
   },
   "source": [
    "## Data Exploration\n",
    "\n",
    "Panel can also help you with **interactive data exploration**."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "id": "x6JdIlvxmZjM"
   },
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "\n",
    "pn.extension(sizing_mode=\"stretch_width\") # In Colab you will need to add comms='colab'"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "id": "16SYxO6ymhGd"
   },
   "outputs": [],
   "source": [
    "# Widgets\n",
    "variable = pn.widgets.RadioBoxGroup(\n",
    "    name=\"Variable\", value=\"Temperature\", options=list(data.columns), margin=(-10, 5, 10, 10)\n",
    ")\n",
    "window = pn.widgets.IntSlider(name=\"Window\", value=20, start=1, end=60)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "id": "-uWaBjjWmlZh"
   },
   "outputs": [],
   "source": [
    "# Reactive Functions\n",
    "reactive_outliers = pn.bind(find_outliers, variable, window, 10)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "id": "_obqZ2i8mstY"
   },
   "outputs": [],
   "source": [
    "# Layouts\n",
    "settings = pn.Column(pn.pane.Markdown(\"Variable\", margin=10), variable, window)\n",
    "pn.Row(pn.WidgetBox(settings, sizing_mode=\"fixed\", width=200), pn.panel(reactive_outliers, sizing_mode=\"scale_width\"), margin=10)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "Q3O8ozUYo9JK"
   },
   "source": [
    "## Layout the App"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "id": "gOeMU71OoyU_"
   },
   "outputs": [],
   "source": [
    "template = pn.template.FastListTemplate(\n",
    "    site=\"Panel\",\n",
    "    title=\"Getting Started Example\",\n",
    "    sidebar=[pn.pane.Markdown(\"Variable\"), variable, window],\n",
    "    main=[pn.panel(reactive_outliers, sizing_mode=\"scale_width\")],\n",
    "    accent_base_color=primary_color,\n",
    "    header_background=primary_color,\n",
    ")\n",
    "template.servable();"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "id": "1xZe7Rf3CREw"
   },
   "source": [
    "![Panel Example App](https://user-images.githubusercontent.com/42288570/148636772-c2cc4888-0bf0-4356-8cc5-a962519e4506.gif).\n",
    "\n",
    "## Support us\n",
    "\n",
    "If you want to support us please give us a ⭐ on Github ([Panel](https://github.com/holoviz/panel), [Awesome-Panel](https://github.com/marcskovmadsen/awesome-panel))."
   ]
  }
 ],
 "metadata": {
  "colab": {
   "collapsed_sections": [],
   "name": "panel_getting_started.ipynb",
   "provenance": []
  },
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.9.4"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}

postBuild

# This file is used by Binder
jupyter serverextension enable panel.io.jupyter_server_extension

requirements.txt

panel==0.12.6
pandas
matplotlib

Panel - Getting Started Notebook Example

Introduction

This example shows the components of a Panel App in action: widgets, reactive functions, layouts, panes, and templates

Installation

We will assume you already have installed jupyterlab. If not just add jupyterlab to your requirements.txt.

pip install requirements.txt

To enable the Jupyter Panel Preview run

jupyter serverextension enable panel.io.jupyter_server_extension

Run the app

panel serve panel_getting_started.ipynb

Learn more

To get started with Panel check out the Panel Getting Started Guide. To get or provide help check out the community forum. For more inspiration check out my site awesome-panel.org.

Support us

If you want to support us please give us a ⭐ on Github (Panel, Awesome-Panel)

Promo Video

panel-getting-started-speedup.mp4

jupyter serverextension enable panel.io.jupyter_server_extension
fails:

Enabling: panel.io.jupyter_server_extension

• Writing config: C:\Users<user>.jupyter
  • Validating...
    Error loading server extension panel.io.jupyter_server_extension
    X is panel.io.jupyter_server_extension importable?