3_plotly_in_dash.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Plotly plot within Dash\n",
    "\n",
    "Dash can include plots made using the plotly library, which is more flexible than using Dash alone. We are going to include a plotly plot in a dash application.\n",
    "\n",
    "We start by importing plotly and the rest of the packages we need. Then we define the Dash application."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 17,
   "metadata": {},
   "outputs": [],
   "source": [
    "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",
    "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": 18,
   "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": 19,
   "metadata": {},
   "outputs": [],
   "source": [
    "dropdownmenu = dcc.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": 20,
   "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` and store them as a data list, `plot_data`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 21,
   "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",
    ")\n",
    "\n",
    "plot_data = [trace_sin, trace_cos, trace_tan]"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "We define the plot layout using the plotly function `go.Layout`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 22,
   "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",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "We define now the dash graph combining the data and layout:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 23,
   "metadata": {},
   "outputs": [],
   "source": [
    "plot = dcc.Graph(id='trig_plot',figure=dict(data=plot_data,layout=plot_layout))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Combining the different elements in a dash application\n",
    "We combine the thre elements we have previously defined: the markdown text, the dropdown menu and the plot, as a list within one html section. Then we run the application."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 24,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div>\n",
       "  <iframe src=\"/app/endpoints/1d9e41911b2d4bc3ac7617c1e3d1a1d6/\" width=800 height=600 frameborder=\"0\"></iframe>\n",
       "  <hr/><a href=\"/app/endpoints/1d9e41911b2d4bc3ac7617c1e3d1a1d6/\" target=\"_new\">Open in new window</a> for /app/endpoints/1d9e41911b2d4bc3ac7617c1e3d1a1d6/\n",
       "</div>"
      ],
      "text/plain": [
       "<jupyter_plotly_dash.dash_wrapper.JupyterDash at 0xf92b10>"
      ]
     },
     "execution_count": 24,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "app.layout = html.Div([md,dropdownmenu,plot])\n",
    "app # In a jupyter notebook environment"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Excersise:** Using the [plotly documentation](https://plot.ly/python/reference/) change the hover mode to the closest point instead of the x-axis, as it currently is."
   ]
  }
 ],
 "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.2"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}