Visualization/Flight_Delay_Time_Statistics_Dashboard.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": [
    "# Objective\n",
    "\n",
    "Create an airline delay dashboard\n",
    "\n",
    "## Dashboard components:\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:_ Year range should be between 2010 and 2020\n",
    "\n",
    "## TODO:\n",
    "\n",
    "-   Design layout for the application.\n",
    "-   Create a callback function. Add callback decorator and define inputs and outputs.\n",
    "-   Call `compute_info` with appropriate parameters.\n",
    "-   Create 5 line graphs.\n",
    "-   Run the application.\n",
    "\n",
    "## App Skeleton\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "```python\n",
    "app.layout = html.Div(children=[ \n",
    "  \n",
    "                                html.H1('...TODO1...', style={...TODO1...}),\n",
    "                                \n",
    "                                html.Div([\"Input Year: \", dcc.Input(id='...TODO2...', value='...TODO2...', type='...TODO2...', style={'...TODO2...'}),], style={'font-size': 30}),\n",
    "                                html.Br(),\n",
    "                                html.Br(),\n",
    "                          \n",
    "                                html.Div([\n",
    "                                        html.Div('...TODO3...'),\n",
    "                                        html.Div('...TODO3...')\n",
    "                                ], style={'display': 'flex'}),\n",
    "    \n",
    "                                html.Div([\n",
    "                                        html.Div('...TODO3...'),\n",
    "                                        html.Div('...TODO3...')\n",
    "                                ], style={'display': 'flex'}),\n",
    "                                \n",
    "                                html.Div('...TODO3...', style={'width':'65%'})\n",
    "                       \n",
    "                                ])\n",
    "\n",
    "# add callback decorator\n",
    "@app.callback( [\n",
    "               Output(...TODO4...),\n",
    "               Output(...TODO4...),\n",
    "               Output(...TODO4...),\n",
    "               Output(...TODO4...),\n",
    "               Output(...TODO4...)\n",
    "               ],\n",
    "               Input(...TODO4...))\n",
    "               \n",
    "# Add computation to callback function and return graph\n",
    "def get_graph(entered_year):\n",
    "    \n",
    "    # Compute required information for creating graph from the data\n",
    "    ...TODO5..., ...TODO5..., ...TODO5..., ...TODO5..., ...TODO5... = compute_info(airline_data, entered_year)\n",
    "            \n",
    "    # Create graph\n",
    "    carrier_fig = px.line(...TODO6..., x='...TOTO6...', y='...TOTO6...', color='...TOTO6...', title='...TOTO6...')\n",
    "    weather_fig = px.line(...TODO6..., x='...TOTO6...', y='...TOTO6...', color='...TOTO6...', title='...TOTO6...')\n",
    "    nas_fig = px.line(...TODO6..., x='...TOTO6...', y='...TOTO6...', color='...TOTO6...', title='...TOTO6...')\n",
    "    sec_fig = px.line(...TODO6..., x='...TOTO6...', y='...TOTO6...', color='...TOTO6...', title='...TOTO6...')\n",
    "    late_fig = px.line(...TODO6..., x='...TOTO6...', y='...TOTO6...', color='...TOTO6...', title='...TOTO6...')\n",
    "            \n",
    "    return[carrier_fig, weather_fig, nas_fig, sec_fig, late_fig]\n",
    "\n",
    "\n",
    "# Run the app\n",
    "if __name__ == '__main__':\n",
    "    app.run_server(mode='jupyterlab')\n",
    "```\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Helper to fill TODOs\n",
    "\n",
    "### TODO1\n",
    "\n",
    "Deals with providing title to the dashboard and styling it.\n",
    "\n",
    "-   Title as `Flight Delay Time Statistics`, align text as `center`, color as `#503D36`, and font size as `30`.\n",
    "-   Style sample: `style={'textAlign': 'right', 'color': '#000000', 'font-size': 0})`\n",
    "\n",
    "### TODO2\n",
    "\n",
    "Deals with creating dash input core component and styling it\n",
    "\n",
    "-   Set id for the component as `input-year`, default value as `2010`, and type as `number`.\n",
    "-   Style: provide height of the input box to be `35px` and font size as `30`.\n",
    "-   Style sample: `style={'height':'3px', 'font-size': 00}`\n",
    "\n",
    "### TODO3\n",
    "\n",
    "Deals with adding graph component and providing ids.\n",
    "\n",
    "-   Add dcc.Graph component.\n",
    "-   Provide ids in the following order `carrier-plot`, `weather-plot`, `nas-plot`, `security-plot`, and `late-plot`.\n",
    "\n",
    "### TODO4\n",
    "\n",
    "Deals with structing callback output components.\n",
    "\n",
    "-   List containing component id and component property.\n",
    "-   Component id will be similar to `TODO3` ids and property will be `figure`.\n",
    "\n",
    "### TODO5\n",
    "\n",
    "Deals with extracting computed data for creating graphs.\n",
    "\n",
    "-   Function will be returning 5 computed dataframes. set returned dataframes names to be `avg_car, avg_weather, avg_NAS, avg_sec, avg_late`.\n",
    "\n",
    "### TODO6\n",
    "\n",
    "Deals with creating line plots using returned dataframes from the above step using `plotly.express`. Link for reference is [here](https://plotly.com/python/line-charts?cm_mmc=Email_Newsletter-_-Developer_Ed%2BTech-_-WW_WW-_-SkillsNetwork-Courses-IBMDeveloperSkillsNetwork-DV0101EN-SkillsNetwork-20297740&cm_mmca1=000026UJ&cm_mmca2=10006555&cm_mmca3=M12345678&cvosrc=email.Newsletter.M12345678&cvo_campaign=000026UJ&cm_mmc=Email_Newsletter-_-Developer_Ed%2BTech-_-WW_WW-_-SkillsNetwork-Courses-IBMDeveloperSkillsNetwork-DV0101EN-SkillsNetwork-20297740&cm_mmca1=000026UJ&cm_mmca2=10006555&cm_mmca3=M12345678&cvosrc=email.Newsletter.M12345678&cvo_campaign=000026UJ&cm_mmc=Email_Newsletter-_-Developer_Ed%2BTech-_-WW_WW-_-SkillsNetwork-Courses-IBMDeveloperSkillsNetwork-DV0101EN-SkillsNetwork-20297740&cm_mmca1=000026UJ&cm_mmca2=10006555&cm_mmca3=M12345678&cvosrc=email.Newsletter.M12345678&cvo_campaign=000026UJ&cm_mmc=Email_Newsletter-_-Developer_Ed%2BTech-_-WW_WW-_-SkillsNetwork-Courses-IBMDeveloperSkillsNetwork-DV0101EN-SkillsNetwork-20297740&cm_mmca1=000026UJ&cm_mmca2=10006555&cm_mmca3=M12345678&cvosrc=email.Newsletter.M12345678&cvo_campaign=000026UJ)\n",
    "\n",
    "#### 1. Monthly average carrier delay by reporting airline for the given year\n",
    "\n",
    "-   Set figure name as `carrier_fig`, data as `avg_car`, x as `Month`, y as `CarrierDelay`, color as `Reporting_Airline` and `title` as `Average carrrier delay time (minutes) by airline`.\n",
    "-   Sample: `carrier_fig = px.line(avg_car, x='Month', y='CarrierDelay', color='Reporting_Airline', title='Average carrrier delay time (minutes) by airline')`\n",
    "\n",
    "#### 2. Monthly average weather delay by reporting airline for the given year\n",
    "\n",
    "Set figure name as `weather_fig`, data as `avg_weather`, x as `Month`, y as `WeatherDelay`, color as `Reporting_Airline` and `title` as `Average weather delay time (minutes) by airline`.\n",
    "\n",
    "#### 3. Monthly average natioanl air system delay by reporting airline for the given year\n",
    "\n",
    "Set figure name as `nas_fig`, data as `avg_NAS`, x as `Month`, y as `NASDelay`, color as `Reporting_Airline` and `title` as `Average NAS delay time (minutes) by airline`.\n",
    "\n",
    "#### 4. Monthly average security delay by reporting airline for the given year\n",
    "\n",
    "Set figure name as `sec_fig`, data as `avg_sec`, x as `Month`, y as `SecurityDelay`, color as `Reporting_Airline` and `title` as `Average security delay time (minutes) by airline')`.\n",
    "\n",
    "#### 5. Monthly average late aircraft delay by reporting airline for the given year\n",
    "\n",
    "Set figure name as `late_fig`, data as `avg_late`, x as `Month`, y as `LateAircraftDelay`, color as `Reporting_Airline` and `title` as `Average late aircraft delay time (minutes) by airline`.\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "        <iframe\n",
       "            width=\"100%\"\n",
       "            height=\"650\"\n",
       "            src=\"http://localhost:7645/\"\n",
       "            frameborder=\"0\"\n",
       "            allowfullscreen\n",
       "            \n",
       "        ></iframe>\n",
       "        "
      ],
      "text/plain": [
       "<IPython.lib.display.IFrame at 0x2a7211018b0>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "# Import required libraries\n",
    "import pandas as pd\n",
    "import dash\n",
    "from dash import html \n",
    "from dash import dcc\n",
    "from dash.dependencies import Input, Output\n",
    "from jupyter_dash import JupyterDash\n",
    "import plotly.express as px\n",
    "\n",
    "# Create a dash application\n",
    "app = JupyterDash(__name__)\n",
    "JupyterDash.infer_jupyter_proxy_config()\n",
    "\n",
    "\n",
    "# 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})\n",
    "\n",
    "\"\"\" Compute_info function description\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",
    "    airline_data: Input airline data.\n",
    "    entered_year: Input year for which computation needs to be performed.\n",
    "    \n",
    "Returns:\n",
    "    Computed average dataframes for carrier delay, weather delay, NAS delay, security delay, and late aircraft delay.\n",
    "\n",
    "\"\"\"\n",
    "def compute_info(airline_data, entered_year):\n",
    "    # Select data\n",
    "    df =  airline_data[airline_data['Year']==int(entered_year)]\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",
    "# Build dash app layout\n",
    "app.layout = html.Div(children=[ html.H1('Flight Delay Time Statistics', \n",
    "                                style={'textAlign': 'center', 'color': '#503D36',\n",
    "                                'font-size': 30}),\n",
    "                                html.Div([\"Input Year: \", dcc.Input(id='input-year', value='2010', \n",
    "                                type='number', style={'height':'35px', 'font-size': 30}),], \n",
    "                                style={'font-size': 30}),\n",
    "                                html.Br(),\n",
    "                                html.Br(), \n",
    "                                html.Div([\n",
    "                                        html.Div(dcc.Graph(id='carrier-plot')),\n",
    "                                        html.Div(dcc.Graph(id='weather-plot'))\n",
    "                                ], style={'display': 'flex'}),\n",
    "    \n",
    "                                html.Div([\n",
    "                                        html.Div(dcc.Graph(id='nas-plot')),\n",
    "                                        html.Div(dcc.Graph(id='security-plot'))\n",
    "                                ], style={'display': 'flex'}),\n",
    "                                \n",
    "                                html.Div(dcc.Graph(id='late-plot'), style={'width':'65%'})\n",
    "                                \n",
    "                              \n",
    "                                ])\n",
    "\n",
    "\"\"\"Callback Function\n",
    "\n",
    "Function that returns fugures using the provided input year.\n",
    "\n",
    "Arguments:\n",
    "\n",
    "    entered_year: Input year provided by the user.\n",
    "    \n",
    "Returns:\n",
    "\n",
    "    List of figures computed using the provided helper function `compute_info`.\n",
    "\"\"\"\n",
    "# Callback decorator\n",
    "@app.callback( [\n",
    "               Output(component_id='carrier-plot', component_property='figure'),\n",
    "               Output(component_id='weather-plot', component_property='figure'),\n",
    "               Output(component_id='nas-plot', component_property='figure'),\n",
    "               Output(component_id='security-plot', component_property='figure'),\n",
    "               Output(component_id='late-plot', component_property='figure')\n",
    "               ],\n",
    "               Input(component_id='input-year', component_property='value'))\n",
    "# Computation to callback function and return graph\n",
    "def get_graph(entered_year):\n",
    "    \n",
    "    # Compute required information for creating graph from the data\n",
    "    avg_car, avg_weather, avg_NAS, avg_sec, avg_late = compute_info(airline_data, entered_year)\n",
    "            \n",
    "    # Create graph\n",
    "    carrier_fig = px.line(avg_car, x='Month', y='CarrierDelay', color='Reporting_Airline', title='Average carrrier delay time (minutes) by airline')\n",
    "    weather_fig = px.line(avg_weather, x='Month', y='WeatherDelay', color='Reporting_Airline', title='Average weather delay time (minutes) by airline')\n",
    "    nas_fig = px.line(avg_NAS, x='Month', y='NASDelay', color='Reporting_Airline', title='Average NAS delay time (minutes) by airline')\n",
    "    sec_fig = px.line(avg_sec, x='Month', y='SecurityDelay', color='Reporting_Airline', title='Average security delay time (minutes) by airline')\n",
    "    late_fig = px.line(avg_late, x='Month', y='LateAircraftDelay', color='Reporting_Airline', title='Average late aircraft delay time (minutes) by airline')\n",
    "            \n",
    "    return[carrier_fig, weather_fig, nas_fig, sec_fig, late_fig]\n",
    "\n",
    "\n",
    "\n",
    "# Run the app\n",
    "if __name__ == '__main__':\n",
    "    app.run_server(mode=\"inline\", host=\"localhost\", port=7645, debug=True)\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Double-click **here** for the solution.\n",
    "\n",
    "<!-- The answer is below:\n",
    "\n",
    "\n",
    "# Import required libraries\n",
    "import pandas as pd\n",
    "import dash\n",
    "import dash_html_components as html\n",
    "import dash_core_components as dcc\n",
    "from dash.dependencies import Input, Output\n",
    "from jupyter_dash import JupyterDash\n",
    "import plotly.express as px\n",
    "\n",
    "# Create a dash application\n",
    "app = JupyterDash(__name__)\n",
    "JupyterDash.infer_jupyter_proxy_config()\n",
    "\n",
    "\n",
    "# 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})\n",
    "\n",
    "\"\"\" Compute_info function description\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",
    "    airline_data: Input airline data.\n",
    "    entered_year: Input year for which computation needs to be performed.\n",
    "    \n",
    "Returns:\n",
    "    Computed average dataframes for carrier delay, weather delay, NAS delay, security delay, and late aircraft delay.\n",
    "\n",
    "\"\"\"\n",
    "def compute_info(airline_data, entered_year):\n",
    "    # Select data\n",
    "    df =  airline_data[airline_data['Year']==int(entered_year)]\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",
    "# Build dash app layout\n",
    "app.layout = html.Div(children=[ html.H1('Flight Delay Time Statistics', \n",
    "                                style={'textAlign': 'center', 'color': '#503D36',\n",
    "                                'font-size': 30}),\n",
    "                                html.Div([\"Input Year: \", dcc.Input(id='input-year', value='2010', \n",
    "                                type='number', style={'height':'35px', 'font-size': 30}),], \n",
    "                                style={'font-size': 30}),\n",
    "                                html.Br(),\n",
    "                                html.Br(), \n",
    "                                html.Div([\n",
    "                                        html.Div(dcc.Graph(id='carrier-plot')),\n",
    "                                        html.Div(dcc.Graph(id='weather-plot'))\n",
    "                                ], style={'display': 'flex'}),\n",
    "    \n",
    "                                html.Div([\n",
    "                                        html.Div(dcc.Graph(id='nas-plot')),\n",
    "                                        html.Div(dcc.Graph(id='security-plot'))\n",
    "                                ], style={'display': 'flex'}),\n",
    "                                \n",
    "                                html.Div(dcc.Graph(id='late-plot'), style={'width':'65%'})\n",
    "                                \n",
    "                              \n",
    "                                ])\n",
    "\n",
    "\"\"\"Callback Function\n",
    "\n",
    "Function that returns fugures using the provided input year.\n",
    "\n",
    "Arguments:\n",
    "\n",
    "    entered_year: Input year provided by the user.\n",
    "    \n",
    "Returns:\n",
    "\n",
    "    List of figures computed using the provided helper function `compute_info`.\n",
    "\"\"\"\n",
    "# Callback decorator\n",
    "@app.callback( [\n",
    "               Output(component_id='carrier-plot', component_property='figure'),\n",
    "               Output(component_id='weather-plot', component_property='figure'),\n",
    "               Output(component_id='nas-plot', component_property='figure'),\n",
    "               Output(component_id='security-plot', component_property='figure'),\n",
    "               Output(component_id='late-plot', component_property='figure')\n",
    "               ],\n",
    "               Input(component_id='input-year', component_property='value'))\n",
    "# Computation to callback function and return graph\n",
    "def get_graph(entered_year):\n",
    "    \n",
    "    # Compute required information for creating graph from the data\n",
    "    avg_car, avg_weather, avg_NAS, avg_sec, avg_late = compute_info(airline_data, entered_year)\n",
    "            \n",
    "    # Create graph\n",
    "    carrier_fig = px.line(avg_car, x='Month', y='CarrierDelay', color='Reporting_Airline', title='Average carrrier delay time (minutes) by airline')\n",
    "    weather_fig = px.line(avg_weather, x='Month', y='WeatherDelay', color='Reporting_Airline', title='Average weather delay time (minutes) by airline')\n",
    "    nas_fig = px.line(avg_NAS, x='Month', y='NASDelay', color='Reporting_Airline', title='Average NAS delay time (minutes) by airline')\n",
    "    sec_fig = px.line(avg_sec, x='Month', y='SecurityDelay', color='Reporting_Airline', title='Average security delay time (minutes) by airline')\n",
    "    late_fig = px.line(avg_late, x='Month', y='LateAircraftDelay', color='Reporting_Airline', title='Average late aircraft delay time (minutes) by airline')\n",
    "            \n",
    "    return[carrier_fig, weather_fig, nas_fig, sec_fig, late_fig]\n",
    "\n",
    "\n",
    "\n",
    "# Run the app\n",
    "if __name__ == '__main__':\n",
    "    app.run_server(mode=\"inline\", host=\"localhost\", port=7645, debug=True)\n",
    "\n",
    "-->\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Summary\n",
    "\n",
    "Congratulations for completing your final dash lab. \n",
    "\n",
    "In this lab, you have learnt how to connect all the components we have learn so far.\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## <h3 align=\"center\"> © IBM Corporation 2020. All rights reserved. <h3/>\n"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python [conda env:cvpr] *",
   "language": "python",
   "name": "conda-env-cvpr-py"
  },
  "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.13"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}