US-Domestic-Airline-Flights-Performance_Dashboard_v3.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<center>\n",
    "    <img src=\"https://cf-courses-data.s3.us.cloud-object-storage.appdomain.cloud/IBMDeveloperSkillsNetwork-DV0101EN-SkillsNetwork/labs/Module%204/logo.png\" width=\"300\" alt=\"cognitiveclass.ai logo\" />\n",
    "</center>\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#  US Domestic Airline Flights Performance. \n",
    "## Analysis/Visualization with Dashboard\n",
    "\n",
    "Stephane Dedieu, May-June 2022. <br>\n",
    "Reworked and improved . December 2022. \n",
    "\n",
    "We improved graphs, fonts, presentation and replaced confusing line plots with histograms.  <br>\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<div class=\"alert alert-block alert-info\" style=\"margin-top: 20px\">\n",
    "<h2> Objective: </h2>\n",
    "\n",
    "As a data analyst, you have been given a task to monitor and report US domestic airline flights performance. Goal is to analyze the performance of the reporting airline to improve fight reliability thereby improving customer relaibility.\n",
    "\n",
    "Below are the key report items,\n",
    "\n",
    "*   Yearly airline performance report \n",
    "*   Yearly average flight delay statistics\n",
    "\n",
    "*NOTE:* Year range is between 2005 and 2020.\n",
    "    </div>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Assignment\n",
    "\n",
    "*   [Story](#story)\n",
    "*   [Components of the report items](#components-of-the-report-items)\n",
    "*   [Expected layout](#expected-layout)\n",
    "*   [Requirements to create the dashboard](#requirements-to-create-the-dashboard)\n",
    "*   [What is new in this exercise compared to other labs?](#what-is-new-in-this-exercise-compared-to-other-labs?)\n",
    "*   [Review](#review)\n",
    "*   [Hints to complete TODOs](#hints-to-complete-todos)\n",
    "*   [Application](#application)\n",
    "\n",
    "\n",
    "\n",
    "## Components of the report items\n",
    "\n",
    "1.  Yearly airline performance report\n",
    "\n",
    "    For the chosen year provide,\n",
    "\n",
    "    *   Number of flights under different cancellation categories using bar chart.\n",
    "    *   Average flight time by reporting airline using line chart.\n",
    "    *   Percentage of diverted airport landings per reporting airline using pie chart.\n",
    "    *   Number of flights flying from each state using choropleth map.\n",
    "    *   Number of flights flying to each state from each reporting airline using treemap chart.\n",
    "2.  Yearly average flight delay statistics\n",
    "\n",
    "    For the chosen year provide,\n",
    "\n",
    "    *   Monthly average carrier delay by reporting airline for the given year.\n",
    "    *   Monthly average weather delay by reporting airline for the given year.\n",
    "    *   Monthly average natioanl air system delay by reporting airline for the given year.\n",
    "    *   Monthly average security delay by reporting airline for the given year.\n",
    "    *   Monthly average late aircraft delay by reporting airline for the given year.\n",
    "\n",
    "    *NOTE:* You have worked created the same dashboard components in `Flight Delay Time Statistics Dashboard` section. We will be reusing the same."
   ]
  },
  {
   "cell_type": "raw",
   "metadata": {},
   "source": [
    "## Expected Layout\n",
    "\n",
    "<center>\n",
    "    <img src=\"https://cf-courses-data.s3.us.cloud-object-storage.appdomain.cloud/IBMDeveloperSkillsNetwork-DV0101EN-SkillsNetwork/labs/Module%205/images/Layout.png\" width=\"2000\" alt=\"cognitiveclass.ai logo\"/>\n",
    "</center>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Requirements to create the dashboard\n",
    "\n",
    "*   Create dropdown using the reference [here](https://dash.plotly.com/dash-core-components/dropdown?utm_medium=Exinfluencer&utm_source=Exinfluencer&utm_content=000026UJ&utm_term=10006555&utm_id=NA-SkillsNetwork-Channel-SkillsNetworkCoursesIBMDeveloperSkillsNetworkDV0101ENSkillsNetwork20297740-2021-01-01)\n",
    "*   Create two HTML divisions that can accomodate two components (in one division) side by side. One is HTML heading and the other one is dropdown.\n",
    "*   Add graph components.\n",
    "*   Callback function to compute data, create graph and return to the layout.\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## What's new in this exercise compared to other labs?\n",
    "\n",
    "*   Make sure the layout is clean without any defualt graphs or graph layouts. We will do this by 3 changes:\n",
    "\n",
    "    1.  Add `app.config.suppress_callback_exceptions = True` right after `app = JupyterDash(__name__)`.\n",
    "\n",
    "    2.  Having empty html.Div and use the callback to Output the dcc.graph as the Children of that Div.\n",
    "\n",
    "    3.  Add a state variable in addition to callback decorator input and output parameter. This will allow us to pass extra values without firing the callbacks.\n",
    "        Here, we need to pass two inputs `chart type` and `year`. Input is read only after user entering all the information.\n",
    "\n",
    "*   Use new html display style `flex` to arrange the dropdown menu with description.\n",
    "\n",
    "*   Update app run step to avoid getting error message before initiating callback.\n",
    "\n",
    "*NOTE:* These steps are only for review.\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Import Required Libraries"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<style>.container { width:90% !important; }</style>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "from IPython.display import display, HTML\n",
    "display(HTML(\"<style>.container { width:90% !important; }</style>\"))"
   ]
  },
  {
   "cell_type": "raw",
   "metadata": {},
   "source": [
    "#!pip install pandas dash\n",
    "#!pip install sklearn\n",
    "#!pip install pandas\n",
    "#!pip install fairlearn\n",
    "#!pip install bokeh\n",
    "#!pip install matplotlib\n",
    "#!pip install plotly\n",
    "#!pip uninstall werkzeug  --y\n",
    "#!pip install werkzeug==2.0.1\n",
    "!pip uninstall dash --y\n",
    "!pip install dash\n",
    "#!pip install pandas dash\n",
    "#!pip install jupyter-dash\n",
    "#!pip install Flask==2.1.0\n",
    "#!pip install environ"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Import required libraries\n",
    "import pandas as pd\n",
    "import dash\n",
    "from dash import dcc\n",
    "from dash import html\n",
    "from dash.dependencies import Input, Output, State\n",
    "from jupyter_dash import JupyterDash\n",
    "import plotly.graph_objects as go\n",
    "import plotly.express as px\n",
    "from dash import no_update"
   ]
  },
  {
   "cell_type": "raw",
   "metadata": {},
   "source": [
    "#####!pip install jupyter-server-proxy"
   ]
  },
  {
   "cell_type": "raw",
   "metadata": {},
   "source": [
    "!pip install pygooglechart"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Import Data"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Read the airline data into pandas dataframe\n",
    "airline_data =  pd.read_csv('https://cf-courses-data.s3.us.cloud-object-storage.appdomain.cloud/IBMDeveloperSkillsNetwork-DV0101EN-SkillsNetwork/Data%20Files/airline_data.csv', \n",
    "                            encoding = \"ISO-8859-1\",\n",
    "                            dtype={'Div1Airport': str, 'Div1TailNum': str, \n",
    "                                   'Div2Airport': str, 'Div2TailNum': str})"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div>\n",
       "<style scoped>\n",
       "    .dataframe tbody tr th:only-of-type {\n",
       "        vertical-align: middle;\n",
       "    }\n",
       "\n",
       "    .dataframe tbody tr th {\n",
       "        vertical-align: top;\n",
       "    }\n",
       "\n",
       "    .dataframe thead th {\n",
       "        text-align: right;\n",
       "    }\n",
       "</style>\n",
       "<table border=\"1\" class=\"dataframe\">\n",
       "  <thead>\n",
       "    <tr style=\"text-align: right;\">\n",
       "      <th></th>\n",
       "      <th>Unnamed: 0</th>\n",
       "      <th>Year</th>\n",
       "      <th>Quarter</th>\n",
       "      <th>Month</th>\n",
       "      <th>DayofMonth</th>\n",
       "      <th>DayOfWeek</th>\n",
       "      <th>FlightDate</th>\n",
       "      <th>Reporting_Airline</th>\n",
       "      <th>DOT_ID_Reporting_Airline</th>\n",
       "      <th>IATA_CODE_Reporting_Airline</th>\n",
       "      <th>...</th>\n",
       "      <th>Div4WheelsOff</th>\n",
       "      <th>Div4TailNum</th>\n",
       "      <th>Div5Airport</th>\n",
       "      <th>Div5AirportID</th>\n",
       "      <th>Div5AirportSeqID</th>\n",
       "      <th>Div5WheelsOn</th>\n",
       "      <th>Div5TotalGTime</th>\n",
       "      <th>Div5LongestGTime</th>\n",
       "      <th>Div5WheelsOff</th>\n",
       "      <th>Div5TailNum</th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <th>0</th>\n",
       "      <td>1295781</td>\n",
       "      <td>1998</td>\n",
       "      <td>2</td>\n",
       "      <td>4</td>\n",
       "      <td>2</td>\n",
       "      <td>4</td>\n",
       "      <td>1998-04-02</td>\n",
       "      <td>AS</td>\n",
       "      <td>19930</td>\n",
       "      <td>AS</td>\n",
       "      <td>...</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>1</th>\n",
       "      <td>1125375</td>\n",
       "      <td>2013</td>\n",
       "      <td>2</td>\n",
       "      <td>5</td>\n",
       "      <td>13</td>\n",
       "      <td>1</td>\n",
       "      <td>2013-05-13</td>\n",
       "      <td>EV</td>\n",
       "      <td>20366</td>\n",
       "      <td>EV</td>\n",
       "      <td>...</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>2</th>\n",
       "      <td>118824</td>\n",
       "      <td>1993</td>\n",
       "      <td>3</td>\n",
       "      <td>9</td>\n",
       "      <td>25</td>\n",
       "      <td>6</td>\n",
       "      <td>1993-09-25</td>\n",
       "      <td>UA</td>\n",
       "      <td>19977</td>\n",
       "      <td>UA</td>\n",
       "      <td>...</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>3</th>\n",
       "      <td>634825</td>\n",
       "      <td>1994</td>\n",
       "      <td>4</td>\n",
       "      <td>11</td>\n",
       "      <td>12</td>\n",
       "      <td>6</td>\n",
       "      <td>1994-11-12</td>\n",
       "      <td>HP</td>\n",
       "      <td>19991</td>\n",
       "      <td>HP</td>\n",
       "      <td>...</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>4</th>\n",
       "      <td>1888125</td>\n",
       "      <td>2017</td>\n",
       "      <td>3</td>\n",
       "      <td>8</td>\n",
       "      <td>17</td>\n",
       "      <td>4</td>\n",
       "      <td>2017-08-17</td>\n",
       "      <td>UA</td>\n",
       "      <td>19977</td>\n",
       "      <td>UA</td>\n",
       "      <td>...</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "<p>5 rows × 110 columns</p>\n",
       "</div>"
      ],
      "text/plain": [
       "   Unnamed: 0  Year  Quarter  Month  DayofMonth  DayOfWeek  FlightDate  \\\n",
       "0     1295781  1998        2      4           2          4  1998-04-02   \n",
       "1     1125375  2013        2      5          13          1  2013-05-13   \n",
       "2      118824  1993        3      9          25          6  1993-09-25   \n",
       "3      634825  1994        4     11          12          6  1994-11-12   \n",
       "4     1888125  2017        3      8          17          4  2017-08-17   \n",
       "\n",
       "  Reporting_Airline  DOT_ID_Reporting_Airline IATA_CODE_Reporting_Airline  \\\n",
       "0                AS                     19930                          AS   \n",
       "1                EV                     20366                          EV   \n",
       "2                UA                     19977                          UA   \n",
       "3                HP                     19991                          HP   \n",
       "4                UA                     19977                          UA   \n",
       "\n",
       "   ... Div4WheelsOff  Div4TailNum  Div5Airport  Div5AirportID  \\\n",
       "0  ...           NaN          NaN          NaN            NaN   \n",
       "1  ...           NaN          NaN          NaN            NaN   \n",
       "2  ...           NaN          NaN          NaN            NaN   \n",
       "3  ...           NaN          NaN          NaN            NaN   \n",
       "4  ...           NaN          NaN          NaN            NaN   \n",
       "\n",
       "   Div5AirportSeqID Div5WheelsOn Div5TotalGTime Div5LongestGTime  \\\n",
       "0               NaN          NaN            NaN              NaN   \n",
       "1               NaN          NaN            NaN              NaN   \n",
       "2               NaN          NaN            NaN              NaN   \n",
       "3               NaN          NaN            NaN              NaN   \n",
       "4               NaN          NaN            NaN              NaN   \n",
       "\n",
       "   Div5WheelsOff Div5TailNum  \n",
       "0            NaN         NaN  \n",
       "1            NaN         NaN  \n",
       "2            NaN         NaN  \n",
       "3            NaN         NaN  \n",
       "4            NaN         NaN  \n",
       "\n",
       "[5 rows x 110 columns]"
      ]
     },
     "execution_count": 6,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "airline_data.head()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "airline_data.describe()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 51,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div>\n",
       "<style scoped>\n",
       "    .dataframe tbody tr th:only-of-type {\n",
       "        vertical-align: middle;\n",
       "    }\n",
       "\n",
       "    .dataframe tbody tr th {\n",
       "        vertical-align: top;\n",
       "    }\n",
       "\n",
       "    .dataframe thead th {\n",
       "        text-align: right;\n",
       "    }\n",
       "</style>\n",
       "<table border=\"1\" class=\"dataframe\">\n",
       "  <thead>\n",
       "    <tr style=\"text-align: right;\">\n",
       "      <th></th>\n",
       "      <th>CRSDepTime</th>\n",
       "      <th>DepTime</th>\n",
       "      <th>DepDelay</th>\n",
       "      <th>DepDelayMinutes</th>\n",
       "      <th>DepDel15</th>\n",
       "      <th>DepartureDelayGroups</th>\n",
       "      <th>DepTimeBlk</th>\n",
       "      <th>TaxiOut</th>\n",
       "      <th>WheelsOff</th>\n",
       "      <th>WheelsOn</th>\n",
       "      <th>...</th>\n",
       "      <th>Diverted</th>\n",
       "      <th>CRSElapsedTime</th>\n",
       "      <th>ActualElapsedTime</th>\n",
       "      <th>AirTime</th>\n",
       "      <th>Flights</th>\n",
       "      <th>Distance</th>\n",
       "      <th>DistanceGroup</th>\n",
       "      <th>CarrierDelay</th>\n",
       "      <th>WeatherDelay</th>\n",
       "      <th>NASDelay</th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <th>0</th>\n",
       "      <td>1330</td>\n",
       "      <td>1330.0</td>\n",
       "      <td>0.0</td>\n",
       "      <td>0.0</td>\n",
       "      <td>0.0</td>\n",
       "      <td>0.0</td>\n",
       "      <td>1300-1359</td>\n",
       "      <td>8.0</td>\n",
       "      <td>1338.0</td>\n",
       "      <td>1415.0</td>\n",
       "      <td>...</td>\n",
       "      <td>0.0</td>\n",
       "      <td>56.0</td>\n",
       "      <td>50.0</td>\n",
       "      <td>37.0</td>\n",
       "      <td>1.0</td>\n",
       "      <td>224.0</td>\n",
       "      <td>1</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>1</th>\n",
       "      <td>1301</td>\n",
       "      <td>1255.0</td>\n",
       "      <td>-6.0</td>\n",
       "      <td>0.0</td>\n",
       "      <td>0.0</td>\n",
       "      <td>-1.0</td>\n",
       "      <td>1300-1359</td>\n",
       "      <td>9.0</td>\n",
       "      <td>1304.0</td>\n",
       "      <td>1358.0</td>\n",
       "      <td>...</td>\n",
       "      <td>0.0</td>\n",
       "      <td>82.0</td>\n",
       "      <td>76.0</td>\n",
       "      <td>54.0</td>\n",
       "      <td>1.0</td>\n",
       "      <td>277.0</td>\n",
       "      <td>2</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>2</th>\n",
       "      <td>1650</td>\n",
       "      <td>1723.0</td>\n",
       "      <td>33.0</td>\n",
       "      <td>33.0</td>\n",
       "      <td>1.0</td>\n",
       "      <td>2.0</td>\n",
       "      <td>1600-1659</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>...</td>\n",
       "      <td>0.0</td>\n",
       "      <td>40.0</td>\n",
       "      <td>52.0</td>\n",
       "      <td>NaN</td>\n",
       "      <td>1.0</td>\n",
       "      <td>130.0</td>\n",
       "      <td>1</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>3</th>\n",
       "      <td>1245</td>\n",
       "      <td>1309.0</td>\n",
       "      <td>24.0</td>\n",
       "      <td>24.0</td>\n",
       "      <td>1.0</td>\n",
       "      <td>1.0</td>\n",
       "      <td>1200-1259</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>...</td>\n",
       "      <td>0.0</td>\n",
       "      <td>72.0</td>\n",
       "      <td>89.0</td>\n",
       "      <td>NaN</td>\n",
       "      <td>1.0</td>\n",
       "      <td>370.0</td>\n",
       "      <td>2</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>4</th>\n",
       "      <td>755</td>\n",
       "      <td>746.0</td>\n",
       "      <td>-9.0</td>\n",
       "      <td>0.0</td>\n",
       "      <td>0.0</td>\n",
       "      <td>-1.0</td>\n",
       "      <td>0700-0759</td>\n",
       "      <td>8.0</td>\n",
       "      <td>754.0</td>\n",
       "      <td>836.0</td>\n",
       "      <td>...</td>\n",
       "      <td>0.0</td>\n",
       "      <td>127.0</td>\n",
       "      <td>118.0</td>\n",
       "      <td>102.0</td>\n",
       "      <td>1.0</td>\n",
       "      <td>692.0</td>\n",
       "      <td>3</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>5</th>\n",
       "      <td>2020</td>\n",
       "      <td>2023.0</td>\n",
       "      <td>3.0</td>\n",
       "      <td>3.0</td>\n",
       "      <td>0.0</td>\n",
       "      <td>0.0</td>\n",
       "      <td>2000-2059</td>\n",
       "      <td>11.0</td>\n",
       "      <td>2034.0</td>\n",
       "      <td>2129.0</td>\n",
       "      <td>...</td>\n",
       "      <td>0.0</td>\n",
       "      <td>190.0</td>\n",
       "      <td>188.0</td>\n",
       "      <td>175.0</td>\n",
       "      <td>1.0</td>\n",
       "      <td>1171.0</td>\n",
       "      <td>5</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>6</th>\n",
       "      <td>745</td>\n",
       "      <td>744.0</td>\n",
       "      <td>-1.0</td>\n",
       "      <td>0.0</td>\n",
       "      <td>0.0</td>\n",
       "      <td>-1.0</td>\n",
       "      <td>0700-0759</td>\n",
       "      <td>9.0</td>\n",
       "      <td>753.0</td>\n",
       "      <td>1001.0</td>\n",
       "      <td>...</td>\n",
       "      <td>0.0</td>\n",
       "      <td>155.0</td>\n",
       "      <td>140.0</td>\n",
       "      <td>128.0</td>\n",
       "      <td>1.0</td>\n",
       "      <td>1011.0</td>\n",
       "      <td>5</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>7</th>\n",
       "      <td>1215</td>\n",
       "      <td>1310.0</td>\n",
       "      <td>55.0</td>\n",
       "      <td>55.0</td>\n",
       "      <td>1.0</td>\n",
       "      <td>3.0</td>\n",
       "      <td>1200-1259</td>\n",
       "      <td>31.0</td>\n",
       "      <td>1341.0</td>\n",
       "      <td>1533.0</td>\n",
       "      <td>...</td>\n",
       "      <td>0.0</td>\n",
       "      <td>120.0</td>\n",
       "      <td>152.0</td>\n",
       "      <td>112.0</td>\n",
       "      <td>1.0</td>\n",
       "      <td>594.0</td>\n",
       "      <td>3</td>\n",
       "      <td>0.0</td>\n",
       "      <td>0.0</td>\n",
       "      <td>87.0</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>8</th>\n",
       "      <td>1840</td>\n",
       "      <td>1859.0</td>\n",
       "      <td>19.0</td>\n",
       "      <td>19.0</td>\n",
       "      <td>1.0</td>\n",
       "      <td>1.0</td>\n",
       "      <td>1800-1859</td>\n",
       "      <td>9.0</td>\n",
       "      <td>1908.0</td>\n",
       "      <td>605.0</td>\n",
       "      <td>...</td>\n",
       "      <td>0.0</td>\n",
       "      <td>462.0</td>\n",
       "      <td>429.0</td>\n",
       "      <td>417.0</td>\n",
       "      <td>1.0</td>\n",
       "      <td>4065.0</td>\n",
       "      <td>11</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>9</th>\n",
       "      <td>1059</td>\n",
       "      <td>1105.0</td>\n",
       "      <td>6.0</td>\n",
       "      <td>6.0</td>\n",
       "      <td>0.0</td>\n",
       "      <td>0.0</td>\n",
       "      <td>1000-1059</td>\n",
       "      <td>10.0</td>\n",
       "      <td>1115.0</td>\n",
       "      <td>1220.0</td>\n",
       "      <td>...</td>\n",
       "      <td>0.0</td>\n",
       "      <td>91.0</td>\n",
       "      <td>87.0</td>\n",
       "      <td>65.0</td>\n",
       "      <td>1.0</td>\n",
       "      <td>448.0</td>\n",
       "      <td>2</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "<p>10 rows × 30 columns</p>\n",
       "</div>"
      ],
      "text/plain": [
       "   CRSDepTime  DepTime  DepDelay  DepDelayMinutes  DepDel15  \\\n",
       "0        1330   1330.0       0.0              0.0       0.0   \n",
       "1        1301   1255.0      -6.0              0.0       0.0   \n",
       "2        1650   1723.0      33.0             33.0       1.0   \n",
       "3        1245   1309.0      24.0             24.0       1.0   \n",
       "4         755    746.0      -9.0              0.0       0.0   \n",
       "5        2020   2023.0       3.0              3.0       0.0   \n",
       "6         745    744.0      -1.0              0.0       0.0   \n",
       "7        1215   1310.0      55.0             55.0       1.0   \n",
       "8        1840   1859.0      19.0             19.0       1.0   \n",
       "9        1059   1105.0       6.0              6.0       0.0   \n",
       "\n",
       "   DepartureDelayGroups DepTimeBlk  TaxiOut  WheelsOff  WheelsOn  ...  \\\n",
       "0                   0.0  1300-1359      8.0     1338.0    1415.0  ...   \n",
       "1                  -1.0  1300-1359      9.0     1304.0    1358.0  ...   \n",
       "2                   2.0  1600-1659      NaN        NaN       NaN  ...   \n",
       "3                   1.0  1200-1259      NaN        NaN       NaN  ...   \n",
       "4                  -1.0  0700-0759      8.0      754.0     836.0  ...   \n",
       "5                   0.0  2000-2059     11.0     2034.0    2129.0  ...   \n",
       "6                  -1.0  0700-0759      9.0      753.0    1001.0  ...   \n",
       "7                   3.0  1200-1259     31.0     1341.0    1533.0  ...   \n",
       "8                   1.0  1800-1859      9.0     1908.0     605.0  ...   \n",
       "9                   0.0  1000-1059     10.0     1115.0    1220.0  ...   \n",
       "\n",
       "   Diverted  CRSElapsedTime  ActualElapsedTime  AirTime  Flights  Distance  \\\n",
       "0       0.0            56.0               50.0     37.0      1.0     224.0   \n",
       "1       0.0            82.0               76.0     54.0      1.0     277.0   \n",
       "2       0.0            40.0               52.0      NaN      1.0     130.0   \n",
       "3       0.0            72.0               89.0      NaN      1.0     370.0   \n",
       "4       0.0           127.0              118.0    102.0      1.0     692.0   \n",
       "5       0.0           190.0              188.0    175.0      1.0    1171.0   \n",
       "6       0.0           155.0              140.0    128.0      1.0    1011.0   \n",
       "7       0.0           120.0              152.0    112.0      1.0     594.0   \n",
       "8       0.0           462.0              429.0    417.0      1.0    4065.0   \n",
       "9       0.0            91.0               87.0     65.0      1.0     448.0   \n",
       "\n",
       "   DistanceGroup CarrierDelay  WeatherDelay NASDelay  \n",
       "0              1          NaN           NaN      NaN  \n",
       "1              2          NaN           NaN      NaN  \n",
       "2              1          NaN           NaN      NaN  \n",
       "3              2          NaN           NaN      NaN  \n",
       "4              3          NaN           NaN      NaN  \n",
       "5              5          NaN           NaN      NaN  \n",
       "6              5          NaN           NaN      NaN  \n",
       "7              3          0.0           0.0     87.0  \n",
       "8             11          NaN           NaN      NaN  \n",
       "9              2          NaN           NaN      NaN  \n",
       "\n",
       "[10 rows x 30 columns]"
      ]
     },
     "execution_count": 51,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "df2 = airline_data[airline_data.columns[30:60]]\n",
    "df2.head(10)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Data seems to be missing in many columns. <br> \n",
    "We quickly checked columns. For this application, relevant data is: reporting Airlines, CarrierDelay, WeatherDelay, NASDelay, SecurityDelay, LateAircraftDelay, Cancellation code, Flights, Airtime, DivAirportLandings, OriginStates, DestState and data look fine in these columns. <br>\n",
    "We proceed with the application.  "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Application\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Additional imports - These options fixed issues with displaying Dashboard in Jupyter Notebook   \n",
    "from jupyter_dash.comms import _send_jupyter_config_comm_request\n",
    "_send_jupyter_config_comm_request()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [],
   "source": [
    "from jupyter_dash import JupyterDash"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 53,
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "C:\\Users\\stefo\\anaconda3\\lib\\site-packages\\jupyter_dash\\jupyter_app.py:139: UserWarning:\n",
      "\n",
      "The 'environ['werkzeug.server.shutdown']' function is deprecated and will be removed in Werkzeug 2.1.\n",
      "\n",
      "127.0.0.1 - - [03/Jan/2023 10:41:53] \"GET /_shutdown_5e33e284-e120-48e9-b705-c627308e8e5b HTTP/1.1\" 200 -\n",
      " * Running on http://localhost:8091/ (Press CTRL+C to quit)\n",
      "127.0.0.1 - - [03/Jan/2023 10:41:55] \"GET /_alive_5e33e284-e120-48e9-b705-c627308e8e5b HTTP/1.1\" 200 -\n"
     ]
    },
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Dash app running on http://localhost:8888/proxy/8091/\n"
     ]
    }
   ],
   "source": [
    "# Create a dash application\n",
    "app = JupyterDash(__name__)    # use app= Jupyter_Dash here, NOT app= dash.Dash !  Stephane D.  May 2022\n",
    "JupyterDash.infer_jupyter_proxy_config()\n",
    "\n",
    "# REVIEW1: Clear the layout and do not display exception till callback gets executed\n",
    "app.config.suppress_callback_exceptions = True\n",
    "del app.config._read_only[\"requests_pathname_prefix\"]\n",
    "# List of years \n",
    "year_list = [i for i in range(2005, 2021, 1)]\n",
    "\n",
    "\"\"\"Compute graph data for creating yearly airline performance report \n",
    "\n",
    "Function that takes airline data as input and create 5 dataframes based on the grouping condition to be used for plottling charts and grphs.\n",
    "\n",
    "Argument:\n",
    "     \n",
    "    df: Filtered dataframe\n",
    "    \n",
    "Returns:\n",
    "   Dataframes to create graph. \n",
    "\"\"\"\n",
    "def compute_data_choice_1(df):\n",
    "    # Cancellation Category Count\n",
    "    bar_data = df.groupby(['Month','CancellationCode'])['Flights'].sum().reset_index()\n",
    "    # Average flight time by reporting airline\n",
    "    line_data = df.groupby(['Month','Reporting_Airline'])['AirTime'].mean().reset_index()\n",
    "    # Diverted Airport Landings\n",
    "    div_data = df[df['DivAirportLandings'] != 0.0]\n",
    "    # Source state count\n",
    "    map_data = df.groupby(['OriginState'])['Flights'].sum().reset_index()\n",
    "    # Destination state count\n",
    "    tree_data = df.groupby(['DestState', 'Reporting_Airline'])['Flights'].sum().reset_index()\n",
    "    return bar_data, line_data, div_data, map_data, tree_data\n",
    "\n",
    "\n",
    "\"\"\"Compute graph data for creating yearly airline delay report\n",
    "\n",
    "This function takes in airline data and selected year as an input and performs computation for creating charts and plots.\n",
    "\n",
    "Arguments:\n",
    "    df: Input airline data.\n",
    "    \n",
    "Returns:\n",
    "    Computed average dataframes for carrier delay, weather delay, NAS delay, security delay, and late aircraft delay.\n",
    "\"\"\"\n",
    "def compute_data_choice_2(df):\n",
    "    # Compute delay averages\n",
    "    avg_car = df.groupby(['Month','Reporting_Airline'])['CarrierDelay'].mean().reset_index()\n",
    "    avg_weather = df.groupby(['Month','Reporting_Airline'])['WeatherDelay'].mean().reset_index()\n",
    "    avg_NAS = df.groupby(['Month','Reporting_Airline'])['NASDelay'].mean().reset_index()\n",
    "    avg_sec = df.groupby(['Month','Reporting_Airline'])['SecurityDelay'].mean().reset_index()\n",
    "    avg_late = df.groupby(['Month','Reporting_Airline'])['LateAircraftDelay'].mean().reset_index()\n",
    "    return avg_car, avg_weather, avg_NAS, avg_sec, avg_late\n",
    "\n",
    "\n",
    "# Application layout\n",
    "                                # TODO1: Add title to the dashboard - X\n",
    "    # Provide title of the dash application title as US Domestic Airline Flights Performance.\n",
    "    # Make the heading center aligned, set color as #503D36, \n",
    "    # and font size as 24. Sample: style={'textAlign': 'left', 'color': '#000000', 'font-size': 0}\n",
    "\n",
    "app.layout = html.Div(children=[html.H1('US Domestic Airline Flights Performance', \n",
    "                                style={'textAlign':'center', \n",
    "                                'color':'#503D36', \n",
    "                                'font-family': 'Calibri',\n",
    "                                'font-size': 26}), \n",
    "\n",
    "                                # REVIEW2: Dropdown creation\n",
    "                                # Create an outer division \n",
    "                                html.Div([\n",
    "                                    # Add an division\n",
    "                                    html.Div([\n",
    "                                        # Create an division for adding dropdown helper text for report type\n",
    "                                        html.Div(\n",
    "                                            [\n",
    "                                            html.H3('Report Type:', style={'margin-right': '2em', 'font-family': 'Calibri'}),\n",
    "                                            ]\n",
    "                                        ),\n",
    "                                        # TODO2: Add a dropdown\n",
    "    #Create a dropdown menu and add two chart options to it.\n",
    "    #Parameters to be updated in dcc.Dropdown:\n",
    "    #Set id as input-type.\n",
    "    #Set options to list containing dictionaries with key as label and user provided value for labels in value.\n",
    "    #1st dictionary\n",
    "    #    label: Yearly Airline Performance Report\n",
    "    #    value: OPT1\n",
    "    #2nd dictionary\n",
    "    #    label: Yearly Airline Delay Report\n",
    "    #    value: OPT2\n",
    "    #Set placeholder to Select a report type.\n",
    "    #Set width as 80%, padding as 3px, font size as 20px, text-align-last as center inside style parameter dictionary.        \n",
    "                                # Place them next to each other using the division style\n",
    "                                dcc.Dropdown(id='input-type', \n",
    "                                        options=[{'label': 'Yearly Airline Performance Report', 'value': 'OPT1'},\n",
    "                                                 {'label': 'Yearly Airline Delay Report', 'value': 'OPT2'}],\n",
    "                                                placeholder='Select a Report',\n",
    "                                                style={'width':'80%', \n",
    "                                                       'padding':'3px',\n",
    "                                                       'font-size': '20px', \n",
    "                                                       'font-family': 'Calibri',\n",
    "                                                       'text-align-last' : 'center'}),                                           \n",
    "                                    ], style={'display':'flex'}),\n",
    "                                    \n",
    "                                   # Add next division \n",
    "                                   html.Div([\n",
    "                                       # Create an division for adding dropdown helper text for choosing year\n",
    "                                        html.Div(\n",
    "                                            [\n",
    "                                            html.H3('Choose Year:', \n",
    "                                                    style={'margin-right': '2em', 'font-family': 'Calibri'})\n",
    "                                            ]\n",
    "                                        ),\n",
    "                                        dcc.Dropdown(id='input-year', \n",
    "                                                     # Update dropdown values using list comphrehension\n",
    "                                                     options=[{'label': i, 'value': i} for i in year_list],\n",
    "                                                     placeholder=\"Select a year\",\n",
    "                                                     style={'width':'80%', \n",
    "                                                            'padding':'3px', \n",
    "                                                            'font-size': '20px', \n",
    "                                                            'font-family': 'Calibri',\n",
    "                                                            'text-align-last' : 'center'}),\n",
    "                                            # Place them next to each other using the division style\n",
    "                                            ], style={'display': 'flex'}),  \n",
    "                                          ]),\n",
    "                                \n",
    "                                # Add Computed graphs\n",
    "                                # REVIEW3: Observe how we add an empty division and providing an id that will be updated during callback\n",
    "                                html.Div([ ], id='plot1'),\n",
    "    \n",
    "                                html.Div([\n",
    "                                        html.Div([ ], id='plot2'),\n",
    "                                        html.Div([ ], id='plot3')\n",
    "                                ], style={'display': 'flex'}),\n",
    "                                \n",
    "                                # TODO3: Add a division with two empty divisions inside. See above disvision for example.\n",
    "                                # Provide division ids as plot4 and plot5. Display style as flex.\n",
    "                                 html.Div([\n",
    "                                        html.Div([ ], id='plot4'),\n",
    "                                        html.Div([ ], id='plot5')\n",
    "                                ], style={'display': 'flex'}),                               \n",
    "                                ])\n",
    "\n",
    "# Callback function definition\n",
    "# TODO4: Add 5 ouput components\n",
    "# Our layout has 5 outputs so we need to create 5 output components. Review how input components are constructured to fill in for output component.\n",
    "# It is a list with 5 output parameters with component id and property. Here, the component property will be children as we have created empty division and passing in dcc.Graph after computation.\n",
    "# Component ids will be plot1 , plot2, plot2, plot4, and plot5.\n",
    "\n",
    "\n",
    "@app.callback([ Output(component_id='plot1', component_property='children'),\n",
    "                Output(component_id='plot2', component_property='children'),\n",
    "                Output(component_id='plot3', component_property='children'),\n",
    "                Output(component_id='plot4', component_property='children'),\n",
    "                Output(component_id='plot5', component_property='children')],\n",
    "               [Input(component_id='input-type', component_property='value'),\n",
    "                Input(component_id='input-year', component_property='value')],\n",
    "               # REVIEW4: Holding output state till user enters all the form information. In this case, it will be chart type and year\n",
    "               [State(\"plot1\", 'children'), State(\"plot2\", \"children\"),\n",
    "                State(\"plot3\", \"children\"), State(\"plot4\", \"children\"),\n",
    "                State(\"plot5\", \"children\")\n",
    "               ])\n",
    "# Add computation to callback function and return graph\n",
    "def get_graph(chart, year, children1, children2, c3, c4, c5):\n",
    "      \n",
    "        # Select data\n",
    "        df =  airline_data[airline_data['Year']==int(year)]\n",
    "       \n",
    "        if chart == 'OPT1':\n",
    "            # Compute required information for creating graph from the data\n",
    "            bar_data, line_data, div_data, map_data, tree_data = compute_data_choice_1(df)\n",
    "            \n",
    "            # Number of flights under different cancellation categories\n",
    "            #bar_fig = px.bar(bar_data, x='Month', y='Flights', color='CancellationCode', title='Monthly Flight Cancellation')\n",
    "            #bar_fig = px.histogram(bar_data, x='Month', y='Flights', nbins=12, color='CancellationCode',\\\n",
    "            #                       text='CancellationCode', title='Monthly Flight Cancellation' )\n",
    "            bar_fig = px.histogram(bar_data, x='Month', y='Flights', nbins=12, color='CancellationCode',\\\n",
    "                                    title='Monthly Flight Cancellation' )  \n",
    "            # TODO5: Average flight time by reporting airline\n",
    "            # Deals with creating line plots using returned dataframes from the above step using plotly.express. Link for reference is here\n",
    "            # Average flight time by reporting airline\n",
    "            # Set figure name as line_fig, data as line_data, x as Month, y as AirTime, \n",
    "            # color as Reporting_Airline and title as Average monthly flight time (minutes) by airline.\n",
    "            #  carrier_fig = px.line(avg_car, x='Month', y='CarrierDelay', color='Reporting_Airline', title='Average carrrier delay time (minutes) by airline')`\n",
    "                        # Enter your code below. Make sure you have correct formatting.\n",
    "            #line_fig = px.line(line_data, x='Month', y='AirTime', color='Reporting_Airline', \\\n",
    "            #                   title='Average monthly flight time (minutes) by airline')\n",
    "            \n",
    "            line_fig = px.histogram(line_data, x='Month', y='AirTime', color='Reporting_Airline',\n",
    "                                    title='Average monthly flight time (minutes) by airline')           \n",
    "\n",
    "            # Percentage of diverted airport landings per reporting airline\n",
    "            pie_fig = px.pie(div_data, values='Flights', names='Reporting_Airline',\n",
    "                             title='% of flights by reporting airline')\n",
    "            \n",
    "            # REVIEW5: Number of flights flying from each state using choropleth\n",
    "            map_fig = px.choropleth(map_data,  # Input data\n",
    "                    locations='OriginState', \n",
    "                    color='Flights',  \n",
    "                    hover_data=['OriginState', 'Flights'], \n",
    "                    locationmode = 'USA-states', # Set to plot as US States\n",
    "                    color_continuous_scale='GnBu',\n",
    "                    range_color=[0, map_data['Flights'].max()]) \n",
    "            map_fig.update_layout(\n",
    "                    title_text = 'Number of flights from origin state', \n",
    "                    geo_scope='usa') # Plot only the USA instead of globe\n",
    "            \n",
    "            # TODO6: Number of flights flying to each state from each reporting airline\n",
    "            # Deals with creating treemap plot using returned dataframes from the above step using plotly.express. Link for reference is here\n",
    "            # Number of flights flying to each state from each reporting airline\n",
    "            # Set figure name as tree_fig, data as tree_data, path as ['DestState', 'Reporting_Airline'], values as Flights, colors as Flights, color_continuous_scale as 'RdBu', and title as 'Flight count by airline to destination state'\n",
    "            tree_fig = px.treemap(tree_data, \n",
    "                        path=['DestState', 'Reporting_Airline'], \n",
    "                        values= 'Flights', \n",
    "                        color='Flights', \n",
    "                        color_continuous_scale='RdBu',\n",
    "                        title='Flight count by airline to destination state')\n",
    "\n",
    "            \n",
    "            # REVIEW6: Return dcc.Graph component to the empty division\n",
    "            return [dcc.Graph(figure=tree_fig), \n",
    "                    dcc.Graph(figure=pie_fig),\n",
    "                    dcc.Graph(figure=map_fig),\n",
    "                    dcc.Graph(figure=bar_fig),\n",
    "                    dcc.Graph(figure=line_fig)\n",
    "                   ]\n",
    "        else:\n",
    "            # REVIEW7: This covers chart type 2 and we have completed this exercise under Flight Delay Time Statistics Dashboard section\n",
    "            # Compute required information for creating graph from the data\n",
    "            avg_car, avg_weather, avg_NAS, avg_sec, avg_late = compute_data_choice_2(df)\n",
    "            \n",
    "            # Create graph\n",
    "            #carrier_fig = px.line(avg_car, x='Month', y='CarrierDelay', color='Reporting_Airline',\n",
    "            #                                      title='Average carrrier delay time (minutes) by airline')\n",
    "            #weather_fig = px.line(avg_weather, x='Month', y='WeatherDelay', color='Reporting_Airline',\n",
    "            #                                      title='Average weather delay time (minutes) by airline')\n",
    "            #nas_fig = px.line(avg_NAS, x='Month', y='NASDelay', color='Reporting_Airline',\n",
    "            #                                      title='Average NAS delay time (minutes) by airline')\n",
    "            #sec_fig = px.line(avg_sec, x='Month', y='SecurityDelay', color='Reporting_Airline',\n",
    "            #                                      title='Average security delay time (minutes) by airline')\n",
    "            #late_fig = px.line(avg_late, x='Month', y='LateAircraftDelay', color='Reporting_Airline',\n",
    "            #                                      title='Average late aircraft delay time (minutes) by airline')\n",
    "\n",
    "            # Create graph\n",
    "            carrier_fig = px.histogram(avg_car, x='Month', y='CarrierDelay', color='Reporting_Airline',\n",
    "                                                  title='Average carrier delay time (minutes) by airline')\n",
    "            weather_fig = px.histogram(avg_weather, x='Month', y='WeatherDelay', color='Reporting_Airline',\n",
    "                                                  title='Average weather delay time (minutes) by airline')\n",
    "            nas_fig = px.histogram(avg_NAS, x='Month', y='NASDelay', color='Reporting_Airline',\n",
    "                                                  title='Average NAS delay time (minutes) by airline')\n",
    "            sec_fig = px.histogram(avg_sec, x='Month', y='SecurityDelay', color='Reporting_Airline',\n",
    "                                                  title='Average security delay time (minutes) by airline')\n",
    "            late_fig = px.histogram(avg_late, x='Month', y='LateAircraftDelay', color='Reporting_Airline',\n",
    "                                                  title='Average late aircraft delay time (minutes) by airline')            \n",
    "            \n",
    "            \n",
    "            \n",
    "            return[dcc.Graph(figure=carrier_fig), \n",
    "                   dcc.Graph(figure=weather_fig), \n",
    "                   dcc.Graph(figure=nas_fig), \n",
    "                   dcc.Graph(figure=sec_fig), \n",
    "                   dcc.Graph(figure=late_fig)]\n",
    "\n",
    "\n",
    "# Run the app\n",
    "if __name__ == '__main__':\n",
    "    #app.run_server(mode='inline')\n",
    "    #app.run_server()\n",
    "    # REVIEW8: Adding dev_tools_ui=False, dev_tools_props_check=False can prevent error appearing before calling callback function\n",
    "    #app.run_server(mode=\"inline\", host=\"localhost\", debug=False, dev_tools_ui=False, dev_tools_props_check=False)\n",
    "    app.run_server(mode=\"external\",  port=8091   , host=\"localhost\", debug=False, dev_tools_ui=False, dev_tools_props_check=False) \n",
    "    #app.run_server(mode='jupyterlab')\n",
    "    #app.run_server(mode='external',port=8050)\n",
    "    #app.run_server(mode=\"external\")\n",
    "    #app.run_server(debug=True)\n",
    "    \n",
    "    \n",
    "    \n",
    "    \n",
    "    "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "!pip install  watermark"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "%reload_ext watermark\n",
    "\n",
    "# python, ipython, packages, and machine characteristics\n",
    "#%watermark -v -m -p wget,pandas,numpy,altair\n",
    "%watermark --iversions\n",
    "# date\n",
    "print (\" \")\n",
    "%watermark -u -n -t -z \n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Summary\n",
    "\n",
    "Congratulations for completing your dash and plotly assignment.\n",
    "\n",
    "More information about the libraries can be found [here](https://dash.plotly.com/?utm_medium=Exinfluencer&utm_source=Exinfluencer&utm_content=000026UJ&utm_term=10006555&utm_id=NA-SkillsNetwork-Channel-SkillsNetworkCoursesIBMDeveloperSkillsNetworkDV0101ENSkillsNetwork20297740-2021-01-01)\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Author\n",
    "\n",
    "[Saishruthi Swaminathan](https://www.linkedin.com/in/saishruthi-swaminathan/?utm_medium=Exinfluencer&utm_source=Exinfluencer&utm_content=000026UJ&utm_term=10006555&utm_id=NA-SkillsNetwork-Channel-SkillsNetworkCoursesIBMDeveloperSkillsNetworkDV0101ENSkillsNetwork20297740-2021-01-01)\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Changelog\n",
    "\n",
    "| Date       | Version | Changed by | Change Description                   |\n",
    "| ---------- | ------- | ---------- | ------------------------------------ |\n",
    "| 12-18-2020 | 1.0     | Nayef      | Added dataset link and upload to Git |\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## <h3 align=\"center\"> © IBM Corporation 2020. All rights reserved. <h3/>\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "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.9.7"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}