016 Lesson  Dash/Dash notes.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Build dashboards in  using Dash."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### AGENDA\n",
    "\n",
    "* Installation\n",
    "* Get started   \n",
    "* Core Components\n",
    "* Interactivity\n",
    "* Authentication\n",
    "* Hosting Dashboards on Heroku"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "*  Dash is Python framework for building web applications\n",
    "*  It built on top of Flask, Plotly.js, React and React Js\n",
    "*  It enables you to build dashboards using pure Python\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Dash Installation"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "pip install dash"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "###  Dash App Layout"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### A Dash application is usually composed of two parts.\n",
    "* 1)The first part is the layout and describes how the app will look like \n",
    "* 2)Second part describes the interactivity of the application"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "* Dash provides HTML classes that enable us to generate HTML content with Python. To use these classes, we need to import dash_core_components and dash_html_components\n",
    "* You can also create your own custom components using Javascript and React Js."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Get started"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "* 1) create a file called app.py using pycharm \n",
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "* 2)Then import these packages."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import dash\n",
    "import dash_core_components as dcc\n",
    "import dash_html_components as html"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "* 3)We initialize Dash by calling the Dash class of dash"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "app = dash.Dash()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "4)Create the layout for our application.\n",
    "\n",
    "* -We use the Div class from the dash_html_components to create an HTML Div. \n",
    "* -Then use the HTML components to generate HTML components such as H1, H2 etc.. dash_html_components has all HTML tags\n",
    "* -In order to create a graph on our layout, we use the Graph class from dash_core_components.\n",
    "* -Graph renders interactive data visualizations using plotly.js.\n",
    "* -The Graph class expects a figure object with the data to be plotted and the layout details.\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "app.layout = html.Div(style={'backgroundColor': colors['background']}, children=[\n",
    "    html.H1(\n",
    "        children='Hello Dash',\n",
    "        style={\n",
    "            'textAlign': 'center',\n",
    "            'color': colors['text']\n",
    "        }\n",
    "    ),\n",
    "    html.Div(children='Dash: A web application framework for Python.', style={\n",
    "        'textAlign': 'center',\n",
    "        'color': colors['text']\n",
    "    }),\n",
    "    dcc.Graph(\n",
    "        id='Graph1',\n",
    "        figure={\n",
    "            'data': [\n",
    "                {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},\n",
    "                {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},\n",
    "            ],\n",
    "            'layout': {\n",
    "                'plot_bgcolor': colors['background'],\n",
    "                'paper_bgcolor': colors['background'],\n",
    "                'font': {\n",
    "                    'color': colors['text']\n",
    "                }\n",
    "            }\n",
    "        }\n",
    "    )\n",
    "])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "5 ) Dash also allows you to do stylings such as changing the background color and text color. You can change the background by using the style attribute and passing an object with your specific color.\n",
    "* -- In our case, we have defined a color dictionary with the background and text color we would like. Similarly, we can change the layout background using the plot_bgcolor attribute.\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "colors = {\n",
    "    'background': '#111111',\n",
    "    'text': '#7FDBFF'\n",
    "}\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "6) In order to view our visualization, we need to run our web server "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "if __name__ == '__main__':\n",
    "    app.run_server(debug=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "7) Next, move to the terminal and start the server by typing the code below: python app.py\n",
    "\n",
    "* This will start a new web server at http://127.0.0.1:8050/. Head over there and see your newly created dashboard."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Generating Scatter Plots"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "* we import the normal dash components \n",
    "* We also need to import Plotly graph_objs in order to plot the scatter plot\n",
    "* we use the Div class and Graph components from Dash in order to accomplish this.\n",
    "* The Graph component takes a figure object which has the data and the layout description\n",
    "* We plot the scatter plot using graph_objs scatter property. In order to make sure the plot is a scatter plot we pass a mode attribute and set it as markers"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import dash\n",
    "import dash_core_components as dcc\n",
    "import dash_html_components as html\n",
    "import pandas as pd\n",
    "import plotly.graph_objs as go\n",
    "\n",
    "app = dash.Dash()\n",
    "\n",
    "df = pd.read_csv(\n",
    "    'https://gist.githubusercontent.com/chriddyp/' +\n",
    "    '5d1ea79569ed194d432e56108a04d188/raw/' +\n",
    "    'a9f9e8076b837d541398e999dcbac2b2826a81f8/'+\n",
    "    'gdp-life-exp-2007.csv')\n",
    "\n",
    "\n",
    "app.layout = html.Div([\n",
    "    dcc.Graph(\n",
    "        id='life-exp-vs-gdp',\n",
    "        figure={\n",
    "            'data': [\n",
    "                go.Scatter(\n",
    "                    x=df[df['continent'] == i]['gdp per capita'],\n",
    "                    y=df[df['continent'] == i]['life expectancy'],\n",
    "                    text=df[df['continent'] == i]['country'],\n",
    "                    mode='markers',\n",
    "                    opacity=0.8,\n",
    "                    marker={\n",
    "                        'size': 15,\n",
    "                        'line': {'width': 0.5, 'color': 'white'}\n",
    "                    },\n",
    "                    name=i\n",
    "                ) for i in df.continent.unique()\n",
    "            ],\n",
    "            'layout': go.Layout(\n",
    "                xaxis={'type': 'log', 'title': 'GDP Per Capita'},\n",
    "                yaxis={'title': 'Life Expectancy'},\n",
    "                margin={'l': 40, 'b': 40, 't': 10, 'r': 10},\n",
    "                legend={'x': 0, 'y': 1},\n",
    "                hovermode='closest'\n",
    "            )\n",
    "        }\n",
    "    )\n",
    "])\n",
    "\n",
    "if __name__ == '__main__':\n",
    "    app.run_server()\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Core Components"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Markdown"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Sometimes you may need to include a lot of text in your dashboards. You can do this using dash_core_components Mardown attribute as shown below."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import dash\n",
    "import dash_core_components as dcc\n",
    "import dash_html_components as html\n",
    "\n",
    "app = dash.Dash()\n",
    "\n",
    "markdown_text = '''\n",
    "### Dash and Markdown\n",
    "A lot of text\n",
    "'''\n",
    "\n",
    "app.layout = html.Div([\n",
    "    dcc.Markdown(children=markdown_text)\n",
    "])\n",
    "\n",
    "if __name__ == '__main__':\n",
    "    app.run_server()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Dropdown"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "You can generate a drop down as shown below. You do by calling Dropdown"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# SINGLE SELECT \n",
    "dcc.Dropdown(\n",
    "        options=[\n",
    "            {'label': 'New York City', 'value': 'NYC'},\n",
    "            {'label': u'Montréal', 'value': 'MTL'},\n",
    "            {'label': 'San Francisco', 'value': 'SF'}\n",
    "        ],\n",
    "        value='MTL'\n",
    "    )"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "* Generating a multi-select drop down \n",
    "* The only changes are that you set the multi attribute to true since it is False by default.\n",
    "* You can then specify the items you would like to be multi-selected by default by specifying the values attribut"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# MULTISELECT \n",
    "\n",
    "html.Label('Multi-Select Dropdown'),\n",
    "    dcc.Dropdown(\n",
    "        options=[\n",
    "            {'label': 'New York City', 'value': 'NYC'},\n",
    "            {'label': u'Montréal', 'value': 'MTL'},\n",
    "            {'label': 'San Francisco', 'value': 'SF'}\n",
    "        ],\n",
    "        value=['MTL', 'SF'],\n",
    "        multi=True\n",
    "    )"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Radio buttons "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Radio buttons can be generated using the RadioItems attribute. You then pass the options as a list of dictionaries. You can also set a default value by specifying the values attribute"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "html.Label('Radio Items'),\n",
    "    dcc.RadioItems(\n",
    "        options=[\n",
    "            {'label': 'New York City', 'value': 'NYC'},\n",
    "            {'label': u'Montréal', 'value': 'MTL'},\n",
    "            {'label': 'San Francisco', 'value': 'SF'}\n",
    "        ],\n",
    "        value='MTL'\n",
    "    )"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Checklist"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    " html.Label('Checkboxes'),\n",
    "    dcc.Checklist(\n",
    "        options=[\n",
    "            {'label': 'New York City', 'value': 'NYC'},\n",
    "            {'label': u'Montréal', 'value': 'MTL'},\n",
    "            {'label': 'San Francisco', 'value': 'SF'}\n",
    "        ],\n",
    "        values=['MTL', 'SF']\n",
    "    )"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Input"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "html.Label('Text Box'),\n",
    "    dcc.Input(value='MTL', type='text')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Interactivity"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "* We need to import Input and Output from dash.dependencies.\n",
    "* Below we create an input text and bind it a callback such that whenever you type something into that box, it updates my-div in real time.\n",
    "* In order to enable this Dash provides a decorator @app which makes it possible to bind a callback function to my-div and the HTML input field."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import dash\n",
    "import dash_core_components as dcc\n",
    "import dash_html_components as html\n",
    "from dash.dependencies import Input, Output\n",
    "\n",
    "app = dash.Dash()\n",
    "\n",
    "app.layout = html.Div([\n",
    "    dcc.Input(id='my-id', value='Dash App', type='text'),\n",
    "    html.Div(id='my-div')\n",
    "])\n",
    "\n",
    "\n",
    "@app.callback(\n",
    "    Output(component_id='my-div', component_property='children'),\n",
    "    [Input(component_id='my-id', component_property='value')]\n",
    ")\n",
    "def update_output_div(input_value):\n",
    "    return 'You\\'ve entered \"{}\"'.format(input_value)\n",
    "\n",
    "\n",
    "if __name__ == '__main__':\n",
    "    app.run_server()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Authentication"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "There  two forms of authentication maintained by Plotly:\n",
    "\n",
    "* dash-enterprise-auth, the authentication and authorization layer built-in to Plotly's commercial product, Dash Enterprise.\n",
    "* dash-auth, a simple basic auth implementation."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Basic Auth, you hardcode a set of usernames and passwords in your application. This method has some challenges such as users cannot log out of your application, users cannot create accounts or change passwords, and you are responsible for safely storing the usernames and passwords in your code. Plotly OAuth provides authentication through your online Plotly account, and it's not free."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### To set up the Basic Auth proceed as follows"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "1) install the necessary packages."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pip install dash-auth"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "2) After this set the username and password pairs you would like to have in your application."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "VALID_USERNAME_PASSWORD_PAIRS = [\n",
    "    ['hello', 'world']\n",
    "]"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "3)The dash_auth.BasicAuth utility from Dash will take care of authentication for you once the password pairs have been set. All you have to do is pass the password pairs and your application name to dash_auth.BasicAuth."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "app = dash.Dash('auth')\n",
    "auth = dash_auth.BasicAuth(\n",
    "    app,\n",
    "    VALID_USERNAME_PASSWORD_PAIRS\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Hosting Dashboards on Heroku"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "* Sign up for account on Heroku"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "* Create your new App name (this will be part of the app’s url)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "* Download and install Heroku CLI (allow you to create and manage your Heroku apps directly from the terminal)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "* Create new project in Pycharm (where your app code and files will be located)\n",
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "* Create a 'app.py' file to start writing the code for your app. If you already created the code for your app, copy those files into your new project folder.\n",
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "* We use Gunicorn web server for this function. Install it as shown below:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pip install gunicorn"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "* Create .gitignore file inside your project folder (tells Git which files or folders to ignore in a project) and add these lines into it:\n",
    "\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "$ venv \n",
    "*.pyc \n",
    ".env \n",
    ".DS_Store "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "* Create a Procfile inside same folder and add this line inside:\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "web: gunicorn YourAppEntryFileWithout.py:server"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "* Create requirements. Go back to terminal and type:\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    " pip freeze > requirements.txt"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "* Inside the IDE terminal, type the following- "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "\n",
    "heroku login\n",
    "git init\n",
    "heroku git:remote -a  AppName\n",
    "git add .\n",
    "git commit -am \"initial launch\"\n",
    "git push heroku master\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": []
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": []
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": []
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": []
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "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.8.5"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}