HvplotInteractive.ipynb

HvplotInteractive.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Turn your Pandas pipelines into data apps with hvplot `.interactive`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# !pip install panel hvplot pandas scipy matplotlib"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import pandas as pd\n",
    "import hvplot.pandas # Adds .hvplot and .interactive methods to Pandas dataframes\n",
    "import panel as pn # Panel is a simple, flexible and enterprise-ready data app framework\n",
    "\n",
    "pn.extension(sizing_mode=\"stretch_width\")\n",
    "pd.set_option(\"precision\", 0)\n",
    "\n",
    "PALETTE = [\"#ff6f69\", \"#ffcc5c\", \"#88d8b0\", ]\n",
    "ACCENT_BASE_COLOR = PALETTE[0]"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**load the data ...**"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "try:\n",
    "    seattle_bikes = pd.read_csv(\"seattle_bikes.csv\", parse_dates=[\"Date\"]).set_index(\"Date\")\n",
    "except FileNotFoundError:\n",
    "    seattle_bikes = pd.read_csv(\"https://data.seattle.gov/api/views/65db-xm6k/rows.csv?accessType=DOWNLOAD\", parse_dates=[\"Date\"]).set_index(\"Date\")\n",
    "    seattle_bikes.to_csv(\"seattle_bikes.csv\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Define your Pipeline"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "def pipeline(seattle_bikes=seattle_bikes, frequency=\"D\", window=50, center=True, win_type=\"gaussian\", std=10):\n",
    "    return (\n",
    "        seattle_bikes\n",
    "        .resample(frequency)\n",
    "        .sum()\n",
    "        .rolling(window, center=center, win_type=win_type)\n",
    "        .sum(std=std)\n",
    "        .dropna()\n",
    "    )\n",
    "pipeline(frequency=\"W\").head(2)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Define your Widgets!\n",
    "\n",
    "You can find the widget reference guides [here](https://panel.holoviz.org/reference/index.html#widgets)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "frequency = pn.widgets.Select(value=\"D\", options=[\"D\", \"W\", \"M\"], name=\"Sampling Frequency\")\n",
    "window = pn.widgets.IntSlider(value=50, start=10, end=100, name=\"Rolling Window Length\")\n",
    "center = pn.widgets.Checkbox(value=True, name=\"Center\")\n",
    "win_type = pn.widgets.Select(value=\"gaussian\", options=[None, \"gaussian\"], name=\"Window Type\")\n",
    "std = pn.widgets.IntSlider(value=10, start=5, end=20, name=\"std\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Create an Interactive Pipeline With Widgets!"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "ipipeline = pipeline(seattle_bikes.interactive(), frequency=frequency, window=window, center=center, win_type=win_type, std=std)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Make `.head` Interactive!"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "nrows = pn.widgets.IntSlider(value=5, start=1, end=10, name=\"Rows\")\n",
    "ihead = ipipeline.head(nrows)\n",
    "ihead"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Make `.plot` Interactive"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "line_width = pn.widgets.IntSlider(value=6, start=1, end=10, name=\"Line Width\")\n",
    "iplot = ipipeline.plot(color=PALETTE, figsize=(15,4), title=\"Seatle Bike Data with Matplotlib and hvplot .interactive\", lw=line_width)\n",
    "iplot"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Make `.hvplot` Interactive!\n",
    "\n",
    "`.hvplot` is a Pandas `.plot` drop in replacement that that creates beautiful, interactive plots for the browser."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "ihvplot = ipipeline.hvplot(responsive=True, min_height=400, color=PALETTE, line_width=line_width, yformatter=\"%.0f\", title=\"Seatle Bike Data with Bokeh and hvplot .interactive\")\n",
    "ihvplot"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Make Anything Interactive with `.pipe`"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Make a Function Interactive"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "def message(seattle_bikes, nrows):\n",
    "    return f\"\"\"With a resampling frequency of **{frequency.value}** and window length of **{window.value}**, the aggregated dataframe contains **{len(seattle_bikes)}** rows. Below we show the first **{nrows}** rows.\"\"\"\n",
    "\n",
    "imessage = ipipeline.pipe(message, nrows=nrows)\n",
    "imessage"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Make a Class Interactive\n",
    "\n",
    "Coming up"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Layout the Data App"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pn.template.FastListTemplate(\n",
    "    site=\"\", title=\"Turn your pipelines into data apps with hvplot .interactive and Panel\",\n",
    "    sidebar=[nrows, frequency, window, center, window, std, line_width],\n",
    "    main=[imessage.panel(), ihead.panel(), iplot.panel(), ihvplot.panel()], \n",
    "    accent_base_color=ACCENT_BASE_COLOR,header_background=ACCENT_BASE_COLOR,\n",
    ").servable();"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "You can **serve the app** with `panel serve HvplotInteractive.ipynb`. Add `--autoreload` for *hot reloading* while developing. The app is available at [http://localhost:5006/HvplotInteractive](http://localhost:5006/HvplotInteractive).\n",
    "\n",
    "- For previewing the app in Jupyter lab check out the [Panel Jupyter Lab Preview](https://blog.holoviz.org/panel_0.12.0.html#JupyterLab-previews).\n",
    "- For deployment options check out the [Server Deployment User Guide](https://panel.holoviz.org/user_guide/Server_Deployment.html)."
   ]
  }
 ],
 "metadata": {
  "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.8.4"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}

Installation

pip install panel hvplot pandas scipy matplotlib jupyterlab
jupyter serverextension enable panel.io.jupyter_server_extension

Explore in Notebook

jupyter lab HvplotInteractive.ipynb

Serve the App

panel serve HvplotInteractive.ipynb

You can find it at http://localhost:5006/HvplotInteractive.

Resources

• Philipp Rudiger - PyData 2021 Talk on hvplot .interactive
• hvplot .interactive reference guide

Assets

hvplot-interactive-speedup15.mp4

amazing! thanks!