Skip to content

Instantly share code, notes, and snippets.

@PeterKjeldsen

PeterKjeldsen/4.7_Dash_Interactivity.ipynb

Created March 21, 2021 10:33
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save PeterKjeldsen/71953780f153dd7fd575cca5674c4086 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.7_Dash_Interactivity.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": [
"# Objectives\n",
"\n",
"In this lab, you will work on Dash Callbacks.\n",
"\n",
"## Dataset Used\n",
"\n",
"[Airline Reporting Carrier On-Time Performance](https://developer.ibm.com/exchanges/data/all/airline?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) dataset from [Data Asset eXchange](https://developer.ibm.com/exchanges/data?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",
"## Lab Question\n",
"\n",
"Extract average monthly arrival delay time and see how it changes over the year.\n",
"\n",
"## Dash Application Creation\n",
"\n",
"### Todo for the lab question\n",
"\n",
"1. Import required libraries, read the airline data, and create an application layout\n",
"2. Add title to the dashboard using HTML H1 component\n",
"3. Add a HTML division and core text input component inside the division. Provide an input component id and a default value to the component.\n",
"4. Add a HTML dividion and core graph component. Provide a graph component id.\n",
"5. Add callback decorator and provide input and output parameters.\n",
"6. Define callback function, perform computation to extract required information, create the graph, and update the layout.\n",
"7. Run the app\n",
"\n",
"## Hints\n",
"\n",
"General examples can be found [here](https://dash.plotly.com/layout?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",
"- For step 1 (only review), this is very specific to running app from Jupyerlab.\n",
"\n",
" - For Jupyterlab,we will be using `jupyter-dash` library. Adding `from jupyter_dash import JupyterDash` import statement.\n",
" - Instead of creating dash application using `app = dash.Dash()`, we will be using `app = JupyterDash(__name__)`.\n",
" - Use pandas to read the airline data.\n",
"- For step 2,\n",
"\n",
" - [Plotly H1 HTML Component](https://dash.plotly.com/dash-html-components/h1?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",
" - Title as `Airline Performance Dashboard`\n",
" - Use `style` parameter and make the title center aligned, with color code `#503D36`, and font-size as 40. Check `More about HTML` section [here](https://dash.plotly.com/layout?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",
"- For step 3,\n",
"\n",
" - Add [dcc input](https://dash.plotly.com/dash-core-components/input?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) component and provide id as `input-year`. Use `style` parameter and assign height of the inout box to be `50px` and font-size to be `35`.\n",
" - HTML [Div](https://dash.plotly.com/dash-html-components/div?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) component and provide id as `line-plot`. Use `style` parameter and assign font-size as `40`.\n",
"- For step 4,\n",
"\n",
" - Core [graph](https://dash.plotly.com/dash-core-components/graph?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) component and assign id as `line-plot`.\n",
"- For 5 and 6,\n",
"\n",
" - Basic [callback](https://dash.plotly.com/basic-callbacks?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": [
"## App Skeleton\n",
"\n",
"```python\n",
"\n",
"import dash\n",
"....\n",
"....\n",
"from jupyter_dash import JupyterDash\n",
"\n",
"\n",
"app = JupyterDash(__name__)\n",
"JupyterDash.infer_jupyter_proxy_config()\n",
"\n",
"\n",
"app.layout = html.Div(children=[html.H1(.......),\n",
" html.Div(['Input:', dcc.Input(id='..', value='..', type='..', style={})], style={}),\n",
" html.Br(),\n",
" html.Br(),\n",
" html.Div(dcc.Graph(id='..')),\n",
" ])\n",
" \n",
"if __name__ == '__main__':\n",
" app.run_server(mode=\"inline\", host=\"localhost\")\n",
"\n",
"```\n"
]
},
{
"cell_type": "code",
"execution_count": 1,
"metadata": {},
"outputs": [],
"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.graph_objects as go"
]
},
{
"cell_type": "code",
"execution_count": 5,
"metadata": {},
"outputs": [],
"source": [
"JupyterDash.infer_jupyter_proxy_config()"
]
},
{
"cell_type": "code",
"execution_count": 7,
"metadata": {},
"outputs": [],
"source": [
" # needs to be run again in a separate cell due to a jupyterdash bug\n",
"JupyterDash.infer_jupyter_proxy_config()"
]
},
{
"cell_type": "code",
"execution_count": 11,
"metadata": {},
"outputs": [
{
"data": {
"text/html": [
"\n",
" <iframe\n",
" width=\"100%\"\n",
" height=\"650\"\n",
" src=\"https://jupyterlab-11.labs.cognitiveclass.ai/user/peterkjeldse/proxy/8050/\"\n",
" frameborder=\"0\"\n",
" allowfullscreen\n",
" ></iframe>\n",
" "
],
"text/plain": [
"<IPython.lib.display.IFrame at 0x7f9dd0d122e8>"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"# Create a dash application\n",
"app = JupyterDash(__name__)\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",
"# To do\n",
"# Get the layout of the application and adjust it.\n",
"# Create an outer division using html.Div and add title to the dashboard using html.H1 component\n",
"# Add a html.Div and core input text component\n",
"# Finally, add graph component.\n",
"app.layout = html.Div(children=[ html.H1('Airline Performance Dashboard', \n",
" style={'textAlign': 'center', 'color': '#503D36',\n",
" 'font-size': 40}),\n",
" html.Div([\"Input Year: \", dcc.Input(id='input-year', value='2010', \n",
" type='number', style={'height':'50px', 'font-size': 35}),], \n",
" style={'font-size': 40}),\n",
" html.Br(),\n",
" html.Br(),\n",
" html.Div(dcc.Graph(id='line-plot')),\n",
" ])\n",
"\n",
"# add callback decorator\n",
"@app.callback( Output(component_id='line-plot', component_property='figure'),\n",
" Input(component_id='input-year', component_property='value'))\n",
"\n",
"# Add computation to callback function and return graph\n",
"def get_graph(entered_year):\n",
" # Select 2019 data\n",
" df = airline_data[airline_data['Year']==int(entered_year)]\n",
" \n",
" # Group the data by Month and compute average over arrival delay time.\n",
" line_data = df.groupby('Month')['ArrDelay'].mean().reset_index()\n",
"\n",
" fig = go.Figure(data=go.Scatter(x=line_data['Month'], y=line_data['ArrDelay'], mode='lines', marker=dict(color='green')))\n",
" fig.update_layout(title='Month vs Average Flight Delay Time', xaxis_title='Month', yaxis_title='ArrDelay')\n",
" \n",
" return fig\n",
"\n",
"# Run the app\n",
"#if __name__ == '__main__':\n",
"# app.run_server(mode='jupyterlab')\n",
"\n",
"#Solution suggested by IBM\n",
"# Run the app\n",
"if __name__ == '__main__':\n",
" app.run_server(mode=\"inline\", host=\"localhost\") \n",
"\n"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Double-click **here** for the solution.\n",
"\n",
"<!-- The answer is below:\n",
" \n",
"# Create a dash application\n",
"app = JupyterDash(__name__)\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",
"# TODO\n",
"# Get the layout of the application and adjust it.\n",
"# Create an outer division using html.Div and add title to the dashboard using html.H1 component\n",
"# Add a html.Div and core input text component\n",
"# Finally, add graph component.\n",
"app.layout = html.Div(children=[ html.H1('Airline Performance Dashboard', \n",
" style={'textAlign': 'center', 'color': '#503D36',\n",
" 'font-size': 40}),\n",
" html.Div([\"Input Year: \", dcc.Input(id='input-year', value='2010', \n",
" type='number', style={'height':'50px', 'font-size': 35}),], \n",
" style={'font-size': 40}),\n",
" html.Br(),\n",
" html.Br(),\n",
" html.Div(dcc.Graph(id='line-plot')),\n",
" ])\n",
"\n",
"# add callback decorator\n",
"@app.callback( Output(component_id='line-plot', component_property='figure'),\n",
" Input(component_id='input-year', component_property='value'))\n",
"\n",
"# Add computation to callback function and return graph\n",
"def get_graph(entered_year):\n",
" # Select 2019 data\n",
" df = airline_data[airline_data['Year']==int(entered_year)]\n",
" \n",
" # Group the data by Month and compute average over arrival delay time.\n",
" line_data = df.groupby('Month')['ArrDelay'].mean().reset_index()\n",
"\n",
" fig = go.Figure(data=go.Scatter(x=line_data['Month'], y=line_data['ArrDelay'], mode='lines', marker=dict(color='green')))\n",
" fig.update_layout(title='Month vs Average Flight Delay Time', xaxis_title='Month', yaxis_title='ArrDelay')\n",
" return fig\n",
"\n",
"# Run the app\n",
"if __name__ == '__main__':\n",
" app.run_server(mode=\"inline\", host=\"localhost\")\n",
" \n",
"-->\n"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Summary\n",
"\n",
"Congratulations for completing your dash interactivity lab. \n",
"\n",
"In this lab, you have learnt how to make dash HTML and core components interact with each other for creating dashboard.\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