4_dash_callback.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Dash callback\n",
    "\n",
    "Dash can produce [reactive applications](https://dash.plot.ly/getting-started-part-2) in which something done to one component will have an effect on a different component. This is achieve using the Input, Output from dash.dependencies and 'calling back' the plot through an application decorator, e.g. '@app'.\n",
    "\n",
    "Here we are going to choose with the dropdown menu which trigonometric function we see."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "#%run -i requirements.ipynb ; foo() # To install any libraries that are needed\n",
    "import dash\n",
    "import dash_core_components as dcc  # For the interactive components\n",
    "import dash_html_components as html # It will translate your text/code into html\n",
    "from dash.dependencies import Input, Output # This is needed in callbacks\n",
    "import numpy as np\n",
    "import plotly.graph_objs as go\n",
    "\n",
    "from jupyter_plotly_dash import JupyterDash # Needed only within Jupyter notebooks\n",
    "\n",
    "app = JupyterDash('Dash with plotly') # Definition of the app within the jupyter notebooks environment"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Markdown text"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [],
   "source": [
    "md_text = '''\n",
    "# A dash application with a dropdown menu\n",
    "Choose a value from the dropdown menu *below*:\n",
    "'''\n",
    "\n",
    "md = dcc.Markdown(children=md_text)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Dropdown menu"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [],
   "source": [
    "dropdownmenu = dcc.Dropdown(id='dropdown',\n",
    "    options=[ #List with option to appear in the dropdown menu\n",
    "        dict(label='Sine',value='sin'),\n",
    "        dict(label='Cosine',value='cos'),\n",
    "        dict(label='Tangent',value='tan')\n",
    "    ],\n",
    "    value='Sine' # This is the default value to appear in the dropdown menu\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Plotly plot\n",
    "We generate trigonometric data with numpy."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [],
   "source": [
    "deg = np.arange(0.,360.,10.)   \n",
    "sin = np.sin(deg*np.pi/180.) \n",
    "cos = np.cos(deg*np.pi/180.) \n",
    "tan = np.tan(deg*np.pi/180.) "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "With the data above we define 3 plotly scatter plots using `go.Scatter`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [],
   "source": [
    "trace_sin = go.Scatter( \n",
    "            x = deg,\n",
    "            y = sin,\n",
    "            mode = 'markers', \n",
    "            name = 'Sine')\n",
    "\n",
    "trace_cos = go.Scatter( \n",
    "            x = deg,\n",
    "            y = cos,\n",
    "            mode = 'lines', \n",
    "            name = 'Cosine', \n",
    ")\n",
    "\n",
    "trace_tan = go.Scatter( \n",
    "            x = deg,\n",
    "            y = tan,\n",
    "            mode = 'lines+markers', \n",
    "            name = 'Tangent', \n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "We define the plot layout using the plotly function `go.Layout`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [],
   "source": [
    "plot_layout = go.Layout(\n",
    "    title='Trigonometry',\n",
    "    xaxis=dict(title='x (degrees)'),\n",
    "    yaxis=dict(title='Trigonometric function',range=[-1.,1.]),\n",
    "    showlegend=True\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Now we define the graph with only an id, as we want it to be reactive to what is entered in the dropdown menu:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [],
   "source": [
    "plot = dcc.Graph(id='trig_plot')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Definition of the dash application\n",
    "Note that now we need to use the ids of the elements that are going to interact, the dropdown menu and the graph."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [],
   "source": [
    "app.layout = html.Div([md,dropdownmenu,plot])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Callback\n",
    "Once the Dash application is defined, then the connections can be made. The connections are done through a callback function decorator ,`@app.callback`,  plus a function that will establish what happens in the update.\n",
    "\n",
    "In this case we use a 'callback' to connect the dropdown menu (Input) to what is being plot in the figure (Output). Below, the `component_id=` and the `component_property=` can actually be omitted as they are implicitley assumed. Note also, that the input is declared as a list, as it can contain several elements."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {},
   "outputs": [],
   "source": [
    "@app.callback(\n",
    "    Output(component_id='trig_plot',component_property='figure'),\n",
    "    [Input(component_id='dropdown', component_property='value')])\n",
    "\n",
    "def update_plot(input_value):\n",
    "    plot_data=[eval('trace_'+input_value)]\n",
    "    figure2update = dict(data=plot_data,layout=plot_layout)\n",
    "    return figure2update"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {
    "scrolled": true
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div>\n",
       "  <iframe src=\"/app/endpoints/53d954f05f20427bad79a910cdbd80e8/\" width=800 height=600 frameborder=\"0\"></iframe>\n",
       "  <hr/><a href=\"/app/endpoints/53d954f05f20427bad79a910cdbd80e8/\" target=\"_new\">Open in new window</a> for /app/endpoints/53d954f05f20427bad79a910cdbd80e8/\n",
       "</div>"
      ],
      "text/plain": [
       "<jupyter_plotly_dash.dash_wrapper.JupyterDash at 0x7fba3c5ad6d8>"
      ]
     },
     "execution_count": 10,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "app # In a jupyter notebook environment"
   ]
  }
 ],
 "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.6.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}