{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Widgets and interactive outputs\n",
    "===============================\n",
    "\n",
    "Jupyter Notebooks have support for many kinds of interactive outputs.\n",
    "These should all be supported in MyST-NB by passing the output HTML through\n",
    "automatically.\n",
    "\n",
    "This page has a few common examples. First off, we'll download a little bit of data\n",
    "and show its structure:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import plotly.express as px\n",
    "data = px.data.iris()\n",
    "data.head()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Plotting libraries\n",
    "\n",
    "## Altair\n",
    "\n",
    "Interactive outputs will work under the assumption that the outputs they produce have\n",
    "self-contained HTML that works without requiring any external dependencies to load.\n",
    "For example, the `Altair` \"html\" output works well:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import altair as alt\n",
    "alt.Chart(data=data).mark_point().encode(\n",
    "    x=\"sepal_width\",\n",
    "    y=\"sepal_length\",\n",
    "    color=\"species\",\n",
    "    size='sepal_length'\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Plotly\n",
    "\n",
    "Plotly is another interactive plotting library that provides a high-level API for\n",
    "visualization. You can display plotly plots like so:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import plotly.express as px\n",
    "df = px.data.iris()\n",
    "fig = px.scatter(df, x=\"sepal_width\", y=\"sepal_length\", color=\"species\", size=\"sepal_length\")\n",
    "fig"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Bokeh"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from bokeh.plotting import figure, show, output_notebook\n",
    "output_notebook()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "p = figure()\n",
    "p.circle(data[\"sepal_width\"], data[\"sepal_length\"], color=data[\"species\"])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# ipywidgets\n",
    "\n",
    "You may also run code for Jupyter Widgets in your document, and the interactive HTML\n",
    "outputs will embed themselves in your side.\n",
    "\n",
    "Here is an example from ipyvolume:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import ipywidgets as widgets\n",
    "widgets.IntSlider(\n",
    "    value=7,\n",
    "    min=0,\n",
    "    max=10,\n",
    "    step=1,\n",
    "    description='Test:',\n",
    "    disabled=False,\n",
    "    continuous_update=False,\n",
    "    orientation='horizontal',\n",
    "    readout=True,\n",
    "    readout_format='d'\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "tab_contents = ['P0', 'P1', 'P2', 'P3', 'P4']\n",
    "children = [widgets.Text(description=name) for name in tab_contents]\n",
    "tab = widgets.Tab()\n",
    "tab.children = children\n",
    "tab.titles = [str(i) for i in range(len(children))]\n",
    "tab"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "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.7.3"
  },
  "widgets": {
   "application/vnd.jupyter.widget-state+json": {
    "state": {},
    "version_major": 2,
    "version_minor": 0
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}