2_dash_core_components.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Dash core components #\n",
    "\n",
    "Beside html text, dash applications can include graphs, sliders, etc. Their set up is declared in the dash applicatioin layout and they are defined within the [dash core_components library](https://dash.plot.ly/dash-core-components):\n",
    "\n",
    "> The dash_core_components library generates higher-level components like controls and graphs.\n",
    "\n",
    "Import dash and both the html and core components:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 39,
   "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",
    "from jupyter_plotly_dash import JupyterDash # Needed only within Jupyter notebooks"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "We are going to build up a dash application with some markdown text, a dropdown menu and a graph.\n",
    "First we define the application:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 40,
   "metadata": {},
   "outputs": [],
   "source": [
    "app = JupyterDash('my dash app') # Definition of the app within the jupyter notebooks environment"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Markdown text\n",
    "We create some [markdown](https://commonmark.org/help/) text to be included later on in the layout of the dash application:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 41,
   "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\n",
    "Next we add a dropdown menu with 3 options and a default value(see the [documentation](https://dash.plot.ly/dash-core-components) for further options). Note that the options are declared as a list and each one has properties declared as dictionaries."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 42,
   "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": [
    "## Plot\n",
    "We are going to add a graph showing the sin(x) with values produced using numpy. First we generate the data and names for the axis of the plot:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 43,
   "metadata": {},
   "outputs": [],
   "source": [
    "import numpy as np\n",
    "\n",
    "x_values = np.arange(0.,360.,10.)  # Degrees: Numpy array from 0. to 360., in steps of 10. \n",
    "y_values = np.sin(x_values*np.pi/180.) # Sin(x in radians)\n",
    "\n",
    "x_title = 'x (degrees)'\n",
    "y_title = 'sin(x)'"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "A dash plot has two parts: the data and the layout. The details of these two parts are declared with dictionaries."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 44,
   "metadata": {},
   "outputs": [],
   "source": [
    "plot_data = [{'x': x_values, 'y': y_values,\n",
    "         'marker':{'color':'red','size':'10','symbol':'dot'},\n",
    "         'mode': 'markers+lines',\n",
    "         'name': 'Sin(x)', # Name to appear in legend \n",
    "         'type': 'scatter', # bar, contour, etc\n",
    "}]\n",
    "\n",
    "plot_layout = { # Plot set up\n",
    "    'xaxis':{'title': x_title },\n",
    "    'yaxis':{'title': y_title },\n",
    "    'showlegend': True # To show a legend\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "We define now the dash plot combining the data and layout:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 45,
   "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": 46,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div>\n",
       "  <iframe src=\"/app/endpoints/32f0ccf061cb481782a761829f652e00/\" width=800 height=600 frameborder=\"0\"></iframe>\n",
       "  <hr/><a href=\"/app/endpoints/32f0ccf061cb481782a761829f652e00/\" target=\"_new\">Open in new window</a> for /app/endpoints/32f0ccf061cb481782a761829f652e00/\n",
       "</div>"
      ],
      "text/plain": [
       "<jupyter_plotly_dash.dash_wrapper.JupyterDash at 0x124d7390>"
      ]
     },
     "execution_count": 46,
     "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 information provided in the [dash user guide](https://dash.plot.ly/getting-started), add a slider that goes from -10 to 10 embeded in a new html paragraph (`html.P`)."
   ]
  }
 ],
 "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
}