Skip to content

Instantly share code, notes, and snippets.

@PeterKjeldsen

PeterKjeldsen/4.8_Flight_Delay_Time_Statistics_Dashboard.ipynb

Created March 21, 2021 10:53
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save PeterKjeldsen/084f0e8a75853fa066307ce822660586 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save PeterKjeldsen/084f0e8a75853fa066307ce822660586 to your computer and use it in GitHub Desktop.
Download ZIP
Created on Skills Network Labs
Display the source blob
Display the rendered blob
Raw
4.8_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=\"https://jupyterlab-24.labs.cognitiveclass.ai/user/peterkjeldse/proxy/7645/\"\n",
" frameborder=\"0\"\n",
" allowfullscreen\n",
" ></iframe>\n",
" "
],
"text/plain": [
"<IPython.lib.display.IFrame at 0x7f31e7a1b5c0>"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"# 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",
"# TODO: Build and run dash app \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)"
]
},
{
"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": [
"## Author\n",
"\n",
"[Saishruthi Swaminathan](https://www.linkedin.com/in/saishruthi-swaminathan?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"
]
},
{
"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",
"language": "python",
"name": "conda-env-python-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.6.12"
}
},
"nbformat": 4,
"nbformat_minor": 4
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment